Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to Make the Web Easier for Users with Limited Literacy Skills - Sandy Hilfiker, Stacy Robison, and Xanthi Scrimgeour

836 views

Published on

43% of Americans only read at a basic or below basic level, but how many of us develop, design, and test our interactive tools and websites with this in mind? In this session, we’ll examine how we can adapt user-centered design principles to engage a wider audience, while bringing clarity and ease to existing users.

Focusing on users with limited literacy skills, we’ll explore how to:

Co-create interactive tools and websites
Develop effective and engaging content
Optimize visual design for clarity and accessibility
Throughout our hands-on session, we’ll work with case studies and examples from our years of work in health communication. You’ll learn specific strategies to integrate best practices for limited literacy challenges into your existing workflow.

Published in: Design
  • Be the first to comment

How to Make the Web Easier for Users with Limited Literacy Skills - Sandy Hilfiker, Stacy Robison, and Xanthi Scrimgeour

  1. 1. How to Make the Web Easier for Users with Limited Literacy Skills Sandy Williams Hilfiker Stacy Robison @CommunicateHlth
  2. 2. Presentation Overview ① Why do we need to care about literacy? ② What we know about limited literacy users ③ UX research with limited literacy participants ④ Implications for content and design
  3. 3. Which of the following is the strongest predictor of a person’s health status?  Income  Employment  Education level  Racial or ethnic group  Literacy skills
  4. 4. Literacy vs. Health Literacy
  5. 5. What’s unique about health information?  Complexity of health care and public health systems  Stress and anxiety related to your own health or the health of loved ones
  6. 6. What we know about web users with limited literacy skills
  7. 7. What We Know Users with limited literacy skills are…  Willing to use the web to access information that is important to them  Able to accomplish tasks when websites are designed well  More likely to use a mobile phone to access the web than a desktop
  8. 8. Prone to Skipping & Focus on the Center of the Screen Gaze path of a participant with limited literacy skills who reads only the text that looks easy to read. Source: Colter, A and Summers, K (2014). Low Literacy Users. In Bergstrom & Schall (Eds.), Eye Tracking in User Experience Design (p. 339). Waltham, MA: Elesvier.
  9. 9. Easily Overwhelmed & Limited Working Memory Gaze path of a participant who does not have limited literacy skills. Source: Colter, A and Summers, K (2014). Low Literacy Users. In Bergstrom & Schall (Eds.), Eye Tracking in User Experience Design (p. 335). Waltham, MA: Elesvier.
  10. 10. Easily Overwhelmed & Limited Working Memory Gaze path of a participant with limited literacy skills attempting to read every word. Source: Colter, A and Summers, K (2014). Low Literacy Users. In Bergstrom & Schall (Eds.), Eye Tracking in User Experience Design (p. 336). Waltham, MA: Elesvier.
  11. 11. ALL users benefit from improved readability and usability Comparing time-on-task on the original site with a prototype (designed to support users with limited literacy skills): Time on Task (Mean) Original Site Prototype Improvement High literacy 14:19 5:05 +182% Lower literacy 22:16 9:30 +134% All users 17:50 6:45 +164% High Literacy Users: 3x as fast with the revised site 93% success rate on revised site (compared to 68% with original) Source: Summers, K., & Summers, M. (2005). Reading and navigational strategies of Web users with lower literacy skills.
  12. 12. UX research with limited literacy participants
  13. 13. Curse of knowledge
  14. 14. Use this tool to get recommendations based on your age and sex
  15. 15. Methods
  16. 16. Sample Method: Collaging  Participants create a collage that represents the characteristics they would like to see in a new website  Result: Provides insights into users’ needs normally not revealed in interviews and focus groups
  17. 17. “This is how I feel — free and full of energy. I want my doctor to understand that this is how I want to feel with his or her help.”
  18. 18. Try It
  19. 19. 1 2 3 4 5 6 7 8 9
  20. 20. + Choose 2 images that represents qualities of your ideal work environment. + Choose 1 image the represents the qualities you would NOT want in your work environment. + Write a brief description why you chose each image.
  21. 21. Sample Method: Tree Testing  A technique for evaluating how easy it is for people to locate information within a material or website structure  Participants are given a topic to find within a text version of a site map or table of contents
  22. 22. Tree Testing with Professionals Task: Where would you go to learn what Wisconsin is doing to support Healthy People 2020?  This chart represents an unsuccessful task on a website targeting low lit consumers
  23. 23. Tree Testing with Limited Literacy Users Task: Where would you find healthy snack ideas for kids?  This chart represents an unsuccessful task on a website targeting low lit consumers
  24. 24. 10 tips for involving participants with limited literacy skills
  25. 25. Top 10 Tips ① Partner with community organizations to recruit special populations ② Screen for participants with limited literacy and limited technology use ③ Develop screeners, consent forms, and moderator’s guides in plain language ④ Use cash incentives when possible ⑤ Limit the number of tasks
  26. 26. Top 10 Tips ⑥ Be cautious using remote and online testing ⑦ Pre-test your protocol with at least one participant with limited literacy skills ⑧ Choose a moderator with experience conducting research with limited literacy participants ⑨ Conduct testing sessions in a setting that is familiar and accessible to participants ⑩ Test on mobile using the participant’s device; ensure Wi-Fi is available
  27. 27. Implications for Content and Design
  28. 28. Limit your messages+
  29. 29. What do you want your readers to know or do? (Organize your content accordingly)
  30. 30. Identify 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
  31. 31. Prioritize the Behavior Asthma makes breathing difficult for more than 34 million Americans. Asthma in children is on the rise, but with proper treatment for symptoms of asthma, kids and adults can live well. If someone in your family has asthma, start by getting rid of these common causes of attacks: Mold or dampness Cockroaches Secondhand smoke ✗ ✗ ✓
  32. 32. Write clearly+
  33. 33. Write in Plain Language  Use short, simple sentences.  Use familiar language.  Make it actionable.  Use the active voice.
  34. 34. Example: Your primary doctor may refer you to a neurologist. A neurologist is a doctor who treats problems related to the brain and nervous system. Tip: Think about whether it benefits the user to learn a jargon term — or if it makes sense to work around it. Do they need to know the new term?
  35. 35. Use short, simple sentences.
  36. 36. Limit paragraph size+
  37. 37. No walls of text Write for users’ limited working memory. Use clear, stand-alone sections or chunks with headings.
  38. 38. 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.
  39. 39. Use white space wisely.  Break up sections of text to avoid “walls”  Include generous padding around images Remember: Leave more white space above a header than below
  40. 40. Use meaningful headings Which page title would be most helpful if your child had asthma? ① “About asthma” ② “Asthma symptoms” ③ “Prevent asthma attacks at home”
  41. 41. Use good visual design+
  42. 42. Design is more than aesthetics It can help people:  Find what they need  Understand what they find  Remember what they read
  43. 43. It’s all about cognitive processing 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)
  44. 44. You read this first. And now you’re reading this. Since you probably skipped this, I’m guessing your eyes jumped here third.
  45. 45. 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.
  46. 46. 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.
  47. 47. 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.
  48. 48. Choose readable fonts+
  49. 49. Font Size (web) 16-20 px 12px✗ ✓
  50. 50. Letter Width Avoid overly wide or condensed fonts
  51. 51. Counter Look for fonts with adequate counter space
  52. 52. The best font choices are ones where readers do not notice the font, but the message. Source: urbanfonts.com
  53. 53. The Last Word
  54. 54. Thank you! @ CommunicateHlth
  55. 55. communicatehealth.com/blog

×