From Stanford BUS 40: User Experience Design for the NonDesigner
How do we get from task flows to interface screens? How do we make sure they are clear and effective?
Covering key design ideas when designing the user interface.
2. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
“Like putting
an Armani suit
on Attila the
Hun, interface
design only
tells how to
dress up an
existing
behavior.” –
Alan Cooper
3. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
A framework is the way elements will be organized
on a page for use and understanding
4. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
From last week’s homework 5min
5. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
A task analysis
From Information Architecture: Blueprints for the Web, this is a task analysis
for a website for Sundance film festival, featuring a schedule planner
7. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Each task could have a page
8. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
First Yahoo 1994
1995: first graphic logo
Remind you of something?
9. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Including the schedule creator tool…
10. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Wizards: Many boxes,
many pages
11. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
When to Use
Wizards
• Multi step process
• Must be completed in order
• The audience is not
technically savvy
• Bandwidth is low
13. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
What if we put the tasks with
the thing they were
modifying?
14. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
It’s a toolbar
Tools here
Item affected
here
15. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Toolbars
Tools here Item affected
here
And here
And here
Photoshop: toolbars on steroids
16. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
The web uses toolbars more
sparingly
17. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
ToolbarsTools here
Item affected
here
A simpler design is
better for
infrequent use.
23. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
What other ways can we organize elements? Control
Panels? Carousels? Thumbnail<-> Full Size?
25. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Two videos sites.
The “meal” is the video, and the
tools to consume (or play with) it
are arrayed around the main meal.
(P.S. There are toolbars too)
26. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
WHICH PAIR OF
PANTS ARE NOW
39.99?
27. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
WHICH CAR IS 49.99?
28. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Why is the response so far from
the invitation?
30. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
When designing the page,
group items by similarity and
similarity of task (navigation
items together, editing items
together)
Give them visual importance
based on user number,
usage frequency and
importance to business.
31. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
• Create “zones”
for
functionality
groups.
• You can group
them by
putting white
space around
them, or use
lines
• Remember to
keep tools
close to the
thing your
working on
32. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
IF YOU ARE PUTTING BOXES AROUND THINGS TO MAKE IT
CLEAR, YOU PROBABLY SHOULD START OVER
43. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Subtlety will send you to the poor
house.
Tell your users what to do.
Clarity is relaxing, not annoying.
55. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
On the product page (apples!)
For the company to succeed
2 minutes
62. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Comics are read in
the west left to
right, like a page.
However, good
artists add visual
elements to help
you flow.
http://samkieth.blogspot.com/
72. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
A foolish consistency is the hobgoblin of little minds,
adored by little statesmen and philosophers and
divines. With consistency a great soul has simply
nothing to do. He may as well concern himself with his
shadow on the wall. Speak what you think now in hard
words, and to-morrow speak what to-morrow thinks in
hard words again, though it contradict every thing you
said to-day. — 'Ah, so you shall be sure to be
misunderstood.' — Is it so bad, then, to be
misunderstood? Pythagoras was misunderstood, and
Socrates, and Jesus, and Luther, and Copernicus, and
Galileo, and Newton, and every pure and wise spirit
that ever took flesh.
To be great is to be misunderstood.
73. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
To be great is to be
misunderstood.
74. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
A foolish consistency is the hobgoblin of little
minds, Adored by little stAtesmen And
philosophers And divines. With consistency A
greAt soul hAs simply nothing to do. he mAy As
Well concern himself With his shAdoW on the WAll.
speAk WhAt you think noW in hArd Words, And to-
morroW speAk WhAt to-morroW thinks in hArd
Words AgAin, though it contrAdict every thing
you sAid to-dAy.
— 'Ah, so you shAll be sure to be misunderstood.' —
is it so bAd, then, to be misunderstood?
pythAgorAs WAs misunderstood, And socrAtes,
And Jesus, And luther, And copernicus, And
gAlileo, And neWton, And every pure And Wise
spirit thAt ever took flesh.
to be greAt is to be misunderstood.
75. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
to be greAt is to be
misunderstood.
76. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
A foolish consistency is the hobgoblin of little minds,
adored by little statesmen and philosophers and divines.
With consistency a great soul has simply nothing to do. He
may as well concern himself with his shadow on the wall.
Speak what you think now in hard words, and to-morrow
speak what to-morrow thinks in hard words again, though
it contradict every thing you said to-day.
— 'Ah, so you shall be sure to be misunderstood.' —
Is it so bad, then, to be misunderstood? Pythagoras was
misunderstood, and Socrates, and Jesus, and Luther, and
Copernicus, and Galileo, and Newton, and every pure and
wise spirit that ever took flesh.
To be great is to be misunderstood.
77. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
To be great is to be
misunderstood.
91. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
WHAT DO YOU THINK
ABOUT WHEN YOU
THINK OF A PAINTING
PROGRAM?
106. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Q&A
"In an architecture of
content, the information
becomes the interface." --
Edward Tufte
Notes de l'éditeur
2 songs (jazz)
You can change the same kind of software with different values
You can change the same kind of software with different values