1. Prof. James A. Landay University of Washington Autumn 2004 Visual Information Design November 4, 2004

2. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation2 Hall of Fame or Shame?

3. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation3 Hall of Shame! 20 pages of scrolling to get to the next action

4. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation4 Hall of Shame! 20 pages of scrolling to get to the next action

5. Prof. James A. Landay University of Washington Autumn 2004 Visual Information Design November 4, 2004

6. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation6 Outline Review Rapid Prototyping History of visual design Grid systems Using small changes Color Proportion & Scale Design economy

7. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation7 Review of Rapid Prototyping UI tools good for testing ? –more developed UI ideas Two styles of tools –“Prototyping” vs. UI builders –what is the difference? Both types generally ignore the “insides” of application -> this is research

8. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation8

9. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation9 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.”

10. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation10 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.”

11. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation11 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.”

12. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation12 Jan Tschichold’s Revolution Champion of Modernist Typography Die Neue Typographie Berlin, 1928 Bauhaus school Dessau, 1925-26

13. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation13 Type Classifications Sans Serif Serif

14. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation14 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

15. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation15 Grid Systems A key pattern for implementing rationality, modernism, asymmetry Note that no elements are “centered” Java Look and Feel Design Guidelines

16. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation16 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

17. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation17 Small Multiples Economy of line Many similarities enable us to notice differences IMAGE REMOVED

18. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation18 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, http:///www.sims.berkeley.edu/~lcush/GenCat.html/

19. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation19 Reid Miles, Blue Note Cover S M A L L M U L T I P L E S

20. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation20 Tree Maps (SmartMoney)

21. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation21 Tree Maps (PhotoMesa)

22. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation22 Design Galleries

23. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation23 Design Galleries

24. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation24 London Underground

25. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation25 Color Spaces

26. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation26 Technology-Centered Colors Nice Hex codes, “evenly” distributed But yowch! Lime green and hot pink?

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

28. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation28 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 Key: no two monitors looks alike GUIR logo # AF 2534 Web Safe #993333

29. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation29 Color (Java L&F) Six color semantic scheme Clean, consistent look Easy on eyes (mostly gray)

30. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation30 Color: Edward Tufte IMAGE REMOVED Japan & Sea of Japan using color hues for altitude – can’t tell what is land & what is sea

31. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation31 Color: Edward Tufte IMAGE REMOVED Using luminance instead for altitude. Sea is shades of blue (darker -> deeper) and land is brown (darker -> higher). This works!

32. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation32

33. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation33 How to get color right Design in grayscale first Keep luminance values from grayscale when moving to color

34. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation34 Proportion and Scale Kevin Mullet and Darrell Sano, Designing Visual Interfaces

35. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation35 “Pridefully Obvious Presentation”

36. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation36 Marks of Typographic Style http://www.adobe.com/type/topics/info5.html Ligatures Upper and lower case numbers

37. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation37 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

38. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation38

39. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation39 Palm’s Design Economy

40. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation40 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

41. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation41 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 –http://www.adobe.com/type/

42. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation42 Further Reading Color: Charles Poynton, A Technical Introduction to Digital Video –also his SIGGRAPH course –web http://www.inforamp.net/~poynton/ Typography on the web –http://www.pemberley.com/janeinfo/latin 1.html –http://www.microsoft.com/typography/

43. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation43 Summary Grid systems help us put information on the page in a logical manner –similar things close together Small changes help us see key differences (e.g., small multiples) Abstraction is a key to design RGB color space leads to bad colors Use color properly – not for ordering!

44. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation44 Next Time Interactive Prototype #1 due –2 copies of write-up due at START of class –Attendance required unless you discuss with me in advance –Two members of your team will present –Prototype must be executable by us & other students (we will use them during class next Thur)