1 Introduction

23

1.1 Who Is This Book Written For?

23

1.2 Why Should You Read This Book?

24

1.3 How Should You Read This Book?

27

1.4 Your Constant Companions: Our Three Examples

28

1.4.1 moveHUB: The Mobility App for Every Occasion

29

1.4.2 BusinessBooster: The CRM BI Tool for Small and Medium-Sized Enterprises

30

1.4.3 Healthyfy: The Platform for Connecting Patients and Healthcare Professionals

32

2 The Most Important Terms and Their History

35

2.1 The (Pre-)History of Usability and UX

35

2.1.1 Ancient Greece and Hippocrates of Kos

35

2.1.2 The Renaissance and Leonardo da Vinci

36

2.1.3 The Industrial Revolution

36

2.1.4 Work Science

36

2.1.5 Ergonomics

38

2.1.6 Human Factors

38

2.1.7 Software Ergonomics

39

2.1.8 Human-Machine Interaction

39

2.1.9 Human-Computer Interaction

40

2.1.10 Conclusion

40

2.2 Usability and UX Design: The Core Concepts

40

2.2.1 Usability

41

2.2.2 User Experience

42

2.2.3 Design

43

2.2.4 Users

44

2.2.5 Context of Use

49

2.3 The Interplay of Ergonomics, Usability, and UX

50

2.3.1 The Tree Metaphor

50

2.3.2 The Kano Model

54

2.3.3 Ergonomics versus Usability versus UX at moveHUB

56

2.3.4 Ergonomics versus Usability versus UX at BusinessBooster

58

2.3.5 Ergonomics versus Usability versus UX at Healthyfy

60

3 Usability and UX as Key Factors for Outstanding Products

63

3.1 What Is Return on Investment?

64

3.2 Metrics for Business Success

64

3.2.1 Metrics Related to Systems, Products, or Services

65

3.2.2 User- and Customer-Related Measures

66

3.2.3 Service-Related Metrics

67

3.2.4 Choosing the Appropriate Metrics

68

3.3 Planning instead of Discovering ROI

69

3.4 Metrics for Business Success: B2C versus B2B Sectors

71

3.5 What ROI Is Achievable through Usability and UX Design?

73

3.5.1 Studies on the ROI of Usability and UX Design

73

3.5.2 Feedback from Our Customers on the ROI of Usability and UX Design

75

3.6 Case Study: Measuring ROI at moveHUB

76

3.7 Case Study: Measuring ROI at BusinessBooster

77

3.8 Case Study: Measuring ROI at Healthyfy

78

4 How to “Do” Usability and UX Design

81

4.1 The ISO 9241-210 Standard: Human-Centered Design for Interactive Systems

81

4.1.1 Step 1: Plan the Human-Centered Design Process

83

4.1.2 Step 2: Understand and Specify the Context of Use

84

4.1.3 Step 3: Specify the User Requirements

85

4.1.4 Step 4: Producing Design Solutions

86

4.1.5 Step 5: Evaluating the Design

87

4.1.6 Conclusion

88

4.2 Design Thinking

88

4.2.1 Step 1: Understand

90

4.2.2 Step 2: Observe

91

4.2.3 Step 3: Define Point of View

91

4.2.4 Step 4: Ideate

92

4.2.5 Step 5: Prototype

98

4.2.6 Step 6: Test

99

4.2.7 Conclusion

100

4.3 Minimum Viable Product

100

4.3.1 Step 1: Build

102

4.3.2 Step 2: Measure

102

4.3.3 Step 3: Learn

103

4.3.4 Conclusion

104

4.4 Double Diamond

104

4.4.1 Phase 1: Discover

105

4.4.2 Phase 2: Define

106

4.4.3 Phase 3: Develop

106

4.4.4 Phase 4: Deliver

107

4.4.5 Key Principles

107

4.4.6 Conclusion

107

4.5 Usability Engineering for Medical Devices According to the IEC 62366-1 Standard

