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.

1. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
@cwodtke
INTERFACE DESIGN FUNDAMENTALS

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

6. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

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

12. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

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.

18. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

19. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

20. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

21. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

22. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

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?

24. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

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?

29. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

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

33. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
5 Minutes

34. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
5 Minutes

35. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
10 Minutes

36. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

37. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

38. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

39. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
BUTTONS HAVE MEANING

40. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

41. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
LINKS HAVE MEANING

42. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

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.

44. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

45. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

46. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

47. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

48. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

49. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
10 Minutes

50. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

51. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

52. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

53. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

54. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

55. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
On the product page (apples!)
For the company to succeed
2 minutes

56. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
5 minutes

57. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

58. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
PAINTING

59. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
PAINTING

60. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

61. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

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/

63. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

64. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

65. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

66. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

67. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
I AM TIMES NEW
ROMAN
Hey, I’m Arial

68. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
I AM COMIC SANS
I am the devil

69. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
I AM IMPACT
LOL

70. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

71. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
Georgia is always welcome

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.

78. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

79. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

80. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

81. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

82. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
NATURE

83. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

84. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

85. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

86. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

87. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

88. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

89. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

90. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

91. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
WHAT DO YOU THINK
ABOUT WHEN YOU
THINK OF A PAINTING
PROGRAM?

92. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
92
Poetics: Control, power, precision

93. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
93
Values: Lightweight, easy, sketchy,

94. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

95. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
WHAT DO YOU THINK
OF WHEN YOU THINK OF
WRITING?

96. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
96
Power, control,
precision,

97. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
97
mWriter
uty, peace, zen

98. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
98

99. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
WHAT DO YOU THINK
OF WHEN YOU THINK OF
SOCIAL?

100. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

101. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

102. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

103. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

104. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

105. @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

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