Usability and User Experience Design
Calling all designers and developers! This is your all-in-one guide to data-driven UX design for digital products. See how an effective user experience incorporates insights from psychology, design principles, and practical data. Follow a proven approach for selecting your design methods, and then walk through the data-driven UX design process in detail: perform context analysis, specify requirements, develop solution prototypes, and test your products. Learn from example case studies and full-color illustrations to take your design to the next level!
- Design digital products for B2C, B2B, and medical applications that provide outstanding user experience
- Plan your design, perform context of use analyses, and identify requirements
- Develop and evaluate design solutions, from the prototyping phase to the testing and review stage
You'll learn about:
- Theory of Design:
What makes design effective? Get to know the building blocks that create an incredible user experience: ergonomics and usability, data evaluation, user research, human information processing, design principles, and more.
- UX Design Process:
Master data-driven UX design. Explore methods to analyze the context of use for your design project. Use techniques such as prototypes and wireframes to develop a design solution, and then refine it through usability and UX testing.
- Design in Action:
See examples of design come to life! Follow three case studies that illustrate the design process for digital products: a B2C mobility application, a B2B customer relationship management application, and a B2C/B2B medical appointment portal.
Key Highlights:
- Data-driven UX design
- B2B and B2C applications
- User researcher skills
- Psychological foundations
- Design principles
- Context of use analysis
- Requirements formulation
- Prototypes and wireframes
- Design testing and evaluation
- Decision matrices
- Use cases
View Full Table of Contents
- Foreword
- 1 Introduction
- 1.1 Who Is This Book Written For?
- 1.2 Why Should You Read This Book?
- 1.3 How Should You Read This Book?
- 1.4 Your Constant Companions: Our Three Examples
- 1.4.1 moveHUB: The Mobility App for Every Occasion
- 1.4.2 BusinessBooster: The CRM BI Tool for Small and Medium-Sized Enterprises
- 1.4.3 Healthyfy: The Platform for Connecting Patients and Healthcare Professionals
- 2 The Most Important Terms and Their History
- 2.1 The (Pre-)History of Usability and UX
- 2.1.1 Ancient Greece and Hippocrates of Kos
- 2.1.2 The Renaissance and Leonardo da Vinci
- 2.1.3 The Industrial Revolution
- 2.1.4 Work Science
- 2.1.5 Ergonomics
- 2.1.6 Human Factors
- 2.1.7 Software Ergonomics
- 2.1.8 Human-Machine Interaction
- 2.1.9 Human-Computer Interaction
- 2.1.10 Conclusion
- 2.2 Usability and UX Design: The Core Concepts
- 2.2.1 Usability
- 2.2.2 User Experience
- 2.2.3 Design
- 2.2.4 Users
- 2.2.5 Context of Use
- 2.3 The Interplay of Ergonomics, Usability, and UX
- 2.3.1 The Tree Metaphor
- 2.3.2 The Kano Model
- 2.3.3 Ergonomics versus Usability versus UX at moveHUB
- 2.3.4 Ergonomics versus Usability versus UX at BusinessBooster
- 2.3.5 Ergonomics versus Usability versus UX at Healthyfy
- 3 Usability and UX as Key Factors for Outstanding Products
- 3.1 What Is Return on Investment?
- 3.2 Metrics for Business Success
- 3.2.1 Metrics Related to Systems, Products, or Services
- 3.2.2 User- and Customer-Related Measures
- 3.2.3 Service-Related Metrics
- 3.2.4 Choosing the Appropriate Metrics
- 3.3 Planning instead of Discovering ROI
- 3.4 Metrics for Business Success: B2C versus B2B Sectors
- 3.5 What ROI Is Achievable through Usability and UX Design?
- 3.5.1 Studies on the ROI of Usability and UX Design
- 3.5.2 Feedback from Our Customers on the ROI of Usability and UX Design
- 3.6 Case Study: Measuring ROI at moveHUB
- 3.7 Case Study: Measuring ROI at BusinessBooster
- 3.8 Case Study: Measuring ROI at Healthyfy
- 4 How to “Do” Usability and UX Design
- 4.1 The ISO 9241-210 Standard: Human-Centered Design for Interactive Systems
- 4.1.1 Step 1: Plan the Human-Centered Design Process
- 4.1.2 Step 2: Understand and Specify the Context of Use
- 4.1.3 Step 3: Specify the User Requirements
- 4.1.4 Step 4: Producing Design Solutions
- 4.1.5 Step 5: Evaluating the Design
- 4.1.6 Conclusion
- 4.2 Design Thinking
- 4.2.1 Step 1: Understand
- 4.2.2 Step 2: Observe
- 4.2.3 Step 3: Define Point of View
- 4.2.4 Step 4: Ideate
- 4.2.5 Step 5: Prototype
- 4.2.6 Step 6: Test
- 4.2.7 Conclusion
- 4.3 Minimum Viable Product
- 4.3.1 Step 1: Build
- 4.3.2 Step 2: Measure
- 4.3.3 Step 3: Learn
- 4.3.4 Conclusion
- 4.4 Double Diamond
- 4.4.1 Phase 1: Discover
- 4.4.2 Phase 2: Define
- 4.4.3 Phase 3: Develop
- 4.4.4 Phase 4: Deliver
- 4.4.5 Key Principles
- 4.4.6 Conclusion
- 4.5 Usability Engineering for Medical Devices According to the IEC 62366-1 Standard
- 4.6 Commonalities among Methods
- 4.6.1 Analysis of Customer Needs
- 4.6.2 Iterative Optimization of the Solution
- 4.6.3 Learning from Direct User/Customer Feedback
- 4.6.4 Speed as an Objective
- 4.6.5 Success through Collaboration
- 4.6.6 Visualization as a Means of Choice
- 5 Data-Driven UX Design
- 5.1 The Goal of the Data-Driven UX Design Process
- 5.2 The Data-Driven UX Design Process
- 5.2.1 How to Get the Most Value from the Process
- 5.2.2 Brief Overview of the Data-Driven UX Design Process
- 5.2.3 Context of Use Analysis, Including Risk Assessment and Documentation
- 5.2.4 Deriving and Documenting Usage Requirements
- 5.2.5 Developing Design Solutions Based on Risk and Usage
- 5.2.6 Evaluation of Design Solutions Prioritized by Risk and Frequency of Use
- 5.3 The Flexibility and Risk Matrix: How Much Data Do You Really Need?
- 5.3.1 The Flexibility of Your Solution
- 5.3.2 The Risk of Your Solution
- 5.3.3 Working with the Flexibility and Risk Matrix
- 5.4 Objective versus Subjective Data
- 5.5 Quantitative versus Qualitative Data
- 5.6 Critically Evaluating Data
- 5.6.1 Where Does the Data Come From?
- 5.6.2 Objective Data or Interpretation
- 5.6.3 Is the Frame of Reference Correct?
- 5.6.4 Have You Had Value Judgments or Statements Explained?
- 5.6.5 Is the Data Complete and Meaningful?
- 5.7 Quick Help for Categorization
- 5.7.1 Do You Need Data during Development?
- 5.7.2 How Much Data Do You Need?
- 5.7.3 What Type of Data Do You Need?
- 5.7.4 Conclusion
- 6 A Helpful Mindset for Usability and UX Design
- 6.1 Assumptions versus Knowledge
- 6.1.1 Clearly Revealing One’s Own Assumptions
- 6.1.2 Distinguishing Assumptions from Knowledge
- 6.1.3 Why Do I Need Data for This?
- 6.1.4 Examples of Mostly-False-and-Seldom-True Assumptions
- 6.2 Users Don’t Know What They Want!
- 6.2.1 Task and Goal Expertise versus Design Expertise
- 6.2.2 Bringing Together the Expertise
- 6.2.3 Creating Outstanding Solutions with Users
- 6.3 Key Skills for User Researchers: Observe, Ask Questions, and Listen
- 6.3.1 Observing
- 6.3.2 Asking Questions
- 6.3.3 Listening
- 6.3.4 Your Mindset as a User Researcher
- 6.4 Design as a Learnable Process
- 6.4.1 The Role of Creativity
- 6.4.2 The Role of Talent, Practice, Experience, and Knowledge
- 6.4.3 What Do I Need to Learn to Become a Usability and UX Designer?
- 6.5 Testing and Corporate Culture
- 7 Foundations
- 7.1 Psychological Foundations: Don’t Worry, It’s about People
- 7.2 Perception: The Human Sensory System
- 7.2.1 The Eye
- 7.2.2 The Ear
- 7.2.3 The Skin
- 7.2.4 The Tongue
- 7.2.5 The Nose
- 7.2.6 Conclusion
- 7.3 Human Information Processing
- 7.3.1 Basics of the Model
- 7.3.2 Stimulus
- 7.3.3 Discover
- 7.3.4 Recognize
- 7.3.5 Decide
- 7.3.6 Act
- 7.3.7 Reaction
- 7.3.8 Memory
- 7.3.9 Conclusion
- 7.4 Design Basics
- 7.4.1 Impact of Design
- 7.4.2 Basic Elements of Visual Design
- 7.4.3 Gestalt Principles
- 7.4.4 Interaction Principles
- 8 Data-Driven UX Design in Detail: Preparation
- 8.1 Planning the Data-Driven UX Design Process
- 8.1.1 Who Should Participate in the Stakeholder Workshop?
- 8.1.2 The Agenda of the Stakeholder Workshop
- 8.2 Integrating Data-Driven UX Design into Agile Development Projects
- 8.3 Plan for the Appropriate Amount of Effort
- 9 Data-Driven UX Design in Detail: Context of Use Analysis
- 9.1 What Questions Should the Context of Use Analysis Answer?
- 9.2 What Is the Context of Use Anyway?
- 9.2.1 The Users
- 9.2.2 The Patients (Medical Devices)
- 9.2.3 The Task
- 9.2.4 The Goals
- 9.2.5 The Resources
- 9.2.6 The Environment
- 9.2.7 Risk, Frequency, and Conclusion
- 9.3 Methods of Context of Use Analysis
- 9.3.1 Secondary Research/Desk Research
- 9.3.2 Field Observation
- 9.3.3 Interview/Jobs-to-Be-Done
- 9.3.4 Group Discussions/Focus Groups
- 9.3.5 Quantitative Survey/Questionnaires
- 9.3.6 Contextual Inquiry
- 9.3.7 Analysis of Quantitative Usage Data
- 9.3.8 Web Tracking/Click Analysis
- 9.3.9 Ticket and Feedback Analysis
- 9.4 Analytical Methods of the Context of Use Analysis
- 9.4.1 Task Analysis
- 9.4.2 User or Customer Journey Mapping/Touchpoint Analysis
- 9.4.3 Personas and Empathy Maps
- 9.5 Practical Examples for Context Analysis
- 9.5.1 Context Analysis at moveHUB
- 9.5.2 Context Analysis at BusinessBooster
- 9.5.3 Context Analysis at Healthyfy
- 10 Data-Driven UX Design in Detail: Specifying Usage Requirements
- 10.1 Consider Your Personas or Empathy Maps
- 10.2 Use Cases and User Stories: How Not to Do It and How to Do It Anyway
- 10.2.1 Use Cases
- 10.2.2 User Stories
- 10.3 From User Stories to Requirements
- 10.3.1 Fixed Requirements
- 10.3.2 Range Requirements
- 10.3.3 Requirement versus Wish
- 10.3.4 Documenting and Formulating Requirements
- 10.3.5 Where Do the Values in the Requirements Come From?
- 10.4 Formulating Requirements for moveHUB
- 10.5 Formulating Requirements for BusinessBooster
- 10.6 Formulating Requirements for Healthyfy
- 11 Data-Driven UX Design in Detail: Developing Design Solutions
- 11.1 Reminder: What Is the Goal of Design, and How Do We Go About It?
- 11.2 Design Research
- 11.3 From Coarse to Fine
- 11.4 Developing Basic Solution Options
- 11.4.1 How to Turn a 2 into a 3
- 11.4.2 How to Deal with Too Many 3-Point Ideas
- 11.4.3 Conclusion
- 11.5 Working with Prototypes
- 11.5.1 Horizontal and Vertical Prototypes
- 11.5.2 High- and Low-Fidelity Prototypes
- 11.5.3 Which Prototype Should Be Used and When?
- 11.6 Wireframes
- 11.6.1 Buttons
- 11.6.2 Dropdowns
- 11.6.3 Radio Buttons
- 11.6.4 Input Fields or Text Fields
- 11.6.5 Combo Boxes
- 11.6.6 Checkboxes
- 11.6.7 Accordions
- 11.6.8 Toggle Buttons
- 11.6.9 Sliders
- 11.6.10 Calendars
- 11.6.11 Time Pickers
- 11.6.12 Color Selection
- 11.6.13 Information Buttons, Info Buttons, and Tool Tips
- 11.6.14 Popups
- 11.6.15 Menu Bars
- 11.6.16 Carousels
- 11.6.17 Webpage Sliders
- 11.6.18 Labels and Text Blocks
- 11.6.19 Images, Icons, and Placeholders
- 11.6.20 Special Case: Warnings
- 11.6.21 Conclusion
- 11.7 User Interface Quality Check: The Design Grid
- 11.8 Screen Flows
- 11.9 Click Dummies
- 11.9.1 Tools for Creating Click Dummies
- 11.9.2 Making the Design Testable
- 11.10 Desktop, Mobile, or Smartwatch First?
- 11.11 Responsive Design
- 11.12 Visual Design
- 11.12.1 Visual Design Research
- 11.12.2 The Association Space
- 11.12.3 Proto-Mood Boards
- 11.12.4 Closing Gaps in the Proto-Mood Board
- 11.12.5 From Proto-Mood Boards to Mood Boards
- 11.12.6 The Visual Design Concept
- 11.12.7 Creating Visual Prototypes (Click Dummies)
- 11.12.8 The Style Guide
- 11.13 Excursion: Low-Code and No-Code
- 11.14 Example: Possible Design Steps for moveHUB
- 11.15 Example: Possible Design Steps for BusinessBooster
- 11.16 Example: Possible Design Steps for Healthyfy
- 12 Data-Driven UX Design in Detail: Evaluating Design Solutions
- 12.1 Formative versus Summative Testing
- 12.2 Identifying Knowledge Gaps
- 12.3 User Evaluation versus Expert Evaluation
- 12.4 Remote versus On-Site
- 12.4.1 Dependence on Technical Infrastructure
- 12.4.2 Loss of Important Information
- 12.4.3 Less Control over Confidentiality
- 12.4.4 Non-Digital Products Cannot Be Tested without Bias
- 12.4.5 Conclusion
- 12.5 Designing Test Cases
- 12.5.1 Preconditions
- 12.5.2 Instructions for the User
- 12.5.3 Correct Execution of the Task
- 12.5.4 Postcondition after Correct Execution
- 12.5.5 Determine the Number of Test Cases
- 12.6 The Methods Presented
- 12.7 The Usability and UX Test
- 12.7.1 How Does It Work?
- 12.7.2 When Is It Used?
- 12.7.3 What Do You Need?
- 12.7.4 What Are the Advantages?
- 12.7.5 What Are the Disadvantages?
- 12.7.6 What Are the Alternatives?
- 12.8 Usability and UX Sprint
- 12.8.1 How Does It Work?
- 12.8.2 When Is It Used?
- 12.8.3 What Do You Need?
- 12.8.4 What Are the Advantages?
- 12.8.5 What Are the Disadvantages?
- 12.8.6 What Are the Alternatives?
- 12.9 Rapid User Tests
- 12.9.1 How Does It Work?
- 12.9.2 When Is It Used?
- 12.9.3 What Do You Need?
- 12.9.4 What Are the Advantages?
- 12.9.5 What Are the Disadvantages?
- 12.9.6 What Are the Alternatives?
- 12.10 A/B Testing
- 12.10.1 How Does It Work?
- 12.10.2 When Is It Used?
- 12.10.3 What Do You Need?
- 12.10.4 What Are the Advantages?
- 12.10.5 What Are the Disadvantages?
- 12.10.6 What Are the Alternatives?
- 12.11 UX Benchmarking
- 12.11.1 How Does It Work?
- 12.11.2 When Is It Used?
- 12.11.3 What Do You Need?
- 12.11.4 What Are the Advantages?
- 12.11.5 What Are the Disadvantages?
- 12.11.6 What Are the Alternatives?
- 12.12 5-Second Test
- 12.12.1 How Does It Work?
- 12.12.2 When Is It Used?
- 12.12.3 What Do You Need?
- 12.12.4 What Are the Advantages?
- 12.12.5 What Are the Disadvantages?
- 12.12.6 What Are the Alternatives?
- 12.13 Standardized Questionnaires
- 12.13.1 How Does It Work?
- 12.13.2 When Is It Used?
- 12.13.3 What Do You Need?
- 12.13.4 What Are the Advantages?
- 12.13.5 What Are the Disadvantages?
- 12.13.6 What Are the Alternatives?
- 12.14 Analysis of Quantitative Usage Data
- 12.14.1 How Does It Work?
- 12.14.2 When Is It Used?
- 12.14.3 What Do You Need?
- 12.14.4 What Are the Advantages?
- 12.14.5 What Are the Disadvantages?
- 12.14.6 What Are the Alternatives?
- 12.15 Web Tracking/Click Analysis
- 12.16 Diary Study
- 12.16.1 How Does It Work?
- 12.16.2 When Is It Used?
- 12.16.3 What Do You Need?
- 12.16.4 What Are the Advantages?
- 12.16.5 What Are the Disadvantages?
- 12.16.6 What Are the Alternatives?
- 12.17 Card Sorting
- 12.17.1 How Does It Work?
- 12.17.2 When Is It Used?
- 12.17.3 What Do You Need?
- 12.17.4 What Are the Advantages?
- 12.17.5 What Are the Disadvantages?
- 12.17.6 What Are the Alternatives?
- 12.18 Expert Review
- 12.18.1 How Does It Work?
- 12.18.2 When Is It Used?
- 12.18.3 What Do You Need?
- 12.18.4 What Are the Advantages?
- 12.18.5 What Are the Disadvantages?
- 12.18.6 What Are the Alternatives?
- 12.19 Association Space Test
- 12.19.1 How Does It Work?
- 12.19.2 When Is It Used?
- 12.19.3 What Do You Need?
- 12.19.4 What Are the Advantages?
- 12.19.5 What Are the Disadvantages?
- 12.19.6 What Are the Alternatives?
- 12.20 Eye Tracking
- 12.20.1 How Does It Work?
- 12.20.2 When Is It Used?
- 12.20.3 What Do You Need?
- 12.20.4 What Are the Advantages?
- 12.20.5 What Are the Disadvantages?
- 12.20.6 What Are the Alternatives?
- 12.21 Physiological Measurement Methods
- 12.21.1 How Does It Work?
- 12.21.2 When Is It Used?
- 12.21.3 What Do You Need?
- 12.21.4 What Are the Advantages?
- 12.21.5 What Are the Disadvantages?
- 12.21.6 What Are the Alternatives?
- 12.22 Analyzing Errors Using Root Cause Analysis
- 12.23 Learning from the Data and Making Informed Decisions
- 12.23.1 Implementing Feedback
- 12.23.2 Documenting Decisions
- 12.24 Evaluations in Medical Device Development
- 12.25 Example: Evaluation Methods for moveHUB
- 12.26 Example: Evaluation Methods for BusinessBooster
- 12.27 Example: Evaluation Methods for Healthyfy
- 13 Design, Get Data, Repeat: When Is It Enough?
- 13.1 Determining the Transition Based on Quality
- 13.2 Determining the Transition Based on Time
- 13.3 Should You Readjust? The Flexibility and Risk Matrix as an Aid
- 13.4 Choosing the Right Approach
- 13.5 What’s Next for moveHUB
- 13.6 What’s Next for BusinessBooster
- 13.7 What’s Next for Healthyfy
- 14 Decision Matrix for Method Selection
- 15 Wrap-Up and Conclusion
- 15.1 It’s All about the Users
- 15.2 Usability and UX Design Is Interdisciplinary
- 15.3 UX Is Not Designed, It Is Experienced
- 15.4 The Path to an Outstanding Product Is Iterative
- 15.5 Once You Start with Usability and UX Design, You Never Stop
- 15.6 Design Based on Data
- 15.7 Closing Words and Call for Participation
- Appendices
- A Glossary
- B Bibliography
- C The Authors
- Index
