About Face 2.0 The Essentials of Interaction Design

Alan Cooper and Robert Reimann

WILEY

Wiley Publishing, Inc.

Contents

Foreword ix

Acknowledgments viii

Introduction xxvii

Section One Know Thy User

Part I Bridging the Gap

Chapter 1 Goal-Directed Design 5 Digital Products Need Better Design Methods 5

The design of digital products today 5 We're ignorant about users 8 We have a conflict of interest 8 We lack a process 8

The Evolution of Design in Manufacturing 9 Planning and Designing Behavior 11 Recognizing User Goals 11

Goals versus tasks 12 Designing to meet goals in context 13

The Goal-Directed Design Process 13 Bridging the gap 14 A process overview 16 Goals, not features, are the key to product success 19

Chapter 2 Implementation Models and Mental Models 21 Implementation Models 21 User Mental Models 21 Represented Models 22 Most Software Conforms to Implementation Models 25

Software designed by engineers follows the implementation model 25

Mathematical thinking leads to implementation model interfaces 26

Mechanical-Age versus Information-Age Represented Models 27 Mechanical-age representations 27 New technology demands new representations 28 Mechanical-age representations degrade user interaction 28 Improving on mechanical-age representations: an example 29

xlv Tabi- of Contents

Chapter 3 Beginners, Experts, and Intermediates 33 Perpetual Intermediates 33 Optimizing for Intermediates 34

What beginners need 35 Getting beginners on board 36 What experts need 37 What perpetual intermediates need 37

Chapter 4 Understanding Users: Qualitative Research 39 Qualitative versus Quantitative Research 39

The value of qualitative research 40 Types of qualitative research 40

Ethnographic Interviews: Interviewing and Observing Users 44 Contextual Inquiry 44 Improving on Contextual Inquiry 45 Preparing for ethnographic interviews 46 Conducting ethnographic interviews 48

Other Types of Research 52 Focus groups 52 Market demographics and market segments 53 Usability and user testing 53

Chapter 5 Modeling Users: Personas and Goals 55 Why Model? 55 Personas 56

Strengths of personas as a design tool 56 Personas are based on research 58 Personas are represented as individuals 59 Personas represent classes of users in context 59 Personas explore ranges of behavior 60 Personas must have motivations 60 Personas versus user roles 61 Personas versus user profiles 61 Personas versus market segments 62 User personas versus non-user personas 62

Goals 62 Goals motivate usage patterns 62 Goals must be inferred from qualitative data 63 Types of goals 63 Successful products meet user goals first 66

Constructing Personas 67 Revisit the persona hypothesis 68 Map interview subjects to behavioral variables 68 Identify significant behavior patterns 68 Synthesize characteristics and relevant goals 69

Table of Contents xv

Check for completeness and distinctiveness 70 Develop narratives 71 Designate persona types 71

Other Models 73 Chapter 6 Scenarios: Translating Goals into Design 75

Narrative as a Design Tool 75 Scenarios in design 75 Using personas in scenarios 76 Persona-based scenarios versus use cases 77

Envisioning Solutions with Persona-Based Design 77 Defining the requirements 78 Defining the interaction framework 83 Refining the form and behavior 88

Chapter 7 Synthesizing Good Design: Principles and Patterns . . . 91 Interaction Design Principles 91

Principles minimize work 91 Principles operate at different levels of detail 92 Principles versus style guides 92

Interaction Design Patterns 93 Interaction and architectural patterns 93 Types of interaction design patterns 93 Structural patterns, pattern nesting, and pre-fab design 95

Interaction Design Imperatives 95 Ethical interaction design 95 Purposeful interaction design 97 Pragmatic interaction design 97 Elegant interaction design 97

Section Two Designing Behavior and Form

Part II Achieving Goals and Removing Barriers

Chapter 8 Software Posture 103 Postures for the Desktop 103

Sovereign posture 103 Transient posture 108 Daemonic posture I l l Auxiliary posture 113

