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?