James A. Landay Jason I. Hong Berkeley Summer Engineering Institute 14 – 16 June 2004 Visual Information Design

June 2004User Interface Design, Prototyping, and Evaluation2

June 2004User Interface Design, Prototyping, and Evaluation3 Quotes: Mullet and Sano “Design is not something that can be applied after the fact, when the fundamental organization of the product has already been determined–though this is indeed a common misconception. To be effective, design must be an integral part of the product development lifecycle.”

June 2004User Interface Design, Prototyping, and Evaluation4 Quotes: Mihai Nadin “Method helps intuition when it is not transformed into dictatorship. Intuition augments method if it does not instill anarchy. In every moment of our semiotic existence, method and intuition complement one another.”

June 2004User Interface Design, Prototyping, and Evaluation5 Quotes: Antoine de Saint Exupery “In anything at all, perfection is attained not when there is no longer anything to add, but when there is no longer anything to take away.”

June 2004User Interface Design, Prototyping, and Evaluation6 Jan Tschichold’s Revolution Champion of Modernist Typography Die Neue Typographie Berlin, 1928 Bauhaus school Dessau,

June 2004User Interface Design, Prototyping, and Evaluation7 Type Classifications Sans Serif Serif

June 2004User Interface Design, Prototyping, and Evaluation8 Asymmetric Typography How blocks used to be arranged in magazines. Schematic, thoughtless centering of blocks (= ugly). The same blocks, correctly arranged in the same type-area. Constructive, meaningful, and economical (= beautiful). J A N T S C H I C H O L D

June 2004User Interface Design, Prototyping, and Evaluation9 Grid Systems A key pattern for implementing rationality, modernism, asymmetry Note that no elements are “centered” Java Look and Feel Design Guidelines

June 2004User Interface Design, Prototyping, and Evaluation10 Quotes: Bringhurst & Tufte “Some space must be narrow so that other space may be wide, and some space must be emptied so that other space may be filled.” – Robert Bringhurst The Elements of Typographic Style “Information consists of differences that make a difference.” – Edward Tufte Envisioning Information

June 2004User Interface Design, Prototyping, and Evaluation11 Small Multiples Economy of line Many similarities enable us to notice differences IMAGE REMOVED

June 2004User Interface Design, Prototyping, and Evaluation12 International Women’s Day Diaz, Estela 1974 March 8 - International Women’s Day Echeverria, Heriberto 1971 March 8 - International Women’s Day S M A L L M U L T I P L E S Cuban Poster Art Gallery,

June 2004User Interface Design, Prototyping, and Evaluation13 Reid Miles, Blue Note Cover S M A L L M U L T I P L E S

June 2004User Interface Design, Prototyping, and Evaluation14 Tree Maps (SmartMoney)

June 2004User Interface Design, Prototyping, and Evaluation15 Tree Maps (PhotoMesa)

June 2004User Interface Design, Prototyping, and Evaluation16 Design Galleries

June 2004User Interface Design, Prototyping, and Evaluation17 Design Galleries

June 2004User Interface Design, Prototyping, and Evaluation18 London Underground

June 2004User Interface Design, Prototyping, and Evaluation19 Color Spaces

June 2004User Interface Design, Prototyping, and Evaluation20 Technology-Centered Colors Nice Hex codes, “evenly” distributed But yowch! Lime green and hot pink?

June 2004User Interface Design, Prototyping, and Evaluation21 Human-Centered Colors Munsell (left): Perceptually based Pantone (right): Functionally based Anne Spalter, The Computer in the Visual Arts

June 2004User Interface Design, Prototyping, and Evaluation22 Color is problematic On-screen color varies widely from device to device for two reasons The device may not be able to display that color (e.g. #AF5234), replacing it with something else –Web safe sometimes helps here The presentation of that color GUIR logo # AF 2534 Web Safe #993333

June 2004User Interface Design, Prototyping, and Evaluation23 Color (Java L&F) Six color semantic scheme Clean, consistent look Easy on eyes (mostly gray)

June 2004User Interface Design, Prototyping, and Evaluation24 Color: Edward Tufte IMAGE REMOVED

June 2004User Interface Design, Prototyping, and Evaluation25 Color: Edward Tufte IMAGE REMOVED

June 2004User Interface Design, Prototyping, and Evaluation26

June 2004User Interface Design, Prototyping, and Evaluation27 How to get color right Design in grayscale first Keep luminance values from grayscale when moving to color

June 2004User Interface Design, Prototyping, and Evaluation28 Proportion and Scale Kevin Mullet and Darrell Sano, Designing Visual Interfaces

June 2004User Interface Design, Prototyping, and Evaluation29 “Pridefully Obvious Presentation”

June 2004User Interface Design, Prototyping, and Evaluation30 Marks of Typographic Style Ligatures Upper and lower case numbers

June 2004User Interface Design, Prototyping, and Evaluation31 Proper Quotes Distinguishing open from close makes reading easier Tags in HTML have open and close, e.g., as opposed to |html| Spanish has open and close exclamation, question mark, e.g., ¡hay caramba!, ¿que pasa? Quotes “ ” have open and close too Quotes in HTML ““Left Double Quotation ””Right Double Quotation ‘ ‘Left Single Quotation ’ ’Right Single Quotation

June 2004User Interface Design, Prototyping, and Evaluation32

June 2004User Interface Design, Prototyping, and Evaluation33 Palm’s Design Economy

June 2004User Interface Design, Prototyping, and Evaluation34 Some Starting Points Gather materials you find successful –Could be from a very different domain –“Good artists borrow, great artists steal” - Picasso Include visual design professionals in the iterative design cycle

June 2004User Interface Design, Prototyping, and Evaluation35 Further Reading Kevin Mullet and Darrell Sano, Designing Visual Interfaces Edward Tufte’s books and course Anne Spalter, The Computer in the Visual Arts Robin Williams, The Non-Designer’s Design Book Typography –Jan Tschichold, The New Typography –Robert Bringhurst, The Elements of Typographic Style –

June 2004User Interface Design, Prototyping, and Evaluation36 Further Reading Color: Charles Poynton, A Technical Introduction to Digital Video –also his SIGGRAPH course –web Typography on the web – 1.html –