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

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

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

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

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

CS147 - Terry Winograd - 6 Visual language

CS147 - Terry Winograd - 8

CS147 - Terry Winograd - 9 CSS Styles - Zen garden

CS147 - Terry Winograd - 10 Visual complexity

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

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

CS147 - Terry Winograd - 13 Scanning

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

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

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.

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.

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 Hoffman

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

CS147 - Terry Winograd - 22 Optical Adjustment On WArn

CS147 - Terry Winograd - 23 Negative Space

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

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

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)

CS147 - Terry Winograd - 27 Data Visualizations

CS147 - Terry Winograd - 28 Tufte

CS147 - Terry Winograd - 29 Minard

CS147 - Terry Winograd - 30 Fisheye Views

Table Lens

CS147 - Terry Winograd - 32 Perspective Wall

Hyperbolic Browser

Treemap (Shneiderman)

CS147 - Terry Winograd - 35 Cone tree

Visual thesaurus

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