Your SlideShare is downloading. ×
0
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Reader-Centered Design for Online Health Information
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Reader-Centered Design for Online Health Information

1,556

Published on

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

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,556
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 ofAmericas 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 ofAmericas 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    

×