Postures for the Web 114 Information-oriented sites 114 Transactional sites and Web applications 115 Web portals 116

xvi Table of Contents

Postures for Other Platforms 117 Kiosks 117 Handheld devices 117 Appliances 118

Chapter 9 Orchestration and Flow 119 Flow and Transparency 119

Follow mental models 120 Direct, don't discuss 120 Keep tools close at hand 121 Modeless feedback 122

Orchestration 123 Adding finesse: Less is more 123 Distinguishing possibility from probability 124 Providing comparisons 126 Using graphical input 127 Reflecting program status 128 Avoiding unnecessary reporting 129 Avoiding blank slates 130 Command invocation versus configuration 130 Asking questions versus providing choices 131 Hiding ejector seat levers 133

Chapter 10 Eliminating Excise 135 What Is Excise? 135 GUI Excise 136

Excise and expert users 136 Training wheels 137 "Pure" excise 137 Visual excise 137 Determining what is excise 138

Stopping the Proceedings 138 Errors, notifiers, and confirmation messages 139 Making the user ask permission 140 Protecting us from ourselves 141 Unresponsiveness 142

Common Excise Traps 142 Chapter 11 Navigation and Inflection 143

Navigation Is Excise 143 Types of Navigation 143

Navigation between multiple windows or pages 144 Navigation between panes 144 Navigation between tools and menus 145 Navigation of information 146

Improving Navigation 148 Reduce the number of places to go 148 Provide signposts 149

Tabic of Content«! xvii

Provide overviews 150 Provide appropriate mapping of controls to functions 152 Inflect your interface to match user needs 154 Avoid hierarchies 156

Chapter 12 Understanding Undo 157 Users and Undo 157

User mental models of mistakes 157 Undo enables exploration 158

Designing an Undo Facility 158 Types and Variants of Undo 159

Incremental and procedural actions 159 Blind and explanatory undo 159 Single and multiple undo 160 Redo 162 Group multiple undo 162

Other Models for Undo-Like Behavior 163 Comparison: What would this look like? 163 Category-specific undo 163 Deleted data buffers 164 Milestoning and reversion 165 Freezing 166

Undo-Proof Operations 166 Chapter 13 Rethinking Files and Save 167

What's Wrong with Saving Changes to Files? 167 Problems with the Implementation Model 168

Closing and unwanted changes 169 Save As 169 Archiving 171

Implementation Model versus Mental Model 171 Dispensing with the Implementation Model

of the File System 172 Designing a Unified File Presentation Model 173 Unified Document Management 173

Automatically saving the document 174 Creating a copy of the document 175 Naming and renaming the document 175 Placing and moving the document 175 Specifying the stored format of the document 175 Reversing changes 176 Abandoning all changes 176 Creating a milestone copy of the document 176 A new File menu 176 A new name for the File menu 177

Are Disks and Files Systems a Feature? 178 Time for Change 179

xviii Table of Contents

Part III Providing Power and Pleasure

Chapter 14 Making Software Considerate 183 Designing Considerate Software 183 What Makes Software Considerate? 184

Considerate software takes an interest 184 Considerate software is deferential 185 Considerate software is forthcoming 185 Considerate software uses common sense 185 Considerate software anticipates needs 185 Considerate software is conscientious 186 Considerate software doesn't burden you with its

personal problems 186 Considerate software keeps us informed 187 Considerate software is perceptive 187 Considerate software is self-confident 187 Considerate software doesn't ask a lot of questions 188 Considerate software fails gracefully 188 Considerate software knows when to bend the rules 189 Considerate software takes responsibility 190

Considerate Software Is Possible 190 Chapter 15 Making Software Smart 191

Putting the Idle Cycles to Work 191 Wasted cycles 192 Putting the cycles to better use 192

Giving Software a Memory 192 Task Coherence 193

Remembering choices and defaults 193 Remembering patterns 194

