Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course
-
Upload
nimble-partners -
Category
Design
-
view
113 -
download
0
description
Transcript of Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course
![Page 1: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/1.jpg)
Visual design principles & practices
for health-related site and app UXFor Tufts University School of Medicine Online Consumer Health course
Tania Schlatter
![Page 2: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/2.jpg)
UX & IA UX & IA + UI & visual design
Nimble Partners
Work intentionally blurred – under NDA
![Page 3: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/3.jpg)
Writing & teaching
@visualusability
@northeastern / @northeasternCPSstudent work
![Page 4: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/4.jpg)
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
![Page 5: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/5.jpg)
What can design do?
Design gives form
Form influences perception
Perception influences behavior.
Role of visual design in health-related site and app UX
![Page 6: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/6.jpg)
What do we need to convey?
Role of visual design in health-related site and app UX
Define desirable characteristics.
![Page 7: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/7.jpg)
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
![Page 8: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/8.jpg)
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
![Page 9: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/9.jpg)
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
![Page 10: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/10.jpg)
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
![Page 11: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/11.jpg)
= Form
![Page 12: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/12.jpg)
You can not not communicate.
If you don’t design with intent, you design by default.
What visual design can do
![Page 13: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/13.jpg)
Details matter.
What visual design can do
Too crowded Too much “chrome” Just right!
![Page 14: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/14.jpg)
What visual design can do
Same features & content.
![Page 15: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/15.jpg)
In practice: current examples
Is this me?
What now?
Ad?
Who?
![Page 16: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/16.jpg)
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!
![Page 17: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/17.jpg)
In practice: current examples
All of these are “basics?”
![Page 18: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/18.jpg)
Use the meta-principles:
• consistency
• hierarchy
• personality
to inform decisions about layout, type, color, imagery, controls & affordances.
What design can do
![Page 19: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/19.jpg)
Consistency: establishing or adopting appropriate patterns
In practice: current examples
This is what I expect
This is what I expect
![Page 20: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/20.jpg)
Hierarchy: calling attention to the most important thing
Start here?
Or here?
Or here?
Or here?
In practice: current examples
I must be here
![Page 21: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/21.jpg)
Personality: choosing & using expressive characteristics
MedlinePlus - Who?
In practice: current examples
![Page 22: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/22.jpg)
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
![Page 23: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/23.jpg)
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.
![Page 24: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/24.jpg)
What you can do: tips
General tips: imagery that explains
From Richard Saul Wurman’s Understanding Healthcare
![Page 25: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/25.jpg)
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
![Page 26: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/26.jpg)
General tips: color, errors & feedback
What you can do: tips
Too much contrast – “visual spanking”
Polite use of contrast
![Page 27: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/27.jpg)
General tips: three hues or three tints/shades are usually needed
What you can do: tips
![Page 28: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/28.jpg)
General tips: use color to support cognitive mapping
What you can do: tips
![Page 29: Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course](https://reader033.fdocuments.in/reader033/viewer/2022052504/54c7aa074a79590f1d8b459f/html5/thumbnails/29.jpg)
What you can do: tips
General tips: default vs. custom controls
?