Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course

1,582 views

Published on

These slides are from a talk given to students in the Tufts School of Medicine Online Consumer Health Class. The talk covers:
• design's role in digital health-related communications
• frameworks for assessing the visual design of digital health communications
• specific health-related examples of how design helps or hinders the user experience
• a critique of how some top sites do in terms of design
• general design tips that apply to health-realted site content and user needs.

Published in: Design, Education, Technology
  • Be the first to comment

  • Be the first to like this

Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course

  1. 1. Visual design principles & practices for health-related site and app UX For Tufts University School of Medicine Online Consumer Health course Tania Schlatter
  2. 2. Work intentionally blurred – under NDA UX & IA Nimble Partners UX & IA + UI & visual design
  3. 3. @visualusability @northeastern / @northeasternCPS student work Writing & teaching
  4. 4. Agenda • What design can do: role of visual design in healthrelated sites and apps • In practice: current examples • What you can do: tips and review of your work Agenda
  5. 5. What can design do? Design gives form Form influences perception Perception influences behavior. Role of visual design in health-related site and app UX
  6. 6. What do we need to convey? Define desirable characteristics. Role of visual design in health-related site and app UX
  7. 7. Credibility: Is it professional? • Is it organized? Are there visible systems for navigation, type, color, controls and their use, styling and behavior? • Is the up-front value proposition clear? Can I quickly see what this is about and what can I do? • Are the visual characteristics appropriate? Do stylistic decisions fit the topic? Do they fit the organization of origin? What visual design can do
  8. 8. Credibility: Do I trust it? • Who is this from? Is there a professional identity presented appropriately? Are there credentials, appropriately displayed? • What is their goal? Is the emphasis on information or advertising? • Does it feel specific or generic? Do the photos feel real or generic? Are colors and styles appropriate for the content and organization of origin? What visual design can do
  9. 9. Helpful: Does it help me understand? • Can I read/use it? Is the type appropriate? Do colors contrast sufficiently with the background? • Can I skim and get the gist to help me decide if I want to read? • Does it show and tell? Are there images or video that help explain the content? • Can I tell what will happen if I click? Do the design of controls indicate what will happen? Can I see feedback from what I did? What visual design can do
  10. 10. Helpful: Does it make sense? • Can I see where I am? • Can I see where to click? Are the actions and links clear? • Can I tell what will happen if I click? Do the design of controls indicate what will happen? • Can I tell what changed? Can I see feedback from what I did? What visual design can do
  11. 11. = Form
  12. 12. You can not not communicate. If you don’t design with intent, you design by default. What visual design can do
  13. 13. Details matter. Too crowded What visual design can do Too much “chrome” Just right!
  14. 14. Same features & content. What visual design can do
  15. 15. Is this me? Who? Ad? What now? In practice: current examples
  16. 16. Is this really it? What do I need to learn? Am I supposed to click? I thought this was about learning? I just want to see how much it will cost! In practice: current examples
  17. 17. All of these are “basics?” In practice: current examples
  18. 18. Use the meta-principles: • consistency • hierarchy • personality to inform decisions about layout, type, color, imagery, controls & affordances. What design can do
  19. 19. Consistency: establishing or adopting appropriate patterns This is what I expect In practice: current examples This is what I expect
  20. 20. Hierarchy: calling attention to the most important thing I must be here Start here? Or here? Or here? Or here? In practice: current examples
  21. 21. Personality: choosing & using expressive characteristics MedlinePlus - Who? In practice: current examples
  22. 22. Personality: choosing & using expressive characteristics I know who this is from Prominence and dark color feels serious, not somber Looks like a believable person Layout is not crowded – feels confident In practice: current examples They want a donation – feels serious Different colors and symbols help me know I know where I can go, and what I can do
  23. 23. Personality: choosing & using expressive characteristics I know who this is from Color feels selected and applied randomly. It is shouting. So many styles of images feels chaotic Crowded, small red text – feels desperate In practice: current examples
  24. 24. General tips: imagery that explains From Richard Saul Wurman’s Understanding Healthcare What you can do: tips
  25. 25. General tips: choosing color It’s not the color; it’s the use of the color that makes it work or not.    What you can do: tips
  26. 26. General tips: color, errors & feedback  Too much contrast – “visual spanking” What you can do: tips  Polite use of contrast
  27. 27. General tips: three hues or three tints/shades are usually needed What you can do: tips
  28. 28. General tips: use color to support cognitive mapping What you can do: tips
  29. 29. General tips: default vs. custom controls   What you can do: tips ?
  30. 30. Thank you! Tania Schlatter tania@nimblepartners.com @taniaschlatter www.visualusabilitybook.com @visualusability

×