Actions to Remember 195 File locations 195 Deduced information 195 Multi-session undo 195 Past data entries 195 Foreign application activities on program files 196

Applying Memory to Your Applications 196 Decision-set reduction 196 Preference thresholds 197 Mostly right, most of the time 198

Memory Makes a Difference 198 Chapter 16 Improving Data Retrieval 199

Storage and Retrieval Systems 199 Storage and Retrieval in the Physical World 199

Everything in its place: Storage and retrieval by location 199 Indexed retrieval 200

Table of Contents

Storage and Retrieval in the Digital World 200 Retrieval methods 201 An attribute-based retrieval system 201

Relational Databases versus Digital Soup 203 Organizing the unorganizable 203 Problems with databases 203 The attribute-based alternative 204

Natural Language Output: An Ideal Interface for Attribute-Based Retrieval 205

Chapter 17 Improving Data Entry 207 Data Integrity versus Data Immunity 207

Data immunity 208 What about lost data? 209 Data entry and fudgeability 210

Auditing versus Editing 211 Chapter 18 Designing for Different Needs 215

Command Vectors and Working Sets 215 Immediate and pedagogic vectors 215 Working sets and personas 216

Graduating Users from Beginners to Intermediates 216 World vectors and head vectors 217 Memorization vectors 217

Personalization and Configuration 218 Idiosyncratically Modal Behavior 219 Localization and Globalization 220 Galleries and Templates 221

Part IV Applying Visual Design Principles

Chapter 19 Designing Look and Feel 225 Visual Art versus Visual Design 225 Graphic Design and Visual Interface Design 225

Graphic design and user interfaces 226 Visual interface design and visual information design 226 Industrial design 226

Principles of Visual Interface Design 227 Avoid visual noise and clutter 227 Use contrast and layering to distinguish and

organize elements 228 Provide visual structure and flow at each level

of organization 230 Use cohesive, consistent, and contextually appropriate

imagery 234 Integrate style and function comprehensively

and purposefully 236

xx Table of Contents

Principles of Visual Information Design 237 Enforce visual comparisons 238 Show causality 238 Show multiple variables 239 Integrate text, graphics, and data in one display 239 Ensure the quality, relevance, and integrity of the content 239 Show things adjacently in space, not stacked in time 240 Don't de-quantify quantifiable data 240

Use of Text and Color in Visual Interfaces 241 Use of text 241 Use of color 242 Misuse of color 243

Consistency and Standards 243 Benefits of interface standards 244 Risks of interface standards 244 Standards, guidelines, and rules of thumb 244 When to violate guidelines 245 Consistency and standards across applications 245

Chapter 20 Metaphors, Idioms, and Affordances 247 Interface Paradigms 247

Implementation-centric interfaces 247 Metaphoric interfaces 248 Idiomatic interfaces 250

Further Limitations of Metaphors 252 Finding good metaphors 252 The problems with global metaphors 252 Macs and metaphors: A revisionist view 254

Building Idioms 255 Manual Affordances 256

Semantics of manual affordances 257 Fulfilling user expectations of affordances 258

Section Three Interaction Details

Part V Mice and Manipulation

Chapter 21 Direct Manipulation and Pointing Devices 263 Direct Manipulation 263

Program manipulation versus content manipulation 264 Three phases of the direct manipulation process 265 Visual feedback for direct manipulation idioms 265 Direct manipulation is critical to effective interaction 265

Pointing Devices 266 Light Pens and CRTs 266 Mice and indirect manipulation 267

Table of Contents

Other pointing devices 267 The return of the pen? 269

Using the Mouse 269 How many mouse buttons? 271 The left mouse button 272 The right mouse button 272 The middle mouse button 272 Pointing and clicking with a mouse 273 Up and down events 275 The cursor 276 Pliancy and hinting 276 Input focus 279 Meta-keys 280

Chapter 22 Selection 281 Object-Verb Ordering and Selection 281 Discrete and Contiguous Selection 282

Mutual Exclusion 283 Additive Selection 283 Insertion and Replacement 284 Group Selection 285

