Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course
•
1 like•2,052 views
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.
Recommended
Recommended
More Related Content
More from Tania Schlatter
More from Tania Schlatter (8)
Recently uploaded
Recently uploaded (20)
Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course
- 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. Work intentionally blurred – under NDA UX & IA Nimble Partners UX & IA + UI & visual design
- 3. @visualusability @northeastern / @northeasternCPS student work Writing & teaching
- 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. 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. What do we need to convey? Define desirable characteristics. Role of visual design in health-related site and app UX
- 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. 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. 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. 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. = Form
- 12. You can not not communicate. If you don’t design with intent, you design by default. What visual design can do
- 13. Details matter. Too crowded What visual design can do Too much “chrome” Just right!
- 14. Same features & content. What visual design can do
- 15. Is this me? Who? Ad? What now? In practice: current examples
- 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. All of these are “basics?” In practice: current examples
- 18. Use the meta-principles: • consistency • hierarchy • personality to inform decisions about layout, type, color, imagery, controls & affordances. What design can do
- 19. Consistency: establishing or adopting appropriate patterns This is what I expect In practice: current examples This is what I expect
- 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. Personality: choosing & using expressive characteristics MedlinePlus - Who? In practice: current examples
- 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. 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. General tips: imagery that explains From Richard Saul Wurman’s Understanding Healthcare What you can do: tips
- 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. General tips: color, errors & feedback Too much contrast – “visual spanking” What you can do: tips Polite use of contrast
- 27. General tips: three hues or three tints/shades are usually needed What you can do: tips
- 28. General tips: use color to support cognitive mapping What you can do: tips
- 29. General tips: default vs. custom controls What you can do: tips ?
Editor's Notes
- I specialize in visual interface design for information-based sites and apps.
- I wrote a book with my business partner about design as a tool to help people understand and make sense of what they see called “Visual Usability.” I teach Information design and Interactive information design to graduate and undergraduates at Northeastern. Student work by Coleen Murphy and Bryan (Ho) Wang.
- "Lecture" but informal - feel free to ask questions!
- In the on line world, when we walk into a restaurant, the decor and style of the menu help influence our reaction. Is there a tablecloth? Are there paper placemats? How clean is the bathroom? What we see will influence if we are comfortable, if we are we over or under dressed. It might affect what we order, and our behavior, consciously or unconsciously. Later, how we interpret what we saw, experienced, and felt affects how we think about the restaurant when we reflect back on the experience, such as when describing it to a friend. Will we go back to that restaurant again? We interpret what we see all the time, and make judgements. We recognize patterns – similarities and differences – and connect what we see and experience to what we have seen and experienced before, and how we felt. What does a restaurant need to convey to positively affect our perceptions and behavior? Cleanliness? Tastiness? Freshness? If we know what we want to convey, we can make decisions that help.
- What about a health site or application? What needs to be conveyed for a positive experience? - Credibility? - Trustworthiness? - Usefulness?- Approachability or friendliness?
- Define desirable characteristics, and think about how design can help us achieve them.
- Do the visual design characteristics help me understand the information AND use the site/app?
- The “form” we are talking about with digital interface design is the device or medium, the content and features, layout and organization of elements – text, buttons and controls, and imagery – what somebody can do and how they can do it. All of these are part of what influences the UX. Visual design is the presentation and characteristics of what is presented – typography (the font, spacing of lines and letters), colors and how they are used, styling of controls – flat, shaded, type of images, motion – the details – convey the qualities that people interpret. Model adapted from Don Norman’s book, “The Emotional Design of Everyday Things”.
- Details matter. All three of these apps show the same data. At a glance, its like the Goldilocks story – FinanceCap on the left is too crowded. Yahoo in the middle has too much styling. Google on the right is just right. It is comfortable and clear.
- Example: These interfaces have the same content and functionality. On the left is the USDA’s Supertracker application. On the right is our redesign for phone and tablet. We were not commissioned to do this by the USDA. The redesign was done as an example for our book, Visual Usability. We used the application for months during the redesign. Our goal was to show how visual interface design can be used as a tool to help people understand and use applications – to help improve UX. We used the app to inform design changes. We learned that entering foods is a primary activity, so we made those features more visually prominent – using layout to change the hierarchy. We used bright colors to draw the eye to data and the things you can click on. We kept the colors that tie to the US.gov Choose MyPlate initiative. We added neutrals so not everything was shouting. We changed the personality by literally toning it down and changing how it used its visual speaking voice. We had a personal assistant in mind – smart, effective and efficient. All of these changes were backed by rationale that included consideration of use and interpretation, combined with aesthetics.
- National Institute of Health Senior Health Site - What can we interpret from the form? Is it professional? Is it organized? Is there a system for navigation, typography, color use, control use, styling and behavior? Is the up-front value proposition clear? What is this about? What can I do here? Can I tell who this is from? This is where we run into issues. This is an overview. We can’t quickly tell what we should do next. A lot of choices - all at equal visual hierarchy. They should help us decide, and in terms of layout, put the clear next steps with the content to support flow. Who it is from should be more prominent, esp. for the scenario of coming from Google. At first I thought the images were ads. The captions need to be with the images. Are the visual characteristics appropriate? Do the header photos help? They tell me who it is for, but is that the best choice? What else could they do? Can I read it? Is the type size appropriate? Do the type colors contrast sufficiently with the background? Can I tell what will happen if I click? Do the design of the controls indicate what will happen? Can I see feedback from what I did? Can I skim?
- These will help you avoid common mistakes, and make informed decisions.
- Professional? - Consistency between pages - good. - Consistency with patterns - location of search, placement and type of social media tools - good. - Consistency with layout, type, image purpose – goal is to explain - good. - Showing what is different - Health topics section, Medical encyclopedia widget - establishes hierarchy
- Helpful? Yes and no. Where consistency is about showing what is similar, hierarchy is about showing what is different. Highlighted Nav item is different - good. Medical encyclopedia must be important, because it is higher up and colored differently. Overview section is highlighted, but “Start here” gets lost, and right column image and encyclopedia draw the eye.
- Do I trust it? - Mayo clinic’s professional logo is literally front and center – used as a differentiator and a “flag” - Mayo is reserved – very classical and less expressive - Layout is designed to maximize page views/ad views. Choices for what to do next are clear - Qualities of the MedlinePlus name, logo feel expressive, yet generic
- Is it professional? Do I trust it? Is it helpful? - Logo is clear and professional - Imagery and color use is both serious and reassuring, because it is appropriate for the topic and organization. - Trustworthy badges reinforce
- Is it professional? Do I trust it? Is it helpful? Poor design decisions get in the way of accessing and understanding information.
- Richard Saul Wurman - understanding healthcare series is a great example.
- In two of these three examples, use of red is successful.
- “Errors” and other types of visual feedback or help are an opportunity to differentiate and show your personality.
- Probably want 3 hues and several tints on one hue – lead, text and accent. 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
- Use color to help make patterns clear. These colors were applied randomly. They don’t map to a system, like all water sports are blue.
- Default is recognizable, but may not be attractive. Doesn’t support personality. Can throw off hierarchy. Even minimal changes (StatsWidget) make a difference. Mixing default and custom controls is a problem.