Lecture from Stanford's cs247 covering Metaphors, Visual Design and Interactions that support understanding.

1. CS 247: Week 8
Design Strategies for
Understanding
Metaphor, Visual Design and Interactions
CHRISTINA WODTKE
MANEESH AGRAWALLA
JULIE STANFORD
CS247.STANFORD.EDU

2. Metaphor and
Analogy

3. Richard Saul Wurman

4. Which direction is good?

5. Which direction is the future?

6. Metaphor is
fundamental to how we
think
- George Lakoff &
Mark Johnson
Metaphors We Live By

7. Micro
Metaphors
• Embedded in our language
• Rooted in our world view
• Shaping our perceptions

8. More is up/
Good is up
• I’m feeling up. That boosted my
spirits.
• I’m feeling down.
• Get up. Wake up. She rises
early.
• He’s at the peak of health.
• He’s under the weather.
• I am on top of the situation. He
is under my power.
• My income rose last year.

9. Future is forward, past is back
• In the weeks ahead of us…
• That’s all behind us…
• I’m looking forward to seeing him.
• Back to the good old days
See also http://blog.nearfuturelaboratory.com/2010/09/26/representations-of-
the-future-with-graphs/

12. Hersey-Blanhard Model

13. “Any time you see
signs or labels
added to a device,
it is an indication
of bad design.”
Don Norman

14. Mundo Metaphors

15. pie

17. Macro
Metaphor

18. Southwest Airlines 1995

20. Julie Stanford as a
Stanford student!

21. Hipstomatic

22. Find the
metaphors
on your
computer
2 Minutes
List on paper

23. The problem with metaphors

24. Decoration, not metaphor
http://diytoolkit.org/background/

25. Mixed metaphors
Spiral and harvest

26. Mixed
representa
tions

27. Redesign
computer
as a
kitchen
5 Minutes
Draw in
sketchbook

28. Share
with table
5 minutes
(divide time fairly)

29. Visual Language

30. Different things are noticed
Examples via Stephen
Anderson

31. Different things are noticed

32. Different things are noticed

33. Different things are noticed

35. Make different
things very different
Make similar things exactly alike
Looks like a mistake Looks purposeful

36. One big idea
Different things look different. Same things look same.

37. Visual
Design
Rules
And now…

39. All design elements have
meaning

40. BUTTONS HAVE MEANING

41. LINKS HAVE MEANING

42. LINKS HAVE MEANING

43. INPUTS HAVE MEANING

44. Hierarchy Creates Clarity

46. Cross your eyes slightly

49. Subtlety will send you
to the poor house.
Tell your users what to
do.
Clarity is relaxing, not
annoying.

50. Use accents sparingly
If everything is important, nothing is.

51. Proximity
Matters

52. 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)

53. WHICH
PAIR OF
PANTS ARE
NOW 39.99?

54. WHICH CAR
IS 49.99?

55. Why is the response so far from the
invitation?

57. LAYOUT
Tell the eye where to look

58. painting

59. painting

62. Comics are read
in the west left to
right, like a page.
However, good
artists add visual
elements to help
you read the flow.
http://samkieth.blogspot.com/

63. Everything is equally
important

64. Clear Hiearchy

65. There is
composition
here
Despite the density of information, the eye lands on the product, and moves to the buy buttons.
Amazon reassures the user this is a good place to buy with a plethora of data. It’s part of their brand.

66. TYPE!
Keep it simple,
keep it high contrast

67. I’m a Serif
I’m a sans-serif

68. I am Times New Roman
Hey, I’m Arial

69. I am Comic Sans
I am the devil

70. Papyrus is the new comic sans
Helvetica is worshiped until it’s trite

71. I am Impact
LOL

73. Georgia is always welcome
Display fonts are hard to read
As are scripts

74. 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. To be great is to be
misunderstood.

76. 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. To be great is to be
misunderstood.

78. 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.

79. To be great is to be
misunderstood.

80. My Design Hacks

81. FONTS: few fonts + contrast
2 fonts
Headline and Body
3 font sizes
HUGE Normal Legal

82. Color: keep it simple
Neutrals, one color with variations and one accent

84. NATURE

88. Got a lot of pictures? Use less color in the interface.

92. Just say no to
stock photos
They always look a bit… surreal

93. DO LESS
• Only use 1-2 fonts.
• Only use 3 font sizes, all very different. Perhaps a
fourth for footer text.
• Only use one color, with variations, and one “accent”
color.
• Turn on the grid (if you are using Photoshop, etc)
• Never align center.
• Don’t use stock photography, unless you have
awesome taste. It has no soul.
• Know what purpose everything has. No purpose, take
it out.

94. Use Style
Tiles
• Simple one page document to reference when you make
a design choice

99. Make a
Style Tile
for your
kitchen
computer

100. Q&A

101. Appendix

102. Interactions for
understanding
From the Work of Dr. Karl Fast

104. Taxonomy
•Animating
•Annotating
•Chunking
•Cloning
•Collecting
•Composing
•Cutting
•Filtering
•Fragmenting
•Probing
•Rearranging
•Repicturing
•Searching

105. Fragmenting
• Benefits include:
• working with individual elements of complex structures;
• obtaining information about a representations inner structure;
• revealing hidden information and patterns

106. Composing
Freelisting? Mind Maps?

107. Why?
Make information modular in order to
recombine

108. Chunking
into affinity groups

109. Re-picturing
Using a pre-existing or created framework to
make order of a body fo information

110. Rearranging
Moving items from territory to territory to
understand impact

111. Filtering
Hard manually, easier digitally

112. Annotating

113. Animating
https://www.nytimes.c
om/interactive/2018/
03/19/upshot/race-
class-white-and-black-
men.html

114. Also animating
When you move things around to see better how they’ll fit

115. Add interactions for your kitchen
computer.
•Animating
•Annotating
•Chunking
•Cloning
•Collecting
•Composing
•Cutting
•Filtering
•Fragmenting
•Probing
•Rearranging
•Repicturing
•Searching
Interaction and the epistemic potential of digital libraries
Fast & Selig, 2010