Documente Academic
Documente Profesional
Documente Cultură
Interface
Design
Web Visions
1
“ 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.
Jakob Nielsen
”
http://www.useit.com/alertbox/20050411.html
2
“ 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.
Roger Martin
”
http://www.fastcompany.com/magazine/109/open_design-tough-love.html
3
“ 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.
Roger Martin ”
http://www.fastcompany.com/magazine/109/open_design-tough-love.html
4
“ 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.
”
Roger Martin
http://www.fastcompany.com/magazine/109/open_design-tough-love.html
5
!e "Universe" of User Experience
Packaged APIs
Design
Deliverables
Interaction
Solutions
Architecting the
Usability Design
Technology
Prototyping
Back-End
Creative Design Information
!inking (Visual & UI) Architecture
Flash
Programming
AJAX
(JavaScript)
Designing the
Experience
Content User
Research DOM
Front-End Scripting
User Experience Development
User
Markup Agents
Defining the
Problem Requirements
Account
Gathering / Project Mgmt.
Research Mgmt.
Managing the
Project
6
We feel safer here.
We need
to be
Logic somewhere Gut Feel
in here.
7
1
Understand Design
Design is NOT about decoration. It’s about communication and problem solving.
9
10
http://nymag.com/nymetro/health/features/11700/
11
12
http://nymag.com/nymetro/health/features/11700/
13
“ 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.
”
Jeff Veen
14
15
“ Like all forms of design, visual
design is about problem solving,
not about personal preference or
unsupported opinion.
”
Bob Baxley
16
http://worrydream.com/MagicInk/#p121
17
http://worrydream.com/MagicInk/#p126
18
Components of Usability (http://www.useit.com/alertbox/20030825.html))
Efficiency. Once users are familiar with the interface, how quickly
can they perform tasks?
Errors. How many errors do users make, how severe are the errors,
and how easily can they recover?
19
Smallest Effective Difference Edward Tufte
20
http://www.37signals.com/svn/posts/137-design-decisions-basecamp-help
21
“ The details are not the details.
They make the design.
”
Charles Eames
22
http://gmail.com
23
http://threadless.com
24
http://writeboard.com
25
http://psychology.wichita.edu/surl/usbilitynews/62/whitespace.htm
26
http://nytimes.com
27
External Inspiration
History, art, other mediums, other professions.
Don Norman
http://www.jnd.org/dn.mss/emotion_design.html
”
36
2
Cultivate the Culture
Lipstick on a pig doesn’t cut it.
38
39
“ The definition of insanity is doing the
same thing over and over again and
expecting different results.
”
Benjamin Franklin
40
http://positivesharing.com/happyhouris9to5/bookhtml/happyhouris9to55.html
41
“ Design groups really need a strong,
diplomatic leader who can help
engender a climate for good design.
”
Khoi Vinh
42
3
Think Critically
If the question is wrong, the answer is irrelevant.
44
+
http://www.infotoday.com/online/nov05/morville.shtml
45
Courtesy of Cameron Moll
46
Courtesy of Cameron Moll
47
Courtesy of Cameron Moll
47
“ Too Often we measure everything
and understand nothing.
”
Jack Welch
48
49
“ There are three kinds of lies:
lies, damned lies, and statistics.
”
Benjamin Disraeli
Popularized in the U.S. by Mark Twain
50
4
Ignore Users
We have to look beyond what people say and understand their real needs.
52
53
54
“ 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.
”
Sidney Deane
White Men Can’t Jump, 1992
55
http://www.cree.com/press/press_detail.asp?i=1175179209372
56
“ 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.
”
Steve Jobs
57
5
Document & Code Better
Current state of traditional and expected documentation is atrocious.
61
62
63
“ 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
64
65
“ 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).
Getting Real ”
http://gettingreal.37signals.com/ch10_Manage_Debt.php
66
67
68
<script type="text/javascript" language="javascript">
document.write("<\/a>");
</script>
<noscript>
<a href="/cgi-bin/ias/
4ag509_vulvnBACRDaFJA7uU_EQT8BNiAsf78Qnp237322/9/bofa/ibd/IAS/
presentation/SetBusinessEventControl" target="_blank" title="Get a
higher return plus penalty-free withdrawals. Learn more >>
Selecting this link will open a new browser window.">
<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" ></a>
</noscript>
69
<a href="...">
<img src="..." alt="Get a higher return
plus penalty-free withdrawals. Learn
More.">
</a>
70
<a id="promotion" href= "...">
Get a higher return plus
<strong>penalty-free
withdrawals.<span>Learn more</span></
strong>
</a>
71
<a id="promotion" href="...">
Get a higher return plus <strong>
penalty-free withdrawals.<span>Learn
more</span></strong>
</a>
72
6
Avoid Specialization
Use specialists for special things.
74
A
e r
Riv
B
g e
r id
B
75
A
r
Rive
ge
ir d
B
C
76
77
http://www.joelonsoftware.com/items/2006/11/21.html
78
“ The design of good houses requires
an understanding of both the
construction materials and the
behavior of real humans.
”
Peter Morville
79
http://tinyurl.com/2d2t33
80
“ 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.
Christopher Alexander
”
The Timeless Way of Building
81
http://headrush.typepad.com/creating_passionate_users/2005/09/conversational_.html
82
83
84
7
Cut Features
(and ignore the darned competition.)
91
http://en.wikipedia.org/wiki/New_Coke
92
93
“ We kept the tool clean and
uncluttered by letting people get
creative. People figured out how to
solve issues on their own.
”
Getting Real
http://gettingreal.37signals.com/ch05_Human_Solutions.php
94
95
96
97
“ The ability to simplify means to
eliminate the unnecessary so that the
necessary may speak.
”
Hans Hofmann
98
99
100
101
“ Progressive disclosure defers
advanced or rarely used features to a
secondary screen, making
applications easier to learn and
less error-prone.
”
Jakob Nielsen (http://www.useit.com/alertbox/progressive-disclosure.html)
102
103
http://www.basecamphq.com
104
105
106
Occam’s razor
107
http://threadless.com
108
“ Making the simple complicated is
commonplace; making the
complicated simple, awesomely
simple, that’s creativity.
”
Charles Mingus
109
110
111
112
http://writeboard.com
113
8
Deliver the Basics
Enough with the AJAX and superfluous visual effects.
115
116
“ Validation, by itself, should never be
considered as a primary signifier
concerning the quality or
accessibility of a website.
”
Joe Dolson
http://www.joedolson.com/articles/2007/01/beyond-validation/
117
“ From now on, instead of talking
about making a site accessible,
I’m going to talk about keeping a
site accessible.
”
Jeremy Keith
http://adactio.com/journal/1224
118
“ Copywriting is interface design.
”
Getting Real
http://gettingreal.37signals.com/ch9_Copywriting_is_Interface_Design.php
119
http://blinksale.com
120
“ If it needs instructions, there’s room
for improvement.
”
121
http://www.cameronmoll.com/archives/001266.html
122
http://blinksale.com
123
Principle of Least Astonishment
124
http://virb.com
125
“ Yeah, but your scientists were so
preoccupied with whether they
could, they didn’t stop to think if
they should.
”
Iam Malcom
Jurassic Park, 1993
126
http://www.tailshq.com
127
9
Balance Context & Consistency
Balance the need for consistency with the need for context.
129
http://developer.yahoo.com/patterns/
130
Ethnography http://en.wikipedia.org/wiki/Ethnography
131
http://www.basecamphq.com
132
“ Things that look different should act
different. Thinks that look the same
should act the same.
”
Larry Marine
133
134
Pre-Order Purchase
Context
Sensitive
134
http://threadless.com
135
https://www.google.com/analytics/
136
http://measuremap.com
137
138
139
http://simplelog.net
140
http://simplelog.net
141
http://www.boxesandarrows.com/view/ambient_signifi
142
http://amazon.com
143
http://highrisehq.com
144
http://highrisehq.com
145
146
147
148
149
150
151
152
http://worrydream.com/MagicInk/#p98
153
http://worrydream.com/MagicInk/#p98
154
10
Fail Fast. Iterate. Explore.
This isn’t construction or rocket science.
156
http://www.37signals.com/svn/archives2/the_long_road_to_simple_creating_debating_and_iterating_add_an_event.php
157
“ 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.
160
http://en.wikipedia.org/wiki/Waterfall_process
161
162
“ Genius is 1% inspiration and
99% perspiration.
”
Thomas Edison
163
http://www.lifeclever.com/2007/01/23/what-50-pounds-of-clay-can-teach-you-about-design/
164
165
166
167
http://worrydream.com/MagicInk/#p228
168
http://worrydream.com/MagicInk/#p228
169
“ 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.
”
Marisa Mayer Vice President for Search Products and User Experience at Google
http://www.uie.com/articles/fast_iterations/
170
http://gettingreal.37signals.com
171
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.
172
Thank You
Garrett Dimon
http://garrettdimon.com/pages/improving_interface_design
173