Visual design principles & practices for web and mobile apps
Post on 27-Jan-2015
DESCRIPTIONThese slides are from a one-day class designed to help product teams bridge the gap between applications that look great or are highly functional. This class, given with the Boston UXPA, provides guidelines and examples about how to make visual design decisions that reinforce usability best practices and create interfaces that people value. Participants learn the characteristics of visually usable apps to know what to shoot for, and get an introduction to the visual design tools for digital apps layout, type, color, imagery, and controls and affordances and how to use them to create appealing applications people can easily understand and use.
- 1. Visual design principles & practices for web and mobile appsTania Schlatter & Deborah Levinson
2. Work intentionally blurred under NDAUX & IA Nimble PartnersUX & IA + UI & visual design 3. Schedule9-9:15 am 9:15-9:35 9:35-10:15 10:15-10:30 10:30-11:30 11:30-12:00 12:00-1:00 pm 1:00-2:10 2:10-2:50 2:50-3:00Intros Visual usability & UX. Meta-principles Exercise 1: storytelling through abstraction Break Lecture: the meta-principles Exercise 2: design personas Lunch Lecture: the visual usability tools Exercise 3: applying what youve learned Discussion & wrap up 4. Complex, functional apps, not simple apps 5. Visual is part of the experience! ...so why do some organizations treat it as a separate eort? 6. MailChimp.com @ 2009Focusing on interface as a key part of the UX makes a dierenceMint.com @ 2012 7. Does this interface inspire you to apply for a job? 8. Details matter. One of these is just right. 9. Is this for me? 10. Focusing on interface as a key part of the UX makes a dierence. It makes a dierence to people who are evaluating your app or org. It makes a dierence to people who use your app. It makes a dierence to design and development team morale. It makes a dierence to your organizations bottom line.We can do better. 11. Tog says: Error prevention Fitts' Law4 graphic design principles: Contrast, Repetition, Alignment, Proximity = CRAP Latency ReductioniOS 6 Human Interface Guidelines Principles: Recognition rather than recall Defer to content Provide clarity Aesthetic integrity ConsistencyNN/Gs reports have 2,397 usability guidelines!Usability.gov guidelinesiOS 7 Human Interface Guidelines: Let color simplify the UI Use system fonts Direct manipulation Feedback Embrace borderless buttons Use depth to communicate Metaphors User controlGestalt principles: Android Design Principles: Enchant me1 2 3 Simplify my Life Make me Amazing4 5 6Proximity Similarity Prgnanz (Figure-Ground) Symmetry "Common Fate" Closure 12. Consistency, Hierarchy & Personality 13. Consistency: establishing or adopting appropriate patternsHierarchy: calling attention to the most important thingsPersonality: choosing appropriate expressive characteristics 14. Consistency, hierarchy & personality are communicated via the tools of visual design: layout, type, color, imagery + controls & aordancesfrom Understanding Comics by Scott McCloud 15. Schedule9-9:15 am 9:15-9:35 9:35-10:15 10:15-10:30 10:30-11:30 11:30-12:00 12:00-1:00 pm 1:00-2:10 2:10-2:50 2:50-3:00Intros Visual usability & UX. Meta-principles Exercise 1: storytelling through abstraction Break Lecture: the meta-principles Exercise 2: design personas Lunch Lecture: the visual usability tools Exercise 3: applying what youve learned Discussion & wrap up 16. Telling a story with consistency, hierarchy, and personality 17. Exercise 1 Use the principles to help tell a simple story Use 4 colors of paper and 4 frames Share stories in teams Group: discuss which principles were used and how - How did you establish consistency? - How did you establish hierarchy? - How did you convey personality? 18. Schedule9-9:15 am 9:15-9:35 9:35-10:15 10:15-10:30 10:30-11:30 11:30-12:00 12:00-1:00 pm 1:00-2:10 2:10-2:50 2:50-3:00Intros Visual usability & UX. Meta-principles Exercise 1: storytelling through abstraction Break Lecture: the meta-principles Exercise 2: design personas Lunch Lecture: the visual usability tools Exercise 3: applying what youve learned Discussion & wrap up 19. Consistency: managing expectations and patterns Like spoken language, a UI must have patterns or conventions so people can understand. Goal: define a consistent framework that can flexMeta-principles: consistency 20. Internal consistency Establish patterns within your app and use them consistently to create visual language.Meta-principles: consistency 21. Indicating dierence is important to communicating eectively as well Dierences in function styleDierences in types of text fontMeta-principles: consistencyDierences in content types layout 22. External consistency Decisions about consistency are linked to overall app strategy and UX.MS WordGoogleConsistency helps ease changes through familiarity.Meta-principles: consistency 23. External consistencyMS Word750 WordsInconsistency helps dierentiate.Meta-principles: consistency 24. Some expectations can be anticipated, some cannot Userlocation c expeint erpexpe ri e n c entatioc pireens other sc other ions applicatother sc same reens applic ationbackgrou nd ge, amethod an ery dt v o eli d active screenret ati onsit u ati o nPast experiences and interpretationsp atte r n sActive experience and interpretationGoal: balance familiarity with strategic dierences.Meta-principles: consistency 25. If your users share similar characteristics and are familiar with an existing app, why not make everything consistent?Why not just copy another app? Why not just use the iOS or Android standards?Meta-principles: consistency 26. Starting with defaults Defaults are a good starting point but visual cues could help use and these apps lack distinct personalities that can help make them successful.Meta-principles: consistency 27. Hierarchy: dening meaningful dierencesConsistency is about making decisions about how and where elements appear, look and behave to take advantage of expectations.Hierarchy is about indicating dierences that help people know how the app works, whats important, and what to do.Meta-principles: hierarchy 28. Unclear hierarchyMeta-principles: hierarchy 29. Improving hierarchyMeta-principles: hierarchy 30. Gestalt principles Psychological principles outlining perception of spatial relationships Proximity implies groupingOur eye is drawn to dierencesSimilarity implies grouping Figure and ground imply space and hierarchyHelp us understand how to place things Contrast is the key ingredient http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htmMeta-principles: hierarchy 31. Stylistic details aect visual hierarchy Color: muted vs. saturatedTreatment: plain vs. fancyMeta-principles: hierarchy 32. Complexity adds to the challenge The more elements you have, the harder it is to establish a clear hierarchy.Meta-principles: hierarchy 33. Personality: characteristics that aect interpretation[P]erceptions of interface aesthetic are closely related to apparent usability and thus increase the likelihood that aesthetics may considerably aect system acceptability. - Noam TractinskyMeta-principles: personality 34. How much appeal do we need? Goal is not novelty for noveltys sake the app equivalent of Starks Alessi gold-plated juicerhttp://www.flickr.com/photos/dickyfeng/6254476990/Meta-principles: personality 35. Functionality vs. appealMeta-principles: personality 36. Terms to help qualify design aestheticsTerms used to gauge website appeal in 2004 paper from Noam Tractinsky and Talia Lavie Classical: organized, clean, symmetric Expressive: design harmony, color harmony, dynamic expressionMeta-principles: personality 37. Classicalhttp://www.flickr.com/photos/edwardlangley/8318320976/ 38. Expressivehttp://www.flickr.com/photos/wwarby/4790992757/ 39. Criteria for decisions about personality Thoughtful decisions about expression and dierentiation grounded in: 1. users and context brain: how people see and understand individual: age, demographics, experiences & expectations situation: device, setting, goals 2. what is being communicated by whom content: what is being represented sender: who the information & interactions are fromMeta-principles: personality 40. Selecting expressive qualities How much appeal do you need?How much expression do you need?Visual usability = useful appeal: Select type, color, and images, and present them in keeping with the content, users, and organization.Meta-principles: personality 41. Selecting expressive qualities How functional does it need to be?http://www.wired.com/entertainment/theweb/magazine/17-09/_craigslist_makeoverMeta-principles: personality 42. Selecting expressive qualities How narrow is the user base?Meta-principles: personality 43. Selecting expressive qualities Is there a lot of competition?Meta-principles: personality 44. Selecting expressive qualities Do the expressive qualities support cognitive mapping?Meta-principles: personality 45. Selecting expressive qualities Are the characteristics appropriate for the situation?VS.Meta-principles: personality 46. Selecting expressive qualities Are the characteristics appropriate for the situation?Meta-principles: personality 47. Gathering visual interface design requirements What are the business application goals? What do we know/what can we learn about the users? What are technical implications?+ What personality do we want to convey? 48. Schedule9-9:15 am 9:15-9:35 9:35-10:15 10:15-10:30 10:30-11:30 11:30-12:00 12:00-1:00 pm 1:00-2:10 2:10-2:50 2:50-3:00Intros Visual usability & UX. Meta-principles Exercise 1: storytelling through abstraction Break Lecture: the meta-principles Exercise 2: design personas Lunch Lecture: the visual usability tools Exercise 3: applying what youve learned Discussion & wrap up 49. Exercise 2 Define the personality for a weight-loss app: mobile phone version of SuperTracker for teens Goal: begin to define an appropriate personality for your app. define 5-7 traits for your app what it should be like complete a personality map Resources: MailChimp example, simple ad-hoc personas, existing app https://www.choosemyplate.gov login: uxpatutorial pw: uxp4! Need to be able to state your reasons for your decisions!http://aarronwalter.com/design-personas/ 50. Schedule9-9:15 am 9:15-9:35 9:35-10:15 10:15-10:30 10:30-11:30 11:30-12:00 12:00-1:00 pm 1:00-2:10 2:10-2:50 2:50-3:00Intros Visual usability & UX. Meta-principles Exercise 1: storytelling through abstraction Break Lecture: the meta-principles Exercise 2: design personas Lunch Lecture: the visual usability tools Exercise 3: applying what youve learned Discussion & wrap up 51. The visual usability tools Layout Type Color Imagery Controls and aordancesContrast is the key to using the tools eectively to create consistency, hierarchy, and personality.Tools: intro 52. LayoutPosition/location of elements needs to match flow tease flow out of user scenarios.Interface standards (e.g., iOS) provide familiarity, but may not match users flow.Some position conventions, like search on the web, are written in stone at this point and would need a major reason to change.Tools: layout 53. Interpreting ow with layoutTools: layout 54. Example: Epicurious iPhone app Typical scenarios:Its really hot today. What can I cook outside on the grill so I dont have to heat up my kitchen? I want to find a chicken recipe for dinner. I have zucchini, peppers, and beef. What can I make with those ingredients?Tools: layout 55. Feature implications Each scenario implies a dierent type of searchGuiding people to more detailed search options is another high prioritySeasonal/promotional searches get priority timely, demonstrate Epicurious unique valueTools: layout 56. Layout reveals hierarchy of informationTime-sensitive info comes first.Tools: layoutCommon ingredient searches come first. 57. Creating relationships: groupingTools: layout 58. Creating relationships: nestingTools: layout 59. Alignment Alignment provides organization, supports page flowAlign to fewest possible (grid) lines.Default should be flush left. Decide what needs to be treated dierently from there.Tools: layout 60. Avoid common mistakes Provide just enough information Align elements unless emphasizing dierence Group like elements Position elements to help make hierarchy clearTools: layout 61. Type For functional apps, choose type for readability Type size and weight = contrast = hierarchy and impactTools: type 62. Choosing typeMore choices than ever: Google Fonts, Typekit, embedding with @font-face ...But less is more: choose two or three weights of one typeface, or a couple weights of only two typefaces, one of which is for visual accent Expression is possible with one font!http://www.thinkingwithtype.com/contents/text/#Project:_HierarchyTools: type 63. Epicurious typographyHelvetica in roman and bold weights doing 95% of the work with two typographic accentsTools: type 64. Experiments with the accent fontCentury Gothic (original)Tools: typeHelvetica LightEurostileRockwell Light 65. Choose type personality wiselyTools: type 66. Avoid common type mistakes Default: use one clear typeface with a variety of weights Apply type styles to similar information across templatesUse type styles as the grammar of your visual language as a consistent systemTry emphasizing dierence and/or directing the eye with contrast via size and color before using an expressive fontTools: type 67. Color Draws the eye Helps establish hierarchy Makes relationships visible Adds aesthetic appeal and conveys personalityTools: color 68. Hue and saturation Hue: what we perceive as distinct colors Saturation: relative purity of color compared to gray Both factor into color contrastTrac lightTools: colorOlympics appSaturated + muted 69. Tints and shades Tools: colorTints are lighter hue variations; shades are darker ones Using tints with shades creates contrast 70. Color and contrast Color contrast is contextual it fluctuates and depends on the wholeSame color, dierent warm/cool eectTools: colorMuted color, saturation eect changes based on contextual colors 71. Tips for choosing color to create contrast Pick a lead color that will either have the job of conveying personality or will support a palette of colors used in small amountsPick an accent color to highlight small controls or important informationTools: colorType color must contrast suciently with backgroundShades and/or tints make palettes work 72. Tips for choosing color to create contrast Too much contrast visual spankingTools: colorPolite use of contrast 73. Tips for choosing color Its not the color; its the use of the color that makes it work or not.In two of these three examples, use of red is successful.Tools: color 74. Color template text colorTools: coloreven lighter tint or toneshade, tint or tonelighter tint or toneeven lighter tint or tonesupport colorshade, tint, or tone of accent colorlighter tint or tonelead coloraccent colordarker shade or toneshade, tint or tonelighter tint or toneeven lighter tint or toneadd shades, tints, and tones if neededadd colors if needed 75. Epicurious color palettetext colorlead colorsecondary accent colorTools: coloraccent lead color shades, tints and tones 76. Avoid common mistakesUse color to emphasize similarities and dierences, which support use Color has its own tone of voice shout or whisper with intent Follow accessibility guidelines for color use and contrastTools: color 77. Imagery Imagery has to play a role. It has a job to do: Draw attention GeneralProvide explanation or show detailStrategicPurposeTacticalTypePresentationSubject matterQualitiesRepresent content RoleExpress feeling, brand, or style Invite interaction Reinforce similarities or dierencesTools: imagerySpecificEarly in processLater in process 78. Types of imagery Photography Use when realism matters When people consider a visit, or a purchase of goods or personal servicesVideo Use when explaining a process Describing details best revealed through motionTools: imagery 79. Types of imagery Animation Giving the gist of a process, not the details When motion helps convey personalityCommunicating with diverse cultures, where details might not translateWhen still images arent enough, or novelty is neededTools: imagery 80. Types of imagery Logos On a product or branded service To represent a product To represent parent organizationTools: imagery 81. Types of imagery IconsWhen you can represent something with a simple picture, and want to add variety for visual interest When app standards call for an icon Non-obvious icons should include type Icons with the same role should use the same styleSymbolsRepresent object, action, or idea, but dont need to resemble itUse when communicating something your audience universally understandsUse when common symbols exist for the concept representedTools: imagery 82. Types of imagery Charts and graphs, including interactive data visualizationsWhen visually representing factual or quantitative data with enhances understandingWhen comparing data sets to quickly understand dierencesNeed visual relationships to other elements all graphics need to speak the same language.Manipulate contrast and hierarchy with choice of color and size to highlight significance.Tools: imagery 83. Types of imagery MapsUse when people need to find a destination or visualize relationships between locationsWhen providing visual reference for a location adds meaning/ recognition/contextTools: imagery 84. Types of imagery Patterns: repeated areas of an imageTools: imagery 85. Types of imagery Textures: image eects that change the surface of the screenTools: imagery 86. Types of imagery Backgrounds: any image or solid color appearing behind contentTools: imageryGradations: fields of one or more colors varying in shade to give the illusion of depth 87. Types of imageryUse patterns, textures, backgrounds, or gradations when their content adds meaning: Aecting mood Conveying sense of space or depth Dierentiating sections of content Communicating personality or brand Connecting visual design across platforms and mediumsTools: imagery 88. Avoid common mistakes Only use images that play a role in the overall story Choose the right type of image for the job Present images clearly Design and present images of the same type consistently Include a caption or supporting info unless image meaning is obviousTools: imagery 89. Controls and aordancesApply to visual usability because visual design can help or hinder identifying a control and revealing its aordancesVisual extends to motion here: rollovers, sliding drawers, control animation, etc. Details matter, especially for app personality Styling controls supports personalityTools: controls & aordances 90. Default vs. customTools: controls & aordances 91. Cross-platform personalityTools: controls & aordances 92. Cross-platform personalityTools: controls & aordances 93. Avoid common mistakesOnly interactive areas should feel interactive; read-only areas should not Provide feedback Apply visual design to form controlsTools: controls & aordances 94. Schedule9-9:15 am 9:15-9:35 9:35-10:15 10:15-10:30 10:30-11:30 11:30-12:00 12:00-1:00 pm 1:00-2:10 2:10-2:50 2:50 -3:00Intros Visual usability & UX. Meta-principles Exercise 1: storytelling through abstraction Break Lecture: the meta-principles Exercise 2: design personas Lunch Lecture: the visual usability tools Exercise 3: applying what youve learned Discussion & wrap up 95. Selecting expressive qualities Strive for useful appealSelect color, type, and images to indicate similarities/dierences, relative importance, and behavior. Get the cognitive mapping right. Use expressive visual characteristics to create discernible patterns so similarities and dierences are clear.Apply: overall tips 96. Exercise 3 Work in groups of 3. Evaluate the wireframes in terms of consistency, hierarchy and personality. Imagine, discuss and sketch options and variations the next round. How can you design using the three principles?-Think about consistency. What needs to be consistent? Manipulate the layout to help with hierarchy. How would you apply visual design to these or other controls to address/improve consistency, hierarchy, and personality? Fill out the Visual Lexicon template. Use the content/features provided. ~15 mins. Dropbox: http://bit.ly/1aCnceD Share what would change, why, and how. 97. Schedule9-9:15 am 9:15-9:35 9:35-10:15 10:15-10:30 10:30-11:30 11:30-12:00 12:00-1:00 pm 1:00-2:10 2:10-2:50 2:50-3:00Intros Visual usability & UX. Meta-principles Exercise 1: storytelling through abstraction Break Lecture: the meta-principles Exercise 2: design personas Lunch Lecture: the visual usability tools Exercise 3: applying what youve learned Discussion & wrap up 98. Thank you! Tania Schlatter email@example.com @taniaschlatter Debby Levinson firstname.lastname@example.org @nimblepartners@visualusability