Visual Indication of Selection 286 Inversion 286 Selecting multicolor objects 287

Chapter 23 Drag and Drop 289 Defining Drag-and-Drop 289 Interior and Exterior Drag-and-Drop 289 The Source-and-Target Paradigm 290

Dragging data objects to target functions 290 Dragging function objects to target data 291

Source-and-Target Interactions 291 Visual feedback while dragging 292 Completing the drag-and-drop operation 294 Insertion targets 294 Visual feedback at completion 294

Other Drag-and-Drop Interaction Issues 295 Auto-scrolling 295 Avoiding drag-and-drop twitchiness 297 Mouse vernier 299

Chapter 24 Manipulating Controls, Objects, and Connections 303 Control Manipulation 303

Click-and-drag 303 Escaping from capture 304 Pliant response 305 Click-and-drag controls 306 Palette tool behaviors 306

xxii Table of Contents

Object Manipulation 308 Repositioning 309 Resizing and reshaping 309 Resizing and reshaping meta-key variants 311 3D object manipulation 312

Object Connection 316

Part VI Controls and Their Behaviors

Chapter 25 Window Behaviors 321 PARC and the Alto 321 PARC's Principles 322

Visual metaphors 322 Avoiding modes 322 Overlapping windows 323

Microsoft and Tiled Windows 324 Full-Screen Applications 324 Multipaned Applications 325 Choosing Your Windows 326

Unnecessary rooms 326 Necessary rooms 328 Windows pollution 329

Window States 331 Why minimize? 331 Why pluralize? 333

MDI versus SDI 334 Chapter 26 Using Controls 337

Avoiding Control-Laden Dialog Boxes 337 Imperative Controls 338

Push-buttons 338 Butcons 339

Selection Controls 340 Check boxes 340 Flip-flop buttons: A selection idiom to avoid 341 Radio buttons 342 Combutcons 343 List controls 345 Comboboxes 350 Tree controls 351

Entry Controls 351 Bounded and unbounded entry controls 352 Spinners 353 Unbounded entry: Text edit controls 354

Display Controls 359 Text controls 359 Those darned scrollbars 360

таЫе of Cor tents xxili

Sliders and dials 361 Thumbwheels 361 Splitters 361 Drawers and levers 362

Chapter 27 Menus: The Pedagogic Vector 363 The Command-Line interface 363 Sequential Hierarchical Menus 364 The Lotus 1-2-3 Interface 365 Drop-Down and Pop-Up Menus 366 Menus Today: The Pedagogic Vector 367

Chapter 28 Using Menus 371 Standard Menus 371

The File menu 372 The Edit menu 372 The Windows menu 373 The Help menu 373

Optional Menus 373 The View menu 373 The Insert menu 373 The Settings menu 373 The Format menu 373 The Tools menu 374

Problematic Menu Idioms 374 Cascading Menus 374 Expanding Menus 375 Bang Menus 376

Menu Item Conventions and Variants 376 Disabling menu items 376 Checkmark menu items 377 Flip-flop menu items 377 Icons on menus 377 Accelerators 378 Mnemonics 379

The Windows System Menu 380 Chapter 29 Using Toolbars and ToolTips 381

Toolbars: Visible, Immediate Functionality 381 Toolbars are not menus 381 Toolbars freed menus to teach 382

Toolbars and Toolbar Controls 382 Icons versus text on toolbars 382 The problem with labeling butcons 383

Explaining Toolbar Controls 383 Balloon help: A first attempt 384 ToolTips 384 Disabling toolbar controls 386

•J l , Т . Н . „ Г ! - „ , » _ „ , . it

xxiv Table от Contents

Evolution of the Toolbar 386 State-indicating toolbar controls 387 Menus on toolbars 387 Movable toolbars 387 Customizable toolbars 389

The Windows Taskbar: Special Purpose Toolbars 389 The Start menu 390 Quick Start toolbar 390 Window buttons 390 The status area 391 More toolbars on the Taskbar? 391