108

4.5.1 Conclusion

110

4.6 Commonalities among Methods

110

4.6.1 Analysis of Customer Needs

111

4.6.2 Iterative Optimization of the Solution

112

4.6.3 Learning from Direct User/Customer Feedback

113

4.6.4 Speed as an Objective

113

4.6.5 Success through Collaboration

114

4.6.6 Visualization as a Means of Choice

114

5 Data-Driven UX Design

117

5.1 The Goal of the Data-Driven UX Design Process

117

5.2 The Data-Driven UX Design Process

119

5.2.1 How to Get the Most Value from the Process

120

5.2.2 Brief Overview of the Data-Driven UX Design Process

121

5.2.3 Context of Use Analysis, Including Risk Assessment and Documentation

122

5.2.4 Deriving and Documenting Usage Requirements

124

5.2.5 Developing Design Solutions Based on Risk and Usage

126

5.2.6 Evaluation of Design Solutions Prioritized by Risk and Frequency of Use

128

5.3 The Flexibility and Risk Matrix: How Much Data Do You Really Need?

130

5.3.1 The Flexibility of Your Solution

131

5.3.2 The Risk of Your Solution

133

5.3.3 Working with the Flexibility and Risk Matrix

135

5.4 Objective versus Subjective Data

137

5.5 Quantitative versus Qualitative Data

140

5.6 Critically Evaluating Data

141

5.6.1 Where Does the Data Come From?

141

5.6.2 Objective Data or Interpretation

142

5.6.3 Is the Frame of Reference Correct?

143

5.6.4 Have You Had Value Judgments or Statements Explained?

144

5.6.5 Is the Data Complete and Meaningful?

144

5.7 Quick Help for Categorization

145

5.7.1 Do You Need Data during Development?

145

5.7.2 How Much Data Do You Need?

146

5.7.3 What Type of Data Do You Need?

146

5.7.4 Conclusion

147

6 A Helpful Mindset for Usability and UX Design

149

6.1 Assumptions versus Knowledge

150

6.1.1 Clearly Revealing One’s Own Assumptions

150

6.1.2 Distinguishing Assumptions from Knowledge

151

6.1.3 Why Do I Need Data for This?

154

6.1.4 Examples of Mostly-False-and-Seldom-True Assumptions

157

6.2 Users Don’t Know What They Want!

164

6.2.1 Task and Goal Expertise versus Design Expertise

164

6.2.2 Bringing Together the Expertise

168

6.2.3 Creating Outstanding Solutions with Users

169

6.3 Key Skills for User Researchers: Observe, Ask Questions, and Listen

170

6.3.1 Observing

171

6.3.2 Asking Questions

175

6.3.3 Listening

179

6.3.4 Your Mindset as a User Researcher

181

6.4 Design as a Learnable Process

183

6.4.1 The Role of Creativity

183

6.4.2 The Role of Talent, Practice, Experience, and Knowledge

183

6.4.3 What Do I Need to Learn to Become a Usability and UX Designer?

185

6.5 Testing and Corporate Culture

186

7 Foundations

189

7.1 Psychological Foundations: Don’t Worry, It’s about People

189

7.2 Perception: The Human Sensory System

190

7.2.1 The Eye

191

7.2.2 The Ear

203

7.2.3 The Skin

211

7.2.4 The Tongue

218

7.2.5 The Nose

220

7.2.6 Conclusion

223

7.3 Human Information Processing

224

7.3.1 Basics of the Model

225

7.3.2 Stimulus

226

7.3.3 Discover

226

7.3.4 Recognize

229

7.3.5 Decide

232

7.3.6 Act

235

7.3.7 Reaction

237

7.3.8 Memory

237

7.3.9 Conclusion

242

7.4 Design Basics

243

7.4.1 Impact of Design

243

7.4.2 Basic Elements of Visual Design

247

7.4.3 Gestalt Principles

