visual design for ux overview for tufts university school of medicine online consumer health course
DESCRIPTION
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.TRANSCRIPT
Visual design principles & practices
for health-related site and app UXFor Tufts University School of Medicine Online Consumer Health course
Tania Schlatter
UX & IA UX & IA + UI & visual design
Nimble Partners
Work intentionally blurred – under NDA
Writing & teaching
@visualusability
@northeastern / @northeasternCPSstudent work
Agenda
• What design can do: role of visual design in health-related sites and apps
• In practice: current examples
• What you can do: tips and review of your work
Agenda
What can design do?
Design gives form
Form influences perception
Perception influences behavior.
Role of visual design in health-related site and app UX
What do we need to convey?
Role of visual design in health-related site and app UX
Define desirable characteristics.
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 !t the topic? Do they !t the organization of origin?
What visual design can do
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 speci!c 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
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
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
= Form
You can not not communicate.
If you don’t design with intent, you design by default.
What visual design can do
Details matter.
What visual design can do
Too crowded Too much “chrome” Just right!
What visual design can do
Same features & content.
In practice: current examples
Is this me?
What now?
Ad?
Who?
In practice: current examples
Is this really it?
What do I need to learn?
I thought this was about learning?
Am I supposed to click?
I just want to see how much it will cost!
In practice: current examples
All of these are “basics?”
Use the meta-principles:
• consistency
• hierarchy
• personality
to inform decisions about layout, type, color, imagery, controls & affordances.
What design can do
Consistency: establishing or adopting appropriate patterns
In practice: current examples
This is what I expect
This is what I expect
Hierarchy: calling attention to the most important thing
Start here?
Or here?
Or here?
Or here?
In practice: current examples
I must be here
Personality: choosing & using expressive characteristics
MedlinePlus - Who?
In practice: current examples
Personality: choosing & using expressive characteristics
In practice: current examples
I know who this is from
Looks like a believable person
They want a donation – feels serious
Different colors and symbols help me know I know where I can go, and what I can do
Layout is not crowded – feels con!dent
Prominence and dark color feels serious, not somber
Personality: choosing & using expressive characteristics
In practice: current examples
I know who this is from
So many styles of images feels chaotic
Crowded, small red text – feels desperate
Color feels selected and applied randomly. It is shouting.
What you can do: tips
General tips: imagery that explains
From Richard Saul Wurman’s Understanding Healthcare
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
General tips: color, errors & feedback
What you can do: tips
Too much contrast – “visual spanking”
Polite use of contrast
General tips: three hues or three tints/shades are usually needed
What you can do: tips
General tips: use color to support cognitive mapping
What you can do: tips
What you can do: tips
General tips: default vs. custom controls
?
