Visual Usability: principles & practices for designing great web and mobile app UIs


Published on

These slides are from a one-day tutorial presented at the UXPA 2013 conference. The class is designed to help product teams bridge the gap between applications that look great or are highly functional.

This class 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.

Published in: Design, Technology

Visual Usability: principles & practices for designing great web and mobile app UIs

  1. 1. Visual Usability: Visual Design Principles and Practices for Creating Great Web and Mobile Application Interfaces Tania Schlatter and Deborah Levinson
  2. 2. UX & IA UX & IA + UI design
  3. 3. Define an appropriate target
  4. 4. Work toward the goal
  5. 5. Schedule 9-10:30am Intro and lecture: what is visual usability? Exercise 1: storytelling through abstraction 10:30-11am Break 11:00am-12:30pm Review exercise 1 Lecture: the meta-principles of visual usability Exercise 2: personality design requirements 12:30pm-1:45pm Lunch 1:45pm-3:00pm Lecture: the visual usability tools 3:00pm-3:30pm Break 3:30pm-5:15pm Exercise 3: applying what you’ve learned to a sample app
  6. 6. Digital interfaces communicate visually via: • layout/position • type • color • imagery • controls and motion People look for patterns to understand what we see How these tools are used affect interpretation. The “tools”
  7. 7. The “tools” Everything we put forth is interpreted High tech?
  8. 8. What can I do here? Is this for me? What is this? How does it help me?
  9. 9. • Attractive things work better (Don Norman) • Presentation affects interpretation and use • Appearance and function must work together • Role-agnostic approach – concerned with what and not who Visual usability
  10. 10. • There are many design principles, but we focus on three: • Consistency • Hierarchy • Personality The meta-principles 125 in Universal Principles of Design, but no “personality”
  11. 11. Why these three? Pattern of visual design issues in our heuristic reviews and usability tests • people not seeing what to do • people not understanding what they see • people expecting something different than what they see
  12. 12. Patterns of recommendations Consistency: place elements similarly from screen to screen Hierarchy: call attention to most important areas to guide the eye
  13. 13. Patterns of recommendations Personality: determine how an application should feel to its users to dictate how things should look in a way that is appropriate for the organization.
  14. 14. Consistency In order for communication to occur, an app must have patterns or conventions with shared or discernible meaning. Consistency is the key to the interface functioning as a system and a visual language.
  15. 15. User expectations play a role in perception of consistency Base decisions on what users expect as well as app goals situation User location age, background experience Past experiences and interpretations Active experience and interpretation delivery method and to pic expectation interpretation patterns active screen other screens other applications other screenssame application
  16. 16. External consistency Are the application’s design, content, and behavior similar to other applications used by the same audience? • Is your application part of a family or suite? • Are there particular UI patterns that your users expect based on using other apps?
  17. 17. Internal consistency Establish patterns within your app and use them consistently to create visual language.
  18. 18. 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?
  19. 19. Starting with defaults Defaults are a good starting point to create usable apps – but these results lack distinct personalities, and clearer visual cues could help use.
  20. 20. Differences in function Differences in types of text Differences in content elements Indicating difference is important to communicating effectively
  21. 21. Defining differences: hierarchy Consistency is about making things look and behave the same to take advantage of user familiarity and expectations Hierarchy is about indicating differences that help people know how the app works, what’s important, and what to do.
  22. 22. Gestalt principles Psychology principles outlining perception of spatial relationships • Proximity implies grouping • Similarity implies grouping • Regular, simple patterns imply grouping Help us understand how to place things
  23. 23. Which dot is more important?
  24. 24. Which is more important?
  25. 25. Other characteristics of hierarchy Treatment: plain vs. fancy Color: saturated (center) vs. muted
  26. 26. Hierarchy and complexity Vs.
  27. 27. Unclear hierarchy
  28. 28. Improving hierarchy • Reduce/hide elements to show what’s necessary first • Make most important clearly biggest and in most prominent spot
  29. 29. Personality • Don Norman’s framework from Emotional Design: Why We Love (or Hate) Everyday Things • Visceral design: appearance • Behavioral design: pleasure and effectiveness • Reflective design: self-image, personal satisfaction, memories
  30. 30. Applying Norman’s framework to app design 2. Behavioral User interpretation forms over time Content and delivery characteristics 1. Visceral “Looksg ood – can I do what Iwant?” “This app is a great tool for me.” 3. Reflective Contentexpectation “Icando m ost of what I want, ma be m o reifItr.” interpretation
  31. 31. How much appeal do we need? Goal is notthe app equivalent of Stark’s Alessi gold-plated juicer
  32. 32. Functionality vs. appeal How“likable”does an app need to be?
  33. 33. Appeal affects interpretation of use • Helps people know what to do, how to do it; makes people feel positive about your app • “[P]erceptions of interface aesthetic are closely related to apparent usability and thus increase the likelihood that aesthetics may considerably affect system acceptability.” (Noam Tractinsky • Necessary degree of appeal varies based on situation and application, but you cannot not communicate with what you put forth.
  34. 34. Terms to help qualify design aesthetics • Terms used to gauge website appeal in 2004 paper from Noam Tractinsky and Talia Lavie (Assessing dimensions of perceived visual aesthetics of web sites. International Journal of Human-Computer Studies, (60), 269-298) • Classical: organized, clean, symmetric • Expressive: design harmony, color harmony, dynamic expression
  35. 35. Classical
  36. 36. Expressive
  37. 37. Thoughtful decisions about: • use • expression or differentiation grounded in: • how people understand • what is being communicated by whom Criteria for aesthetic appeal
  38. 38. • 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. Selecting expressive qualities
  39. 39. Selecting expressive qualities How narrow is the user base? More focused users = more expressive personality may be appropriate
  40. 40. Selecting expressive qualities Wide user bases still want appeal. Classical aesthetics used to reveal structure and direct the eye are appropriate
  41. 41. Selecting expressive qualities Is there a lot of competition? The more competition, the more style plays a role.
  42. 42. Selecting expressive qualities How functional is your app? There are ways to make your highly functional application appealing in ways that support use Smart, effective, appropriate, attractive
  43. 43. Selecting expressive qualities Are the messages your UI sends appropriate for the situation of use and audience? VS. Business casual  High school? 
  44. 44. Selecting expressive qualities Do the qualities support cognitive mapping? Does blue indicate water sports? What color indicates cycling?
  45. 45. Strive for useful appeal • Select color, type, and images to indicate similarities/differences, relative importance, and behavior. • Get the cognitive mapping right. • Limit expressive visual characteristics to create discernible patterns – so similarities and differences are clear. When expression aids consistency, helps establish visual hierarchy, and is appropriate for the content, use, and organization, you have visual usability.
  46. 46. Exercise 1 Telling a story with consistency, hierarchy, and personality: Little Blue and Little Yellow
  47. 47. Exercise 1 Telling a story with consistency, hierarchy, and personality A. Intro: Little Blue and Little Yellow - 6 mins. Use the principles and tools to tell a simple story. B. Using four colors of ripped paper and 4 frames, students will tell part of a simple story. Materials will be supplied – 4 sheets with frames, 4 colors each. 14-19 mins. C. Share stories in teams. 10 mins D. Discuss which principles were used and how. 10 mins. • How did you establish consistency? • How did you establish hierarchy? • How did you establish personality?
  48. 48. Translating to features & pixels In app design: • Content and features are presented through layout, type, color, imagery and controls. Like the ripped paper, these are abstractions. • Choose and use the tools to establish consistency and hierarchy and express appropriate personality, as in the exercise.
  49. 49. Consistency (what people expect) + Personality (expressive qualities that create affinity) + Hierarchy (creating clear organization) people can make sense of what they see quickly, like Little Blue and Little Yellow
  50. 50. Requirements & constraints Exercise 1: color, ripping, frames Real-world: • Company logo, brand standards • Features/content • User characteristics • Technology platform
  51. 51. Gathering visual interface design requirements • What are the application goals? • What do we know/what can we learn about the users? • What are technical implications? • Document in brief – the rationale for current and future decision-making situation Users location age, background goals experience delivery method & topic expectation interpretation User situation, characteristics, & expectations Organization’s goals, content, & delivery method Organization Stakeholders/team location situation age, background experience role location situation age, background experience role location situation age, background experience role patterns
  52. 52. Gathering visual interface design requirements • Business goals • Pointers to brand or identity standards that apply • Technical information, such as platform • Survey of competitors • Content type • User research • User scenarios • Adjectives describing the ideal personality • A proposed approach, or starting point for the visual design A Design Brief helps define the area you have to design in. It may contain:
  53. 53. Exercise 2: design persona Define personality of a weight-loss app – a version of SuperTracker for teens • Goal: define adjectives, traits, brand personality, voice, and engagement methods or approaches • Format: tablet or phone • See existing app for functionality:
  54. 54. Exercise 2: design persona When reviewing docs: • Popular apps for teens: what does this tell us about expectations? • Personas: what does this tell us about devices? What about characteristics for appropriate app personality? • Competitor apps: what, if anything, is appropriate for our users? Why or why not? When reviewing decisions: • Need to be able to state your reasons for your decisions. • Rationale needs to be grounded in the information provided. • See functionality at login: uxpatutorial pw: uxp4!
  55. 55. The visual usability tools • Layout • Type • Color • Imagery • Controls and affordances Contrast is the key to using the tools effectively to create consistency, hierarchy, and personality.
  56. 56. Layout • Position/location of elements needs to match flow. • Tease flow out of user scenarios. Treatment (size, color, finish) affects this. • Interface standards (e.g., iOS) provide familiarity, but may not match user’s flow. • Some position conventions, like search on the web, are written in stone at this point and would need a major reason to change.
  57. 57. Interpreting flow with layout Does the layout help us know what to do?
  58. 58. Example: Epicurious iPhone app • Typical scenarios: • “It’s really hot today. What can I cook outside on the grill so I don’t 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?”
  59. 59. Feature implications • Each scenario implies a different type of search • Seasonal/promotional searches get priority – timely, demonstrate Epicurious’ unique value • Guiding people to more detailed search options is another high priority
  60. 60. Layout reveals hierarchy of information Time-sensitive info comes first. Common ingredient searches come first.
  61. 61. Creating relationships: grouping
  62. 62. Creating relationships: nesting Nesting elements implies relationship with parent element Grouping and nesting is clear in some areas and not in others
  63. 63. Alignment • Alignment provides organization, supports page flow • Default should be flush left. Decide what needs to be treated differently from there. • Align to fewest possible (grid) lines.
  64. 64. Avoid common layout mistakes • Provide just enough information • Align elements unless emphasizing difference • Group like elements • Position elements to help make hierarchy clear
  65. 65. Type helps convey hierarchy • For functional apps, choose type for readability • Type size and weight = contrast = hierarchy and impact
  66. 66. Choosing type • More 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!
  67. 67. Epicurious’ typography Helvetica in roman and bold weights doing 95% of the work with two typographic accents
  68. 68. Century Gothic (original) Helvetica Light Rockwell LightEurostile Experiments with the accent font
  69. 69. Choose type personality wisely
  70. 70. Avoid common type mistakes • Default: use one clear typeface with a variety of weights • Use type styles as the grammar of your visual language – as a consistent system • Apply type styles to similar information across templates • Try emphasizing difference and/or directing the eye with contrast via size and color before using an expressive font
  71. 71. Color • Draws the eye • Helps establish hierarchy • Makes relationships visible • Adds aesthetic appeal and conveys personality
  72. 72. Hue and saturation • Hue: what we perceive as distinct colors • Saturation: relative purity of color compared to gray • Both factor into color contrast Traffic light Olympics app Saturated + muted
  73. 73. Tints and shades • Tints are lighter hue variations; shades are darker ones • Using tints with shades creates contrast
  74. 74. Color and contrast Color contrast is contextual – it fluctuates and depends on the whole Same color, different warm/cool effect Muted color, saturation effect changes based on contextual colors
  75. 75. Color and contrast How much contrast do you want? Where do you want to draw the eye, and why? • Which element is the “star” of the screen? Which elements are supporting players? • Do you need to draw attention to many small controls? Consider an accent color.
  76. 76. Color and error messaging Too much contrast – “visual spanking” Polite use of contrast
  77. 77. Tips for choosing color • Type color must contrast sufficiently with background • Pick a “lead” color that will either have the job of conveying personality or will support a palette of colors used in small amounts • Pick an accent color to highlight small controls or important information • Shades and/or tints make palettes work
  78. 78. Tips for choosing color It’s not the color; it’s the use of the color that makes it work or not. Netflix successfully uses red as a background color, to draw the eye to important elements, and help to communicate their brand Target successfully uses red to create visual hierarchy and communicate their brand Santaner does not use red successfully. Too much red, too many similar sizes of red elements, too evenly distributed
  79. 79. Tips for choosing color Color used strategically to direct the eye.
  80. 80. Color template “lead”color shade, tint or tone lighter tint or tone even lighter tint or tone accent color text color darker shade or tone lighter tint or tone even lighter tint or tone support color shade, tint or tone lighter tint or tone even lighter tint or tone add shades, tints, and tones if needed add colors if needed shade, tint, or tone of accent color
  81. 81. Epicurious color palette accent color “lead” shades, tints and tones secondary accent color text color “lead”color
  82. 82. Avoid common color mistakes • Not enough contrast • Too much contrast • Too many colors • Not enough color • Use of color as the only means of differentiation • Color applied randomly, not strategically or systematically
  83. 83. Imagery Images need to play a role: • Draw attention • Provide explanation or show detail • Represent content • Express feeling, brand, or style • Invite interaction • Reinforce similarities or differences
  84. 84. Defining rationale for imagery There are strategic and tactical aspects of each image type and image General Specific Purpose Type Presentation Role Subject matter Qualities Strategic Tactical Early in process Later in process
  85. 85. Photography Use when realism matters, for example when people are considering a place to visit, or a purchase of goods or personal services
  86. 86. Video Use when explaining a process, for example when describing details best revealed through motion
  87. 87. Animation • Use when giving the gist, not the details • When motion helps convey personality • When still images aren’t enough to attract attention, or novelty is needed/appropriate for the personality
  88. 88. Logos Like a flag represents a country, logos are visual symbols that represent a product, service or organization
  89. 89. Symbols • Represent an object, action, or idea, but don’t need to look like what they represent • Use when communicating something universally understood by your audience
  90. 90. Icons • Use when you can represent something with a simple picture, and want to add variety for visual interest • When app standards call for an icon Cute, but any relationship to content, org, or users?
  91. 91. Icon tips • Non-obvious icons should include type. • All icons that play the same role need to use the same style. These food icons are consistent in style and have type to be completely clear.
  92. 92. Data visualizations: • Use when visually representing factual or quantitative data with charts, graphs, etc. enhances understanding • When comparing multiple data sets to quickly understand differences
  93. 93. Can I click this?
  94. 94. More on charts & graphs • All graphics that play the same role need to speak the same visual language. • Manipulate contrast and hierarchy with choice of color and size to highlight significance.
  95. 95. Maps: • Use when people need to find a destination or visualize relationships between locations • When providing visual reference for a location adds meaning/ recognition/context
  96. 96. Maps
  97. 97. Maps
  98. 98. Textures Image effects that change the surface of the screen
  99. 99. Backgrounds Any image or solid color appearing behind content
  100. 100. Gradations Fields of one or more colors varying in shade give the illusion of depth
  101. 101. Patterns, textures, backgrounds, gradations Use when content of pattern or texture adds meaning: • Affecting mood • Conveying sense of space or depth • Differentiating sections of content • Communicating personality or brand • Connecting visual design across platforms and mediums
  102. 102. Avoid common imagery mistakes • All images need to play a role • Present images clearly • Present only essential info. in an image • Design and present images of the same type consistently • Include a caption or supporting info unless image meaning is obvious
  103. 103. Controls and affordances • Apply to visual usability because visual design can help or hinder identifying a control and revealing its affordances • “Visual” extends to motion here: rollovers, sliding drawers, control animation, etc. • Details matter, especially for app personality • Styling controls supports personality
  104. 104. Default vs. custom
  105. 105. Consistent cross-platform personality through styling of controls
  106. 106. Cross-platform personality
  107. 107. Avoid common mistakes • Only interactive areas should feel interactive; read-only areas should not • Provide feedback • Apply visual design to form controls
  108. 108. Exercise 3 • Applying what you’ve learned to a sample application: mobile version of SuperTracker for teens • We provide rough wireframes as a starting point, along with the information from the design brief exercise.
  109. 109. Step 1: Analyze wireframes for consistency, hierarchy, and personality. • What would improve them? Discuss in your group. Why? • Option: rework the wireframes to improve them. Step 2: Use “the tools” to communicate consistency, hierarchy, and personality for the screens provided. • If you don’t have time to try something, write down your rationale or thinking for the choices you’d make. Exercise 3
  110. 110. Thank you! Tania Schlatter @taniaschlatter Debby Levinson @nimblepartners @visualusability