Visual design principles & practices for web and mobile apps

6,889 views
6,593 views

Published on

These 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.

Published in: Design, Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,889
On SlideShare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
346
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Visual design principles & practices for web and mobile apps

  1. 1. Visual design principles & practices for web and mobile apps Tania Schlatter & Deborah Levinson
  2. 2. Work intentionally blurred – under NDA UX & IA Nimble Partners UX & IA + UI & visual design
  3. 3. Schedule 9-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:00 Intros 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 you’ve learned Discussion & wrap up
  4. 4. Complex, functional apps, not simple apps
  5. 5. Visual is part of the experience! ...so why do some organizations treat it as a separate effort?
  6. 6. MailChimp.com @ 2009 Focusing on interface as a key part of the UX makes a difference Mint.com @ 2012
  7. 7. Does this interface inspire you to apply for a job?
  8. 8. Details matter. One of these is “just right.”
  9. 9. Is this for me?
  10. 10. Focusing on interface as a key part of the UX makes a difference. • It makes a difference to people who are evaluating your app or org. • It makes a difference to people who use your app. • It makes a difference to design and development team morale. • It makes a difference to your organization’s bottom line. We can do better.
  11. 11. Tog says: • Error prevention • Fitts' Law 4 graphic design principles: Contrast, Repetition, Alignment, Proximity = CRAP • Latency Reduction iOS 6 Human Interface Guidelines’ Principles: • Recognition rather than recall • Defer to content • Provide clarity • Aesthetic integrity • Consistency NN/G’s reports have 2,397 usability guidelines! Usability.gov guidelines iOS 7 Human Interface Guidelines: • Let color simplify the UI • Use system fonts • Direct manipulation • Feedback • Embrace borderless buttons • Use depth to communicate • Metaphors • User control Gestalt principles: Android Design Principles: • Enchant me 1 2 3 • Simplify my Life • Make me Amazing 4 5 6 Proximity Similarity Prägnanz (Figure-Ground) Symmetry "Common Fate" Closure
  12. 12. Consistency, Hierarchy & Personality
  13. 13. Consistency: establishing or adopting appropriate patterns Hierarchy: calling attention to the most important things Personality: choosing appropriate expressive characteristics
  14. 14. Consistency, hierarchy & personality are communicated via “the tools” of visual design: layout, type, color, imagery + controls & affordances from Understanding Comics by Scott McCloud
  15. 15. Schedule 9-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:00 Intros 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 you’ve learned Discussion & wrap up
  16. 16. Telling a story with consistency, hierarchy, and personality
  17. 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. 18. Schedule 9-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:00 Intros 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 you’ve learned Discussion & wrap up
  19. 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 flex Meta-principles: consistency
  20. 20. Internal consistency Establish patterns within your app and use them consistently to create visual language. Meta-principles: consistency
  21. 21. Indicating difference is important to communicating effectively as well Differences in function – style Differences in types of text – font Meta-principles: consistency Differences in content types – layout
  22. 22. External consistency Decisions about consistency are linked to overall app strategy and UX. MS Word Google Consistency helps ease changes through familiarity. Meta-principles: consistency
  23. 23. External consistency MS Word 750 Words Inconsistency helps differentiate. Meta-principles: consistency
  24. 24. Some expectations can be anticipated, some cannot User location c expe int erp exp e ri e n c e n tatio c pi reens other sc other ions applicat other sc same reens applic ation backgrou nd ge, a method an ery dt v o eli d active screen ret ati on sit u ati o n Past experiences and interpretations p atte r n s Active experience and interpretation Goal: balance familiarity with strategic differences. Meta-principles: consistency
  25. 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. 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. 27. Hierarchy: defining meaningful differences • Consistency is about making decisions about how and where elements appear, look and behave to take advantage of expectations. • Hierarchy is about indicating differences that help people know how the app works, what’s important, and what to do. Meta-principles: hierarchy
  28. 28. Unclear hierarchy Meta-principles: hierarchy
  29. 29. Improving hierarchy Meta-principles: hierarchy
  30. 30. Gestalt principles Psychological principles outlining perception of spatial relationships • • • Proximity implies grouping • Our eye is drawn to differences Similarity implies grouping Figure and ground imply space and hierarchy Help us understand how to place things Contrast is the key ingredient http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm Meta-principles: hierarchy
  31. 31. Stylistic details affect visual hierarchy Color: muted vs. saturated Treatment: plain vs. fancy Meta-principles: hierarchy
  32. 32. Complexity adds to the challenge The more elements you have, the harder it is to establish a clear hierarchy. Meta-principles: hierarchy
  33. 33. Personality: characteristics that affect interpretation “[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 Meta-principles: personality
  34. 34. How much appeal do we need? Goal is not novelty for novelty’s sake – the app equivalent of Stark’s Alessi gold-plated juicer http://www.flickr.com/photos/dickyfeng/6254476990/ Meta-principles: personality
  35. 35. Functionality vs. appeal Meta-principles: personality
  36. 36. Terms to help qualify design aesthetics Terms used to gauge website appeal in 2004 paper from Noam Tractinsky and Talia Lavie • • Classical: organized, clean, symmetric Expressive: design harmony, color harmony, dynamic expression Meta-principles: personality
  37. 37. Classical http://www.flickr.com/photos/edwardlangley/8318320976/
  38. 38. Expressive http://www.flickr.com/photos/wwarby/4790992757/
  39. 39. Criteria for decisions about personality Thoughtful decisions about expression and differentiation 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 from Meta-principles: personality
  40. 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. 41. Selecting expressive qualities How functional does it need to be? http://www.wired.com/entertainment/theweb/magazine/17-09/ff_craigslist_makeover Meta-principles: personality
  42. 42. Selecting expressive qualities How narrow is the user base? Meta-principles: personality
  43. 43. Selecting expressive qualities Is there a lot of competition? Meta-principles: personality
  44. 44. Selecting expressive qualities Do the expressive qualities support cognitive mapping? Meta-principles: personality
  45. 45. Selecting expressive qualities Are the characteristics appropriate for the situation? VS. Meta-principles: personality
  46. 46. Selecting expressive qualities Are the characteristics appropriate for the situation? Meta-principles: personality
  47. 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. 48. Schedule 9-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:00 Intros 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 you’ve learned Discussion & wrap up
  49. 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. 50. Schedule 9-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:00 Intros 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 you’ve learned Discussion & wrap up
  51. 51. 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. Tools: intro
  52. 52. Layout • Position/location of elements needs to match flow – tease flow out of user scenarios. • 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. Tools: layout
  53. 53. Interpreting flow with layout Tools: layout
  54. 54. 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?” Tools: layout
  55. 55. Feature implications • • Each scenario implies a different type of search • Guiding people to more detailed search options is another high priority Seasonal/promotional searches get priority – timely, demonstrate Epicurious’ unique value Tools: layout
  56. 56. Layout reveals hierarchy of information Time-sensitive info comes first. Tools: layout Common ingredient searches come first.
  57. 57. Creating relationships: grouping Tools: layout
  58. 58. Creating relationships: nesting Tools: layout
  59. 59. Alignment • • Alignment provides organization, supports page flow • Align to fewest possible (grid) lines. Default should be flush left. Decide what needs to be treated differently from there. Tools: layout
  60. 60. Avoid common mistakes • • • • Provide just enough information Align elements unless emphasizing difference Group like elements Position elements to help make hierarchy clear Tools: layout
  61. 61. Type • • For functional apps, choose type for readability Type size and weight = contrast = hierarchy and impact Tools: type
  62. 62. 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! http://www.thinkingwithtype.com/contents/text/#Project:_Hierarchy Tools: type
  63. 63. Epicurious’ typography Helvetica in roman and bold weights doing 95% of the work with two typographic accents Tools: type
  64. 64. Experiments with the accent font Century Gothic (original) Tools: type Helvetica Light Eurostile Rockwell Light
  65. 65. Choose type personality wisely Tools: type
  66. 66. Avoid common type mistakes • • Default: use one clear typeface with a variety of weights • • Apply type styles to similar information across templates Use type styles as the grammar of your visual language – as a consistent system Try emphasizing difference and/or directing the eye with contrast via size and color before using an expressive font Tools: type
  67. 67. Color • • • • Draws the eye Helps establish hierarchy Makes relationships visible Adds aesthetic appeal and conveys personality Tools: color
  68. 68. 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 Tools: color Olympics app Saturated + muted
  69. 69. Tints and shades • • Tools: color Tints are lighter hue variations; shades are darker ones Using tints with shades creates contrast
  70. 70. Color and contrast Color contrast is contextual – it fluctuates and depends on the whole Same color, different warm/cool effect Tools: color Muted color, saturation effect changes based on contextual colors
  71. 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 amounts • Pick an accent color to highlight small controls or important information • Tools: color Type color must contrast sufficiently with background Shades and/or tints make palettes work
  72. 72. Tips for choosing color to create contrast Too much contrast – “visual spanking” Tools: color Polite use of contrast
  73. 73. Tips for choosing color It’s not the color; it’s 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. 74. Color template text color Tools: color even lighter tint or tone shade, tint or tone lighter tint or tone even lighter tint or tone support color shade, tint, or tone of accent color lighter tint or tone “lead” color accent color darker shade or tone shade, tint or tone lighter tint or tone even lighter tint or tone add shades, tints, and tones if needed add colors if needed
  75. 75. Epicurious color palette text color “lead” color secondary accent color Tools: color accent “lead” color shades, tints and tones
  76. 76. Avoid common mistakes • Use color to emphasize similarities and differences, which support use • • Color has its own tone of voice – shout or whisper with intent Follow accessibility guidelines for color use and contrast Tools: color
  77. 77. Imagery Imagery has to play a role. It has a job to do: • • • • • • Draw attention General Provide explanation or show detail Strategic Purpose Tactical Type Presentation Subject matter Qualities Represent content Role Express feeling, brand, or style Invite interaction Reinforce similarities or differences Tools: imagery Specific Early in process Later in process
  78. 78. Types of imagery Photography • • Use when realism matters When people consider a visit, or a purchase of goods or personal services Video • • Use when explaining a process Describing details best revealed through motion Tools: imagery
  79. 79. Types of imagery Animation • • Giving the gist of a process, not the details • • When motion helps convey personality Communicating with diverse cultures, where details might not translate When still images aren’t enough, or novelty is needed Tools: imagery
  80. 80. Types of imagery Logos • • • On a product or branded service To represent a product To represent parent organization Tools: imagery
  81. 81. Types of imagery Icons • When 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 style Symbols • Represent object, action, or idea, but don’t need to resemble it • Use when communicating something your audience universally understands • Use when common symbols exist for the concept represented Tools: imagery
  82. 82. Types of imagery Charts and graphs, including interactive data visualizations • When visually representing factual or quantitative data with enhances understanding • When comparing data sets to quickly understand differences • Need 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. 83. Types of imagery 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 Tools: imagery
  84. 84. Types of imagery Patterns: repeated areas of an image Tools: imagery
  85. 85. Types of imagery Textures: image effects that change the surface of the screen Tools: imagery
  86. 86. Types of imagery Backgrounds: any image or solid color appearing behind content Tools: imagery Gradations: fields of one or more colors varying in shade to give the illusion of depth
  87. 87. Types of imagery Use patterns, textures, backgrounds, or gradations when their content 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 Tools: imagery
  88. 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 obvious Tools: imagery
  89. 89. 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 Tools: controls & affordances
  90. 90. Default vs. custom Tools: controls & affordances
  91. 91. Cross-platform personality Tools: controls & affordances
  92. 92. Cross-platform personality Tools: controls & affordances
  93. 93. Avoid common mistakes • Only interactive areas should feel interactive; read-only areas should not • • Provide feedback Apply visual design to form controls Tools: controls & affordances
  94. 94. Schedule 9-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:00 Intros 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 you’ve learned Discussion & wrap up
  95. 95. Selecting expressive qualities Strive for useful appeal • Select color, type, and images to indicate similarities/differences, relative importance, and behavior. • • Get the cognitive mapping right. Use expressive visual characteristics to create discernible patterns – so similarities and differences are clear. Apply: overall tips
  96. 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. 97. Schedule 9-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:00 Intros 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 you’ve learned Discussion & wrap up
  98. 98. Thank you! Tania Schlatter tania@nimblepartners.com @taniaschlatter Debby Levinson debby@nimblepartners.com @nimblepartners @visualusability

×