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

?

Thank you!

Tania Schlattertania@nimblepartners.com

@taniaschlatter

www.visualusabilitybook.com

@visualusability