1. William H. Bowers – whb108@psu.edu Designing Look and Feel Cooper 19

2. William H. Bowers – whb108@psu.edu Visual Art vs. Visual Design Artists produce artifacts to provoke an aesthetic response Artists produce artifacts to provoke an aesthetic response Art is self-expressive Art is self-expressive Art meets the artist’s goals Art meets the artist’s goals Visual design meets the goals of the user, not the designer Visual design meets the goals of the user, not the designer Communicates to the end user Communicates to the end user

3. William H. Bowers – whb108@psu.edu Graphic Design and Visual Interface Design Design is within a functional framework Design is within a functional framework Designer must understand color, typefaces, form and composition Designer must understand color, typefaces, form and composition Also must understand interaction with and the behavior of the software Also must understand interaction with and the behavior of the software

4. William H. Bowers – whb108@psu.edu Graphic Design and UIs Graphic design has been mostly print Graphic design has been mostly print Graphic designers understand visual principles Graphic designers understand visual principles Weaker understanding of software and UIs Weaker understanding of software and UIs

5. William H. Bowers – whb108@psu.edu Visual Interface and Information Design Some graphic design skills necessary Some graphic design skills necessary Focus is on organizational aspects Focus is on organizational aspects Must be knowledgeable of interaction Must be knowledgeable of interaction Match visual structure with logical Match visual structure with logical

6. William H. Bowers – whb108@psu.edu Visual Interface and Information Design Communicate program states to users Communicate program states to users In web design, content outweighs function In web design, content outweighs function Work closely with information architects Work closely with information architects

7. William H. Bowers – whb108@psu.edu Visual Information Design Principles Avoid visual noise and clutter Avoid visual noise and clutter Use contrast, similarity and layering Use contrast, similarity and layering Provide structure and flow Provide structure and flow Be cohesive, consistent and appropriate Be cohesive, consistent and appropriate Integrate style and function Integrate style and function

8. William H. Bowers – whb108@psu.edu Avoid Visual Noise and Clutter Superfluous visual elements Superfluous visual elements Makes it impossible to communicate Makes it impossible to communicate Over embellished elements Over embellished elements Overuse of lines and rules Overuse of lines and rules Jumbled, overcrowded screens Jumbled, overcrowded screens Too much functionality in too little space Too much functionality in too little space

9. William H. Bowers – whb108@psu.edu Avoid Visual Noise and Clutter Keep non-entertainment UI’s simple Keep non-entertainment UI’s simple Use simple forms and graphics Use simple forms and graphics Muted (less saturated) colors Muted (less saturated) colors One or two fonts in one or two sizes One or two fonts in one or two sizes Make similar items appear similar Make similar items appear similar Use controls that can serve multiple purposes Use controls that can serve multiple purposes

10. William H. Bowers – whb108@psu.edu Contrast Visual contrast between active and passive elements Visual contrast between active and passive elements Contrast between logical sets Contrast between logical sets Can indicate importance Can indicate importance Pseudo 3D Pseudo 3D Hue, saturation and brightness Hue, saturation and brightness Spatial (positional) contrast Spatial (positional) contrast Shape, orientation, size Shape, orientation, size

11. William H. Bowers – whb108@psu.edu Layering Receding Receding –Dark –Cool –Desaturated –Small elements

12. William H. Bowers – whb108@psu.edu Layering Advancing Advancing –Light –Warm –Saturated –Large elements

13. William H. Bowers – whb108@psu.edu Figure and Ground We usually perceive We usually perceive –Light objects as figures –Dark objects as background Center the figures on the background Center the figures on the background Give figures and background equal weight Give figures and background equal weight

14. William H. Bowers – whb108@psu.edu Visual Testing Squint Squint Use a mirror Use a mirror Invert the screen Invert the screen

15. William H. Bowers – whb108@psu.edu Structure and Flow Grouping Grouping –Position or proximity –Alignment –Color –Texture –Size Shape Use clear, simple grids Use clear, simple grids

16. William H. Bowers – whb108@psu.edu Alignment and Grids

