S t e v e n Heim

Long Island University, C.W. Post

The
Resonant Interface
HCl FOUNDATIONS FOR INTERACTION DESIGN

PEARSON
Addison
Wesley

Boston San Francisco New York

London Toronto Sydney Tokyo Singapore Madrid
Mexico City Munich Paris Cape Town Hong Kong Montreal
SECTIONI USING COMPUTERS 1
Chapter 1 INTERACTION PARADIGMS 3
1.1. Innovation 4
1.1.1. Memex 4
1.1.2. Human Augmentation System 4
1.1.3. OLIVER 5
1.1.4. The Ultimate Display 6
1.2. Computing Environments 7
1.2.1. Physical Computing Environment 7
1.2.2. Social Computing Environment 9
1.2.3. Cognitive Computing Environment 9
1.3. Analyzing Interaction Paradigms 10
1.3.1. 5W+H 11
1.3.2. Terms 12
1.4. Interaction Paradigms 12
1.4.1. Large-Scale Computing 13
1.4.2. Personal Computing 15
1.4.3. Networked Computing 18
1.44. Mobile Computing 20
1.4.5. Collaborative Environments 24
1.4.6. Embodied Virtuality 26
1.4.7. Contemporary Approaches in Embodied Virtuality 27
1.4-8. Virtual Reality 33
1.4.9. Augmented Reality 36
Summary 38
Resources on the Web 38
Suggested Reading 39

<• v
Chapter 2 INTERACTION FRAMEWORKS A N D STYLES
2.1. Frameworks for Understanding Interaction 42
2.1.1. Execution/Evaluation Action Cycle 42
2.1.2. Interaction Framework 45
2.2. Coping with Complexity 48
2.2.1. Mental Models 48
2.2.2. Mapping 51
2.2.3. Semanticand Articulatory Distance 53
2.2.4. Affordances 54
2.3. Interaction Styles 55
2.3.1. Command Line 55
2.3.2. Menu-Based Interface 57
2.3.3. Form Fill-In 60
2.34. Question and Answer 61
2.3.5. Direct Manipulation 64
2.3.6. Metaphors 67
2.3.7. Web Navigation 69
2.3.8. Three-Dimensional Environments 69
2.3.9. Zoomable Interface 72
2.3.10. Natural Language 74
Summary 78
Resources ort the Web 78
Suggested Reading 79

SECTION II DESIGNING INTERACTION 81

Chapter 3 INTERACTION DESIGN PROCESS 83
3.1. Iterative Design 84
3.2. User-Centered Design 84
3.3- Interaction Design Models 86
3.3.L Waterfall Model 86
3.3.2. Spiral Model 88
3.3.3. Dynamic Systems Development Method 90
3.3.4. Prototype-Based Models 93
3.3.5. Discount Usability Engineering 94
3.3.6. Contextual Inquiry 95
3.4. Overview of Interaction Design Models 97
34.1. The Design Process Model 98
 Contents

Summary 99
Resources on the Web 100
Suggested Reading 100

Chapter 4 DISCOVERY 101

4.1. Discovery Phase Framework 102
4.1.1. Exploring the Work Domain 103
4.1.2. Organizing the Discovery Process 106
42. Collection 109
4.2.1. Methodsof Collection 109
4.2.2. Observation 110
4.2.3. Elicitation 112
4.3. Interpretation 119
4.3.1. TaskAnalysis 119
4.3.2. Storyboarding 124
4.3.3. UseCases 125
4.3-4. Primary Stakeholder Profiles 128
4.4. Documentation 141
4.4.1. Mission Statement 141
4.4.2. Requirements Document 142
4.4.3. Project Management Document 144
Design Scenario Circumference: Requirements 146
Summary 149
Resources on the Web 149
Suggested Reading 150

Chapter 5 DESIGN 151

5.1. Technology Myopia 152
5.2. Conceptual Design 152
5-2.1. Brainstorming 153
5.2.2. CardSort 154
5.2.3. Semantic Networks 156
5.2.4- Personas 158
5.2.5. Scenarios, Flowcharts, and Cognitive Walkthroughs 160
5.3. Physical Design 168
5.3.1. Prototypes 169
5.3.2. Low-Fidelity Prototypes 170
 *.
viii Contents

SA. Evaluation 172

54.1. Heuristic Evaluation 172
54.2. Nielsen's Heuristics 173
S.S. Physical Design Continued 177
5.5.1. Wireframes 177
5.5-2. Web Formats 178
5-5.3- Functional Prototypes 179
5.6- Interface Design Standards 180
5.6.1. Graphical Libraries 181
5.6.2. User Interface Toolkits 182
5.6.3. Visual Interface Builders 184
5.6.4. Web Development Tools 185
5.6.5. Emerging Standards 186
5.7. Designing the Facets of the Interface 187