Chapter 30 Using Dialogs 393 Dialogs Suspend Normal Interaction 393 Dialog Box Basics 394

Modal dialog boxes 395 Modeless dialog boxes 396 Modeless dialog issues 396 T\vo solutions for better modeless dialogs 397

Goal-Directed Dialog Boxes 401 Property dialog boxes 401 Function dialog boxes 402 Process dialog boxes 404 Eliminating process dialogs 406 Bulletin dialog boxes 406

Chapter 31 Dialog Etiquette 409 Politeness as a Dialog Virtue 409 The Title Bar 409 Transient Posture 410 Reduce Excise 412

Know where you are needed 412 Know if you are needed 413

Terminating Commands for Modal Dialogs 413 The Close box 415 The Help button 415

Keyboard Shortcuts 415 Tabbed Dialogs 417

Breadth versus depth 418 Stacked tabs: Dialog abuse 418

Expanding Dialogs 420 Cascading Dialogs 421 Dynamic Dialogs 422

Chapter 32 Creating Better Controls 425 Direct Manipulation Controls 425

Example 1: Draggable drop shadows 425 Example 2: Specifying grids 426

Extraction Controls 426 Visual Controls 429

Table of Contents xxv

Part VII Communicating with Users

Chapter 33 Eliminating Errors 435 Errors Are Abused 435 Why We Have So Many Error Messages 435 What's Wrong with Error Messages 436

People hate error messages 436 Whose mistake is it, qnyway? 437 Error messages don't'work 439

Eliminating Error Messages 439 Making errors impossible 440 Positive feedback 441

Aren't There Exceptions? 442 Improving Error Messages: The Last Resort 443 The End of Errors 444

Chapter 34 Notifying and Confirming 445 Alerts and Confirmations 445

Alerts: Announcing the obvious 445 Confirmations 447

Replacing Dialogs: Rich Modeless Feedback 451 Rich visual modeless feedback 451 Audible feedback 453

Chapter 35 Other Communication with Users 457 Your Identity on the Desktop 457

Your program's name 457 Your program's icon 458

Ancillary Application Windows 458 About boxes 458 Splash screens 461 Shareware splash screens 461

Online help 462 The index 462 Shortcuts and overview 462 Not for beginners 463 Modeless and interactive help 463 Wizards 463 "Intelligent" agents 464

Chapter 36 The Installation Process 465 The Best Installation Is No Installation 465 One Damned Thing after Another 466

Demanding responses without informing you of the consequences 467

Not informing you of the scope of your actions 468 Asking you questions to which you are unlikely

to know the answer 469 Asking you for answers it can determine for itself 470

xxvi Tab!--: of (onl-:;it!,

Not doing its homework 470 Not providing a means for uninstallation 470 Ignoring evidence of its previous activity 472 Abusing system-wide files 472 Putting files where they don't belong 472 Overwriting shared files 473 Not offering you any information about the program 473 Confusing installation with configuration 473 Demanding your active participation 474

Part VIM Designing Beyond the Desktop

Chapter 37 Designing for the Web 477 The Good News and the Bad News 477 Common Myths about Web Design 478 Web Sites versus Web Applications 481

Web sites 481 Web applications 481

Chapter 38 Designing for Embedded Systems 489 General Design Principles 489

Don't think of your product as a computer 490 Integrate your hardware and software design 490 Context drives the design 491 Use modes judiciously 492 Limit the scope 493 Balance navigation with display density 493 Minimize input complexity 494 Customize for your platform 494

Designing for Handhelds 494 Designing for Kiosks 497

Kiosk posture and navigation 497 Transaction versus exploration 497 Interaction in a public environment 498 Managing input 498

Designing for Audible Interfaces 499

Afterword: Dealing with the Inmates 501

Appendix A: Axioms 507

Appendix B: Design Tips 511

Appendix C: Bibliography 515

Index 519