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.

Writing for Every Reader

1,794 views

Published on

Our amazingly complex brains all process information differently. Knowing this, we can use language, structure, and media in ways that make our writing reach everyone.

Published in: Technology
  • Be the first to comment

Writing for Every Reader

  1. 1. Writing for Every Reader
  2. 2. https://developer.mozilla.org/Web/Accessibility
  3. 3. Cognitive disabilities
  4. 4. - http://webaim.org/articles/cognitive/ “In loose terms, a person with a cognitive disability has greater difficulty with one or more types of mental tasks than the average person.”
  5. 5. Clinical diagnoses • Dyslexia • Learning disabilities • ADD / ADHD • Brain injury • Dementia • Alzheimer’s • Aphasia • Downe syndrome • Autism spectrum
  6. 6. Functional effects
  7. 7. Functional effects • Permanent • Temporary • Situational
  8. 8. Memory
  9. 9. Memory • Short term • Long term • Working
  10. 10. Attention
  11. 11. Comprehension
  12. 12. Comprehension • Reading • Verbal • Linguistic • Math • Visual
  13. 13. Problem-solving
  14. 14. Functional effects • Memory • Attention • Comprehension • Problem solving
  15. 15. Make reading easier.
  16. 16. Make reading easier. • Readability • Understandability • Legibility • Structure
  17. 17. Readability
  18. 18. Readability • Short sentences • Simple words
  19. 19. Advantageous Facilitate Leverage Good Help Use → → →
  20. 20. Readability • Short sentences • Simple words • Avoid adverbs
  21. 21. Ran quickly Said suddenly Carefully balanced Screamed loudly Sprinted Blurted Balanced Screamed → → → →
  22. 22. Readability • Short sentences • Simple words • Avoid adverbs • Active voice
  23. 23. The tea will be poured by Stephanie. → Stephanie will pour the tea. Cookies will be provided by Maria. → Maria will provide cookies.
  24. 24. Readability • Short sentences • Simple words • Avoid adverbs • Active voice • 8th grade reading level
  25. 25. HemingwayApp
  26. 26. - Jakob Nielsen being a bad example “Avoid convoluted sentence structures, especially compound sentences with many subordinate clauses and conjunctions that put a strain on users’ short-term memory, which is a notoriously weak point.”
  27. 27. - What Jakob Nielsen meant “Use short and simple sentences. Sentences with more than one idea strain users’ short-term memories.”
  28. 28. Understandability
  29. 29. Understandability • No idioms • No sarcasm or rhetorical questions • No pop culture or slang • Avoid jargon
  30. 30. “QuickReg getting you down? We don’t want that, do we? Sidle up to the SS desk and we’ll see you leave happy as a clam.”
  31. 31. “QuickReg getting you down? We don’t want that, do we? Sidle up to the SS desk and we’ll see you leave happy as a clam.”
  32. 32. “QuickReg getting you down? We don’t want that, do we? Sidle up to the SS desk and we’ll see you leave happy as a clam.”
  33. 33. “QuickReg getting you down? We don’t want that, do we? Sidle up to the SS desk and we’ll see you leave happy as a clam.”
  34. 34. “If you are having trouble registering for courses come to the Student Services desk. We can help you register.”
  35. 35. Understandability • Be literal • Say what you mean
  36. 36. Legibility
  37. 37. Legibility • Large text • Sans-serif font • Enough contrast • Left align • No italics
  38. 38. Legibility • Use sentence case • Increase line-heights (150%) • Increase margins • Restrict line-length (50-75 chars)
  39. 39. Legibility • Place text on a solid colour background
  40. 40. Legibility • Use semantic HTML
  41. 41. BeeLine Reader - https://en.wikipedia.org/wiki/Tea
  42. 42. B L A C K T E A S : A S S A M , D A R J E E L I N G , A N D C E Y LO N. R E A D M O R E . GREEN TEAS: DRAGON’S W E L L , M A T C H A , A N D S E N C H A . R E A D M O R E . H E R B A L T E A S : C H A MO M I L E , RO O I BO S, AND PEPPERMINT. READ MORE.
  43. 43. BLACK TEAS: ASSAM, D A R J E E L I N G , A N D CEYLON. READ MORE. GREEN TEAS: DRAGON’S WELL, MATCHA, AND SENCHA. READ MORE. H E R B A L T E A S : CHAMOMILE, ROOIBOS, AND PEPPERMINT. READ MORE.
  44. 44. BLACK TEAS: ASSAM, D A R J E E L I N G , A N D CEYLON. READ MORE. GREEN TEAS: DRAGON’S WELL, MATCHA, AND SENCHA. READ MORE. H E R B A L T E A S : CHAMOMILE, ROOIBOS, AND PEPPERMINT. READ MORE.
  45. 45. BLACK TEAS: ASSAM, DARJEELING, AND CEYLON. READ MORE. GREEN TEAS: DRAGON’S WELL, MATCHA, AND SENCHA. READ MORE. HERBAL TEAS: CHAMOMILE, ROOIBOS, AND PEPPERMINT. READ MORE.
  46. 46. BLACK TEAS: ASSAM, DARJEELING, AND CEYLON. READ MORE. GREEN TEAS: DRAGON’S WELL, MATCHA, AND SENCHA. READ MORE. HERBAL TEAS: CHAMOMILE, ROOIBOS, AND PEPPERMINT. READ MORE.
  47. 47. Black teas: Assam, Darjeeling, and Ceylon. Read more. Green teas: Dragon’s Well, Matcha, and Sencha. Read more. Herbal teas: Chamomile, Rooibos, and Peppermint. Read more.
  48. 48. Black teas: Assam, Darjeeling, and Ceylon. Read more. Green teas: Dragon’s Well, Matcha, and Sencha. Read more. Herbal teas: Chamomile, Rooibos, and Peppermint. Read more.
  49. 49. Black teas: Assam, Darjeeling, and Ceylon. Read more. Green teas: Dragon’s Well, Matcha, and Sencha. Read more. Herbal teas: Chamomile, Rooibos, and Peppermint. Read more.
  50. 50. Black teas: Assam, Darjeeling, and Ceylon. Read more. Green teas: Dragon’s Well, Matcha, and Sencha. Read more. Herbal teas: Chamomile, Rooibos, and Peppermint. Read more.
  51. 51. Structure
  52. 52. Structure • Use headings and lists • Make small chunks of content • Put most important information first
  53. 53. Structure • Use headings and lists • Make small chunks of content • Put most important information first
  54. 54. Black teas: Assam, Darjeeling, and Ceylon. Read more. Green teas: Dragon’s Well, Matcha, and Sencha. Read more. Herbal teas: Chamomile, Rooibos, and Peppermint. Read more.
  55. 55. Black teas Assam, Darjeeling, and Ceylon. Read more. Green teas Dragon’s Well, Matcha, and Sencha. Read more. Herbal teas Chamomile, Rooibos, and Peppermint. Read more.
  56. 56. Black teas • Assam • Ceylon • Darjeeling Read more Green teas • Dragon’s Well • Matcha
  57. 57. Use media thoughtfully.
  58. 58. Images • Use images • Only use appropriate images • Don’t just use images
  59. 59. <figure> <img src="tea.jpg" alt=“” /> <figcaption> In Britain black teas are usually served hot with milk and sugar on the side.</figcaption> </figure>
  60. 60. Alternate text • Be accurate and equivalent • Keep it short • Don’t repeat information • Don’t start with "picture of ..."
  61. 61. Icons • Also display text • Use SVG
  62. 62. Videos • Provide transcripts • Keep it short • Never autoplay or loop
  63. 63. JWPlayer
  64. 64. Amara.org
  65. 65. Label interactions.
  66. 66. Links • Use key words that describe the page being linked to • Put keywords at the front of the link
  67. 67. Black teas • Assam • Ceylon • Darjeeling Read more Green teas • Dragon’s Well • Matcha • Sencha Read more Herbal teas • Chamomile • Peppermint • Rooibos Read more
  68. 68. Black teas • Assam • Ceylon • Darjeeling Green teas • Dragon’s Well • Matcha • Sencha Herbal teas • Chamomile • Peppermint • Rooibos
  69. 69. Forms • Left align labels, fields, and buttons • No reset / clear button
  70. 70. Forms • Break big tasks into smaller steps • Let users go away and come back • Give them lots of time • Make the purpose of the form clear on each page
  71. 71. Forms • Limit visual noise • Remove distractions
  72. 72. Forms • Error messages should be specific • Put errors messages in context • Warn users when an action has permanent consequences
  73. 73. Summary
  74. 74. Summary • Memory • Attention • Comprehension • Problem solving
  75. 75. Summary • Make reading easier • Use media thoughtfully • Label interactions
  76. 76. I Like To Make Websites Everyone Can Use @stephaniehobson stephaniehobson.ca

×