GUIdebook > Books > “GUI bloopers”

Home > Books > “GUI bloopers”

Jeff Johnson
GUI bloopers
Don’ts and do’s for software developers and web designers
Morgan Kaufmann, 2000
584 pages
ISBN: 1-5586-0582-7

This is a book intended not for GUI historians (presented here are common Windows and Mac OS interface elements), but rather GUI practicioners and beginner GUI theorists. Described here at length are a couple of dozens of most common GUI blunders (such as using radio buttons where checkboxes are appropriate), with real life examples and design rules. The language is straightforward and accessible, but the whole 600-page book seems a little bit too drawn-out. Nevertheless, it is one-of-its-kind injection of GUI common sense, definitely worth getting familiar with.

The following paragraphs are quoted verbatim from the back cover:

GUI Bloopers looks at user interface design bloopers from commercial software, Web sites, and information appliances, explaining how intelligent, well-intentioned professionals make 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.

Features
Takes a learn-by-example approach that teaches you to avoid common errors by asking the appropriate questions of your own interface designs.
Includes two complete war stories drawn from the author’s personal experience.
Covers bloopers in a wide range of categories: GUI components, layout and appearance, text messages, interaction strategies, Web site design, responsiveness issues, management decision-making, and even more at www.gui-bloopers.com.
Organized and formatted based on the results of its own usability testing – so you can quickly find the information you need, packaged in easily digested pieces.

Jeff Johnson is a consultant at UI Wizards, Inc., a product usability consulting firm (www.uiwizards.com ). He has worked in the field of Human-Computer Interaction since 1978 as a software designer, usability tester, manager, and researcher.

