William H. Bowers – Designing Look and Feel Cooper 19

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – Layering Receding Receding –Dark –Cool –Desaturated –Small elements

William H. Bowers – Layering Advancing Advancing –Light –Warm –Saturated –Large elements

William H. Bowers – 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

William H. Bowers – Visual Testing Squint Squint Use a mirror Use a mirror Invert the screen Invert the screen

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

William H. Bowers – Alignment and Grids

William H. Bowers – Logical Flow

William H. Bowers – Symmetry and Balance

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – Show Causality Show consequences Show consequences Demonstrate cause and effect Demonstrate cause and effect

William H. Bowers – Show Multiple Variables Display if related Display if related Don’t sacrifice clarity Don’t sacrifice clarity

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – Show Things Adjacent in Space Don’t superimpose Don’t superimpose Show sequential images Show sequential images

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – 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

William H. Bowers – Questions & Discussion