Design Scenario Circumference: Physical Design 188

Summary 192
Resources on the Web 192
Suggested Reading 192

Chapter 6 DESIGN PRINCIPLES 193

6.1. Principles oflnteraction Design 194
6.1.1. Frameworkfor Design Principles 194
6.2. Comprehensibility 196
6.3. Learnability 197
6.4. Effectiveness/Usefulness 198
6.4.1. Utility 198
6.4.2. Safety 198
6.4.3. Flexibility 199
6.44. Stability 199
5.5. Efficiency/Usability 200
6.5.1- Simplicity 201
6.5.2. Memorability 205
6.5.3. Predictability 205
6.54. Visibility 209
S.S. Grouping 210
6.6.1. Gestalt PrinciplesofPerception 210
 Contents

6.7. Stimulus Intensity 220

6.8. Proportion 220
6.8.1. Golden Ratio 221
8.8.2. Fibonacci Series 222
6.9. Screen Complexity 223
6.1D. Resolution/Closure 227
6.11. Usability Goals 227
6.11.1. Goals toPrinciples 228
6.11.2. Principlesto Guidelines 228
Design Scenario Circumference: Application
of Design Principles 229
Summary 23 7
Resources on the Web 231
Suggested Reading 232

Chapter 7 INTERACTION DESIGN MODELS 233

7.1. Model Human Processor 234
7.1.1. Working Memory 235
7.1.2. Long-Term Memory 237
7.1.3. Processor Timing 237
7.2. Keyboard Level Model 239
7.2.1. Operators 240
7.2.2. Encoding Methods 240
7.2.3. HeuristicsforM Operator Placement 241
7.2.4. What the Keyboard Level Model Does Not Model 242
7.2.5. Application ofthe Keyboard Level Model 243
73. GOMS 244
7.3.1. CMN-GOMS 245
7.3.2. CMN-GOMS Analysis 245
7.3.3. Other GOMS Models 247
7.4. Modeling Structure 248
74.1. Hick's Law 249
7.5. Modeling Dynamics 254
7.5.1. State Transition Networks 254
7.5.2. Three-State Model 255
7.53. Glimpse Model 258
7.6. Physical Models 260
7.8.1. Fitts'Law 260

*
X Contents

Design Scenario Circumference: Scrolling versus Paging 268

Summary 272
Resources on the Web 273
Suggested Reading 273

Chapter 8 USABILITY TESTING 275

8.1. What Is Usability? 276
8.2. What Isa Usability Test? 277
8.2.1. Phasesofa Usability Test 280
8.3. Design the Test 281
8.3-1. Why: Define the Purpose 282
8.3.2. What: Define YourConcerns and Goals 282
8.3.3- What: Define the Tasks 284
8.3.4. What: Create the Scenarios 285
8.3.5. What: Define the Measurements 286
8.3.6. How: Define the Test Method 287
8.3.7. Where: Determine the Location of the Tests 289
8.3.8. Who: Select Participants, Testers, and Observers 291
8.4. Prepare for the Test 295
8.4-i. When: Create a Test Schedule 295
8.4.2. Writing Scripts 297
8.4.3. Runninga Pilot Test 299
8.5. Perform the Test 301
8.5.1. TestPhases 301
8.6. Process the Data 301
8.6.1. Activities Performed on the Dayof the Test 302
8.6.2. Follow-Up Activities 303
Design Scenario Circumference: Defining and Refining
Usability Goals 308
Summary 311
Resources on the Web 311
Suggested Reading 312

SECTION »11 FACETS OF INTERACTION 313

Chapter g COLOR 315
9.1. The Human Perceptual System 316
9.1.1. Color Perception 316
 9.1.2. Color Deficiencies 319
9.1.3. Individual and Culturallssues 322
S.Z. Using Color in Interaction Design 325
9.2.1. Clarification, Relation, and Differentiation 326
9.2.2. Searching 327
9.2.3. Comprehension, Retention, and Recall 329
9.24. Tasks and Performance 331
9.2.5. Redundant Coding 331
9.3. Color Concerns for Interaction Design 332
9.3.1. Indistinguishable Differences 332
9.3.2. Optimal Colors 333
9.3.3. Numberof Colors 334
9.3.4. Incompatible Differences 334
9.3.5. Color Backgrounds 335
8 4 . Technical Issues Concerning Color 336
9.4.I. Color Displays 336
94.2. Computing Environment 337
9.4.3. Color Systems 339
9.4.4. Color Contrast 344
9.4.5. Color Space 347
9.4.6. Web-Based Color 348
9.4-7. The Color Picker 351

