Slide 1
Slide 1 text
Improving
Interface
Design
Web Visions
Portland, OR | May 3rd, 2007
Slide 2
Slide 2 text
Jakob Nielsen
A field study identified twenty-two
ways that automated hospital
systems can result in the wrong
medication being dispensed to
patients. Most of these flaws are
classic usability problems that have
been understood for decades.
“
”
http://www.useit.com/alertbox/20050411.html
Slide 3
Slide 3 text
Roger Martin
A reliable process--which tends to
attract folks in finance, engineering,
and operations--produces a
predictable result time and again.
This is business as algorithm:
quantifiable, measurable, and
provable.
“
”
http://www.fastcompany.com/magazine/109/open_design-tough-love.html
Slide 4
Slide 4 text
Roger Martin
A valid process, on the other hand,
flows from designers’ deep
understanding of both user and
context, and leads them to ideas they
believe in but can’t prove. They work
in a world of variables: the
unpredictable, the visual,
the experimental.
“
”
http://www.fastcompany.com/magazine/109/open_design-tough-love.html
Slide 5
Slide 5 text
Roger Martin
The challenge is to manage the
chronic push and pull between a
value system premised on what’s
valid and one based on
what’s reliable.
“
”
http://www.fastcompany.com/magazine/109/open_design-tough-love.html
Slide 6
Slide 6 text
User Experience
Usability
Design
(Visual & UI)
Project Mgmt.
AJAX
(JavaScript)
Back-End
Information
Architecture
Account
Mgmt.
Flash
Programming
APIs
Packaged
Solutions
Interaction
Design
Content User
Research
Design
Deliverables
Business
Intelligence
Problem
Framing
Requirements
Gathering /
Research
DOM
Scripting
Accessibility
CSS
Front-End
Development
User
Agents
Markup
e "Universe" of User Experience
Designing the
Experience
Managing the
Project
Defining the
Problem
Architecting the
Technology
Delivering the
Experience
Prototyping
Creative
inking
Slide 7
Slide 7 text
We need
to be
somewhere
in here.
Logic Gut Feel
Lots of Bad Ideas Out Here
We feel safer here.
Slide 8
Slide 8 text
Web Visions Portland, OR | May 3rd, 2007
Understand Design
Design is NOT about decoration. It’s about communication and problem solving.
8
1
Slide 9
Slide 9 text
Steve Jobs
Design is not just what it looks like
and feels like. Design is how it works.
“
”
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
http://nymag.com/nymetro/health/features/11700/
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
http://nymag.com/nymetro/health/features/11700/
Slide 14
Slide 14 text
Jeff Veen
I’ve been amazed at how often those
outside the discipline of design
assume that what designers do is
decoration. Good design is
problem solving.
“
”
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Bob Baxley
Like all forms of design, visual
design is about problem solving,
not about personal preference or
unsupported opinion.
“
”
Slide 17
Slide 17 text
http://worrydream.com/MagicInk/#p121
Slide 18
Slide 18 text
http://worrydream.com/MagicInk/#p126
Slide 19
Slide 19 text
Components of Usability (http://www.useit.com/alertbox/20030825.html))
Learnability. How easy is it to accomplish basic tasks on the first
encounter of an interface?
Efficiency. Once users are familiar with the interface, how quickly
can they perform tasks?
Memorability. When users return after a period of not using the
interface, how easily can they reestablish proficiency?
Errors. How many errors do users make, how severe are the errors,
and how easily can they recover?
Satisfaction. How pleasant is it to use the interface?
Slide 20
Slide 20 text
Smallest Effective Difference Edward Tufte
Make all visual distinctions as
subtle as possible, but still clear
and effective.
Slide 21
Slide 21 text
http://www.37signals.com/svn/posts/137-design-decisions-basecamp-help
Slide 22
Slide 22 text
Charles Eames
The details are not the details.
They make the design.
“
”
Slide 23
Slide 23 text
http://gmail.com
Slide 24
Slide 24 text
http://threadless.com
Slide 25
Slide 25 text
http://writeboard.com
Slide 26
Slide 26 text
http://psychology.wichita.edu/surl/usbilitynews/62/whitespace.htm
Slide 27
Slide 27 text
http://nytimes.com
Slide 28
Slide 28 text
Web Visions Portland, OR | May 3rd, 2007
External Inspiration
History, art, other mediums, other professions.
Find beauty in everything.
28
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
http://www.edwardtufte.com/tufte/fineart
Slide 32
Slide 32 text
http://www.edwardtufte.com/tufte/posters
Slide 33
Slide 33 text
http://www.edwardtufte.com
Slide 34
Slide 34 text
http://webtypography.net
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Don Norman
The field of usability design takes root in the
cognitive sciences -- a combination of
psychology, computer science, human
factors, and engineering. These are all
analytical fields. The discipline prides itself
on its scientific basis and experimental
rigor. The hidden danger is to neglect areas
that are not easily addressed in the
framework of science and engineering.
http://www.jnd.org/dn.mss/emotion_design.html
“
”
Slide 37
Slide 37 text
Web Visions Portland, OR | May 3rd, 2007
Cultivate the Culture
Lipstick on a pig doesn’t cut it.
37
2
Slide 38
Slide 38 text
Conway’s Law
It is a consequence of the fact that two
software modules A and B cannot interface
correctly with each other unless the design
and implementer of A communicates with
the designer and implementer of B. Thus the
interface structure of a software system
necessarily will show a congruence with the
social structure of the organization that
produced it.
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Benjamin Franklin
The definition of insanity is doing the
same thing over and over again and
expecting different results.
“
”
Slide 41
Slide 41 text
http://positivesharing.com/happyhouris9to5/bookhtml/happyhouris9to55.html
Slide 42
Slide 42 text
Khoi Vinh
Design groups really need a strong,
diplomatic leader who can help
engender a climate for good design.
“
”
Slide 43
Slide 43 text
Web Visions Portland, OR | May 3rd, 2007
Think Critically
If the question is wrong, the answer is irrelevant.
43
3
Slide 44
Slide 44 text
Bertrand Russell
The greatest challenge to any thinker
is stating the problem in a way that
will allow a solution.
“
”
Slide 45
Slide 45 text
http://www.infotoday.com/online/nov05/morville.shtml
+
Slide 46
Slide 46 text
Courtesy of Cameron Moll
Slide 47
Slide 47 text
Courtesy of Cameron Moll
Slide 48
Slide 48 text
Jack Welch
Too Often we measure everything
and understand nothing.
“
”
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Benjamin Disraeli
There are three kinds of lies:
lies, damned lies, and statistics.
Popularized in the U.S. by Mark Twain
“
”
Slide 51
Slide 51 text
Web Visions Portland, OR | May 3rd, 2007
Ignore Users
We have to look beyond what people say and understand their real needs.
51
4
Slide 52
Slide 52 text
Jakob Nielsen
To design an easy-to-use interface,
pay attention to what users do, not
what they say. Self-reported claims
are unreliable, as are user
speculations about future behavior.
“
”
http://www.useit.com/alertbox/20010805.html
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
Sidney Deane
Look man. You can listen to Jimi, but
you can’t hear him. There’s a
difference man. Just because you’re
listening to him doesn’t mean you’re
hearing him.
“
”
White Men Can’t Jump, 1992
Slide 56
Slide 56 text
http://www.cree.com/press/press_detail.asp?i=1175179209372
Slide 57
Slide 57 text
Steve Jobs
It’s really hard to design products by
focus groups. A lot of times, people
don’t know what they want until you
show it to them.
“
”
Slide 58
Slide 58 text
Web Visions Portland, OR | May 3rd, 2007
Document & Code Better
Current state of traditional and expected documentation is atrocious.
58
5
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
http://dilbert.com/comics/dilbert/archive/images/dilbert2007458210412.gif
Slide 61
Slide 61 text
1. User enters the building
1.1 User opens door. (See Misc-01)
1.2 User walks through door.
1.3 User closes door.
2. User leaves the building.
2.1 User opens door.
2.2 User walks through door.
2.3 User closes door.
Misc-01
Outside doors should open inwards
and the knob should be placed
towards the outer edge of the door
about waist high. The doors should
be 7’2” tall and 3’ wide.
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
Getting Real
No matter how much you plan you’re
likely to get half wrong anyway. So
don’t do the ‘paralysis through
analysis’ thing. That only slows
progress and saps morale.
Getting Real
http://gettingreal.37signals.com/ch06_Done.php
“
”
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
Getting Real
The same way you should regularly
put aside some of your income for
taxes, regularly put aside some time
to pay off your code and design debt.
If you don’t, you’ll just be paying
interest (fixing hacks) instead of
paying down the principal (and
moving forward).
“
”
http://gettingreal.37signals.com/ch10_Manage_Debt.php
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
document.write("<a href=\"javascript:salesWindow();\" onclick=
\"resetTimer()\" onFocus='javascript:window.status=\"Get a higher
return plus penalty-free withdrawals. Learn more >> Selecting
this link will open a new browser window.\"' onBlur=
\"javascript:window.status='';\">");
document.write(" <img src=\"/cmsContent/eas-docs/images/ad_images/
dabg_updaterfcd_205x100.jpg\" width=\"100%\" alt=\"Get a higher return
plus penalty-free withdrawals. Learn more >> Selecting this link
will open a new browser window.\" border=\"0\" >"); //
Rajarshi end
document.write("<\/a>");
Slide 70
Slide 70 text
Slide 73
Slide 73 text
Web Visions Portland, OR | May 3rd, 2007
Avoid Specialization
Use specialists for special things.
73
6
Slide 74
Slide 74 text
Getting Real
Too many companies separate
design, development, copywriting,
support, and marketing into different
silos. While specialization has its
advantages, it also creates a
situation where staffers see just their
own little world instead of the
entire context...
http://gettingreal.37signals.com/ch07_Unity.php
“
”
Slide 75
Slide 75 text
A
Bridge
River
B
Slide 76
Slide 76 text
Bridge
River
A
B
C
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
http://www.joelonsoftware.com/items/2006/11/21.html
Slide 79
Slide 79 text
Peter Morville
The design of good houses requires
an understanding of both the
construction materials and the
behavior of real humans.
“
”
Slide 80
Slide 80 text
http://tinyurl.com/2d2t33
Slide 81
Slide 81 text
Christopher Alexander
So it is inevitable that as the work of
building passes into the hands of
specialists, the patterns which they
use become more and more banal,
more willful, and less anchored
in reality.
“
”
The Timeless Way of Building
Slide 82
Slide 82 text
http://headrush.typepad.com/creating_passionate_users/2005/09/conversational_.html
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
Web Visions Portland, OR | May 3rd, 2007
Cut Features
(and ignore the darned competition.)
85
7
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
Paul Graham
A few years ago I read an article in
which a car magazine modified the
“sports” model of some production
car to get the fastest possible
standing quarter mile. You know
how they did it? They cut off all the
crap the manufacturer had bolted
onto the car to make it look fast.
“
”
Foreword from Founders at Work
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
Steve Jobs
[Innovation] comes from saying no
to 1,000 things to make sure we don’t
get on the wrong track or try to do
too much. We’re always thinking
about new markets we could enter,
but it’s only by saying no that you
can concentrate on the things that
are really important.
“
”
Slide 91
Slide 91 text
Kathy Sierra
Give users what they actually want,
not what they say they want. And
whatever you do, don’t give them
new features just because your
competitors have them!
“
”
Slide 92
Slide 92 text
http://en.wikipedia.org/wiki/New_Coke
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
Getting Real
We kept the tool clean and
uncluttered by letting people get
creative. People figured out how to
solve issues on their own.
“
”
http://gettingreal.37signals.com/ch05_Human_Solutions.php
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
Hans Hofmann
The ability to simplify means to
eliminate the unnecessary so that the
necessary may speak.
“
”
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
Jakob Nielsen (http://www.useit.com/alertbox/progressive-disclosure.html)
Progressive disclosure defers
advanced or rarely used features to a
secondary screen, making
applications easier to learn and
less error-prone.
“
”
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
http://www.basecamphq.com
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
No content
Slide 107
Slide 107 text
Occam’s razor
Entities should not be multiplied
beyond necessity.
Slide 108
Slide 108 text
http://threadless.com
Slide 109
Slide 109 text
Charles Mingus
Making the simple complicated is
commonplace; making the
complicated simple, awesomely
simple, that’s creativity.
“
”
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
http://writeboard.com
Slide 114
Slide 114 text
Web Visions Portland, OR | May 3rd, 2007
Deliver the Basics
Enough with the AJAX and superfluous visual effects.
114
8
Slide 115
Slide 115 text
Jakob Nielsen
Clear content, simple navigation,
and answers to customer questions
have the biggest impact on business
value. Advanced technology matters
much less.
“
”
http://www.useit.com/alertbox/design_priorities.html
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
Joe Dolson
Validation, by itself, should never be
considered as a primary signifier
concerning the quality or
accessibility of a website.
http://www.joedolson.com/articles/2007/01/beyond-validation/
“
”
Slide 118
Slide 118 text
Jeremy Keith
From now on, instead of talking
about making a site accessible,
I’m going to talk about keeping a
site accessible.
http://adactio.com/journal/1224
“
”
Slide 119
Slide 119 text
Getting Real
Copywriting is interface design.
“ ”
http://gettingreal.37signals.com/ch9_Copywriting_is_Interface_Design.php
Slide 120
Slide 120 text
http://blinksale.com
Slide 121
Slide 121 text
If it needs instructions, there’s room
for improvement.
“
”
Slide 122
Slide 122 text
http://www.cameronmoll.com/archives/001266.html
Slide 123
Slide 123 text
http://blinksale.com
Slide 124
Slide 124 text
Principle of Least Astonishment
When two elements of an interface
conflict or are ambiguous, the
behavior should be that which will
least surprise the human user or
programmer at the time the
conflict arises, because the least
surprising behavior will usually be
the correct one.
Slide 125
Slide 125 text
http://virb.com
Slide 126
Slide 126 text
Iam Malcom
Yeah, but your scientists were so
preoccupied with whether they
could, they didn’t stop to think if
they should.
“
”
Jurassic Park, 1993
Slide 127
Slide 127 text
http://www.tailshq.com
Slide 128
Slide 128 text
Web Visions Portland, OR | May 3rd, 2007
Balance Context & Consistency
Balance the need for consistency with the need for context.
128
9
Slide 129
Slide 129 text
Jakob’s Law of the Internet User Experience Jakob Nielsen
Users spend most of their time on
other sites.
Slide 130
Slide 130 text
http://developer.yahoo.com/patterns/
Slide 131
Slide 131 text
Ethnography http://en.wikipedia.org/wiki/Ethnography
A system’s properties cannot
necessarily be accurately understood
independent of each other.
Slide 132
Slide 132 text
http://www.basecamphq.com
Slide 133
Slide 133 text
Larry Marine
Things that look different should act
different. Thinks that look the same
should act the same.
“
”
Slide 134
Slide 134 text
134
Context
Sensitive
Pre-Order Purchase
Slide 135
Slide 135 text
http://threadless.com
Slide 136
Slide 136 text
https://www.google.com/analytics/
Slide 137
Slide 137 text
http://measuremap.com
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
No content
Slide 140
Slide 140 text
http://simplelog.net
Slide 141
Slide 141 text
http://simplelog.net
Slide 142
Slide 142 text
http://www.boxesandarrows.com/view/ambient_signifi
Slide 143
Slide 143 text
http://amazon.com
Slide 144
Slide 144 text
http://highrisehq.com
Slide 145
Slide 145 text
http://highrisehq.com
Slide 146
Slide 146 text
No content
Slide 147
Slide 147 text
No content
Slide 148
Slide 148 text
No content
Slide 149
Slide 149 text
No content
Slide 150
Slide 150 text
No content
Slide 151
Slide 151 text
No content
Slide 152
Slide 152 text
No content
Slide 153
Slide 153 text
http://worrydream.com/MagicInk/#p98
Slide 154
Slide 154 text
http://worrydream.com/MagicInk/#p98
Slide 155
Slide 155 text
Web Visions Portland, OR | May 3rd, 2007
Fail Fast. Iterate. Explore.
This isn’t construction or rocket science.
155
10
Slide 156
Slide 156 text
H. L. Mencken
For every complex problem there
is a solution that is simple, neat
and wrong.
“
”
Slide 157
Slide 157 text
http://www.37signals.com/svn/archives2/the_long_road_to_simple_creating_debating_and_iterating_add_an_event.php
Slide 158
Slide 158 text
Lead Designer at Netflix
We make a lot of this stuff up as we go
along. I’m serious. We don’t assume
anything works and we don’t like to make
predictions without real-world tests.
Predictions color our thinking. So, we
continually make this up as we go along,
keeping what works and throwing away
what doesn’t. We’ve found that we about
90% of it doesn’t work.
http://www.uie.com/articles/fast_iterations/
“
”
Slide 159
Slide 159 text
http://en.wikipedia.org/wiki/Punch_cards
Slide 160
Slide 160 text
Winston Churchill
However beautiful the strategy,
you should occasionally look at
the results.
“
”
Slide 161
Slide 161 text
http://en.wikipedia.org/wiki/Waterfall_process
Slide 162
Slide 162 text
No content
Slide 163
Slide 163 text
Thomas Edison
Genius is 1% inspiration and
99% perspiration.
“
”
Slide 164
Slide 164 text
http://www.lifeclever.com/2007/01/23/what-50-pounds-of-clay-can-teach-you-about-design/
Slide 165
Slide 165 text
No content
Slide 166
Slide 166 text
No content
Slide 167
Slide 167 text
No content
Slide 168
Slide 168 text
http://worrydream.com/MagicInk/#p228
Slide 169
Slide 169 text
http://worrydream.com/MagicInk/#p228
Slide 170
Slide 170 text
Marisa Mayer Vice President for Search Products and User Experience at Google
Since only 1 in every 5 to 10 ideas
work out, the strategy of
constraining how quickly ideas must
be proven allows us to try out more
ideas faster, increasing our odds
of success.
http://www.uie.com/articles/fast_iterations/
“
”
Slide 171
Slide 171 text
http://gettingreal.37signals.com
Slide 172
Slide 172 text
In Summary...
1. Understand Design
2. Cultivate the Culture
3. Think Critically
4. Ignore Users
5. Document & Code Better
6. Avoid Specialization
7. Cut Features
8. Deliver the Basics
9. Balance Context & Consistency
10. Fail Fast. Iterate. Explore.
Slide 173
Slide 173 text
Thank You
Garrett Dimon
http://garrettdimon.com/pages/improving_interface_design