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.
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
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
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
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
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.