Design Scenario Circumference: Color S c h e m e 352

Summary 358
Resources on the Web 359
Suggested Reading 359

Chapter 10 I N T E R F A C E C O M P O N E N T S 361

10.1. The WIMP Interface 362

10.1.1. Windows 362
10.1.2. Icons 376
10.1.3. Menüs 376
10.1.4. Pointers 386
10.2. Other Components 387
10.2.1. Lists 387
10.2.2. Controls 390
10.2.3. Display Components 392
10.2.4- Text Entry Components 394
 *
xii Contents

10.2.5. Tool Containers 396

Design Scenario Circumference: Web Form 397
Summary 406
Resources ort the Web 406
Suggested Reading 406

Chapter 11 ICONS 407

11.1. Human IssuesConcerning kons 408
11.1.1. NoviceUser 408
11.1.2. The Dual Nature of Icons 408
11.1.3. Real-World Expectations 409
11.1.4. Recall/Recognition 409
11.1.5. IconAnalysis Chart 410
11.2. Using kons in Interaction Design 413
11.2.1. Search 413
11.2.2. Screen Real Estate 416
11.2.3. Conventions 417
11.2.4. Context 419
11.2.5. Globalization-Localization 421
11.3. Technical IssuesConcerning Icons 423
11.3.1. IconTerminology 424
11.3.2. PrinciplesforlconCreation 428
11.3.3. IconGrammar 432
11.3.4. Universal Systems 433
11.3.5. Deconstructing Icons 436
11.3.6. IconSize 443
U.3.7. Transparencyand Background 444
11.3.8. Current Practices 445
Design Scenario Circumference: Icons 446
Summary 451
Resources on the Web 45 1
Suggested Reading 451

Chapter 12 TEXT 453

12.1. Human Issues Concerning Text 454
12.1.1. The Reading Process 454
12.1.2. The Reading Purpose 456
12.1.3. Paper versus Screens 456
 Contents xiii

12.2. Using Text in Interaction Design 458

12.2.1. Legibility 460
12.2.2. Readability 461
12.2.3. Physical Factors 464
12J. Technical Issues Concerning Text 472
12.3.1. Componentsof Digital Text 472
12.3.2. Web Text 476
12.3-3. Globalization/Localization 484
12.3.4. Dynamic Text Presentation 490
Design Scenario Circumference: Text Formatting 494
Summary 506
Resources on the Web 506
Suggested Reading 506

Chapter 13 SPEECH A N D HEARING 507

13.1. The Human Perceptual System 508
13.1.1. Hearing 508
13.1.2. Speech 510
13.1.3. Nonspeech 512
13.2. Using Sound in Interaction Design 513
13.2.1. Redundant Coding 514
13.2.2. Positive/Negative Feedback 514
13.2.3. Speech Applications 515
13.2.4. Nonspeech Applications 517
133. Technical Issues Concerning Sound 530
13.3.1. Sound Waves 530
13.3.2. Computer-Generated Sound 531
13.3-3. Speech Recognition 537
Design Scenario Circumference: Auditory Display 543
Summary 550
Resources on the Web 551
Suggested Reading 551

Chapter 14 TOUCH A N D MOVEMENT 553

14.1. The Human Perceptual System 554
14.1.1. Physical Aspectsof Perception 554
14.L2. Psychological Aspectsof Perception 565

«
xiv Contents

14.2. Using Haptics in Interaction Design 571

14.2.1. Teleoperation 572
14.2.2. Medical Uses 572
14.2.3. Users with Disabilities 575
14.2.4. Aerospace 578
14.2.5. Scientific Visualizations 579
14.2.1. Modeling 580
14.2.7. Art 580
14-2.8. Collaboration 582
14.2.9. Data Representations—Graphs 583
14.2.10. Gaming 583
14.3. Technical Issues Concerning Haptics 584
14.3.1. Haptic Displays 585
14.3.2. Tactile Displays 585
143.3. Force Feedback Displays 588
14.34. Desktop Devices 591
14.3.5. Haptic System Concerns 592

Design Scenario Coding Information for a Haptic

Navigation Device 595
Summary 598
Resources on the Web 599
Suggested Reading 599

A p p e n d i x A Vision 601
A p p e n d i x B Accessibility Guidelines 607
Appendix C Input/Output Devices 619
References 635
Credits 645
Index 647