Visual design principles & practices

for health-related site and app UX
For Tufts University School of Medicine Online Co...
Work intentionally blurred – under NDA

UX & IA
Nimble Partners

UX & IA + UI & visual design
@visualusability
@northeastern / @northeasternCPS
student work

Writing & teaching
Agenda

• What design can do: role of visual design in healthrelated sites and apps
• In practice: current examples
• What...
What can design do?
Design gives form
Form influences perception
Perception influences behavior.

Role of visual design in h...
What do we need to convey?

Define desirable characteristics.

Role of visual design in health-related site and app UX
Credibility: Is it professional?
• Is it organized? Are there visible systems for navigation,
type, color, controls and th...
Credibility: Do I trust it?
• Who is this from? Is there a professional identity presented
appropriately? Are there creden...
Helpful: Does it help me understand?
• Can I read/use it? Is the type appropriate? Do colors contrast
sufficiently with the ...
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 ...
= Form
You can not not communicate.
If you don’t design with intent, you design by default.

What visual design can do
Details matter.

Too crowded

What visual design can do

Too much “chrome”

Just right!
Same features & content.

What visual design can do
Is this me?
Who?

Ad?

What now?

In practice: current examples
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 se...
All of these are “basics?”

In practice: current examples
Use the meta-principles:
• consistency
• hierarchy
• personality

to inform decisions about layout, type,
color, imagery, ...
Consistency: establishing or adopting appropriate patterns

This is what
I expect

In practice: current examples

This is ...
Hierarchy: calling attention to the most important thing
I must be here
Start here?

Or here?
Or here?

Or here?

In pract...
Personality: choosing & using expressive characteristics

MedlinePlus
- Who?

In practice: current examples
Personality: choosing & using expressive characteristics
I know who
this is from
Prominence
and dark color
feels serious,
...
Personality: choosing & using expressive characteristics
I know who
this is from

Color feels
selected and
applied randoml...
General tips: imagery that explains

From Richard Saul
Wurman’s Understanding
Healthcare

What you can do: tips
General tips: choosing color

It’s not the color; it’s the use of the color that makes it work or not.






What you c...
General tips: color, errors & feedback

 Too much contrast –
“visual spanking”

What you can do: tips



Polite use of c...
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
General tips: default vs. custom controls





What you can do: tips

?
Thank you!
Tania Schlatter
tania@nimblepartners.com
@taniaschlatter

www.visualusabilitybook.com
@visualusability
Upcoming SlideShare
Loading in...5
×

Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course

956

Published on

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.

Published in: Design, Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
956
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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.
  • Visual design for UX overview for Tufts University School of Medicine Online Consumer Health course

    1. 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. 2. Work intentionally blurred – under NDA UX & IA Nimble Partners UX & IA + UI & visual design
    3. 3. @visualusability @northeastern / @northeasternCPS student work Writing & teaching
    4. 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. 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. 6. What do we need to convey? Define desirable characteristics. Role of visual design in health-related site and app UX
    7. 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. 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. 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. 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. 11. = Form
    12. 12. You can not not communicate. If you don’t design with intent, you design by default. What visual design can do
    13. 13. Details matter. Too crowded What visual design can do Too much “chrome” Just right!
    14. 14. Same features & content. What visual design can do
    15. 15. Is this me? Who? Ad? What now? In practice: current examples
    16. 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. 17. All of these are “basics?” In practice: current examples
    18. 18. Use the meta-principles: • consistency • hierarchy • personality to inform decisions about layout, type, color, imagery, controls & affordances. What design can do
    19. 19. Consistency: establishing or adopting appropriate patterns This is what I expect In practice: current examples This is what I expect
    20. 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. 21. Personality: choosing & using expressive characteristics MedlinePlus - Who? In practice: current examples
    22. 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. 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. 24. General tips: imagery that explains From Richard Saul Wurman’s Understanding Healthcare What you can do: tips
    25. 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. 26. General tips: color, errors & feedback  Too much contrast – “visual spanking” What you can do: tips  Polite use of contrast
    27. 27. General tips: three hues or three tints/shades are usually needed What you can do: tips
    28. 28. General tips: use color to support cognitive mapping What you can do: tips
    29. 29. General tips: default vs. custom controls   What you can do: tips ?
    30. 30. Thank you! Tania Schlatter tania@nimblepartners.com @taniaschlatter www.visualusabilitybook.com @visualusability
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×