17. William H. Bowers – whb108@psu.edu Logical Flow

18. William H. Bowers – whb108@psu.edu Symmetry and Balance

19. William H. Bowers – whb108@psu.edu Appropriate Imagery Understand what needs to be communicated Understand what needs to be communicated Understand how the user thinks about what must be communicated Understand how the user thinks about what must be communicated Must know the visual language of the user’s domain and environment Must know the visual language of the user’s domain and environment Culturally dependent Culturally dependent

20. William H. Bowers – whb108@psu.edu Function Oriented Icons Represent action and verb Represent action and verb Make sure meanings are appropriate for the audience Make sure meanings are appropriate for the audience Group related functions Group related functions Keep icons simple Keep icons simple Reuse elements, when possible Reuse elements, when possible

21. William H. Bowers – whb108@psu.edu Branding Sum of interactions people have with a company Sum of interactions people have with a company First impressions of product are important First impressions of product are important Build customer relationships through branding Build customer relationships through branding

22. William H. Bowers – whb108@psu.edu Principles of Visual Information Design Two problems (according to Tufte) Two problems (according to Tufte) –Difficult to display multidimensional information on 2D surface –Resolution does not support dense information

23. William H. Bowers – whb108@psu.edu Tufte’s Grand Principles Enforce visual comparisons Enforce visual comparisons Show causality Show causality Show multiple variables Show multiple variables Integrate text, graphics and data Integrate text, graphics and data Quality, relevance and integrity Quality, relevance and integrity Show things adjacent in space Show things adjacent in space Don’t de-quantify quantifiable data Don’t de-quantify quantifiable data

24. William H. Bowers – whb108@psu.edu Enforce Visual Comparisons Compare related variables Compare related variables Show trends Show trends Compare before and after Compare before and after Use previews Use previews

25. William H. Bowers – whb108@psu.edu Show Causality Show consequences Show consequences Demonstrate cause and effect Demonstrate cause and effect

26. William H. Bowers – whb108@psu.edu Show Multiple Variables Display if related Display if related Don’t sacrifice clarity Don’t sacrifice clarity

27. William H. Bowers – whb108@psu.edu Integrate Text, Graphics and Data Separate keys and legends are less effective Separate keys and legends are less effective Shifting focus is distracting Shifting focus is distracting http://www.koa.com/where/pa/ http://www.koa.com/where/pa/ http://www.koa.com/where/pa/

28. William H. Bowers – whb108@psu.edu Quality, Relevance and Integrity Insure data supports goals Insure data supports goals Insure quality of data Insure quality of data Poor quality or missing data destroys credibility Poor quality or missing data destroys credibility

29. William H. Bowers – whb108@psu.edu Show Things Adjacent in Space Don’t superimpose Don’t superimpose Show sequential images Show sequential images

30. William H. Bowers – whb108@psu.edu Don’t De-quantify Quantifiable Data Graphs are useful to see relationships Graphs are useful to see relationships Must retain numbers to be meaningful Must retain numbers to be meaningful

31. William H. Bowers – whb108@psu.edu Text Text forms recognizable shapes Text forms recognizable shapes ALL CAPS ARE HARD TO READ ALL CAPS ARE HARD TO READ Visually show what Visually show what Textually show which Textually show which Use high contrast with background Use high contrast with background Don’t use less than 10 point fonts Don’t use less than 10 point fonts Keep text short Keep text short

32. William H. Bowers – whb108@psu.edu Color Draws attention Draws attention Improves navigation and scanning speed Improves navigation and scanning speed Shows relationships Shows relationships Seven or more degrades use Seven or more degrades use Don’t put complementary colors together Don’t put complementary colors together

33. William H. Bowers – whb108@psu.edu Standards and Guidelines Develop for the product Develop for the product Does not insure a good UI Does not insure a good UI Must evolve with technology Must evolve with technology Should not be rigid rules Should not be rigid rules Violate only when necessary Violate only when necessary

34. William H. Bowers – whb108@psu.edu Questions & Discussion