adam moorman & stacy robison - design for non-designers: what every health professional needs to...

  Stacy Robison, MPH, MCHES   Adam Moorman

Designing Health Information What every health professional needs to know

Agenda  Introduction

 Key universal design principles

 Designing health information: 10 Tips

Warm Up

We want health information that’s:

Useful Usable

Attractive

Case Study: Florida 2000 Election

Source: More Carrot 2012

Source: More Carrot 2012

Source: http://arts.bev.net/roperldavid/politics/fl2000.htm

Results

  Over 3 times more votes for Reform Party than next-highest Florida county

  Over 19,000 ballots disqualified for double votes   Election decided by 537 votes

Source: More Carrot 2012

If information design can influence the outcome of a presidential election…

Just imagine the impact it can have on our health.

 Chew pill and crush before swallowing.

 Chew it up so it will dissolve, don’t swallow whole or you might choke.

Davis et al., J Gen Intern Med. 2006 August; 21(8): 847–851.

 Use extreme caution in how you take it.

 Medicine will make you feel dizzy.

 Take only if you need it. Davis et al., J Gen Intern Med. 2006 August; 21(8): 847–851.

 Don’t take the medicine if you’ve been in the sunlight too long.

 Don’t leave medicine in the sun. Davis et al., J Gen Intern Med. 2006 August; 21(8): 847–851.

We can do better

Neighbor Nudge Share one tip that has worked for you in designing health information or patient education materials.

Design for your readers

①  Understand your readers

②  Think about what you want them to know or do

③  Use good visual communication

Understand Your Readers

How Readers Read

  Readers are selective about what they read

  Readers read to accomplish their own goals

  Readers interpret as they read

What do you want your readers to know or do?

(Organize your content accordingly)

Almost all writing is intended to change

behavior.

       I  want    _______      to  __________  .  

Iden&fy  your  main  message(s).  

  Ideally no more than 3

 Decide what is a main message and what is supporting content

  Put your main messages first

Use the inverted pyramid.

Main Message

Supporting Info

Background

Nielson Norman Group

Typical F Pattern

Use good visual communication

What is Visual Communication?

The art of arranging and delivering (visual) content to your readers.

Information Design

  Ability to take information and data and communicate it in a way that is clear and facilitates good decision making

Health Literacy:

 Capacity to obtain, process, and understand health information and services needed to make appropriate health decisions

Design is more than aesthetics It can help people:

 Find what they need  Understand what they find  Remember what they read

Guess what: It doesn’t have to be a brochure!

The Information Blanket

Rule29

What color is your pen?

Hand me the pen!

  No hesitation putting marks on a blank page

  Believe in pictures as a problem-solving tool

  Enjoy visual metaphors and analogies

  Show confidence in drawing simple images to summarize their ideas

Black Pen

I can’t draw, but…   A.K.A. “highlighters” – good at identifying the most important parts of what others have drawn

  Happy to watch others working at whiteboard

  More verbal, incorporate words and labels, make comparisons

Yellow Pen

I’m not visual   Think of themselves as quantitatively oriented

  Quite often have the most detailed grasp of the problem at hand

  Once images have been captured, they will move to the board… and redraw everything, often coming up with the clearest picture

Red Pen

The Takeaway Regardless of your visual thinking confidence or the color of your pen, everybody already has good visual thinking skills, and everybody can easily improve those skills.

We are hard-wired

We process pre-cognitive visuals long before we know we’re processing them

So…

The more pre-cognitive cues in a picture, the quicker we can process it, saving “high level” mental capacity for deeper analytic processing.

(like reading and interpreting)

Visual Cues

Visual difference is intuitive.

Conceptual difference is learned.

Visual = intuitive

Conceptual = learned

Gestalt Principles

Gestalt Principles

 Psychology of visual perception

 Our perception of form depends not just on seeing individual parts but on the organization of the whole

Organize text

Show relationships to create meaning

 Contrast

 Grouping

Contrast

 Separating figure from background

Grouping

1.  Objects close to each other are related

2.  Objects similar in size, shape, color are related

Using Grouping

Who should get the flu shot?

Everyone age 6 months or older.

When should I get the flu shot?

As soon as possible, typically in the fall.

Are there side effects?

Soreness or redness where the shot was given.

Using Grouping

Who should get the flu shot? Everyone age 6 months or older.

When should I get the flu shot? As soon as possible, typically in the fall.

Are there side effects? Soreness or redness where the shot was given.

Combine Grouping AND Contrast

Who should get the flu shot? Everyone age 6 months or older.

When should I get the flu shot? As soon as possible, typically in the fall.

Are there side effects? Soreness or redness where the shot was given.

What else is intuitive?

  Relative Size – we recognize difference with zero effort

Source: More Carrot 2012

Other cues: Alignment

Four Squares

The 10 Tips

Create an obvious path for the eye to follow 1

Create  an  obvious  path  for  the  eye    

Start

Move on

Create a visual hierarchy 2

You read this first. And now you’re reading this. Since you probably skipped this, I’m guessing your eyes jumped here third.

The Title A Sub-Heading Some body text

The function of a header

  Facilitate scanning

 Get people interested

  Separate sections of text

 Help give an overview of what’s on the page

Use a grid to keep content and images aligned for web and print 3

   Image sources: Grid Systems in Graphic Design by Josef Müller-Brockmann, and eyelearn.org

   Image source: 960.gs

A few notes on grids

 Left justify for better readability

 Keep column width between 40-50 characters

 Utilize gutters and generous padding to give content room to breathe

Incorporate white space 4

