Presented by CommunicateHealth, Inc. at UPA Boston's 11th Annual Usability & User Experience Conference, May 7, 2012.

1.
Reader-­‐Centered
Design
for
Online
Health
Communica8on
Sarah
Pomerantz,
Usability
Associate
Mel
Choyce,
Web
Designer
Molly
McLeod,
Crea=ve
Director

2. CommunicateHealth

3. Agenda
+ Intro
to
health
literacy
+ 5
strategies
for
reader-­‐centered
design
① Write
ac=onable
content
② Organize
content
③ Choose
reader-­‐friendly
web
fonts
④ Display
content
clearly
⑤ Create
visual
hierarchy
+ Ques=ons?

4. Health
Literacy
Online
• http://healthfinder.gov/
• http://www.health.gov/healthliteracyonline/
• http://www.usability.gov/guidelines/index.html

5. Why
worry
about
literacy?
Almost
half
of
Americans
have
limited
literacy
skills.
Source: Kutner, M., Greenberg, E., Jin, Y., & Paulsen, C. (2006). The health literacy of
America's adults: Results from the 2003 National Assessment of Adult Literacy.

6. Why
worry
about
health
literacy?
About
9
in
10
Americans
have
limited
health
literacy
skills.
Source: Kutner, M., Greenberg, E., Jin, Y., & Paulsen, C. (2006). The health literacy of
America's adults: Results from the 2003 National Assessment of Adult Literacy.

7. What
it
means
to
have
low
literacy:
From
epa.gov’s
“Basic
Informa=on
on
Asthma”
page

8. What
is…?

9. How
is
health
literacy
different?

10. What
we
know…
Users
with
limited
literacy
skills
are…
+ Willing
to
use
the
Web
to
access
health
informa=on
+ Able
to
accomplish
tasks
when
Web
sites
are
designed
well
Source:
U.S.
Department
of
Health
and
Human
Services,
Office
of
Disease
Preven=on
and
Health
Promo=on.
(2010).
Health
literacy
online:
A
guide
to
wri4ng
and
designing
easy-­‐to-­‐use
health
Web
sites.

11. ALL
users
benefit
from
improved
readability
and
usability
Comparing
=me-­‐on-­‐task
on
the
original
site
with
a
prototype
(designed
to
support
users
with
limited
literacy
skills):
Time on Task Original Site" Prototype" Improvement"
(Mean)" High Literacy Users:
High literacy" 14:19" 5:05" +182%" 3x as fast with the
revised site
Lower literacy" 22:16" 9:30" +134%"
93% success rate
on revised site
All users" 17:50" 6:45" +164%" (compared to 68%
with original)
Source:
Summers,
K.,
&
Summers,
M.
(2005).
Reading
and
naviga4onal
strategies
of
Web
users
with
lower
literacy
skills.

12. Strategy
1
Write
ac=onable
content

13. Wri=ng
for
Ac=on
Which
page
would
be
most
helpful
if
your
child
had
asthma?
① “About
asthma”
② “Asthma
symptoms”
③ “Prevent
asthma
acacks
at
home”

14. Just
the
Basics
What
do
your
users
need
to
know
to
take
ac=on?
Hint:
Focus
on
the
behavior
rather
than
background
informa=on
and
sta=s=cs.

15. Priori=ze
the
Behavior
✗ Asthma
makes
breathing
difficult
for
more
than
34
million
Americans.
✗ Asthma
in
cor
symptoms
tof
arsthma,
kwith
nd
adults
treatment
f
hildren
is
on
he
ise,
but
ids
a
proper
can
live
well.
✓ If
someone
if
tyour
fcamily
has
auses
of
start
by
n
gegng
rid
o hese
ommon
c
asthma,
acacks:
+ Mold
or
dampness
+ Cockroaches
+ Secondhand
smoke

16. Strategy
2
Organize
content

17. Using
Labels
Which
link
will
have
info
on
asthma
triggers?
① Air
Pollu=on
&
Respiratory
Health
② Indoor
Air
Quality
③ Asthma
and
Allergies

18. Use
Labels
Your
Users
Know
Allergies
Mold
Carbon
Asthma
Monoxide
Healthy
Air

19. Strategy
3
Choose
reader-­‐friendly
web
fonts

20.
Old
Web
Safe
Fonts
Arial
Comic Sans
Courier New
Georgia
Helvetica"
Tahoma
Times New Roman
Trebuchet MS
Verdana

