Reader-Centered Design for Online Health Information

1,750 views

Published on

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

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,750
On SlideShare
0
From Embeds
0
Number of Embeds
538
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Reader-Centered Design for Online Health Information

  1. 1.  Reader-­‐Centered  Design  for    Online  Health  Communica8on                      Sarah  Pomerantz,  Usability  Associate  Mel  Choyce,  Web  Designer  Molly  McLeod,  Crea=ve  Director  
  2. 2. CommunicateHealth  
  3. 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. 4. Health  Literacy  Online  •  http://healthfinder.gov/•  http://www.health.gov/healthliteracyonline/•  http://www.usability.gov/guidelines/index.html
  5. 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 ofAmericas adults: Results from the 2003 National Assessment of Adult Literacy.
  6. 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 ofAmericas adults: Results from the 2003 National Assessment of Adult Literacy.
  7. 7. What  it  means  to  have  low  literacy:  From  epa.gov’s  “Basic  Informa=on  on  Asthma”  page  
  8. 8. What  is…?  
  9. 9. How  is  health  literacy  different?  
  10. 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. 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. 12. Strategy  1   Write  ac=onable  content  
  13. 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. 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. 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. 16. Strategy  2   Organize  content  
  17. 17. Using  Labels   Which  link  will  have  info  on  asthma  triggers?     ① Air  Pollu=on  &  Respiratory  Health     ② Indoor  Air  Quality     ③ Asthma  and  Allergies      
  18. 18. Use  Labels  Your  Users  Know   Allergies   Mold   Carbon   Asthma   Monoxide   Healthy   Air  
  19. 19. Strategy  3   Choose  reader-­‐friendly  web  fonts  
  20. 20.    Old  Web  Safe  Fonts   Arial Comic Sans Courier New Georgia Helvetica" Tahoma Times New Roman Trebuchet MS Verdana
  21. 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. 22.    Web  Font  Renaissance   Source:  HealthyHomes,  launching  this  summer  
  23. 23.    But  how  do  I  choose…?   Source:  Google  Web  Fonts  (hcp://www.google.com/webfonts)  
  24. 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. 25.    Font  Style   Consider  sans-­‐serif  fonts   +  This is Verdana, a sans-serif font +  This is Georgia, a serif font
  26. 26.    Stroke  Width   Use  fonts  with  equal  stroke  width  
  27. 27.    Lecer  Width   Use  fonts  with  medium  leAer  width  
  28. 28.    Counter  Space   Use  fonts  with  open  counter  space  
  29. 29.    X-­‐Height   Use  fonts  with  tall  x-­‐heights  
  30. 30.    Mul=ple  Font  Weights   +  Open Sans +  Droid Sans Source:  Google  Web  Fonts  (hcp://www.google.com/webfonts)  
  31. 31.    Fonts  in  Context   Text  Source:  healthfinder.gov     (hcp://healthfinder.gov/preven=on/ViewTopic.aspx?topicID=86&cnt=1&areaID=1)      
  32. 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. 33. Oh  dear…   Source:  hcp://r=ps.cancer.gov/r=ps    
  34. 34. Strategy  4   Display  content  clearly  
  35. 35. Text  Size   ✗ Less  than  16px   ✓ 16-­‐20  px  
  36. 36. Line  Length   ✗ 20-­‐24  words  per  line   ✓ 9-­‐12  words  per  line  
  37. 37. Line  Height     ✗ 100%   ✓ 120-­‐150%  
  38. 38. Strategy  5   Create  visual  hierarchy  
  39. 39. Header  Hierarchy   ✗ ✗ ✓
  40. 40. Paragraph  Formagng   ✓ ✗
  41. 41. White  Space   ✓ ✗
  42. 42. Before  &  Aser   hcp://r=ps.cancer.gov/r=ps    
  43. 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. 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. 45. Thanks!  Ques=ons?   +  Sarah  Pomerantz   sarah@communicatehealth.com     +  Mel  Choyce   mel@communicatehealth.com   +  Molly  McLeod   molly@communicatehealth.com     +  @CommunicateHlth     +  www.communicatehealth.com    

×