UX for the Web

UX for the Web

by Marli Ritter, Cara Winterbottom
Released September 2017
Publisher(s): Packt Publishing
ISBN: 9781787128477

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Learn how UX and design thinking can make your site stand out from the rest of the internet.

About This Book

  • Learn everything you need to know about UX for your Web Design.
  • Design B2B, B2C websites that stand out from the competitors with this guide
  • Enhance your business by improving customer accessibility and retention.

Who This Book Is For

If you’re a designer, developer, or just someone who has the desire to create websites that are not only beautiful to look at but also easy to use and fully accessible to everyone, including people with special needs, UX for the Web will provide you with the basic building blocks to achieve just that.

What You Will Learn

  • Discover the fundamentals of UX and the User-Centered Design (UCD) Process.
  • Learn how UX can enhance your brand and increase user retention
  • Learn how to create the golden thread between your product and the user
  • Use reliable UX methodologies to research and analyze data to create an effective UX strategy
  • Bring your UX strategy to life with wireframes and prototypes
  • Set measurable metrics and conduct user tests to improve digital products
  • Incorporate the Web Content Accessibility Guidelines (WCAG) to create accessible digital products

In Detail

If you want to create web apps that are not only beautiful to look at, but also easy to use and fully accessible to everyone, including people with special needs, this book will provide you with the basic building blocks to achieve just that.

The book starts with the basics of UX, the relationship between Human-Centered Design (HCD), Human-Computer Interaction (HCI), and the User-Centered Design (UCD) Process; it gradually takes you through the best practices to create a web app that stands out from your competitors. You’ll also learn how to create an emotional connection with the user to increase user interaction and client retention by different means of communication channels.

We’ll guide you through the steps in developing an effective UX strategy through user research and persona creation and how to bring that UX strategy to life with beautiful, yet functional designs that cater for complex features with micro interactions. Practical UX methodologies such as creating a solid Information Architecture (IA), wireframes, and prototypes will be discussed in detail. We’ll also show you how to test your designs with representative users, and ensure that they are usable on different devices, browsers and assistive technologies.

Lastly, we’ll focus on making your web app fully accessible from a development and design perspective by taking you through the Web Content Accessibility Guidelines (WCAG).

Style and Approach

This is an easy-to-understand step-by-step guide with full of examples to that will help you in creating good UX for your web applications.

