Presented by Adam Moorman & Stacy Robison, MPH, on March 12, 2015 at the fifth Center for Health Literacy Conference: Plain Talk in Complex Times.

1. Stacy Robison, MPH, MCHES
Adam Moorman
Designing Health Information
What every health professional needs to know

2. Agenda
Introduction
Key universal design principles
Designing health information:
10 Tips

3. Warm Up

4. We want health information that’s:
Useful
Usable
Attractive

5. Case Study:
Florida 2000 Election

8. Source: More Carrot 2012

9. Source: More Carrot 2012

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

11. 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

12. If information design can
influence the outcome of
a presidential election…
Just imagine the impact
it can have on our health.

13. 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.

14. 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.

15. 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.

16. We can do better

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

18. Design for your readers
① Understand your readers
② Think about what you want them
to know or do
③ Use good visual communication

19. Understand Your Readers

20. How Readers Read
Readers are selective about what they read
Readers read to accomplish their own goals
Readers interpret as they read

21. What do you want your
readers to know or do?
(Organize your content accordingly)

22. Almost all writing is
intended to change
behavior.

24.
I
want
_______
to
__________
.

25. 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

26.
Use the inverted pyramid.
Main Message
Supporting Info
Background

27.
Nielson Norman Group
Typical F Pattern

28. Use good
visual communication

29. What is Visual Communication?
The art of arranging and
delivering (visual) content
to your readers.

30. 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

31. Design is more than aesthetics
It can help people:
Find what they need
Understand what they find
Remember what they read

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

33. The Information Blanket

34. Rule29

35. What color is your pen?

36. 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

37. 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

38. 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

39. 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.

40. We are hard-wired
We process pre-cognitive visuals long
before we know we’re processing them

41. 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)

42. Visual Cues
Visual difference is intuitive.
Conceptual difference is learned.

43.
Visual = intuitive

44.
Conceptual = learned

45. Gestalt Principles

46. Gestalt Principles
Psychology of visual perception
Our perception of form depends not
just on seeing individual parts but on
the organization of the whole

47. Organize text
Show relationships to create meaning
Contrast
Grouping

48. Contrast
Separating figure from background

51. Grouping
1. Objects close to each other are related
2. Objects similar in size, shape, color are
related

52. 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.

53. 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.

54. 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.

55. What else is intuitive?
Relative Size – we recognize difference
with zero effort

56. Source: More Carrot 2012
Other cues: Alignment

57. Four Squares

60. The 10 Tips

61.
Create an obvious path
for the eye to follow1

62. Create
an
obvious
path
for
the
eye
Start
Move on

63.
Create a visual
hierarchy2

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

65.
The Title
A Sub-Heading
Some body text

66. The function of a header
Facilitate scanning
Get people interested
Separate sections of text
Help give an overview of what’s
on the page

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

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

69. Image source: 960.gs

70. 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

72.
Incorporate white space4
5 Use lists

73. 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

74. 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.

75. Skipping vs. Scanning
People tend to skip over content with:
Dense “walls” of text
Long sentences
Long words
Paragraphs with more than three lines

76. 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.

79. Use
short,
simple
sentences.

80. Use
lists
and
short
paragraphs.

81.
Use conceptual cues6

82.
Stoplight

84. Steven Leckart, Wired Magazine November 29, 2010

85. Steven Leckart, Wired Magazine November 29, 2010

87.
Use images to facilitate
understanding7

88.
?
?
?

89. Place
visuals
in
context

92.
Use icons or images
to call out important
content
8

94. Image source: apple.com/mac

95.
Consider sans-serif fonts
9

96. 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.”

97. Font Categories
This
is
Calibri,
a
sans-­‐serif
font
This is Times, a serif font

98. Standard OS Fonts
Arial
Comic Sans
Courier New
Georgia
Helvetica
Tahoma
Times New Roman
Trebuchet MS
Verdana

99. 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.

100.
Please, use display typefaces
responsibly.

101. Other considerations
for font selection

102. The physical make-up of a font.
Source: I.D.E.A.S. Computer Typography Basics, David Creamer, 2003

103. Letter Width
Avoid overly wide or condensed fonts

104. Counter
Look for fonts with adequate counter
space

105. Do everyone a favor and avoid:

106. The best font choices are ones
where readers do not notice the
font, but the message.
Source: urbanfonts.com

107.
Increase overall font
size and spacing10

108. 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.

109. Be mindful of Line Spacing (Leading)
The vertical space between baselines
Palatino 9/9
Because 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/11
Because 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/10
Because 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/12
Because 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.

110. 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

111. -25 Tracking
The 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 Tracking
The 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 Tracking
The 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.

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

113. Practice

114. To sum it all up:
Keep it simple

115. Think “Clean”
Clean design supports visual
thinking
Reduces the effort needed to find
information

116. Questions?