269

7.4.4 Interaction Principles

278

8 Data-Driven UX Design in Detail: Preparation

305

8.1 Planning the Data-Driven UX Design Process

306

8.1.1 Who Should Participate in the Stakeholder Workshop?

306

8.1.2 The Agenda of the Stakeholder Workshop

308

8.2 Integrating Data-Driven UX Design into Agile Development Projects

314

8.3 Plan for the Appropriate Amount of Effort

317

9 Data-Driven UX Design in Detail: Context of Use Analysis

321

9.1 What Questions Should the Context of Use Analysis Answer?

322

9.2 What Is the Context of Use Anyway?

324

9.2.1 The Users

324

9.2.2 The Patients (Medical Devices)

325

9.2.3 The Task

327

9.2.4 The Goals

328

9.2.5 The Resources

329

9.2.6 The Environment

331

9.2.7 Risk, Frequency, and Conclusion

333

9.3 Methods of Context of Use Analysis

333

9.3.1 Secondary Research/Desk Research

334

9.3.2 Field Observation

339

9.3.3 Interview/Jobs-to-Be-Done

343

9.3.4 Group Discussions/Focus Groups

350

9.3.5 Quantitative Survey/Questionnaires

355

9.3.6 Contextual Inquiry

360

9.3.7 Analysis of Quantitative Usage Data

364

9.3.8 Web Tracking/Click Analysis

366

9.3.9 Ticket and Feedback Analysis

369

9.4 Analytical Methods of the Context of Use Analysis

373

9.4.1 Task Analysis

373

9.4.2 User or Customer Journey Mapping/Touchpoint Analysis

380

9.4.3 Personas and Empathy Maps

384

9.5 Practical Examples for Context Analysis

391

9.5.1 Context Analysis at moveHUB

391

9.5.2 Context Analysis at BusinessBooster

393

9.5.3 Context Analysis at Healthyfy

397

10 Data-Driven UX Design in Detail: Specifying Usage Requirements

401

10.1 Consider Your Personas or Empathy Maps

402

10.2 Use Cases and User Stories: How Not to Do It and How to Do It Anyway

404

10.2.1 Use Cases

404

10.2.2 User Stories

405

10.3 From User Stories to Requirements

411

10.3.1 Fixed Requirements

411

10.3.2 Range Requirements

412

10.3.3 Requirement versus Wish

416

10.3.4 Documenting and Formulating Requirements

416

10.3.5 Where Do the Values in the Requirements Come From?

418

10.4 Formulating Requirements for moveHUB

419

10.5 Formulating Requirements for BusinessBooster

421

10.6 Formulating Requirements for Healthyfy

422

11 Data-Driven UX Design in Detail: Developing Design Solutions

425

11.1 Reminder: What Is the Goal of Design, and How Do We Go About It?

425

11.2 Design Research

426

11.3 From Coarse to Fine

429

11.4 Developing Basic Solution Options

430

11.4.1 How to Turn a 2 into a 3

432

11.4.2 How to Deal with Too Many 3-Point Ideas

432

11.4.3 Conclusion

433

11.5 Working with Prototypes

433

11.5.1 Horizontal and Vertical Prototypes

434

11.5.2 High- and Low-Fidelity Prototypes

435

11.5.3 Which Prototype Should Be Used and When?

437

11.6 Wireframes

438

11.6.1 Buttons

445

11.6.2 Dropdowns

447

11.6.3 Radio Buttons

449

11.6.4 Input Fields or Text Fields

451

11.6.5 Combo Boxes

454

11.6.6 Checkboxes

455

11.6.7 Accordions

457

11.6.8 Toggle Buttons

458

11.6.9 Sliders

460

11.6.10 Calendars

461

11.6.11 Time Pickers

464

11.6.12 Color Selection

466

11.6.13 Information Buttons, Info Buttons, and Tool Tips

468

11.6.14 Popups

469

