Simple and usable: web, mobile, and interaction design

209 Pages·7.43 MB·English

by  Colborne, Giles

Simple and Usable Web, Mobile, and Interaction Design
Giles Colborne
New Riders
1249 Eighth Street
Berkeley, CA 94710
510/524-2178
510/524-2221 (fax)
Find us on the Web at: www.newriders.com
To report errors, please send a note to [email protected]
New Riders is an imprint of Peachpit, a division of Pearson Education.
Copyright © 2011 by Giles Colborne
Project Editor: Michael J. Nolan
Development Editor: Margaret Anderson/Stellarvisions
Production Editor: Becky Winter
Copyeditor: Gretchen Dykstra
Proofreader: Gretchen Dykstra
Indexer: Joy Dean Lee
Book Designer: Mimi Heft
Notice of Rights
All rights reserved. No part of this book may be reproduced or transmitted in
any form by any means, electronic, mechanical, photocopying, recording, or
otherwise, without the prior written permission of the publisher. For informa-
tion on getting permission for reprints and excerpts, contact permissions@
peachpit.com.
Notice of Liability
The information in this book is distributed on an “As Is” basis without warranty.
While every precaution has been taken in the preparation of the book, neither
the author nor Peachpit shall have any liability to any person or entity with
respect to any loss or damage caused or alleged to be caused directly or indi-
rectly by the instructions contained in this book or by the computer software
and hardware products described in it.
Trademarks
Many of the designations used by manufacturers and sellers to distinguish
their products are claimed as trademarks. Where those designations appear
in this book, and Peachpit was aware of a trademark claim, the designations
appear as requested by the owner of the trademark. All other product names
and services identified throughout this book are used in editorial fashion only
and for the benefit of such companies with no intention of infringement of the
trademark. No such use, or the use of any trade name, is intended to convey
endorsement or other affiliation with this book.
ISBN 13: 978-0-321-70354-5
ISBN 10: 0-321-70354-5
9 8 7 6 5 4 3 2 1
Printed and bound in the United States of America
For my wife and children, Pey, Leah and Bea
Thanks
Writing this book was anything but simple, an irony that has not
been lost on me. Many people have worked long, hard hours to
bring it to life.
Firstly, I have to thank my family, Pey, Leah, Bea and my parents,
for putting up with me while I was writing it, for the ideas they
gave me, and for making room for this in our lives.
The team at Peachpit have been fantastic. Thanks to the book’s editor
Margaret Anderson, who gave sage advice and vital encouragement
throughout; Michael Nolan who took on this project, editor-in-chief
Nancy Davis; Gretchen Dykstra for her eagle eye and can-do
enthusiasm; Mimi Heft for her lovely design; Becky Winter and
Danielle Foster for such hard work on production and Glenn Bisignani
for bringing it to people’s attention.
My colleagues at cxpartners made a huge contribution to the writing
of this book, in particular in patiently bashing the ideas into shape:
Richard Caddick, Joe Leech, Verity Whitmore, Anna Thompson,
Danielle Gould, Chui Tan, Walt Buchan, Neil Schwarz, Anthony Mace,
Jesmond Allen, Fiz Yazdi, James Rosenberg, and Nik Lazell—
great people to work with.
Advice and support from other authors was invaluable as I stepped
outside my comfort zone. Thank you Steve Krug, Kevlin Henney,
Yang-May Ooi, Jason Cranford Teague, Louis Rosenfeld,
Caroline Jarrett, and Whitney Quesenbery.
Thanks to all those people who helped me with inspirational
interviews Naomi Pearce, Ken Case of Omni Group, Rich Siegel of
Bare Bones Software, Jürgen Schweizer, Keith Lang, Barney Kirby,
Mariana Cavalcanti, Bill Schallenberg, Luis Babicek, Ken Kellogg,
Fran Dattilo, and all the folks at Marriott, Alan Colville, David Jarvis,
and Pete Greenwood.
Thanks also to the people who gave me feedback and ideas throughout:
Tyler Tate, Bonny Colville-Hyde, Dot Pinkney, Jon Tan, Donna Spencer,
Dave Ellender, Ian Fenn, Matthew Keeler and the folks at the University
of Bath and Bristol Usability Group, Brenda Bazylewski, and the dozens
of other people who’ve contributed, helped, and inspired me.
Contents
Part 1
Why are we here?
A story about simplicity. . . . . . . . . . . . . . . . . . . . . . . . . .2
The power of simplicity . . . . . . . . . . . . . . . . . . . . . . . . . .4
Increasing complexity is unsustainable. . . . . . . . . . . . . . . . .6
Not that kind of simple . . . . . . . . . . . . . . . . . . . . . . . . . .8
Character . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Fake simplicity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Know yourself. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Part 2
Setting a vision
Two ways to describe what’s core. . . . . . . . . . . . . . . . . . . 18
Get out of your office . . . . . . . . . . . . . . . . . . . . . . . . . . 20
What to look for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Three types of user. . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Why you should ignore expert customers . . . . . . . . . . . . . . 26
Design for the mainstream . . . . . . . . . . . . . . . . . . . . . . . 28
What mainstreamers want . . . . . . . . . . . . . . . . . . . . . . .30
Emotional needs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Simplicity is about control . . . . . . . . . . . . . . . . . . . . . . . 34
Choosing the right “what” . . . . . . . . . . . . . . . . . . . . . . . 36
Describing the user experience . . . . . . . . . . . . . . . . . . . . 38
Putting it all together . . . . . . . . . . . . . . . . . . . . . . . . . .40
World, character, plot . . . . . . . . . . . . . . . . . . . . . . . . . .42
Extreme usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44
vi • CONTENTS
The quick and dirty way . . . . . . . . . . . . . . . . . . . . . . . . 46
Insight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Getting the right vision . . . . . . . . . . . . . . . . . . . . . . . . . 50
Share it. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Part 3
Four strategies for simplicity
Simplify this . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
The remote control. . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
The four strategies . . . . . . . . . . . . . . . . . . . . . . . . . . . .60
Part 4
Remove
Remove. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
How not to do it . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Focus on what’s core. . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Kill lame features. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
What if the user…?. . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
But our customers want it . . . . . . . . . . . . . . . . . . . . . . . 74
Solutions, not processes. . . . . . . . . . . . . . . . . . . . . . . . . 76
When features don’t matter . . . . . . . . . . . . . . . . . . . . . . 78
Will it hurt? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80
Prioritizing features . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Load. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Decisions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
CONTENTS • vii
Distractions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88
Smart defaults . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Options and preferences . . . . . . . . . . . . . . . . . . . . . . . . 92
When one option is too many . . . . . . . . . . . . . . . . . . . . .94
Errors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Visual clutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Removing words . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Simplifying sentences . . . . . . . . . . . . . . . . . . . . . . . . . 102
Removing too much . . . . . . . . . . . . . . . . . . . . . . . . . . 104
You can do it . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Focus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Part 5
Organize
Organize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Chunking. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Organizing for behavior . . . . . . . . . . . . . . . . . . . . . . . . 116
Hard edges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Alphabets and formats . . . . . . . . . . . . . . . . . . . . . . . . 120
Search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Time and space. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Size and location . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Layers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Color coding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Desire paths. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Part 6
Hide
Hide. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Infrequent but necessary . . . . . . . . . . . . . . . . . . . . . . . 140
Customizing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
viii • CONTENTS
Automatic customization . . . . . . . . . . . . . . . . . . . . . . . 144
Progressive disclosure. . . . . . . . . . . . . . . . . . . . . . . . . 146
Staged disclosure. . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
X doesn’t mark the spot. . . . . . . . . . . . . . . . . . . . . . . . 150
Cues and clues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Making things easy to find . . . . . . . . . . . . . . . . . . . . . . 154
After you hide. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Part 7
Displace
Displace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Displacing between devices . . . . . . . . . . . . . . . . . . . . . 162
Mobile vs. desktop . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Displacing to the user . . . . . . . . . . . . . . . . . . . . . . . . . 166
What users do best . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Creating open experiences . . . . . . . . . . . . . . . . . . . . . . 170
Kitchen knives and pianos . . . . . . . . . . . . . . . . . . . . . . 172
Unstructured data . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Trust . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Part 8
Before we go
Conservation of complexity. . . . . . . . . . . . . . . . . . . . . . 180
Details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Simplicity happens in the user’s head. . . . . . . . . . . . . . . . 184
Photo Credits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191
CONTENTS • ix