UPA Boston 2012: Reader-Centered Design for Online Health Communications
At the UPA Boston 2012 conference, the team from CommunicateHealth presented “Reader-Centered Design for Online Health Communications.”
CommunicateHealth
- Health education firm, improve health literacy on the web, through best practices and research strategies
- Served as lead writers and editors for HHS’s Health Literacy Online guide. Took a lot of existing general-purpose best practices and research, infused with over 700 user interviews. See guide for more details than today’s talk can provide.
Why worry about literacy?
- Half of Americans have limited literacy skills: reading, comprehending information.
- Health literacy even more of a problem: 9 in 10 have limited health literacy skills.
- Not only in reading, but being able to use info they’re reading to improve their health, for behavior change.
- Stress and sickness can make even cause difficulties for the literate 10%
-
(Technique: black out complex words to see what a low-literacy user would experience.)
- Users with limited literacy skills are willing to use the web, and able to accomplish tasks when apps are designed well
- All users benefit from improved readability. Time-on-task improves for all user groups when improvements are made, especially high-literacy users (!!)
Writing for action
- Passive is “about asthma,” active is “prevent asthma attacks at home”
- Focus on the reader’s behavior, and give them a useful instruction… “what’s the action I can take right away?”
- Facts, demographics, “background information” might be interesting, but it’s not actionable.
- In asthma example, talk about common causes of attacks that could be eliminated.
- Also make it personable - talk about “your family”, making changes in “your home”; resonates with people
Organize content
- Labels are important for helping readers find content: use labels your users know
- Use open card sorting so users can suggest the terms they’d use for content labels
- Not “indoor air quality,” but maybe “healthy air”
Reader-friendly web fonts
- Until very recently, number of fonts to choose were limited (and many of the limited options were bad for reading)
- Web fonts can be used widely now (cf Google Web Fonts), but how to choose the most readable?
- Ask: who is audience? what reading problems or disabilities?
- Choose something appropriate for your most challenged users, and it should scale to all others.
- Default to sans-serif (though with proper treatment, serifs can work)
- Use fonts with equal stroke width
- Use medium letter width
- Use fonts with open counter space (e.g. an “open” e, rather than a closed “e” as in Helvetica)
- Use fonts with tall x-heights (“X” is closer to top of other letters)
- Once you find a typeface with all these qualities, it’s helpful to find a font with multiple weights (e.g. Open Sans has light, medium, book, bold, heavy.)
Using fonts in context
- Test your fonts with real content
- Users with limited skills will skip over content with dense walls of text, long sentences, long words, and paragraphs with more than three lines.
- Sometimes you can take preexisting content and use type treatment alone to improve readability.
- Keep body text from 16-20 pixels. But different fonts might have different qualities at same pixel-height.
- Keep line length narrow, 9-12 words max (e.g. newspaper columns)
- Use line height of 120-150% (some breathing room between lines)
Create Visual Hierarchy
- Properly styling headings and paragraphs, providing enough whitespace, all contributes to readability and overall feeling of comfort while reading
- Add “at a glance” info at the top, so busy people don’t need to read paragraphs and paragraphs at the outset