21.
Web
Font
Renaissance
Sources:
The
COOP
(hcp://coworkchicago.com/),
American
Teilhard
Associa4on
(
hcp://www.teilharddechardin.org/),
Moresoda
(hcp://moresoda.co.uk/),
Life
in
Greenville,
South
Carolina
(hcp://lifeingreenville.com/)

22.
Web
Font
Renaissance
Source:
HealthyHomes,
launching
this
summer

23.
But
how
do
I
choose…?
Source:
Google
Web
Fonts
(hcp://www.google.com/webfonts)

24.
Know
Your
Audience
+ Who
is
your
target
audience?
+ Does
that
audience
have
any
specific
reading
problems
or
disabili=es?
+ Remember:
+ “The
number
of
older
adults
using
the
Internet
con=nues
to
grow.
Age-­‐
related
changes
in
vision,
hearing,
and
cogni=on
affect
older
adults’
use
of
the
Internet.”
Source:
U.S.
Department
of
Health
and
Human
Services,
Office
of
Disease
Preven=on
and
Health
Promo=on.
(2010).
Health
literacy
online:
A
guide
to
wri4ng
and
designing
easy-­‐to-­‐
use
health
Web
sites.

25.
Font
Style
Consider
sans-­‐serif
fonts
+ This is Verdana, a sans-serif font
+ This is Georgia, a serif font

26.
Stroke
Width
Use
fonts
with
equal
stroke
width

27.
Lecer
Width
Use
fonts
with
medium
leAer
width

28.
Counter
Space
Use
fonts
with
open
counter
space

29.
X-­‐Height
Use
fonts
with
tall
x-­‐heights

30.
Mul=ple
Font
Weights
+ Open Sans + Droid Sans
Source:
Google
Web
Fonts
(hcp://www.google.com/webfonts)

31.
Fonts
in
Context
Text
Source:
healthfinder.gov
(hcp://healthfinder.gov/preven=on/ViewTopic.aspx?topicID=86&cnt=1&areaID=1)

32. Why
does
typography
macer?
Web
users
with
limited
literacy
skills
tend
to
skip
over
content
with:
+ Dense
“walls”
of
text
+ Long
sentences
+ Long
words
+ Paragraphs
with
more
than
3
lines
Source:
U.S.
Department
of
Health
and
Human
Services,
Office
of
Disease
Preven=on
and
Health
Promo=on.
(2010).
Health
literacy
online:
A
guide
to
wri=ng
and
designing
easy-­‐to-­‐use
health
Web
sites.

33. Oh
dear…
Source:
hcp://r=ps.cancer.gov/r=ps

34. Strategy
4
Display
content
clearly

35. Text
Size
✗ Less
than
16px
✓ 16-­‐20
px

36. Line
Length
✗ 20-­‐24
words
per
line
✓ 9-­‐12
words
per
line

37. Line
Height
✗ 100%
✓ 120-­‐150%

38. Strategy
5
Create
visual
hierarchy

39. Header
Hierarchy
✗
✗
✓

40. Paragraph
Formagng
✓ ✗

41. White
Space
✓ ✗

42. Before
&
Aser
hcp://r=ps.cancer.gov/r=ps

43. Health
informa=on
for
the
90%!
75%
60%
Searching
for
health
of
adults
have
of
adults
have
informa=on
is
one
of
looked
for
health
or
searched
for
health
the
top
3
most
popular
medical
informa=on.
informa=on
online.
online
ac=vi=es.
Sources:
U.S.
Department
of
Health
and
Human
Services,
Office
of
Disease
Preven=on
and
Health
Promo=on
(2010).
Health
literacy
online:
A
guide
to
wri=ng
and
designing
easy-­‐to-­‐use
health
web
sites.
Retrieved
from:
hcp://www.health.gov/healthliteracyonline/why.htm
Na=onal
Center
for
Educa=on
Sta=s=cs.
(2006).
The
Health
Literacy
of
America’s
Adults:
Results
From
the
2003
Na=onal
Assessment
of
Adult
Literacy.
Washington,
DC:
U.S.
Department
of
Educa=on.
Retrieved
from:
hcp://nces.ed.gov/pubs2006/2006483.pdf
Fox,
S.
(2006).
Online
health
search
2006.
Washington,
DC:
Pew
Internet
and
American
Life
Project.
Retrieved
from:
www.pewinternet.org/~/media//Files/Reports/
2006/PIP_Online_Health_2006.pdf.pdf
U.S.
Na=onal
Cancer
Ins=tute.
(2007).
Health
Communica=on—HINTS
2005.
Retrieved
from
hcp://hints.cancer.gov/topic.aspx?sec=on=Health+Communica=on

44. Resources:
+ Health
Literacy
Online:
hcp://www.health.gov/healthliteracyonline/
+ Center
for
Plain
Language:
hcp://centerforplainlanguage.org/
+ Accessible
Design
Guidelines:
hcp://www.peterfreedman.com/design-­‐research

45. Thanks!
Ques=ons?
+ Sarah
Pomerantz
sarah@communicatehealth.com
+ Mel
Choyce
mel@communicatehealth.com
+ Molly
McLeod
molly@communicatehealth.com
+ @CommunicateHlth
+ www.communicatehealth.com