11.6.15 Menu Bars

472

11.6.16 Carousels

474

11.6.17 Webpage Sliders

477

11.6.18 Labels and Text Blocks

478

11.6.19 Images, Icons, and Placeholders

478

11.6.20 Special Case: Warnings

480

11.6.21 Conclusion

481

11.7 User Interface Quality Check: The Design Grid

481

11.8 Screen Flows

485

11.9 Click Dummies

487

11.9.1 Tools for Creating Click Dummies

488

11.9.2 Making the Design Testable

491

11.10 Desktop, Mobile, or Smartwatch First?

492

11.11 Responsive Design

495

11.12 Visual Design

497

11.12.1 Visual Design Research

497

11.12.2 The Association Space

500

11.12.3 Proto-Mood Boards

503

11.12.4 Closing Gaps in the Proto-Mood Board

504

11.12.5 From Proto-Mood Boards to Mood Boards

505

11.12.6 The Visual Design Concept

506

11.12.7 Creating Visual Prototypes (Click Dummies)

506

11.12.8 The Style Guide

507

11.13 Excursion: Low-Code and No-Code

508

11.14 Example: Possible Design Steps for moveHUB

509

11.15 Example: Possible Design Steps for BusinessBooster

511

11.16 Example: Possible Design Steps for Healthyfy

512

12 Data-Driven UX Design in Detail: Evaluating Design Solutions

515

12.1 Formative versus Summative Testing

515

12.2 Identifying Knowledge Gaps

519

12.3 User Evaluation versus Expert Evaluation

521

12.4 Remote versus On-Site

522

12.4.1 Dependence on Technical Infrastructure

522

12.4.2 Loss of Important Information

523

12.4.3 Less Control over Confidentiality

523

12.4.4 Non-Digital Products Cannot Be Tested without Bias

524

12.4.5 Conclusion

525

12.5 Designing Test Cases

525

12.5.1 Preconditions

526

12.5.2 Instructions for the User

527

12.5.3 Correct Execution of the Task

528

12.5.4 Postcondition after Correct Execution

529

12.5.5 Determine the Number of Test Cases

529

12.6 The Methods Presented

529

12.7 The Usability and UX Test

530

12.7.1 How Does It Work?

531

12.7.2 When Is It Used?

536

12.7.3 What Do You Need?

537

12.7.4 What Are the Advantages?

538

12.7.5 What Are the Disadvantages?

538

12.7.6 What Are the Alternatives?

539

12.8 Usability and UX Sprint

540

12.8.1 How Does It Work?

540

12.8.2 When Is It Used?

542

12.8.3 What Do You Need?

542

12.8.4 What Are the Advantages?

543

12.8.5 What Are the Disadvantages?

543

12.8.6 What Are the Alternatives?

544

12.9 Rapid User Tests

544

12.9.1 How Does It Work?

545

12.9.2 When Is It Used?

545

12.9.3 What Do You Need?

546

12.9.4 What Are the Advantages?

546

12.9.5 What Are the Disadvantages?

546

12.9.6 What Are the Alternatives?

547

12.10 A/B Testing

548

12.10.1 How Does It Work?

548

12.10.2 When Is It Used?

550

12.10.3 What Do You Need?

550

12.10.4 What Are the Advantages?

551

12.10.5 What Are the Disadvantages?

551

12.10.6 What Are the Alternatives?

552

12.11 UX Benchmarking

552

12.11.1 How Does It Work?

552

12.11.2 When Is It Used?

554

12.11.3 What Do You Need?

554

12.11.4 What Are the Advantages?

556

12.11.5 What Are the Disadvantages?

556

12.11.6 What Are the Alternatives?

556

12.12 5-Second Test

557

12.12.1 How Does It Work?

557

12.12.2 When Is It Used?

558

12.12.3 What Do You Need?

559

12.12.4 What Are the Advantages?

559

12.12.5 What Are the Disadvantages?

560

