ser mterrace Evaluation esign an DEBBIE STONE The Open University, UK CAROLINE JARRETT Effortmark Limited MARK W O O D R O F F E The Open University, UK SHAILEY MINOCHA The Open University, UK 9 TheOpen University Mi- К AMSTERDAM BOSTON HEIDELBERG LONDON NEWYORK OXFORD PARIS SAN DIEGO SAN FRANCISCO SINGAPORTE SYDNEY TOKYO ELSEVIER Morgan Kaufmann Publishers is an imprint of Elsevier. MORGAN KAUFMANN PUBLISHERS
Figure Credits xxi Preface xxiii Part 1 Introducing User Interface Design 1 1 Introduction 3 1. Why the User Interface Matters 3 2. Computers Are Ubiquitous 3 3. The Importance of Good User Interface Design 5 3.1. What Is a Good User Interface Design? 6 3.2 The Problems of Poor or Bad User Interfaces 7 3.3 Safety and the User Interface 10 3.4 Elections and the User Interface 12 4. Designing for Users 15 4.1 User-Centered Design 15 4.2 The Classic Life Cycle 16 4.3 Involving Users 17 4.4 Making the Design Process Interative 19 5. The Two Types of Knowledge Needed for UI Design 21 6. Evaluation 21 6.1 When and How Do You Evaluate? 22 7. Summary 24 Part 2 Requirements 25 2 How to Gather Requirements: Some Techniques to Use 29 1. Introduction 29 2. Observing Your Users 29 2.1 Direct Observation 29 2.2 Indirect Observation: Video Recording 30 2.3 Points to Consider in Relation to Observation 31 3. Interviewing Your Users 33 3.1 Points to Consider in Relation to Interviewing 33 4. Questionnaires and Surveys 34 4.1 Types of Question Structure 34 4.2 Points to Consider When Designing Questionnaires 35 5. Summary 36
Finding Out about the Users and the Domain 37 1. Introduction 37 2. Users: Finding Out Who They Are 39 2.1 Describing the Users: Users Have "Characteristics" That Are Relevant to UI Design 39 2.2 Designing for Physical Limitations 40 2.3 User Profiling: Describing Your Users and Their Characteristics 42 2.4 Smaller User Groups Are Easier to Design For 44 2.5 Personas: Another Way to Describe Your Users 48 2.6 Other Stakeholders 50 3. Users'Needs: Finding Out What Users Want 51 4. The Domain: What Expert Knowledge Is Relevant to the Application? 52 4.1 Understanding the Domain 52 4.2 Representing the Domain 53 5. Summary 55 4 Finding Out about Tasks and Work 57 1. Introduction: Describing Users'Work 57 1.1 Goals, Tasks, and Actions 57 1.2 Task Analysis 60 1.3 Mental Models 77 2. Environmental Considerations: Where Is This Work Done? 83 2.1 The Physical Environment: Is This a Pleasant Place to Be? 84 2.2 The Safety Environment: Is This a Safe Place to Be? 85 2.3 The Social Environment: Do People Help Each Other? 85 2.4 The Organizational Environment: Does Management Support This Work? 85 2.5 The User Support Environment 86 2.6 Consideration of Environmental Aspects and How They Affect Design 86 3. Summary 87 5 Requirements Gathering: Knowledge of User Interface Design 89 1. Introduction: The Two Types of Knowledge Needed for User Interface Design 89 2. Four Psychological Principles 90 2.1 Users See What They Expect to See 90 2.2 Users Have Difficulty Focusing on More Than One Activity at a Time 91 2.3 It Is Easier to Perceive a Structured Layout 92 2.4 It Is Easier to Recognize Something Than to Recall It 95 3. Three Principles from Experience: Visibility, Affordance, and Feedback 97 3.1 The Principle of Visibility: It Should Be Obvious What a Control Is Used For 97
3.2 The Principle of Affordance: It Should Be Obvious How a Control Is Used 97 3.3 The Principle of Feedback: It Should Be Obvious When a Control Has Been Used 98 4. Design Principles and Design Rules: Knowledge for User Interface Design 99 5. Summary 100 6 Thinking about Requirements and Describing Them 103 1. Introduction 103 2. Usability Requirements 103 2.1 Early Views of Usability 104 2.2 The Modem-Day View of Usability 108 3. Constraints and Trade-offs in Relation to Requirements Gathering 109 3.1 Costs/Budgets/Timescales 110 3.2 Technical Constraints 110 3.3 Trade-offs 110 4. Problems with Requirements Gathering 111 5. Requirements Specification 112 6. Prototyping 114 6.1 Purposes of Prototyping: Why Bother Trying Out Your Ideas? 114 6.2 Low-Fidelity Prototypes 115 6.3 High-Fidelity Prototypes: Using Software Tools to Try Out Your Ideas 120 6.4 Cautions about Prototyping 121 7. Summary 121 7 Case Study on Requirements: Tokairo, Part 1 123 1. Introduction 123 2. The System 123 3. Background Information 124 3.1 The Companies Involved in the Project 124 3.2 The Software House: Tokairo 126 3.3 The Client: Tankfreight 126 3.4 The First Installation: Shell Haven 126 4. User Requirements Gathering 128 4.1 The Characteristics of the Users, Tasks, and Environment 128 4.2 How Tokairo Gathered the User Requirements 129 5. Summary 134 Part 3 Design 135 8 Work Reengineering and Conceptual Design 139 1. Introduction 139 1.1 Introduction to the Digital Library 140
2. Work Reengineering for the Digital Library 141 3. Task Allocation for the Digital Library 143 4. Conceptual Design 144 4.1 Deriving Concrete Use Cases from Essential Use Cases 146 4.2 Identifying Task Objects, Attributes, and Actions 147 4.3 Marking Up the Concrete Use Cases to Identify Task Objects, Their Attributes, and Actions 150 4.4 Prototyping Task Objects, Attributes, and Actions 152 4.5 Creating the Content Diagram 153 5. Summary 161 Design Guidance and Design Rationale 165 1. Introduction 165 2. Sources of Design Guidance 166 2.1 User Interface Standards 166 2.2 Style Guides 168 3. Design Principles: Simplicity, Structure, Consistency, and Tolerance 170 3.1 Simplicity 170 3.2 Structure 172 3.3 Tolerance 176 4. Accessibility 177 4.1 The Principles of Universal Design 177 4.2 W3C Web Content Accessibility Guidelines 178 4.3 Section 508 181 4.4 The Limitations of Guidelines 181 5. Design Rationale 184 5.1 The Benefits of Recording Design Decisions 184 5.2 How to Record Design Decisions 185 6. Summary 186 Interaction Design 187 1. Introduction 187 2. The Human Action Cycle 187 2.1 The Details of the Human Action Cycle 187 2.2 Using the Human Action Cycle to Influence the Design Process 190 3. Communicating the Designer's Understanding of the System 191 3.1 Designer's Model 195 3.2 System Image 195 3.3 How the User Interface Enables the User to Develop an Accurate Mental Model 197 4. Using Metaphors to Develop Accurate Mental Models 199 4.1 The Benefits of Metaphor 200
4.2 Problems with Metaphor 201 4.3 Choosing a Suitable Metaphor or Set of Metaphors 5. Summary 204 203 XI 11 Interaction Styles 205 1. Introduction 205 2. Interaction Styles 205 2.1 Command Line 206 2.2 Menu Selection 208 2.3 Form-Fill 210 2.4 Direct Manipulation 213 2.5 Anthropomorphic 215 2.6 Blending Interaction Styles 216 2.7 Choosing the Most Appropriate Interaction Style 216 3. Summary 220 12 Choosing Interaction Devices: Hardware Components 221 1. Introduction 221 2. Choosing Interaction Devices 221 2.1 Interaction Devices as Tools 221 2.2 Why Study Interaction Devices? 223 3. Input Devices 224 3.1 Keyboards, Keypads, and Buttons 224 3.2 Pointing Devices 229 3.3 Alternative Approaches to Entering Information 238 4. Output Devices 241 4.1 Screens 241 4.2 Loudspeakers 242 4.3 Simple Output Devices 243 4.4 Alternative Approaches to Outputting Information 245 5. Summary 246 13 Choosing Interaction Elements: Software Components 247 1. Introduction 247 2. Text 248 2.1 How to Ensure That Your Text Is Legible 248 2.2 How to Ensure That Your Text Makes Sense 248 3. Color 251 3.1 The Characteristics of Color 251 3.2 Choosing Colors with the Right Connotations 251 3.3 How to Use Color Effectively 253 3.4 Using Color to Represent Information 256 4. Images 260 4.1 Using Images Effectively 260 5. Moving Images 263
5.1 Using Animation Effectively 264 5.2 Using Video Clips Effectively 265 6. Sound 266 6.1 Different Types of Sound 266 6.2 Making Good Use of Sound Effects 267 6.3 Using Music Effectively 267 6.4 Using Speech Effectively 267 6.5 Problems with the Use of Sound 269 7. Summary 270 14 Moving from Choosing Components into Design Areas 271 1. Introduction 271 2. Combining Interaction Devices and Software Components 271 3. Principles of Good Layout 272 3.1 Create Natural Groupings 273 3.2 Separate the Currently Active Components 273 3.3 Emphasize Important Components 273 3.4 Use White Space Effectively 273 3.5 Make the Controls Visible 274 3.6 Balance Aesthetics and Usability 274 4. What Is a Design Area? 278 4.1 Design Components and Design Areas 279 5. Summary 280 15 Case Study on Design: Tokairo, Part 2 281 1. Introduction 281 2. The Driver's Worksheet 281 3. The Kiosk 282 4. How Tokairo Designed the UI 284 4.1 Establishing the Ground Rules: Simplicity and Flexibility 4.2 Choosing the Technology: Simplicity and Familiarity 284 4.3 Developing Prototypes: Communicating Ideas 286 4.4 Designing the Screens 288 4.5 Designing the Worksheet 289 4.6 Developing Prototypes: Facilitating Evaluation 289 4.7 Two Surprises 292 5. Summary 293 16 Designing a Graphical User Interface (GUI) 295 1. Introduction 295 2. The Appearance of Widgets in Different Pieces of Software 297 3. The Energetic Sports Center 299 3.1 Domain 299 3.2 Users 300 3.3 Main Tasks 300
3.4 Environment 301 3.5 Technology 302 3.6 Conceptual Design 302 4. Choosing Widgets to Structure the Interaction 304 4.1 Using Primary Windows 304 4.2 Using Secondary Windows 305 4.3 Using Tabs 308 5. Choosing Widgets to Control the Interaction 309 5.1 Using Menus 309 5.2 Using Tool Bars 312 5.3 Using Command Buttons 314 6. Choosing Widgets to Enter Information 316 6.1 Using Option Buttons and Check Boxes 316 6.2 Using List Boxes 319 6.3 Using Text Boxes 321 7. Combining GUI Widgets 322 8. Summary 330 17 Designing for the Web 331 1. Introduction 331 2. The Lovely Rooms Hotel Booking Service 332 2.1 Domain 332 2.2 Users 332 2.3 Tasks 333 2.4 Environment 333 2.5 Technology 333 2.6 Conceptual Design 333 3. Design Principles for Web Sites 334 3.1 High-Quality Content 334 3.2 Often Updated 334 3.3 Minimal Download Time 336 3.4 Ease of Use 336 3.5 Relevant to User's Needs 336 3.6 Unique to the Online Medium 336 3.7 Net-Centric Corporate Culture 336 4. Designing Web Sites 337 4.1 Designing the Web Site Structure 337 4.2 Helping the Users Know Where They Are 342 4.3 Helping the Users Navigate around the Site 343 4.4 Navigation Aids 345 5. Designing Home Pages and Interior Pages 350 5.1 Designing the Home Page 350 5.2 Designing Interior Pages 351 6. Design Issues for Web Pages 355 6.1 Widgets on Web Pages 355
6.2 Scrolling 355 6.3 Designing for Different Screens and Platforms 357 6.4 Using the Screen Area Effectively 357 6.5 Improving the Download Time 358 6.6 Using Style Sheets 361 6.7 Designing for Accessibility 361 7. Writing the Content of Web Pages 365 7.1 Keep Text to a Minimum 366 7.2 Help Users to Scan 366 7.3 Dividing Long Blocks of Text into Separate Sections 367 8. Summary 369 18 The Design of Embedded Computer Systems and Small Devices 371 1. Introduction 371 2. Types of Embedded System 372 2.1 Safety Critical Systems 372 2.2 Information Appliances 374 3. Design Issues for IAs 375 3.1 Portability 375 3.2 General Purpose versus Special Purpose 378 3.3 Connectedness 382 3.4 The Commercial Environment 383 4. Design Guidelines for Embedded Devices 383 4.1 UI Design Guidelines for Handheld Devices 383 4.2 Guidelines Specific to a Manufacturer 385 4.3 Guidelines for Kiosks 386 5. Summary 386 19 Case Study on Requirements, Design, and Evaluation: NATS 387 1. Introduction 387 2. The Final Approach Spacing Tool (FAST) 388 2.1 National Air Traffic Services 388 2.2 Air Traffic Management Systems 388 2.3 Final Approach Control 389 2.4 The FAST User Interface 391 3. How the Team Developed FAST 394 3.1 NATS Research and Development 394 3.2 The Human Factors Unit 394 3.3 The FAST Project Team 394 4. Requirements Gathering 395 4.1 The Domain, Users, Environment, and Usability Requirements 395 4.2 How the Project Team Gathered the User Requirements 396 5. The Design and Evaluation of the User Interface 396 5.1 Design by Prototyping 398
5.2 Preparing to Evaluate 400 5.3 Observing the Controllers 402 5.4 Inspecting the User Interface 406 5.5 Analyzing and Interpreting the Evaluation Data 408 5.6 Communicating the Findings to the Customer 408 6. Summary 409 Appendix 1 GUI Design Guidelines 411 Appendix 2 Principles and Guidelines for Web Site Design 413 Appendix 3 Web Sites for Users with Disabilities 417 Part 4 Evaluation 419 20 Why Evaluate the Usability of User Interface Designs? 423 1. Introduction 423 2. Why evaluate the usability of user interface designs? 423 2.1. Does the Interface Meet the Usability Requirements? 423 2.2 Exploring Other Concerns in Evaluations 425 3. Users, Tasks, Environment, and Domain 425 3.1 Our Running Example: Global Warming 425 3.2 Description of the Global Warming User Interface 427 4. The Activities of Usability Evaluations 432 4.1 The Process of Usability Evaluation Is Iterative 434 4.2 Techniques for Usability Evaluations 434 5. What Happens in a User Observation Evaluation Session? 435 6. Summary 436 21 Deciding on What You Need to Evaluate: The Strategy 439 1. Introduction 439 2. Creating an Evaluation Strategy 439 2.1 What Is the Purpose of This Evaluation? 439 2.2 What Type of Data Do I Want to Collect? 444 2.3 What Am I Evaluating? 445 2.4 What Constraints Do I Have? 446 2.5 Documenting the Evaluation Strategy 446 3. The Global Warming UI: The Evaluation Strategy 447 3.1 DecidingWhattoTest 448 3.2 Do You Have to Work within Any Constraints? 450 3.3 Writing Up Your Evaluation Strategy for the Global Warming Evaluation 450 4. Summary 451 22 Planning who, what, When, and where 453 1. Introduction 453 2. Choosing Your Users 453
2.1 Who Is a Real User? 454 2.2 Users Working Alone or in Pairs 456 2.3 Number of Participants 457 2.4 Recruiting Extra Participants 458 2.5 Ideas for Participants 458 2.6 Offering Incentives 458 2.7 Recruiting Screeners and Pretest Questionnaires 462 2.8 Choosing Users for Global Warming 462 3. Creating a Timetable 463 3.1 Decide the Duration of the Evaluation Session 463 3.2 Create an Evaluation Timetable 463 4. Preparing Task Descriptions 466 4.1 Task Cards 467 4.2 Task Descriptions for Global Warming 468 5. Where will you do the evaluation? 468 5.1 Field Studies 468 5.2 Controlled Studies 470 5.3 The Setting for the Global Warming Evaluation 471 5.4 Arranging Usability Evaluation Sessions 473 5.5 The Arrangements for the Global Warming Evaluation 473 6. Summary 473 23 Deciding How to Collect Data 475 1. Introduction: Preparing to Collect Evaluation Data 475 2. Timing and Logging Actions 476 2.1 Automatic Logging of Keystrokes and Mouse Clicks 476 2.2 Specialist Logging Software for Usability Evaluations 477 2.3 Choosing a Logging Product 477 3. Think-Aloud and Offering Help 478 3.1 Using Cognitive Walkthrough Questions 479 4. Taking Notes When Observing Users 480 5. Conducting Post-Session Discussions 480 6. Questionnaires 482 7. Using Technologies to Help with Recording 484 7.1 Video and Audio Recording 484 7.2 Eye-tracking Equipment 485 7.3 Practitioner's Choice of Technology 486 8. The Global Warming Choices for Data Collection 488 9. Summary 489 24 Final Preparations for the Evaluation 491 1. Introduction 491 1.1 Evaluation Materials for Global Warming 491 2. Roles for Evaluators 491
2.1 Facilitator 491 2.2 Note-Taker 494 2.3 Equipment Operator 494 2.4 Observer 494 2.5 Meeter and Greeter 495 2.6 Recruiter 495 2.7 The Lone Evaluator 495 3. Creating an Evaluation Script 496 3.1 An Example of an Evaluation Script 497 3.2 Using a Script for the Global Warming Evaluation 497 4. Forms to Use When asking for Permission to Record 499 4.1 Nondisclosure Agreements 501 5. The Pilot Test 503 5.1 Participants for Your Pilot Test 503 5.2 Design and Assemble the Test Environment 503 5.3 Run the Pilot Test 503 6. Summary 504 25 Analysis and Interpretation of User Observation Evaluation Data 505 1. Introduction: How to analyze and interpret data from your evaluation 505 2. Collating the Data 505 3. Summarizing the Data 507 4. Reviewing the Data to Identify Usability Problems 507 5. Working with quantitative data 508 6. Working with Qualitative Data 511 6.1 An Example of Data from Global Warming 511 6.2 Making Decisions with Qualitative Data 513 7. Interpretation of User-Observation Data 516 7.1 Assigning Severities 516 7.2 Recommending Changes 517 8. Writing the Evaluation Report 519 8.1 An Academic Report on Global Warming 519 8.2 Should You Describe Your Method? 523 8.3 Describing Your Results 523 9. Summary 523 26 Inspections of the User Interface 525 1. Introduction 525 2. Creating the Evaluation Plan for Heuristic Inspection 525 2.1 Choosing the Heuristics 525 2.2 The Inspectors 529 3. Conducting a Heuristic Inspection 529 3.1 Task Descriptions 529 3.2 The Location of the Evaluation Session 530 3.3 Collecting Evaluation Data 530
4. Analysis of Heuristic Inspection Data 531 5. Interpretation of Heuristic Inspection Data 531 6. Benefits and Limitations of Heuristic Evaluations 531 7. Variations of Usability Inspection 533 7.1 Participatory Heuristic Evaluations 533 7.2 Guideline Reviews 533 7.3 Standards Inspections 536 7.4 Cognitive Walkthrough 536 7.5 Peer Reviews 537 8. Summary 537 27 Variations and More Comprehensive Evaluations 539 1. Introduction 539 2. A Comparison of User Observation and Heuristic Inspection 539 3. Observe, Listen, Compare, Measure: The Elements of Evaluation 540 4. Combining the Elements for Evaluation 541 5. Varying Other Aspects of the Evaluation 544 6. Variations of User Observations 546 6.1 Remote Moderated Testing 546 6.2 Performance Measurement Evaluations 548 7. Obtaining Opinions and Ideas 549 7.1 Focus Groups 549 7.2 Card Sorting 549 8. Evaluations without People 549 8.1 Accessibility Checkers and HTML Validators 549 8.2 Usability Checkers 551 8.3 Hybrid Methods 551 9. Different Purposes of Evaluations 551 9.1 Exploratory Evaluations 552 9.2 Validation Evaluation 552 9.3 Assessment Evaluation 552 9.4 Comparison Evaluation 552 10. Undertaking More Comprehensive Evaluations 556 11. Summary 556 Part 5 Persuasion 559 28 Communicating and Using Findings 563 1. Introduction 563 2. Making Use of Your Findings 564 2.1 Using Your Results 564 2.2 Communicating the Results 565 3. Who Is Affected by the Changes? 570 3.1 Who Is Involved in Your Project? 572
3.2 Choosing Ways to Communicate the Results 575 3.3 Is Your Organization User Centered? 581 4. Summary 583 29 Winning and Maintaining Support for User-Centered Design 585 1. Introduction 585 2. "Skepticism" Arguments: Finding Out about Usability 586 2.1 Organizational Goals That May Conflict with Usability 587 3. "Skepticism" Arguments: Creating Curiosity 589 3.1 Start Small 589 3.2 Find a Champion 589 3.3 Be an Objective Voice 590 4. "Curiosity" Arguments: Moving toward Acceptance 591 4.1 Cost of Staff Time and Accuracy 592 4.2 Performance Measurement: Computer Time 593 4.3 Costs of Learning and Training 593 4.4 Continuing Support Costs 595 4.5 Cost of Support 595 4.6 Cost of Maintenance and Change 596 4.7 Cost Justification Is Not the Whole Story 596 5. "Acceptance" Arguments: Maintaining Momentum 599 5.1 Be Sensitive to the Stage of the Project 599 5.2 Balance Delivery and Usability 600 5.3 Manage User Expectations 601 5.4 Do Not Become Stuck on One Technique 601 6. "Partnership": The Benefits 601 7. Summary 602 30 Summary 603 Glossary 605 References 631 Index 641