Design Strategies for Understanding
•
6 likes•11,300 views
Lecture from Stanford's cs247 covering Metaphors, Visual Design and Interactions that support understanding.
Report
Share
Design Strategies for Understanding
- 1. CS 247: Week 8 Design Strategies for Understanding Metaphor, Visual Design and Interactions CHRISTINA WODTKE MANEESH AGRAWALLA JULIE STANFORD CS247.STANFORD.EDU
- 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/
- 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
- 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
- 25. Mixed metaphors Spiral and harvest
- 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.
- 39. All design elements have meaning
- 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.
- 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?
- 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/
- 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
- 105. Fragmenting • Benefits include: • working with individual elements of complex structures; • obtaining information about a representations inner structure; • revealing hidden information and patterns
- 107. Why? Make information modular in order to recombine
- 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
- 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