User interface design for humans

315 Pages·2011·18.875 MB·English

by  Lukas Mathis

What Readers Are Saying About Designed for Use
An encyclopedic narrative of the life cycle of software UX design,
stuffed with best practices, timely examples, and solid design method-
ologies. I wish I had it years ago!
Keith Lang
COO and interaction designer, Skitch
It’s hard to write about usability concepts without sounding overly
academic, but that’s exactly what Lukas has done. This book is a
must-read if you are familiar with basic usability concepts and are
ready to learn more.
Jon Bell
Interaction designer, Windows Phone
DesignedforUse distills Lukas’s brilliant insight into the much
neglected area of usability, UX, and UI design. An essential, authori-
tative, and enlightening read.
Paul Neave
Interaction designer, Neave Interactive
This book is smooth and pleasing like Swiss chocolate and has the
eloquence of a cherry blossom. It’s a must-read and real gem for
everybody who is eager to learn about usability.
Michael D. Trummer
Senior engagement manager, Appway, Inc.
Make good use of this book! It will help you to improve your work.
David Naef
Creative director, Design Management, Visionaer
Designed for Use
Usable Interfaces for Applications and the Web
Lukas Mathis
The Pragmatic Bookshelf
Raleigh,NorthCarolina Dallas,Texas
Many of the designations used by manufacturers and sellers to distinguish their prod-
uctsareclaimedastrademarks.Wherethosedesignationsappearinthisbook,andThe
Pragmatic Programmers, LLC was aware of a trademark claim, the designations have
been printed in initial capital letters or in all capitals. The Pragmatic Starter Kit, The
PragmaticProgrammer,PragmaticProgramming,PragmaticBookshelfandthelinkingg
devicearetrademarksofThePragmaticProgrammers,LLC.
Every precaution was taken in the preparation of this book. However, the publisher
assumes no responsibilityfor errorsor omissions, or for damages that may result from
theuseofinformation(includingprogramlistings)containedherein.
Our Pragmatic courses, workshops, and other products can help you and your team
create better software and have more fun. For more information, as well as the latest
Pragmatictitles,pleasevisitusathttp://www.pragprog.com.
Theteamthatproducedthisbookincludes:
Editor: JillSteinberg
Indexing: PotomacIndexing,LLC
Copyedit: KimWimpsett
Production: JanetFurlow
Customersupport: EllieCallahan
International: JulietBenda
Copyright©2011PragmaticProgrammers,LLC.
Allrightsreserved.
Nopartofthispublicationmaybereproduced,storedinaretrievalsystem,ortransmit-
ted, in any form, or by any means, electronic, mechanical, photocopying, recording, or
otherwise,withoutthepriorconsentofthepublisher.
PrintedintheUnitedStatesofAmerica.
ISBN-13:978-1-93435-675-3
Printedonacid-freepaper.
P1.1aprinting,July2011
Version:2011-7-8
For Regula and Werner
Contents
Before We Start, a Word 12
Technique Chapters . . . . . . . . . . . . . . . . . . . . . . 12
Idea Chapters . . . . . . . . . . . . . . . . . . . . . . . . . . 13
How the Book Is Organized . . . . . . . . . . . . . . . . . . 15
Just One More Thing . . . . . . . . . . . . . . . . . . . . . . 16
I Research 17
1 User Research 19
2 Job Shadowing and Contextual Interviews 23
2.1 Observing Your Audience. . . . . . . . . . . . . . . . 24
2.2 Job Shadowing . . . . . . . . . . . . . . . . . . . . . 24
2.3 Contextual Interviews. . . . . . . . . . . . . . . . . . 25
2.4 Remote Shadowing . . . . . . . . . . . . . . . . . . . 26
2.5 Limitations of Contextual Interviews . . . . . . . . . 26
3 Personas 30
3.1 Problems with Personas . . . . . . . . . . . . . . . . 31
3.2 Creating Personas . . . . . . . . . . . . . . . . . . . . 32
3.3 Working with Personas . . . . . . . . . . . . . . . . . 33
3.4 Personas Do Not Replace User Research . . . . . . . 34
4 Activity-Centered Design 37
5 Time to Start Working on Documentation 40
5.1 The Manual . . . . . . . . . . . . . . . . . . . . . . . 41
5.2 Blog Posts . . . . . . . . . . . . . . . . . . . . . . . . 41
5.3 Screencasts . . . . . . . . . . . . . . . . . . . . . . . 42
5.4 Press Releases . . . . . . . . . . . . . . . . . . . . . . 42
5.5 Talk About Tasks . . . . . . . . . . . . . . . . . . . . 43
CONTENTS 7
6 Text Usability 46
6.1 Why Words Matter. . . . . . . . . . . . . . . . . . . . 46
6.2 People Don’t Want to Read . . . . . . . . . . . . . . . 47
6.3 Say Less . . . . . . . . . . . . . . . . . . . . . . . . . 48
6.4 Make Text Scannable . . . . . . . . . . . . . . . . . . 49
6.5 No Fluff . . . . . . . . . . . . . . . . . . . . . . . . . . 49
6.6 Sentences Should Have One Obvious Interpretation 50
6.7 Talk Like a Human, Not Like a Company . . . . . . 51
6.8 Illustrate Your Points . . . . . . . . . . . . . . . . . . 52
6.9 Use Words People Understand . . . . . . . . . . . . . 53
6.10 Test Your Text . . . . . . . . . . . . . . . . . . . . . . 54
6.11 Display Legible Text . . . . . . . . . . . . . . . . . . . 55
7 Hierarchies in User Interface Design 58
7.1 Creating Hierarchical Structure Visually. . . . . . . 59
8 Card Sorting 63
8.1 Designing Hierarchies . . . . . . . . . . . . . . . . . 64
8.2 Preparing for a Card Sort. . . . . . . . . . . . . . . . 65
8.3 Participants . . . . . . . . . . . . . . . . . . . . . . . 66
8.4 Running a Card Sort . . . . . . . . . . . . . . . . . . 67
8.5 Running a Remote Card Sort . . . . . . . . . . . . . 69
8.6 Evaluating the Results . . . . . . . . . . . . . . . . . 70
8.7 Guidelines for Creating Usable Hierarchies . . . . . 71
9 The Mental Model 77
9.1 What People Think . . . . . . . . . . . . . . . . . . . 77
9.2 Three Different Models . . . . . . . . . . . . . . . . . 79
9.3 Hiding Implementation Details . . . . . . . . . . . . 79
9.4 Leaky Abstractions . . . . . . . . . . . . . . . . . . . 82
9.5 Designing for Mental Models . . . . . . . . . . . . . . 83
II Design 93
10 Sketching and Prototyping 95
10.1 Designing the Structure . . . . . . . . . . . . . . . . 96
10.2 Flow Diagrams . . . . . . . . . . . . . . . . . . . . . . 96
10.3 Storyboards . . . . . . . . . . . . . . . . . . . . . . . 97
10.4 Sketching . . . . . . . . . . . . . . . . . . . . . . . . . 97
10.5 Wireframes . . . . . . . . . . . . . . . . . . . . . . . . 99
10.6 Mock-ups . . . . . . . . . . . . . . . . . . . . . . . . . 99
10.7 Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Reporterratum
thiscopyis(P1.1aprinting,July2011)
CONTENTS 8
11 Paper Prototype Testing 104
11.1 Guerilla Paper Prototype Testing . . . . . . . . . . . 105
11.2 Running Full Usability Tests with Paper Prototypes 107
12 Realism 120
12.1 Symbols. . . . . . . . . . . . . . . . . . . . . . . . . . 121
12.2 Virtual Versions of Real-World Objects . . . . . . . . 123
12.3 Replicating Physical Constraints in Digital Products 126
13 Natural User Interfaces 130
13.1 Avoid Gesture Magic . . . . . . . . . . . . . . . . . . 131
13.2 Recognizing Gestures . . . . . . . . . . . . . . . . . . 132
13.3 Accidental Input . . . . . . . . . . . . . . . . . . . . . 134
13.4 Conventions . . . . . . . . . . . . . . . . . . . . . . . 135
14 Fitts’s Law 138
14.1 Screen Edges Have Infinite Size . . . . . . . . . . . . 139
14.2 Radial Context Menus Decrease Average Distance . 140
14.3 Small Targets Need Margins . . . . . . . . . . . . . . 143
14.4 Sometimes, Smaller Is Better . . . . . . . . . . . . . 143
15 Animations 145
15.1 Explaining State Changes . . . . . . . . . . . . . . . 145
15.2 Directing User Attention . . . . . . . . . . . . . . . . 146
15.3 Avoid Unimportant Animations . . . . . . . . . . . . 148
15.4 Help Users Form Suitable Mental Models . . . . . . 148
15.5 Learning from Cartoons . . . . . . . . . . . . . . . . 150
16 Consistency 155
16.1 Identifying Archetypes . . . . . . . . . . . . . . . . . 155
16.2 Behavioral Consistency . . . . . . . . . . . . . . . . . 156
17 Discoverability 159
17.1 What to Make Discoverable . . . . . . . . . . . . . . 159
17.2 When to Make Things Discoverable . . . . . . . . . . 161
17.3 How to Make Things Discoverable . . . . . . . . . . 162
18 Don’t Interrupt 165
18.1 Make Decisions for Your User . . . . . . . . . . . . . 166
18.2 Front Load Decisions . . . . . . . . . . . . . . . . . . 167
18.3 Interrupt Users Only For Truly Urgent Decisions . . 168
Reporterratum
thiscopyis(P1.1aprinting,July2011)
CONTENTS 9
19 Instead of Interrupting, Offer Undo 171
19.1 Let Users Undo Their Actions . . . . . . . . . . . . . 172
19.2 Temporary Undo. . . . . . . . . . . . . . . . . . . . . 173
20 Modes 175
20.1 Nonobvious Modes . . . . . . . . . . . . . . . . . . . 176
20.2 Unexpected Modes . . . . . . . . . . . . . . . . . . . 180
20.3 Sticky Modes . . . . . . . . . . . . . . . . . . . . . . . 180
20.4 Modes Are Not Always Bad . . . . . . . . . . . . . . . 181
20.5 Quasimodes . . . . . . . . . . . . . . . . . . . . . . . 181
21 Have Opinions Instead of Preferences 183
21.1 Why Preferences Are Bad. . . . . . . . . . . . . . . . 185
21.2 How to Avoid Preferences. . . . . . . . . . . . . . . . 186
21.3 If You Can’t Avoid Preferences . . . . . . . . . . . . . 187
22 Hierarchies, Space, Time, and How We Think About the
World 189
22.1 Hierarchies . . . . . . . . . . . . . . . . . . . . . . . . 190
22.2 Space . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
22.3 Time . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
22.4 A Better Hierarchical System . . . . . . . . . . . . . 194
23 Speed 198
23.1 Responsiveness . . . . . . . . . . . . . . . . . . . . . 199
23.2 Progress Feedback . . . . . . . . . . . . . . . . . . . 199
23.3 Perceived Speed . . . . . . . . . . . . . . . . . . . . . 201
23.4 Slowing Down . . . . . . . . . . . . . . . . . . . . . . 202
24 Avoiding Features 205
24.1 Remember the User’s Goals . . . . . . . . . . . . . . 206
24.2 The Five Whys . . . . . . . . . . . . . . . . . . . . . . 206
24.3 Instead of Adding a New Feature, Make an Existing
Feature More Usable . . . . . . . . . . . . . . . . . . 208
24.4 Solve Several Problems with One Change . . . . . . 208
24.5 Consider the Cost . . . . . . . . . . . . . . . . . . . . 209
24.6 Make It Invisible . . . . . . . . . . . . . . . . . . . . . 209
24.7 Provide an API and a Plug-in Architecture . . . . . . 209
24.8 Listen to Your Users . . . . . . . . . . . . . . . . . . 210
24.9 But Don’t Listen to Your Users Too Much . . . . . . 211
24.10 Not All Users Need to Be Your Users . . . . . . . . . 212
Reporterratum
thiscopyis(P1.1aprinting,July2011)
CONTENTS 10
25 Removing Features 215
25.1 Do the Research . . . . . . . . . . . . . . . . . . . . . 216
25.2 Inform Your Users . . . . . . . . . . . . . . . . . . . . 217
25.3 Provide Alternatives . . . . . . . . . . . . . . . . . . . 217
25.4 It’s Your Product. . . . . . . . . . . . . . . . . . . . . 218
26 Learning from Video Games 220
26.1 What’s Fun? . . . . . . . . . . . . . . . . . . . . . . . 220
26.2 Why Your Product Is Not Like a Game . . . . . . . . 222
26.3 What We Can Learn from Games . . . . . . . . . . . 225
26.4 Fun vs. Usability . . . . . . . . . . . . . . . . . . . . 231
III Implementation 233
27 Guerilla Usability Testing 235
27.1 How Often to Test . . . . . . . . . . . . . . . . . . . . 236
27.2 Preparing for the Test . . . . . . . . . . . . . . . . . . 237
27.3 How Do You Find Testers? . . . . . . . . . . . . . . . 237
27.4 How Many Testers. . . . . . . . . . . . . . . . . . . . 237
27.5 Running the Test . . . . . . . . . . . . . . . . . . . . 238
27.6 The Results. . . . . . . . . . . . . . . . . . . . . . . . 238
28 Usability Testing 240
28.1 Usability Tests Don’t Have to Be Expensive . . . . . 241
28.2 How Often to Test . . . . . . . . . . . . . . . . . . . . 242
28.3 How Many Testers. . . . . . . . . . . . . . . . . . . . 243
28.4 Who Should Test Your Product? . . . . . . . . . . . 244
28.5 How to Find Testers . . . . . . . . . . . . . . . . . . . 246
28.6 Different Types of Tests . . . . . . . . . . . . . . . . 246
28.7 Preparing for the Test . . . . . . . . . . . . . . . . . . 247
28.8 Running the Test . . . . . . . . . . . . . . . . . . . . 248
29 Testing in Person 250
29.1 Running the Test . . . . . . . . . . . . . . . . . . . . 250
30 Remote Testing 257
30.1 Moderated Remote Testing . . . . . . . . . . . . . . . 258
30.2 Unmoderated Remote Testing . . . . . . . . . . . . . 266
Reporterratum
thiscopyis(P1.1aprinting,July2011)