1. CS147 - Terry Winograd - 1 Lecture 7 – Visual Design Terry Winograd CS147 - Introduction to Human-Computer Interaction Design Computer Science Department Stanford University Autumn 2006

2. CS147 - Terry Winograd - 2 Learning Goals Understand the basic principles of visual design and be able to apply them in analyzing or designing an interface Know the goals and techniques of data visualization

3. CS147 - Terry Winograd - 3 Types of visual presentations Interfaces Data visualization

4. CS147 - Terry Winograd - 4 Good Graphics [Mullet & Sano] Communication –Maximum meaning, minimum means Elegance –Maximum of satisfaction from a minimum of components Simplicity –Simple, bold, direct

5. CS147 - Terry Winograd - 5 Graphic goals Approachability Recognizeability Immediacy Usability Unity of Form

6. CS147 - Terry Winograd - 6 Visual language

8. CS147 - Terry Winograd - 8

9. CS147 - Terry Winograd - 9 CSS Styles - Zen garden www.csszengarden.com

10. CS147 - Terry Winograd - 10 Visual complexity

11. CS147 - Terry Winograd - 11 Problems Interference Structuring elements rather than natural Excessive detail or embellishment Gratuitous dimensionality Visual noise Distracting motion False structure

12. CS147 - Terry Winograd - 12 Understand what the Eye does Naturally Scanning Picking out Grouping Perceiving motion

13. CS147 - Terry Winograd - 13 Scanning

14. A B C D E F G H I J K L M N O P QS R T U V W X Y Z Picking out

15. A B C D E F G H I J K L M N O P QS R T U V W X Y Z

16. CS147 - Terry Winograd - 16 Grouping - Gestalt Laws Köhler, Koffka, Wertheimer, Berlin 1912 Good shape Proximity Closure Similarity Continuity Symmetry Common Fate If some words in this text blinked they would seem to belong together.

19. CS147 - Terry Winograd - 19 Layouts The eye craves structure and will seek to impose its own organization onto a design whose structure is not readily apparent. This breakdown threatens communication, since the designer is no longer in control of the message.

20. CS147 - Terry Winograd - 20 Grid-based layout An unorganized page that does not use a grid Same page using a grid Copyright © Bob Hoffman Encyclopedia of Educational Technology http://coe.sdsu.edu/eet/Bob Hoffman

21. CS147 - Terry Winograd - 21 Techniques Symmetry Alignment Optical adjustment for human vision Negative space

22. CS147 - Terry Winograd - 22 Optical Adjustment On WArn

23. CS147 - Terry Winograd - 23 Negative Space

24. Fonts Use them sparingly –What should stand out? Readability vs. style –Serif fonts –Sans-serif fonts Screen and print are different

25. CS147 - Terry Winograd - 25 Books on doing visual design for interfaces Patterns: –Jenifer Tidwell, Desigining Interfaces Guidelines: –Roger Parker, One-minute Designer Principles –Robin Williams, The Non-Designer’s Design Book

26. CS147 - Terry Winograd - 26 Information Visualization Can be 2D (e.g., Powerpoint charts) or 3D. Use human perceptual abilities more fully –Multiple channels (position, size, color,...) –Gestalt recognition –Relative values (e.g., size, color,...) –Topology (e.g., connection, enclosure)

27. CS147 - Terry Winograd - 27 Data Visualizations

28. CS147 - Terry Winograd - 28 Tufte

29. CS147 - Terry Winograd - 29 Minard

30. CS147 - Terry Winograd - 30 Fisheye Views

31. Table Lens

32. CS147 - Terry Winograd - 32 Perspective Wall

33. Hyperbolic Browser

34. Treemap (Shneiderman)

35. CS147 - Terry Winograd - 35 Cone tree

36. Visual thesaurus

37. CS147 - Terry Winograd - 37 The Big Picture - CNET News.com