12.12.6 What Are the Alternatives?

560

12.13 Standardized Questionnaires

561

12.13.1 How Does It Work?

561

12.13.2 When Is It Used?

570

12.13.3 What Do You Need?

571

12.13.4 What Are the Advantages?

571

12.13.5 What Are the Disadvantages?

571

12.13.6 What Are the Alternatives?

572

12.14 Analysis of Quantitative Usage Data

573

12.14.1 How Does It Work?

573

12.14.2 When Is It Used?

573

12.14.3 What Do You Need?

574

12.14.4 What Are the Advantages?

574

12.14.5 What Are the Disadvantages?

575

12.14.6 What Are the Alternatives?

575

12.15 Web Tracking/Click Analysis

576

12.16 Diary Study

577

12.16.1 How Does It Work?

577

12.16.2 When Is It Used?

580

12.16.3 What Do You Need?

580

12.16.4 What Are the Advantages?

581

12.16.5 What Are the Disadvantages?

581

12.16.6 What Are the Alternatives?

581

12.17 Card Sorting

582

12.17.1 How Does It Work?

582

12.17.2 When Is It Used?

585

12.17.3 What Do You Need?

585

12.17.4 What Are the Advantages?

586

12.17.5 What Are the Disadvantages?

586

12.17.6 What Are the Alternatives?

586

12.18 Expert Review

587

12.18.1 How Does It Work?

587

12.18.2 When Is It Used?

589

12.18.3 What Do You Need?

589

12.18.4 What Are the Advantages?

589

12.18.5 What Are the Disadvantages?

590

12.18.6 What Are the Alternatives?

590

12.19 Association Space Test

591

12.19.1 How Does It Work?

591

12.19.2 When Is It Used?

592

12.19.3 What Do You Need?

593

12.19.4 What Are the Advantages?

593

12.19.5 What Are the Disadvantages?

593

12.19.6 What Are the Alternatives?

593

12.20 Eye Tracking

594

12.20.1 How Does It Work?

594

12.20.2 When Is It Used?

597

12.20.3 What Do You Need?

597

12.20.4 What Are the Advantages?

597

12.20.5 What Are the Disadvantages?

598

12.20.6 What Are the Alternatives?

598

12.21 Physiological Measurement Methods

599

12.21.1 How Does It Work?

600

12.21.2 When Is It Used?

600

12.21.3 What Do You Need?

601

12.21.4 What Are the Advantages?

601

12.21.5 What Are the Disadvantages?

601

12.21.6 What Are the Alternatives?

601

12.22 Analyzing Errors Using Root Cause Analysis

602

12.23 Learning from the Data and Making Informed Decisions

608

12.23.1 Implementing Feedback

608

12.23.2 Documenting Decisions

610

12.24 Evaluations in Medical Device Development

610

12.25 Example: Evaluation Methods for moveHUB

611

12.26 Example: Evaluation Methods for BusinessBooster

612

12.27 Example: Evaluation Methods for Healthyfy

614

13 Design, Get Data, Repeat: When Is It Enough?

617

13.1 Determining the Transition Based on Quality

618

13.2 Determining the Transition Based on Time

619

13.3 Should You Readjust? The Flexibility and Risk Matrix as an Aid

620

13.4 Choosing the Right Approach

622

13.5 What’s Next for moveHUB

623

13.6 What’s Next for BusinessBooster

623

13.7 What’s Next for Healthyfy

624

15 Wrap-Up and Conclusion

633

15.1 It’s All about the Users

633

15.2 Usability and UX Design Is Interdisciplinary

634

15.3 UX Is Not Designed, It Is Experienced

634

15.4 The Path to an Outstanding Product Is Iterative

634

15.5 Once You Start with Usability and UX Design, You Never Stop

635

15.6 Design Based on Data

635

15.7 Closing Words and Call for Participation

636

Appendices

637

A Glossary

639

B Bibliography

653

C The Authors

663