User Interface Design and Evaluation (eBook)

Figure Credits 23
Preface 25
Part 1: Introducing User Interface Design 31
1: Introduction 33
1. Why the User Interface Matters 33
2. Computers Are Ubiquitous 33
3. The Importance of Good User Interface Design 35
3.1 What Is a Good User Interface Design? 36
3.2 The Problems of Poor or Bad User Interfaces 37
3.3 Safety and the User Interface 40
3.4 Elections and the User Interface 42
4. Designing for Users 45
4.1 User-Centered Design 45
4.2 The Classic Life Cycle 46
4.3 Involving Users 47
4.4 Making the Design Process Interative 49
5. The Two Types of Knowledge Needed for UI Design 51
6. Evaluation 51
6.1 When and How Do You Evaluate? 52
7. Summary 54
Part 2: Requirements 55
2: How to Gather Requirements: Some Techniques to Use 59
1. Introduction 59
2. Observing Your Users 59
2.1 Direct Observation 59
2.2 Indirect Observation: Video Recording 60
2.3 Points to Consider in Relation to Observation 61
3. Interviewing Your Users 63
3.1 Points to Consider in Relation to Interviewing 63
4. Questionnaires and Surveys 64
4.1 Types of Question Structure 64
4.2 Points to Consider When Designing Questionnaires 65
5. Summary 66
3: Finding Out about the Users and the Domain 67
1. Introduction 67
2. Users: Finding Out Who They Are 69
2.1 Describing the Users: Users Have “Characteristics” That Are Relevant to UI Design 69
2.2 Designing for Physical Limitations 70
2.3 User Profiling: Describing Your Users and Their Characteristics 72
2.4 Smaller User Groups Are Easier to Design For 74
2.5 Personas: Another Way to Describe Your Users 78
2.6 Other Stakeholders 80
3. Users’ Needs: Finding Out What Users Want 81
4. The Domain: What Expert Knowledge Is Relevant to the Application? 82
4.1 Understanding the Domain 82
4.2 Representing the Domain 83
5. Summary 85
4: Finding Out about Tasks and Work 87
1. Introduction: Describing Users’ Work 87
1.1 Goals, Tasks, and Actions 87
1.2 Task Analysis 90
1.3 Mental Models 107
2. Environmental Considerations: Where Is This Work Done? 113
2.1 The Physical Environment: Is This a Pleasant Place to Be? 114
2.2 The Safety Environment: Is This a Safe Place to Be? 115
2.3 The Social Environment: Do People Help Each Other? 115
2.4 The Organizational Environment: Does Management Support This Work? 115
2.5 The User Support Environment 116
2.6 Consideration of Environmental Aspects and How They Affect Design 116
3. Summary 117
5: Requirements Gathering: Knowledge of User Interface Design 119
1. Introduction: The Two Types of Knowledge Needed for User Interface Design 119
2. Four Psychological Principles 120
2.1 Users See What They Expect to See 120
2.2 Users Have Difficulty Focusing on More Than One Activity at a Time 121
2.3 It Is Easier to Perceive a Structured Layout 122
2.4 It Is Easier to Recognize Something Than to Recall It 125
3. Three Principles from Experience: Visibility, Affordance, and Feedback 127
3.1 The Principle of Visibility: It Should Be Obvious What a Control Is Used For 127
3.2 The Principle of Affordance: It Should Be Obvious How a Control Is Used 127
3.3 The Principle of Feedback: It Should Be Obvious When a Control Has Been Used 128
4. Design Principles and Design Rules: Knowledge for User Interface Design 129
5. Summary 130
6: Thinking about Requirements and Describing Them 133
1. Introduction 133
2. Usability Requirements 133
2.1 Early Views of Usability 134
2.2 The Modern-Day View of Usability 138
3. Constraints and Trade-offs in Relation to Requirements Gathering 139
3.1 Costs/Budgets/Timescales 140
3.2 Technical Constraints 140
3.3 Trade-Offs 140
4. Problems with Requirements Gathering 141
5. Requirements Specification 142
6. Prototyping 144
6.1 Purposes of Prototyping: Why Bother Trying Out Your Ideas? 144
6.2 Low-Fidelity Prototypes 145
6.3 High-Fidelity Prototypes: Using Software Tools to Try Out Your Ideas 150
6.4 Cautions about Prototyping 151
7. Summary 151
7: Case Study on Requirements: Tokairo, Part 1 153
1. Introduction 153
2. The System 153
3. Background Information 154
3.1 The Companies Involved in the Project 154
3.2 The Software House: Tokairo 156
3.3 The Client: Tankfreight 156
3.4 The First Installation: Shell Haven 156
4. User Requirements Gathering 158
4.1 The Characteristics of the Users, Tasks, and Environment 158
4.2 How Tokairo Gathered the User Requirements 159
5. Summary 164
Part 3: Design 165
8: Work Reengineering and Conceptual Design 169
1. Introduction 169
1.1 Introduction to the Digital Library 170
2. Work Reengineering for the Digital Library 171
3. Task Allocation for the Digital Library 173
4. Conceptual Design 174
4.1 Deriving Concrete Use Cases from Essential Use Cases 176
4.2 Identifying Task Objects, Attributes, and Actions 177
4.3 Marking Up the Concrete Use Cases to Identify Task Objects, and Actions 180
4.4 Prototyping Task Objects, Attributes, and Actions 182
4.5 Creating the Content Diagram 184
5. Summary 192
9: Design Guidance and Design Rationale 195
1. Introduction 195
2. Sources of Design Guidance 196
2.1 User Interface Standards 196
2.2 Style Guides 198
3. Design Principles: Simplicity, Structure, Consistency, and Tolerance 200
3.1 Simplicity 200
3.2 Structure 202
3.3 Tolerance 204
4. Accessibility 207
4.1 The Principles of Universal Design 207
4.2 W3C Web Content Accessibility Guidelines 208
4.3 Section 508 211
4.4 The Limitations of Guidelines 211
5. Design Rationale 214
5.1 The Benefits of Recording Design Decisions 214
5.2 How to Record Design Decisions 215
6. Summary 216
10: Interaction Design 217
1. Introduction 217
2. The Human Action Cycle 217
2.1 The Details of the Human Action Cycle 217
2.2 Using the Human Action Cycle to Influence the Design Process 220
3. Communicating the Designer’s Understanding of the System 221
3.1 Designer’s Model 225
3.2 System Image 225
3.3 How the User Interface Enables the User to Develop an Accurate Mental Model 227
4. Using Metaphors to Develop Accurate Mental Models 229
4.1 The Benefits of Metaphor 230
4.2 Problems with Metaphor 231
4.3 Choosing a Suitable Metaphor or Set of Metaphors 233
5. Summary 234
11: Interaction Styles 235
1. Introduction 235
2. Interaction Styles 235
2.1 Command Line 236
2.2 Menu Selection 238
2.3 Form-Fill 240
2.4 Direct Manipulation 243
2.5 Anthropomorphic 245
2.6 Blending Interaction Styles 246
2.7 Choosing the Most Appropriate Interaction Style 246
3. Summary 250
12: Choosing Interaction Devices: Hardware Components 251
1. Introduction 251
2. Choosing Interaction Devices 251
2.1 Interaction Devices as Tools 251
2.2 Why Study Interaction Devices? 253
3. Input Devices 254
3.1 Keyboards, Keypads, and Buttons 254
3.2 Pointing Devices 259
3.3 Alternative Approaches to Entering Information 268
4. Output Devices 271
4.1 Screens 271
4.2 Loudspeakers 272
4.3 Simple Output Devices 273
4.4 Alternative Approaches to Outputting Information 275
5. Summary 276
13: Choosing Interaction Elements: Software Components 277
1. Introduction 277
2. Text 278
2.1 How to Ensure That Your Text Is Legible 278
2.2 How to Ensure That Your Text Makes Sense 278
3: Color 280
3.1 The Characteristics of Color 281
3.2 Choosing Colors with the Right Connotations 281
3.3 How to Use Color Effectively 284
3.4 Using Color to Represent Information 286
4. Images 290
4.1 Using Images Effectively 290
5. Moving Images 293
5.1 Using Animation Effectively 294
5.2 Using Video Clips Effectively 295
6. Sound 296
6.1 Different Types of Sound 296
6.2 Making Good Use of Sound Effects 297
6.3 Using Music Effectively 297
6.4 Using Speech Effectively 297
6.5 Problems with the Use of Sound 299
7. Summary 300
14: Moving from Choosing Components into Design Areas 301
1. Introduction 301
2. Combining Interaction Devices and Software Components 301
3. Principles of Good Layout 302
3.1 Create Natural Groupings 303
3.2 Separate the Currently Active Components 303
3.3 Emphasize Important Components 303
3.4 Use White Space Effectively 303
3.5 Make the Controls Visible 304
3.6 Balance Aesthetics and Usability 304
4. What Is a Design Area? 308
4.1 Design Components and Design Areas 309
5. Summary 310
15: Case Study on Design: Tokairo, Part 2 311
1. Introduction 311
2. The Driver’s Worksheet 311
3. The Kiosk 312
4. How Tokairo Designed the UI 314
4.1 Establishing the Ground Rules: Simplicity and Flexibility 314
4.2 Choosing the Technology: Simplicity and Familiarity 314
4.3 Developing Prototypes: Communicating Ideas 316
4.4 Designing the Screens 318
4.5 Designing the Worksheet 319
4.6 Developing Prototypes: Facilitating Evaluation 319
4.7 Two Surprises 322
5. Summary 323
16: Designing a Graphical User Interface (GUI) 325
1. Introduction 325
2. The Appearance of Widgets in Different Pieces of Software 327
3. The Energetic Sports Center 329
3.1 Domain 329
3.2 Users 330
3.3 Main Tasks 330
3.4 Environment 331
3.5 Technology 332
3.6 Conceptual Design 332
4. Choosing Widgets to Structure the Interaction 334
4.1 Using Primary Windows 334
4.2 Using Secondary Windows 335
4.3 Using Tabs 338
5. Choosing Widgets to Control the Interaction 339
5.1 Using Menus 339
5.2 Using Tool Bars 342
5.3 Using Command Buttons 344
6. Choosing Widgets to Enter Information 346
6.1 Using Option Buttons and Check Boxes 346
6.2 Using List Boxes 349
6.3 Using Text Boxes 351
7. Combining GUI Widgets 352
8. Summary 360
17: Designing for the Web 361
1. Introduction 361
2. The Lovely Rooms Hotel Booking Service 362
2.1 Domain 362
2.2 Users 362
2.3 Tasks 363
2.4 Environment 363
2.5 Technology 363
2.6 Conceptual Design 363
3. Design Principles for Web Sites 364
3.1 High-Quality Content 364
3.2 Often Updated 364
3.3 Minimal Download Time 366
3.4 Ease of Use 366
3.5 Relevant to User’s Needs 366
3.6 Unique to the Online Medium 366
3.7 Net-centric Corporate Culture 366
4. Designing Web Sites 367
4.1 Designing the Web Site Structure 367
4.2 Helping the Users Know Where They Are 372
4.3 Helping the Users Navigate around the Site 373
4.4 Navigation Aids 375
5. Designing Home Pages and Interior Pages 380
5.1 Designing the Home Page 380
5.2 Designing Interior Pages 384
6. Design Issues for Web Pages 385
6.1 Widgets on Web Pages 385
6.2 Scrolling 385
6.3 Designing for Different Screens and Platforms 387
6.4 Using the Screen Area Effectively 388
6.5 Improving the Download Time 388
6.6 Using Style Sheets 391
6.7 Designing for Accessibility 391
7. Writing the Content of Web Pages 395
7.1 Keep Text to a Minimum 396
7.2 Help Users to Scan 396
7.3 Dividing Long Blocks of Text into Separate Sections 397
8. Summary 399
18: The Design of Embedded Computer Systems and Small Devices 401
1. Introduction 401
2. Types of Embedded System 402
2.1 Safety Critical Systems 402
2.2 Information Appliances 404
3. Design Issues for IAs 405
3.1 Portability 405
3.2 General Purpose versus Special Purpose 408
3.3 Connectedness 412
3.4 The Commercial Environment 413
4. Design Guidelines for Embedded Devices 413
4.1 UI Design Guidelines for Handheld Devices 413
4.2 Guidelines Specific to a Manufacturer 415
4.3 Guidelines for Kiosks 416
5. Summary 416
19: Case Study on Requirements, Design, and Evaluation: NATS 417
1. Introduction 417
2. The Final Approach Spacing Tool (FAST) 418
2.1 National Air Traffic Services 418
2.2 Air Traffic Management Systems 418
2.3 Final Approach Control 419
2.4 The FAST User Interface 421
3. How the Team Developed FAST 424
3.1 NATS Research and Development 424
3.2 The Human Factors Unit 424
3.3 The FAST Project Team 424
4. Requirements Gathering 425
4.1 The Domain, Users, Environment, and Usability Requirements 425
4.2 How the Project Team Gathered the User Requirements 426
5. The Design and Evaluation of the User Interface 426
5.1 Design by Prototyping 428
5.2 Preparing to Evaluate 430
5.3 Observing the Controllers 432
5.4 Inspecting the User Interface 436
5.5 Analyzing and Interpreting the Evaluation Data 438
5.6 Communicating the Findings to the Customer 438
6. Summary 439
Appendix 1: GUI Design Guidelines 441
Appendix 2: Principles and Guidelines for Web Site Design 443
Appendix 3: Web Sites for Users with Disabilities 447
Part 4: Evaluation 449
20: Why Evaluate the Usability of User Interface Designs? 453
1. Introduction 453
2. Why Evaluate the Usability of User Interface Designs? 453
2.1 Does the Interface Meet the Usability Requirements? 453
2.2 Exploring Other Concerns in Evaluations 455
3. Users, Tasks, Environment, and Domain 455
3.1 Our Running Example: Global Warming 455
3.2 Description of the Global Warming User Interface 457
4. The Activities of Usability Evaluations 462
4.1 The Process of Usability Evaluation Is Iterative 464
4.2 Techniques for Usability Evaluations 464
5. What Happens in a User Observation Evaluation Session? 465
6. Summary 466
21: Deciding on What You Need to Evaluate: The Strategy 469
1. Introduction 469
2. Creating an Evaluation Strategy 469
2.1 What Is the Purpose of This Evaluation? 469
2.2 What Type of Data Do I Want to Collect? 474
2.3 What Am I Evaluating? 475
2.4 What Constraints Do I Have? 476
2.5 Documenting the Evaluation Strategy 476
3. The Global Warming UI: The Evaluation Strategy 477
3.1 Deciding What to Test 478
3.2 Do You Have to Work within Any Constraints? 480
3.3 Writing Up Your Evaluation Strategy for the Global Warming Evaluation 480
4. Summary 481
22: Planning who, what, When, and where 483
1. Introduction 483
2. Choosing Your Users 483
2.1 Who Is a Real User? 484
2.2 Users Working Alone or in Pairs 486
2.3 Number of Participants 487
2.4 Recruiting Extra Participants 488
2.5 Ideas for Participants 488
2.6 Offering Incentives 488
2.7 Recruiting Screeners and Pretest Questionnaires 492
2.8 Choosing Users for Global Warming 492
3. Creating a Timetable 493
3.1 Decide the Duration of the Evaluation Session 493
3.2 Create an Evaluation Timetable 493
4. Preparing Task Descriptions 496
4.1 Task Cards 497
4.2 Task Descriptions for Global Warming 498
5. Where Will You Do the Evaluation? 498
5.1 Field Studies 498
5.2 Controlled Studies 500
5.3 The Setting for the Global Warming Evaluation 501
5.4 Arranging Usability Evaluation Sessions 503
5.5 The Arrangements for the Global Warming Evaluation 503
6. Summary 503
23: Deciding How to Collect Data 505
1. Introduction: Preparing to Collect Evaluation Data 505
2. Timing and Logging Actions 506
2.1 Automatic Logging of Keystrokes and Mouse Clicks 506
2.2 Specialist Logging Software for Usability Evaluations 507
2.3 Choosing a Logging Product 507
3. Think-Aloud and Offering Help 508
3.1 Using Cognitive Walkthrough Questions 509
4. Taking Notes When Observing Users 510
5. Conducting Post-Session Discussions 510
6. Questionnaires 512
7. Using Technologies to Help with Recording 514
7.1 Video and Audio Recording 514
7.2 Eye-Tracking Equipment 515
7.3 Practitioner’s Choice of Technology 516
8. The Global Warming Choices for Data Collection 519
9. Summary 519
24: Final Preparations for the Evaluation 521
1. Introduction 521
1.1 Evaluation Materials for Global Warming 521
2. Roles for Evaluators 521
2.1 Facilitator 521
2.2 Note-Taker 524
2.3 Equipment Operator 524
2.4 Observer 524
2.5 Meeter and Greeter 525
2.6 Recruiter 525
2.7 The Lone Evaluator 525
3. Creating an Evaluation Script 526
3.1 An Example of an Evaluation Script 527
3.2 Using a Script for the Global Warming Evaluation 527
4. Forms to Use When Asking for Permission to Record 529
4.1 Nondisclosure Agreements 531
5. The Pilot Test 533
5.1 Participants for Your Pilot Test 533
5.2 Design and Assemble the Test Environment 533
5.3 Run the Pilot Test 533
6. Summary 534
25: Analysis and Interpretation of User Observation Evaluation Data 535
1. Introduction: How to Analyze and Interpret Data from Your Evaluation 535
2. Collating the Data 535
3. Summarizing the Data 537
4. Reviewing the Data to Identify Usability Problems 537
5. Working with Quantitative Data 538
6. Working with Qualitative Data 541
6.1 An Example of Data from Global Warming 541
6.2 Making Decisions with Qualitative Data 543
7. Interpretation of User-Observation Data 546
7.1 Assigning Severities 546
7.2 Recommending Changes 547
8. Writing the Evaluation Report 549
8.1 An Academic Report on Global Warming 549
8.2 Should You Describe Your Method? 553
8.3 Describing Your Results 553
9. Summary 553
26: Inspections of the User Interface 555
1. Introduction 555
2. Creating the Evaluation Plan for Heuristic Inspection 555
2.1 Choosing the Heuristics 555
2.2 The Inspectors 559
3. Conducting a Heuristic Inspection 559
3.1 Task Descriptions 559
3.2 The Location of the Evaluation Session 560
3.3 Collecting Evaluation Data 560
4. Analysis of Heuristic Inspection Data 561
5. Interpretation of Heuristic Inspection Data 561
6. Benefits and Limitations of Heuristic Evaluations 561
7. Variations of Usability Inspection 563
7.1 Participatory Heuristic Evaluations 563
7.2 Guideline Reviews 563
7.3 Standards Inspections 566
7.4 Cognitive Walkthrough 566
7.5 Peer Reviews 567
8. Summary 567
27: Variations and More Comprehensive Evaluations 569
1. Introduction 569
2. A Comparison of User Observation and Heuristic Inspection 569
3. Observe, Listen, Compare, Measure: The Elements of Evaluation 570
4. Combining the Elements for Evaluation 571
5. Varying Other Aspects of the Evaluation 574
6. Variations of User Observations 576
6.1 Remote Moderated Testing 576
6.2 Performance Measurement Evaluations 578
7. Obtaining Opinions and Ideas 579
7.1 Focus Groups 579
7.2 Card Sorting 579
8. Evaluations without People 579
8.1 Accessibility Checkers and HTML Validators 579
8.2 Usability Checkers 581
8.3 Hybrid Methods 581
9. Different Purposes of Evaluations 581
9.1 Exploratory Evaluations 582
9.2 Validation Evaluation 582
9.3 Assessment Evaluation 583
9.4 Comparison Evaluation 583
10. Undertaking More Comprehensive Evaluations 586
11. Summary 586
Part 5: Persuasion 589
28: Communicating and Using Findings 593
1. Introduction 593
2. Making Use of Your Findings 594
2.1 Using Your Results 594
2.2 Communicating the Results 595
3. Who Is Affected by the Changes? 600
3.1 Who Is Involved in Your Project? 602
3.2 Choosing Ways to Communicate the Results 605
3.3 Is Your Organization User Centered? 611
4. Summary 613
29: Winning and Maintaining Support for User-Centered Design 615
1. Introduction 615
2. “Skepticism” Arguments: Finding Out about Usability 616
2.1 Organizational Goals That May Conflict with Usability 617
3. “Skepticism” Arguments: Creating Curiosity 619
3.1 Start Small 619
3.2 Find a Champion 619
3.3 Be an Objective Voice 620
4. “Curiosity” Arguments: Moving toward Acceptance 621
4.1 Cost of Staff Time and Accuracy 622
4.2 Performance Measurement: Computer Time 623
4.3 Costs of Learning and Training 623
4.4 Continuing Support Costs 625
4.5 Cost of Support 625
4.6 Cost of Maintenance and Change 626
4.7 Cost Justification Is Not the Whole Story 626
5. “Acceptance” Arguments: Maintaining Momentum 629
5.1 Be Sensitive to the Stage of the Project 629
5.2 Balance Delivery and Usability 630
5.3 Manage User Expectations 631
5.4 Do Not Become Stuck on One Technique 631
6. “Partnership”: The Benefits 631
7. Summary 632
30. Summary 633
Glossary 635
References 661
Index 671