Acknowledgmentsxv
Introduction1
Chapter 1: First Principles
Introduction10
1. Principle 1: Focus on the users and their tasks, not the technology10
1.1. Understand the users11
1.2. Understand the tasks14
1.3. Interactive products and services function in a broad context19
2. Principle 2: Consider function first, presentation later22
2.1. What “consider function first” does not mean23
2.2. What “consider function first” does mean23
2.3. Develop a conceptual model24
3. Principle 3: Conform to the users’ view of the task30
3.1. Strive for naturalness30
3.2. Use the users’ vocabulary, not your own33
3.3. Keep program internals inside the program34
3.4. Find the correct point on the power/complexity trade-off34
4. Principle 4: Don’t complicate the users’ task36
4.1. Common tasks should be easy36
4.2. Don’t give users extra problems to solve37
5. Principle 5: Promote learning39
5.1. Think “outside-in,” not “inside-out”39
5.2. Consistency, consistency, consistency, but don’t be naive about it42
5.3. Provide a low-risk environment44
6. Principle 6: Deliver information, not just data44
6.1. Design displays carefully; get professional help45
6.2. The screen belongs to the user47
6.3. Preserve display inertia48
7. Principle 7: Design for responsiveness49
7.1. Defining responsiveness and the lack thereof49
7.2. Responsiveness on the Web: A big deal50
7.3. Summary of responsiveness design principles50
8. Principle 8: Try it out on users, then fix it!51
8.1. Test results can surprise even experienced designers52
8.2. Schedule time to correct problems found by tests52
8.3. Testing has two goals: Informational and social52
8.4. There are tests for every time and purpose54
Further reading56
Chapter 2: GUI Component Bloopers
Introduction60
1. Complicating access to functionality62
1.1. Blooper 1: Dynamic menus62
1.2. Blooper 2: Duplicate menu items67
1.3. Blooper 3: Hidden functions71
1.4. Blooper 4: No keyboard equivalents74
2. Unconventional application windows78
2.1. Blooper 5: Confusing primary windows with dialog boxes78
2.2. Blooper 6: Commands are only on toolbar buttons82
2.3. Blooper 7: All menubar commands are on toolbar84
3. Misusing choice controls and tabs86
3.1. Blooper 8: Confusing checkboxes and radiobuttons86
3.2. Blooper 9: One-from-AT settings with no initial value94
3.3. Blooper 10: Using a checkbox for a non-ON/OFF setting96
3.4. Blooper 11: Using command buttons as toggles99
3.5. Blooper 12: Using tabs as radiobuttons102
3.6. Blooper 13: Too many tabs106
4. Providing faulty feedback111
4.1. Blooper 14: Buttons that trigger on “mouse down”111
4.2. Blooper 15: Ambiguous selections114
4.3. Blooper 16: Not showing busy cursor118
5. Abusing text fields121
5.1. Blooper 17: Using text fields for read-only data121
5.2. Blooper 18: Overusing text fields126
5.3. Blooper 19: Type-in fields that behave abnormally129
Further reading132
Chapter 3: Layout and Appearance Bloopers
Introduction136
1. Poor layout and arrangement of windows and dialog boxes136
1.1. Blooper 20: Mixing dialog box control buttons with content control buttons136
1.2. Blooper 21: Layout that doesn’t reflect usual or natural order of settings139
1.3. Blooper 22: Poor initial window location144
2. Goofs with group boxes and separators149
2.1. Blooper 23: Misusing group boxes149
2.2. Blooper 24: Inconsistent group box style155
2.3. Blooper 25: Inconsistent separator style157
3. Shoddy labeling and spacing158
3.1. Blooper 26: Radiobuttons spaced too far apart159
3.2. Blooper 27: Inconsistent property label alignment161
3.3. Blooper 28: Poor label placement165
3.4. Blooper 29: Unlabeled scrolling container components168
4. Troublesome typography and graphic design171
4.1. Blooper 30: Inconsistent text fonts171
4.2. Blooper 31: Tiny fonts175
4.3. Blooper 32: Inactive controls insufficiently grayed out180
Further reading186
Chapter 4: Textual Bloopers
Introduction188
1. Unprofessional writing189
1.1. Blooper 33: Inconsistent terminology189
1.2. Blooper 34: Unclear terminology198
1.3. Blooper 35: Speaking Geek203
1.4. Blooper 36: Careless writing216
2. Unfriendly messages and labels222
2.1. Blooper 37: Clueless error messages222
2.2. Blooper 38: Misuse (or nonuse) of “...” on command labels229
2.3. Blooper 39: Inconsistent use of colons on setting labels233
2.4. Blooper 40: Tooltips that say the same thing as the visible label235
3. Misleading window titles236
3.1. Blooper 41: Same title on different windows236
3.2. Blooper 42: Window title doesn’t match invoking command240
Further reading244
Chapter 5: Interaction Bloopers
Introduction248
1. Allowing implementation to dictate GUI249
1.1. Blooper 43: Exposing the implementation to users249
1.2. Blooper 44: Asking users for random numbers253
1.3. Blooper 45: TTY GUIs256
2. Presenting information poorly260
2.1. Blooper 46: Overwhelming users with decisions and detail260
2.2. Blooper 47: Easily missed information267
2.3. Blooper 48: Unexpected rearrangement of display278
2.4. Blooper 49: Instructions that go away too soon283
3. Setting stumbling blocks for users285
3.1. Blooper 50: Similar functions with inconsistent user interfaces285
3.2. Blooper 51: Unnecessary or poorly marked modes288
3.3. Blooper 52: Installation nightmares305
4. Diabolical dialog boxes309
4.1. Blooper 53: Too many levels of dialog boxes309
4.2. Blooper 54: Dialog boxes that trap users316
4.3. Blooper 55: Cancel button doesn’t cancel323
4.4. Blooper 56: OK and Cancel do the same thing328
Further reading330
Chapter 6: Web Bloopers
Introduction332
1. Web structure and interaction bloopers335
1.1. Blooper 57: Web site structure reflects organization structure or history335
1.2. Blooper 58: Back doesn’t go where users expect339
1.3. Blooper 59: Complicating searching342
2. Web component, layout, and appearance bloopers346
2.1. Blooper 60: Hidden links346
2.2. Blooper 61: Links that don’t provide enough information353
2.3. Blooper 62: Buttons that provide no click feedback358
2.4. Blooper 63: Displaying long lists as very long pages360
Further reading365
Chapter 7: Responsiveness Bloopers
Introduction368
1. Common responsiveness bloopers (Bloopers 64-75)369 
1.1. Examples of responsiveness bloopers370
2. Reasons for poor responsiveness372
2.1. Reason 1: The facts about responsiveness are not widely known372
2.2. Reason 2: UI designers rarely consider responsiveness during design373
2.3. Reason 3: Programmers equate responsiveness with performance374
2.4. Reason 4: Programmers treat user input like machine input376
2.5. Reason 5: Developers use simple, naive implementations377
2.6. Reason 6: GUI software tools, components, and platforms are inadequate380
2.7. Reason 7: Managers hire GUI programmers who lack the required skill380
3. Avoiding responsiveness bloopers: Design principles381
3.1. Responsiveness is not the same thing as performance381
3.2. Processing resources are always limited382
3.3. The user interface is a real-time interface383
3.4. All delays are not equal; the software need not do everything immediately384
3.5. The software need not do tasks in the order in which they were requested386
3.6. The software need not do everything it was asked to do386
3.7. Human users are not computer programs387
4. Avoiding responsiveness bloopers: Techniques388
4.1. Timely feedback389
4.2. Parallel problem solution395
4.3. Queue optimization397
4.4. Dynamic time management399
4.5. Summary of responsiveness techniques404
4.6. Overcoming the obstacles to adoption of responsiveness techniques405
Further reading409
Chapter 8: Management Bloopers
Introduction412
1. Counterproductive attitude414
1.1. Blooper 76: Misunderstanding what user interface professionals do414
1.2. Blooper 77: Treating user interface as low priority419
1.3. Blooper 78: Discounting the value of testing and iterative design424
2. Counterproductive process435
2.1. Blooper 79: Using poor tools and building blocks435
2.2. Blooper 80: Anarchic development441
2.3. Blooper 81: No task domain expertise on the design team450
2.4. Blooper 82: Giving programmers the fastest computers463
Further reading465
Chapter 9: Software Reviews
Introduction468
1. Eudora Pro 4.0 installation468
1.1. The ordeal468
1.2. Conclusions477
2. Kodak Picture Disk 1.2478
2.1. Executive summary479
2.2. Organization479
2.3. Limitations480
2.4. General480
2.5. Startup482
2.6. Main window483
2.7. Slideshow dialog box485
2.8. Slideshow window486
2.9. Edit Picture window488
2.10. Print Preview window489
2.11. Print Setup dialog box490
2.12. Print Setup Options dialog box491
2.13. Rotate Picture dialog box491
2.14. Organize Pictures dialog box492
2.15. Export dialog box493
Chapter 10: War Stories of a User Interface Consultant
Introduction498
1. A Fork in the Tale: Simplifying the controls of an interactive movie game498
1.1. Background498
1.2. The analysis500
1.3. Redesign: Physical actions503
1.4. Redesign: Speech and thought506
1.5. Redesign: Evaluation and discussion513
1.6. Other aspects of the user interface514
1.7. Lessons and concluding thoughts514
2. The Flintstones may be in your TV: Designing controls for a set-top box515
2.1. Job 1: UI review that unexpectedly turned into a UI design516
2.2. Job 2: UI review to check implementation of design526
2.3. Job 3: Emergency redesign of a front panel529
2.4. Job 4: Second UI design531
2.5. Lessons learned533
Appendix: How This Book Was Usability Tested535
Bibliography539
Index545
About the Author560