Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Strategies for Understanding

6,739 views

Published on

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

Published in: Design

Design Strategies for Understanding

  1. 1. CS 247: Week 8 Design Strategies for Understanding Metaphor, Visual Design and Interactions CHRISTINA WODTKE MANEESH AGRAWALLA JULIE STANFORD CS247.STANFORD.EDU
  2. 2. Metaphor and Analogy
  3. 3. Richard Saul Wurman
  4. 4. Which direction is good?
  5. 5. Which direction is the future?
  6. 6. Metaphor is fundamental to how we think - George Lakoff & Mark Johnson Metaphors We Live By
  7. 7. Micro Metaphors • Embedded in our language • Rooted in our world view • Shaping our perceptions
  8. 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. 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/
  10. 10. Hersey-Blanhard Model
  11. 11. “Any time you see signs or labels added to a device, it is an indication of bad design.” Don Norman
  12. 12. Mundo Metaphors
  13. 13. pie
  14. 14. Macro Metaphor
  15. 15. Southwest Airlines 1995
  16. 16. Julie Stanford as a Stanford student!
  17. 17. Hipstomatic
  18. 18. Find the metaphors on your computer 2 Minutes List on paper
  19. 19. The problem with metaphors
  20. 20. Decoration, not metaphor http://diytoolkit.org/background/
  21. 21. Mixed metaphors Spiral and harvest
  22. 22. Mixed representa tions
  23. 23. Redesign computer as a kitchen 5 Minutes Draw in sketchbook
  24. 24. Share with table 5 minutes (divide time fairly)
  25. 25. Visual Language
  26. 26. Different things are noticed Examples via Stephen Anderson
  27. 27. Different things are noticed
  28. 28. Different things are noticed
  29. 29. Different things are noticed
  30. 30. Make different things very different Make similar things exactly alike Looks like a mistake Looks purposeful
  31. 31. One big idea Different things look different. Same things look same.
  32. 32. Visual Design Rules And now…
  33. 33. All design elements have meaning
  34. 34. BUTTONS HAVE MEANING
  35. 35. LINKS HAVE MEANING
  36. 36. LINKS HAVE MEANING
  37. 37. INPUTS HAVE MEANING
  38. 38. Hierarchy Creates Clarity
  39. 39. Cross your eyes slightly
  40. 40. Subtlety will send you to the poor house. Tell your users what to do. Clarity is relaxing, not annoying.
  41. 41. Use accents sparingly If everything is important, nothing is.
  42. 42. Proximity Matters
  43. 43. 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)
  44. 44. WHICH PAIR OF PANTS ARE NOW 39.99?
  45. 45. WHICH CAR IS 49.99?
  46. 46. Why is the response so far from the invitation?
  47. 47. LAYOUT Tell the eye where to look
  48. 48. painting
  49. 49. painting
  50. 50. 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/
  51. 51. Everything is equally important
  52. 52. Clear Hiearchy
  53. 53. 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.
  54. 54. TYPE! Keep it simple, keep it high contrast
  55. 55. I’m a Serif I’m a sans-serif
  56. 56. I am Times New Roman Hey, I’m Arial
  57. 57. I am Comic Sans I am the devil
  58. 58. Papyrus is the new comic sans Helvetica is worshiped until it’s trite
  59. 59. I am Impact LOL
  60. 60. Georgia is always welcome Display fonts are hard to read As are scripts
  61. 61. 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.
  62. 62. To be great is to be misunderstood.
  63. 63. 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.
  64. 64. To be great is to be misunderstood.
  65. 65. 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.
  66. 66. To be great is to be misunderstood.
  67. 67. My Design Hacks
  68. 68. FONTS: few fonts + contrast 2 fonts Headline and Body 3 font sizes HUGE Normal Legal
  69. 69. Color: keep it simple Neutrals, one color with variations and one accent
  70. 70. NATURE
  71. 71. Got a lot of pictures? Use less color in the interface.
  72. 72. Just say no to stock photos They always look a bit… surreal
  73. 73. 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.
  74. 74. Use Style Tiles • Simple one page document to reference when you make a design choice
  75. 75. Make a Style Tile for your kitchen computer
  76. 76. Q&A
  77. 77. Appendix
  78. 78. Interactions for understanding From the Work of Dr. Karl Fast
  79. 79. Taxonomy •Animating •Annotating •Chunking •Cloning •Collecting •Composing •Cutting •Filtering •Fragmenting •Probing •Rearranging •Repicturing •Searching
  80. 80. Fragmenting • Benefits include: • working with individual elements of complex structures; • obtaining information about a representations inner structure; • revealing hidden information and patterns
  81. 81. Composing Freelisting? Mind Maps?
  82. 82. Why? Make information modular in order to recombine
  83. 83. Chunking into affinity groups
  84. 84. Re-picturing Using a pre-existing or created framework to make order of a body fo information
  85. 85. Rearranging Moving items from territory to territory to understand impact
  86. 86. Filtering Hard manually, easier digitally
  87. 87. Annotating
  88. 88. Animating https://www.nytimes.c om/interactive/2018/ 03/19/upshot/race- class-white-and-black- men.html
  89. 89. Also animating When you move things around to see better how they’ll fit
  90. 90. 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

×