5 Use lists

Use white space wisely.

  Break up sections of text to avoid “walls”

  Include generous padding around images

  Don’t overload the canvas just to fill space

Remember: Leave more white space above a header than below

The  Basics  

  Make your content look easy-to-read

  Actionable health content written in plain language will still look overwhelming without good use of whitespace.

  Break content up into smaller chunks.

Skipping vs. Scanning

People tend to skip over content with:

 Dense “walls” of text

  Long sentences

  Long words

  Paragraphs with more than three lines

What is a chunk?

Here is your header §  Point 1

§  Point 2

§  Point 3

§  Point 4

Here is your header No more than three lines of text. No more than three lines of text. No more than three lines of text. No more than three lines of text.

Use  short,  simple  sentences.  

Use  lists  and  short  paragraphs.  

Use conceptual cues 6

Stoplight

Steven Leckart, Wired Magazine November 29, 2010

Steven Leckart, Wired Magazine November 29, 2010

Use images to facilitate understanding 7

 ?  ?  ?  

Place  visuals  in  context  

Use icons or images to call out important content 8

   Image source: apple.com/mac

Consider sans-serif fonts 9

A quote from Allan Haley

“Not all typefaces are designed to be legible. Many are drawn to create a typographic statement, or provide a particular spirit or feeling to graphic communication… To the degree that a typeface has personality, spirit, or distinction, however, it often suffers proportionally on the legibility scale.”

Font Categories

 This  is  Calibri,  a  sans-­‐serif  font  

 This is Times, a serif font

Standard OS Fonts

Arial Comic Sans Courier New Georgia HelveticaTahoma Times New Roman Trebuchet MS Verdana

Text vs. Display Typefaces

  Text Typefaces §  Designed to be legible and readable across

a variety of sizes

 Display Typefaces §  Designed to attract attention and pull the

reader into the text

§  It can be more elaborate, expressive, and have a stylish look.

Please, use display typefaces responsibly.

Other considerations for font selection

The physical make-up of a font.

Source: I.D.E.A.S. Computer Typography Basics, David Creamer, 2003

Letter Width

  Avoid overly wide or condensed fonts

Counter

  Look for fonts with adequate counter space

Do everyone a favor and avoid:

The best font choices are ones where readers do not notice the

font, but the message.

Source: urbanfonts.com

Increase overall font size and spacing 10

Font Size (web)

16-­‐20  px  

12px  ✗

✓

The Need

Excessive exposure to ultraviolet radiation (UVR) from sunlight is both the primary and the most easily prevented cause of skin cancer. Total lifetime exposure to UVR is positively associated with several types of skin cancer, including basal cell carcinoma, squamous cell carcinoma, and possibly melanoma. Intermittent and sever exposure (i.e., sunburning) may also be linked to the development of melanoma.

The Need

Excessive exposure to ultraviolet radiation (UVR) from sunlight is both the primary and the most easily prevented cause of skin cancer. Total lifetime exposure to UVR is positively associated with several types of skin cancer, including basal cell carcinoma, squamous cell carcinoma, and possibly melanoma. Intermittent and sever exposure (i.e., sunburning) may also be linked to the development of melanoma.

Be mindful of Line Spacing (Leading)

  The vertical space between baselines

Palatino 9/9Because type size and line spacing are both measured in points and are inseparable, their sizes are normally written together. They are commonly written in this manner: 10/12, pronounced “ten over twelve.” This indicates that the type size is ten points and the line spacing is 12 points, or has two extra points of space over the type size.

Palatino 9/11Because type size and line spacing are both measured in points and are inseparable, their sizes are normally written together. They are commonly written in this manner: 10/12, pronounced “ten over twelve.” This indicates that the type size is ten points and the line spacing is 12 points, or has two extra points of space over the type size.

Palatino 9/10Because type size and line spacing are both measured in points and are inseparable, their sizes are normally written together. They are commonly written in this manner: 10/12, pronounced “ten over twelve.” This indicates that the type size is ten points and the line spacing is 12 points, or has two extra points of space over the type size.

Palatino 9/12Because type size and line spacing are both measured in points and are inseparable, their sizes are normally written together. They are commonly written in this manner: 10/12, pronounced “ten over twelve.” This indicates that the type size is ten points and the line spacing is 12 points, or has two extra points of space over the type size.

Character and word spacing

  Tracking adjusts the visual density of a line of copy

  Kerning is the adjustment between two individual letters

  These allow horizontal copy manipulation without affecting the integrity of the font

-25 TrackingThe adjustment of word spacing is called Tracking. It is similar to kerning but refers to the adjustment of an entire selection of characters, words, and spaces. Its main purpose is to make type fit a required space without altering the type size or line spacing. Tracking can be either negative, making the words closer together; or positive, making the words farther apart.

+5 TrackingThe adjustment of word spacing is called Tracking. It is similar to kerning but refers to the adjustment of an entire selection of characters, words, and spaces. Its main purpose is to make type fit a required space without altering the type size or line spacing. Tracking can be either negative, making the words closer together; or positive, making the words farther apart.

+10 TrackingThe adjustment of word spacing is called Tracking. It is similar to kerning but refers to the adjustment of an entire selection of characters, words, and spaces. Its main purpose is to make type fit a required space without altering the type size or line spacing. Tracking can be either negative, making the words closer together; or positive, making the words farther apart.

   Image source: https://www.fontfont.com/glossary

Practice

To sum it all up: Keep it simple

Think “Clean”

 Clean design supports visual thinking

 Reduces the effort needed to find information

Questions?