Table of contents

  1. Preface
    1. What this book covers
    2. What you need for this book
    3. Who this book is for
    4. Conventions
    5. Reader feedback
    6. Customer support
      1. Downloading the color images of this book
      2. Errata
      3. Piracy
      4. Questions
  2. The Fundamentals of UX
    1. UX from the early 20th century
    2. 360° of UX
      1. Design thinking and human-centered design (HCD)
        1. User-centered design (UCD)
        2. Software development methodologies
        3. Lean UX versus Agile UX
    3. UX and design disciplines
      1. The unique attributes of UX and UI
    4. Summary
  3. Stand Out from Your Competitors
    1. Branding in modern times
      1. Case study - brand identity versus brand image - Jeep
      2. Branding - visuals
      3. Branding - personality
      4. Branding - relationship
    2. How UX differentiates a brand from competitors
      1. Conducting a competitor UX analysis
        1. Case study - competitor UX analysis of fast food brands
    3. B2B versus B2C
      1. Case study - B2C and UX
      2. Case study - B2B and UX
    4. Summary
  4. Creating an Emotional Connection with the User
    1. Creating a digital personality the user can relate to
    2. Speaking a clear language
      1. Keeping the tone relevant
      2. Being as human as possible
    3. Giving visual rewards
      1. Incorporating micro-interactions in the UI
      2. Making the UI discoverable and giving incentives
      3. Giving guidance through anticipation design
      4. Entertaining by providing useful information
      5. Establishing trust and credibility
    4. Summary
  5. Best Practices for Usability Within the User Interface (UI)
    1. Introduction to UI
    2. Color psychology
      1. The color wheel
      2. Warm and cool colors
      3. Color symbolism
        1. Case study 1 - blue street lighting in Glasgow, Scotland
        2. Case study 2 - blue lighting in railway stations in Japan
      4. Color and web accessibility
    3. Best design practices
      1. Google's Material Design guidelines
      2. iOS Human Interface Guidelines
      3. Case Study - UI design for websites
        1. Brief for the MTH website
        2. UI design
    4. Language and semiotics
      1. Best practices for effective iconography
        1. Case study: languages versus flags
    5. Summary
  6. Set a Solid Foundation - Research and Analyze
    1. Defining and categorizing research
      1. Understanding qualitative versus quantitative research
      2. Deciding when to conduct research
      3. Describing UX research methods
    2. Setting up a research plan
      1. Deciding on a problem statement
      2. Exploring prior knowledge and literature
      3. Planning research methods and logistics
        1. Turning your problem statement into measurable metrics
        2. Choosing a research method
        3. Planning research logistics and creating checklists
        4. Conducting a pilot test
      4. Conducting the study
      5. Analyzing data
      6. Presenting results
    3. Doing expert analyses
      1. Heuristic analysis
      2. Content audit
    4. Using qualitative techniques
      1. Interviews
        1. Tips for interviewing
      2. Observation
        1. Tips for observation
      3. Content analysis
      4. Ethnography example - a financial services broker portal
    5. Using quantitative techniques
      1. Using statistics
      2. Deciding which statistical test to use
    6. Summary
  7. Create a UX Strategy - Users and Content
    1. Creating personas to guide your UX strategy
      1. Characteristics of a useful persona
    2. Building a solid information architecture
      1. Card sorting
        1. How to conduct a card sorting exercise
        2. Case study - Leadtrekker footer evaluation
      2. Constructing a sitemap
        1. Steps to creating a solid sitemap
    3. Creating user journeys
      1. Key components of a user journey
        1. Four steps in creating an effective user journey
        2. Case study - Book Galaxy online book retailer
    4. Creating task flows
      1. Key components of a well-constructed task flow
        1. Example of a task flow
    5. Summary
  8. Bring Your UX Strategy to Life with Wireframes and Prototypes
    1. Setting up moodboards and storyboards
      1. Defining moodboards
      2. Creating a moodboard
      3. Defining storyboards
      4. Creating a storyboard
      5. Case study - creating a storyboard
    2. Deciding what, when, and how to prototype
      1. Choosing what and when to prototype
      2. Choosing how to prototype
    3. Creating wireframes and interactive prototypes
      1. Prototyping tools
      2. Creating a wireframe
        1. Designing the interface
        2. Components of a wireframe
        3. Components of a wireframing tool
        4. An example website - Etsy
        5. A note about responsiveness
        6. A typical wireframing process
        7. Best practices for wireframing
      3. Creating an interactive prototype
        1. Best practices for creating interactive prototypes
      4. Version control
    4. Setting up a pattern library
    5. Designing for responsiveness and accessibility
    6. Summary
  9. Building Your Product - Devices, Browsers, and Assistive Technologies
    1. Understanding the importance of responsive, accessible, and universal design
    2. Designing for varied technologies
      1. Designing for input and output
      2. Designing responsively
      3. Designing for different browsers and operating systems
      4. Designing for accessibility and assistive technologies
        1. Using universal design principles to guide design
    3. Testing your designs on multiple technologies
    4. Summary
  10. Optimize your UX Strategy with Iterative User Testing
    1. Maximizing the value of user testing
    2. Planning, conducting, and analyzing usability tests
      1. Planning usability tests
        1. Designing the test - formulating goals and structure
        2. Designing tasks and metrics
        3. Planning questions and observation
        4. Preparing the script
        5. Securing a venue and inviting clients and team members
        6. Recruiting participants
        7. Setting up the hardware, software, and test materials
      2. Conducting usability tests
        1. Best practices for facilitating usability sessions
      3. Analyzing and reporting on usability tests
        1. Reporting the results of a usability test
      4. Variations on usability testing
    3. Applying analytics effectively-constructing a useful A/B test
      1. Using analytics with A/B testing
    4. Summary
  11. The Basics and Benefits of Web Accessibility
    1. Defining web accessibility
    2. Catering for different types of temporary and permanent special needs
      1. Catering for visual disabilities
      2. Catering for auditory disabilities
      3. Catering for motor/mobility disabilities
      4. Catering for cognitive/intellectual disabilities
      5. Catering for neurological disabilities
    3. Benefits of ensuring your product is accessible
    4. Legal implications for non-accessible products
    5. Assistive technology and the role it plays in developing for accessibility
    6. Testing for accessibility
    7. Summary
  12. A Practical Guide to Web Accessibility
    1. Where to start with web accessibility?
      1. Practical guidelines for analyzing a website's web accessibility status
    2. An overview of the WCAG 2.0
      1. Perceivable
      2. Operable
      3. Understandable
      4. Robust
    3. An overview of WAI-ARIA
      1. Roles
      2. Properties and states
    4. Web accessibility requirements from a design perspective
      1. Case Study - Booking.com analysis of design requirements for WCAG 2.0
    5. Before we part ways
    6. Summary

Product information

  • Title: UX for the Web
  • Author(s): Marli Ritter, Cara Winterbottom
  • Release date: September 2017
  • Publisher(s): Packt Publishing
  • ISBN: 9781787128477