GUI bloopers : don'ts and do's for software developers and Web designers

GUI Bloopers looks at user interface design bloopers from commercial software, Web sites, and information appliances, explaining how intelligent, well-intentioned professionals made these dreadful mistakes--and how you can avoid them. While equipping you with all the theory needed to learn from these examples, GUI expert Jeff Johnson also presents the reality of interface design in an entertaining, anecdotal, and instructive way.

This is an excellent, well-illustrated resource for anyone whose work touches on usability issues, including software engineers, Web site designers, managers of development processes, QA professionals, and usability professionals.Hear Jeff Johnson's interview podcast on software and website usability at the University of Canterbury (25 min.)

• Acknowledgments p. xv
• Introduction p. 1
• Chapter 1 First Principles
• Introduction p. 10
• 1.1 Principle 1: Focus on the users and their tasks, not the technology p. 10
• 1.1.1 Understand the users p. 11
• 1.1.2 Understand the tasks p. 14
• 1.1.3 Interactive products and services function in a broad context p. 19
• 1.2 Principle 2: Consider function first, presentation later p. 22
• 1.2.1 What "consider function first" does not mean p. 23
• 1.2.2 What "consider function first" does mean p. 23
• 1.2.3 Develop a conceptual model p. 24
• 1.3 Principle 3: Conform to the users' view of the task p. 30
• 1.3.1 Strive for naturalness p. 30
• 1.3.2 Use the users' vocabulary, not your own p. 33
• 1.3.3 Keep program internals inside the program p. 34
• 1.3.4 Find the correct point on the power/complexity trade-off p. 34
• 1.4 Principle 4: Don't complicate the users' task p. 36
• 1.4.1 Common tasks should be easy p. 36
• 1.4.2 Don't give users extra problems to solve p. 37
• 1.5 Principle 5: Promote learning p. 39
• 1.5.1 Think "outside-in," not "inside-out" p. 39
• 1.5.2 Consistency, consistency, consistency, but don't be naive about it p. 42
• 1.5.3 Provide a low-risk environment p. 44
• 1.6 Principle 6: Deliver information, not just data p. 44
• 1.6.1 Design displays carefully; get professional help p. 45
• 1.6.2 The screen belongs to the user p. 47
• 1.6.3 Preserve display inertia p. 48
• 1.7 Principle 7: design for responsiveness p. 49
• 1.7.1 Defining responsiveness and the lack thereof p. 49
• 1.7.2 Responsiveness on the Web: A big deal p. 50
• 1.7.3 Summary of responsiveness design principles p. 50
• 1.8 Principle 8: Try it out on users, then fix it! p. 51
• 1.8.1 Test results can surprise even experienced designers p. 52
• 1.8.2 Schedule time to correct problems found by tests p. 52
• 1.8.3 Testing has two goals: Informational and social p. 52
• 1.8.4 There are tests for every time and purpose p. 54
• Further reading p. 56
• Chapter 2 GUI Component Bloopers
• Introduction p. 60
• 2.1 Complicating access to functionality p. 62
• 2.1.1 Blooper 1: Dynamic menus p. 62
• 2.1.2 Blooper 2: Duplicate menu items p. 67
• 2.1.3 Blooper 3: Hidden functions p. 71
• 2.1.4 Blooper 4: No keyboard equivalents p. 74
• 2.2 Unconventional application windows p. 78
• 2.2.1 Blooper 5: Confusing primary windows with dialog boxes p. 78
• 2.2.2 Blooper 6: Commands are only on toolbar buttons p. 82
• 2.2.3 Blooper 7: All menubar commands are on toolbar p. 84
• 2.3 Misusing choice controls and tabs p. 86
• 2.3.1 Blooper 8: Confusing checkboxes and radiobuttons p. 86
• 2.3.2 Blooper 9: One-from-N settings with no initial value p. 94
• 2.3.3 Blooper 10: Using a checkbox for a non-ON/OFF setting p. 96
• 2.3.4 Blooper 11: Using command buttons as toggles p. 99
• 2.3.5 Blooper 12: Using tabs as radiobuttons p. 102
• 2.3.6 Blooper 13: Too many tabs p. 106
• 2.4 Providing faulty feedback p. 111
• 2.4.1 Blooper 14: Buttons that trigger on "mouse down" p. 111
• 2.4.2 Blooper 15: Ambiguous selections p. 114
• 2.4.3 Blooper 16: Not showing busy cursor p. 118
• 2.5 Abusing text fields p. 121
• 2.5.1 Blooper 17: Using text fields for read-only data p. 121
• 2.5.2 Blooper 18: Overusing text fields p. 126
• 2.5.3 Blooper 19: Type-in fields that behave abnormally p. 129
• Further reading p. 132
• Chapter 3 Layout and Appearance Bloopers
• Introduction p. 136
• 3.1 Poor layout and arrangement of windows and dialog boxes p. 136
• 3.1.1 Blooper 20: Mixing dialog box control buttons with content control buttons p. 136
• 3.1.2 Blooper 21: Layout that doesn't reflect usual or natural order of settings p. 139
• 3.1.3 Blooper 22: Poor initial window location p. 144
• 3.2 Goofs with group boxes and separators p. 149
• 3.2.1 Blooper 23: Misusing group boxes p. 149
• 3.2.2 Blooper 24: Inconsistent group box style p. 155
• 3.2.3 Blooper 25: Inconsistent separator style p. 157
• 3.3 Shoddy labeling and spacing p. 158
• 3.3.1 Blooper 26: Radiobuttons spaced too far apart p. 159
• 3.3.2 Blooper 27: Inconsistent property label alignment p. 161
• 3.3.3 Blooper 28: Poor label placement p. 165
• 3.3.4 Blooper 29: Unlabeled scrolling container components p. 168
• 3.4 Troublesome typography and graphic design p. 171
• 3.4.1 Blooper 30: Inconsistent text fonts p. 171
• 3.4.2 Blooper 31: Tiny fonts p. 175
• 3.4.3 Blooper 32: Inactive controls insufficiently grayed out p. 180
• Further reading p. 186
• Chapter 4 Textual Bloopers
• Introduction p. 188
• 4.1 Unprofessional writing p. 189
• 4.1.1 Blooper 33: Inconsistent terminology p. 189
• 4.1.2 Blooper 34: Unclear terminology p. 198
• 4.1.3 Blooper 35: Speaking Geek p. 203
• 4.1.4 Blooper 36: Careless writing p. 216
• 4.2 Unfriendly messages and labels p. 222
• 4.2.1 Blooper 37: Clueless error messages p. 222
• 4.2.2 Blooper 38: Misuse (or nonuse) of "..." on command labels p. 229
• 4.2.3 Blooper 39: Inconsistent use of colons on setting labels p. 233
• 4.2.4 Blooper 40: Tooltips that say the same thing as the visible label p. 235
• 4.3 Misleading window titles p. 236
• 4.3.1 Blooper 41: Same title on different windows p. 236
• 4.3.2 Blooper 42: Window title doesn't match invoking command p. 240
• Further reading p. 244
• Chapter 5 Interaction Bloopers
• Introduction p. 248
• 5.1 Allowing implementation to dictate GUI p. 249
• 5.1.1 Blooper 43: Exposing the implementation to users p. 249
• 5.1.2 Blooper 44: Asking users for random numbers p. 253
• 5.1.3 Blooper 45: TTY GUIs p. 256
• 5.2 Presenting information poorly p. 260
• 5.2.1 Blooper 46: Overwhelming users with decisions and detail p. 260
• 5.2.2 Blooper 47: Easily missed information p. 267
• 5.2.3 Blooper 48: Unexpected rearrangement of display p. 278
• 5.2.4 Blooper 49: Instructions that go away too soon p. 283
• 5.3 Setting stumbling blocks for users p. 285
• 5.3.1 Blooper 50: Similar functions with inconsistent user interfaces p. 285
• 5.3.2 Blooper 51: Unnecessary or poorly marked modes p. 288
• 5.3.3 Blooper 52: Installation nightmares p. 305
• 5.4 Diabolical dialog boxes p. 309
• 5.4.1 Blooper 53: Too many levels of dialog boxes p. 309
• 5.4.2 Blooper 54: Dialog boxes that trap users p. 316
• 5.4.3 Blooper 55: Cancel button doesn't cancel p. 323
• 5.4.4 Blooper 56: OK and Cancel do the same thing p. 328
• Further reading p. 330
• Chapter 6 Web Bloopers
• Introduction p. 332
• 6.1 Web structure and interaction bloopers p. 335
• 6.1.1 Blooper 57: Web site structure reflects organization structure or history p. 335
• 6.1.2 Blooper 58: Back doesn't go where users expect p. 339
• 6.1.3 Blooper 59: Complicating searching p. 342
• 6.2 Web component, layout, and appearance bloopers p. 346
• 6.2.1 Blooper 60: Hidden links p. 346
• 6.2.2 Blooper 61: Links that don't provide enough information p. 353
• 6.2.3 Blooper 62: Buttons that provide no click feedback p. 358
• 6.2.4 Blooper 63: Displaying long lists as very long pages p. 360
• Further reading p. 365
• Chapter 7 Responsiveness Bloopers
• Introduction p. 368
• 7.1 Common responsiveness bloopers (Bloopers 64-75) p. 369
• 7.1.1 Examples of responsiveness bloopers p. 370
• 7.2 Reasons for poor responsiveness p. 372
• 7.2.1 Reason 1: The facts about responsiveness are not widely known p. 372
• 7.2.2 Reason 2: UI designers rarely consider responsiveness during design p. 373
• 7.2.3 Reason 3: Programmers equate responsiveness with performance p. 374
• 7.2.4 Reason 4: Programmers treat user input like machine input p. 376
• 7.2.5 Reason 5: Developers use simple, naive implementations p. 377
• 7.2.6 Reason 6: GUI software tools, components, and platforms are inadequate p. 380
• 7.2.7 Reason 7: Managers hire GUI programmers who lack the required skill p. 380
• 7.3 Avoiding responsiveness bloopers: Design principles p. 381
• 7.3.1 Responsiveness is not the same thing as performance p. 381
• 7.3.2 Processing resources are always limited p. 382
• 7.3.3 The user interface is a real-time interface p. 383
• 7.3.4 All delays are not equal; the software need not do everything immediately p. 384
• 7.3.5 The software need not do tasks in the order in which they were requested p. 386
• 7.3.6 The software need not do everything it was asked to do p. 386
• 7.3.7 Human users are not computer programs p. 387
• 7.4 Avoiding responsiveness bloopers: Techniques p. 388
• 7.4.1 Timely feedback p. 389
• 7.4.2 Parallel problem solution p. 395
• 7.4.3 Queue optimization p. 397
• 7.4.4 Dynamic time management p. 399
• 7.4.5 Summary of responsiveness techniques p. 404
• 7.4.6 Overcoming the obstacles to adoption of responsiveness techniques p. 405
• Further reading p. 409
• Chapter 8 Management Bloopers
• Introduction p. 412
• 8.1 Counterproductive attitude p. 414
• 8.1.1 Blooper 76: Misunderstanding what user interface professionals do p. 414
• 8.1.2 Blooper 77: Treating user interface as low priority p. 419
• 8.1.3 Blooper 78: Discounting the value of testing and iterative design p. 424
• 8.2 Counterproductive process p. 435
• 8.2.1 Blooper 79: Using poor tools and building blocks p. 435
• 8.2.2 Blooper 80: Anarchic development p. 441
• 8.2.3 Blooper 81: No task domain expertise on the design team p. 450
• 8.2.4 Blooper 82: Giving programmers the fastest computers p. 463
• Further reading p. 465
• Chapter 9 Software Reviews
• Introduction p. 468
• 9.1 Eudora Pro 4.0 installation p. 468
• 9.1.1 The ordeal p. 468
• 9.1.2 Conclusions p. 477
• 9.2 Kodak Picture Disk 1.2 p. 478
• 9.2.1 Executive summary p. 479
• 9.2.2 Organization p. 479
• 9.2.3 Limitations p. 480
• 9.2.4 General p. 480
• 9.2.5 Startup p. 482
• 9.2.6 Main window p. 483
• 9.2.7 Slideshow dialog box p. 485
• 9.2.8 Slideshow window p. 486
• 9.2.9 Edit Picture window p. 488
• 9.2.10 Print Preview window p. 489
• 9.2.11 Print Setup dialog box p. 490
• 9.2.12 Print Setup Options dialog box p. 491
• 9.2.13 Rotate Picture dialog box p. 491
• 9.2.14 Organize Pictures dialog box p. 492
• 9.2.15 Export dialog box p. 493
• Chapter 10 War Stories of a User Interface Consultant
• Introduction p. 498
• 10.1 A Fork in the Tale: Simplifying the controls of an interactive movie game p. 498
• 10.1.1 Background p. 498
• 10.1.2 The analysis p. 500
• 10.1.3 Redesign: Physical actions p. 503
• 10.1.4 Redesign: Speech and thought p. 506
• 10.1.5 Redesign: Evaluation and discussion p. 513
• 10.1.6 Other aspects of the user interface p. 514
• 10.1.7 Lessons and concluding thoughts p. 514
• 10.2 The Flintstones may be in your TV: Designing controls for a set-top box p. 515
• 10.2.1 Job 1: UI review that unexpectedly turned into a UI design p. 516
• 10.2.2 Job 2: UI review to check implementation of design p. 526
• 10.2.3 Job 3: Emergency redesign of a front panel p. 529
• 10.2.4 Job 4: Second UI design p. 531
• 10.2.5 Lessons learned p. 533
• Appendix How This Book Was Usability Tested p. 535
• Bibliography p. 539
• Index p. 545
• About the Author p. 560