Writing for Every Reader - Design and Content
•
0 likes•452 views
Reading is a complicated task. It requires active memory, sustained attention, and a complex understanding of language. Cognitive disabilities can make reading even more complicated. Permanent conditions, like dyslexia, situational conditions, like learning an additional language, and temporary conditions, like reading in a noisy room, affect a reader’s comprehension. Conditions like these can affect our readers’ understanding by interfering with their attention, memory, or linguistic comprehension. Three practical things we can do to help are: - Choose our language intentionally. - Structure our content well. - Use media thoughtfully.
Recommended
More Related Content
Similar to Writing for Every Reader - Design and Content
Similar to Writing for Every Reader - Design and Content (20)
More from Stephanie Hobson
More from Stephanie Hobson (8)
Recently uploaded
Recently uploaded (20)
Writing for Every Reader - Design and Content
- 1. @stephaniehobson Design and Content, July 2018 Writing for Every Reader
- 10. - http://webaim.org/articles/cognitive/ “ In loose terms, a person with a cognitive disability has greater difculty with one or more types of mental tasks than the average person. ”
- 11. Medical diagnoses • Dyslexia • Learning disabilities • ADD / ADHD • Brain injury • Dementia • Alzheimer’s • Stroke • Down syndrome • Autism spectrum
- 12. Writing for every reader
- 13. Writing for every reader • Make reading easier • Use media thoughtfully • Label interactions
- 15. @bill_wessel @the_fetcheress @markmcelhaw Permanent Temporary https://www.microsoft.com/design/inclusive/
- 16. Memory • Short term • Long term • Working
- 17. Attention
- 18. Comprehension • Reading • Verbal • Linguistic • Math • Visual
- 19. Problem-solving
- 20. Functional efects • Memory • Attention • Comprehension • Problem solving
- 22. Make reading easier. • Easier words and grammar • Easier to understand • Easier to see • Easier structure
- 23. Easier words and grammar
- 24. Easier words and grammar • Short sentences • Simple words
- 26. Easier words and grammar • Short sentences • Simple words • Avoid adverbs
- 27. Ran quickly Said suddenly Carefully balanced Screamed loudly Sprinted Blurted Balanced Screamed → → → →
- 28. Easier words and grammar • Short sentences • Simple words • Avoid adverbs • Active voice
- 29. The tea will be poured by Stephanie. → Stephanie will pour the tea. We were invited by Merry to attend her tea party. → Merry invited us to her tea party.
- 30. Easier words and grammar • Short sentences • Simple words • Avoid adverbs • Active voice • 8th grade reading level
- 32. - 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.”
- 34. - What Jakob Nielsen meant “Use short and simple sentences. Sentences with more than one idea strain users’ short-term memories.”
- 36. Easier to understand • No idioms
- 38. Easier to understand • No idioms • No sarcasm or rhetorical questions
- 39. I just love cold tea. You wouldn’t your tea getting cold would you?
- 40. Easier to understand • No idioms • No sarcasm or rhetorical questions • No slang or pop culture
- 41. “We’re taking a chilly bin to the bach and having a barbie this arvo.”
- 42. - Kiwi English “We’re taking a chilly bin to the bach and having a barbie this arvo.”
- 43. I didn’t understand that reference
- 44. Easier to understand • No idioms • No sarcasm or rhetorical questions • No slang or pop culture • Avoid jargon
- 45. “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.”
- 46. “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.”
- 47. “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.”
- 48. “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.”
- 49. “If you are having trouble registering for courses online come to the Student Services desk. We can help you register.”
- 50. @stephaniehobson Just say what you mean.
- 51. Easier to see
- 52. Easier to see • Large text • A plain familiar font • Enough contrast • Left align
- 53. Easier to see • L a r g e t e x t • A p l a i n f a m i l i a r f o n t • E n o u g h c o n t r a s t • L e f t a l i g n
- 54. Easier to see • Large text • A plain familiar font • Enough contrast • Left align • No italics
- 55. Easier to see • Use sentence case
- 56. YOU CAN’T GET A CUP OF TEA BIG ENOUGH OR A BOOK LONG ENOUGH TO SUIT ME. You can’t get a cup of tea big enough or a book long enough to suit me. - C. S. Lewis ☹ �
- 57. Easier to see • Use sentence case • Increase line-heights
- 58. Tea is an aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia. After water, it is the most widely consumed drink in the world. Tea is an aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia. After water, it is the most widely consumed drink in the… ☹ �
- 59. Easier to see • Use sentence case • Increase line-heights (1.5 / 150%) • Increase margins
- 60. Easier to see • Use sentence case • Increase line-heights (1.5 / 150%) • Increase margins • Restrict line-length (50-75 chars)
- 61. Easier to see • Place text on a solid colour background
- 62. Easier to see • Use semantic HTML
- 66. B L AC K T E A S : A S S A M , DA R J E E L I N G, A N D C E Y LO N. R E A D MO R E . GREEN TEAS: DRAGON’S W E L L , M AT C H A , A N D SENCHA. READ MORE. H E R B A L T E A S : CHAMOMILE, ROOIBOS, AND PEPPERMINT. READ MORE.
- 67. 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.
- 68. 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.
- 69. 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.
- 70. 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.
- 71. 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.
- 72. 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.
- 73. 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.
- 74. 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.
- 75. B L AC K T E A S : A S S A M , DA R J E E L I N G, A N D C E Y LO N. R E A D MO R E . GREEN TEAS: DRAGON’S W E L L , M AT C H A , A N D SENCHA. READ MORE. H E R B A L T E A S : CHAMOMILE, ROOIBOS, AND PEPPERMINT. READ MORE.
- 76. 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.
- 77. Easier structure
- 78. Easier structure • Use headings and lists • Make small pieces of content • Put most important information frst
- 79. 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.
- 80. 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.
- 81. Black teas • Assam • Ceylon • Darjeeling Read more Green teas • Dragon’s Well • Matcha
- 83. Images • Use images • Only use appropriate images • Don’t just use images
- 84. Tea Culture Many cafés serve a “cream tea”, of scones, clotted cream, and jam alongside a pot of tea. Tea is consumed both at home and outside the home, often in cafés or tea rooms. Afternoon tea with cakes on fne porcelain is a cultural stereotype. In some parts of Britain, 'tea' may also refer to the evening meal.
- 85. Many cafés serve a “cream tea”, of scones, clotted cream, and jam alongside a pot of tea. Tea Culture In the United Kingdom, tea is consumed daily and often by a majority of people, and indeed is perceived as one of Britain's cultural beverages. It is customary for a host to offer tea to guests soon after their arrival. Tea is consumed both at home
- 86. Tea Culture In the United Kingdom, tea is consumed daily and often by a majority of people, and indeed is perceived as one of Britain's cultural beverages. It is customary for a host to offer tea to guests soon after their arrival. Tea is consumed both at home and outside the home, often in cafés or tea rooms. Afternoon tea with cakes on fne porcelain is a cultural
- 87. <img src=“cream_tea.jpg" alt="Many cafés serve a ‘cream tea’, of scones, clotted cream, and jam alongside a pot of tea.">
- 88. Alternate text • Don’t describe the image • Communicate the idea • Keep it short • Don’t repeat information • Refect your brand
- 89. Herbal Green Black Caffeine in tea
- 90. Herbal Green Black Caffeine in tea alt="20mg"
- 91. Photo by Toa Heftiba on Unsplas
- 92. alt="Winter is hard, stay warm with tea."
- 93. alt="Sometimes when I’m cold I say things I regret."
- 94. alt=""
- 95. www.davidstea.com Green Passionfruit Organic Japanese Sencha Organic Mao Jian Jade
- 96. Green Passionfruit Organic Japanese Sencha Organic Mao Jian Jade alt=""
- 98. India 885 China 770 Sri Lanka 310 Kenya 290 Indonesia 160 Tea production
- 99. alt="China is the world’s second largest producer of tea."
- 100. Alternate text • Don’t just describe the image • Communicate the same idea • Keep it short • Don’t repeat information • Refect your brand
- 101. Icons
- 103. @matto
- 105. Menu
- 106. Icons • Choose familiar icons • Include a text label
- 107. Videos
- 109. YouTube
- 110. JWPlayer
- 111. Amara.org
- 112. Videos • Provide transcripts • Keep it short • Never autoplay or loop
- 113. Label interactions.
- 114. Links • Use key words that describe the page being linked to • Put keywords at the front of the link Links
- 115. Black teas • Assam • Ceylon • Darjeeling Read more Green teas • Dragon’s Well • Matcha • Sencha Read more Herbal teas • Chamomile • Peppermint • Rooibos Read more
- 116. Black teas • Assam • Ceylon • Darjeeling Green teas • Dragon’s Well • Matcha • Sencha Herbal teas • Chamomile • Peppermint • Rooibos
- 117. Forms
- 118. Forms • Left align labels, felds, and buttons • No reset / clear button
- 119. 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
- 120. Forms • Limit visual noise • Remove distractions
- 121. Forms • Error messages should be specifc • Put errors messages in context • Warn users when an action has permanent consequences
- 122. Summary
- 123. Summary • Memory • Attention • Comprehension • Problem solving
- 124. Summary • Make reading easier • Use media thoughtfully • Label interactions
- 125. I Like To Make Websites Everyone Can Use @stephaniehobson noti.st/stephaniehobson
- 126. Resources • https://ed.ted.com/lessons/what-is-dyslexia-kelli-sandman-hurley • https://www.nngroup.com/articles/legibility-readability- comprehension/ • http://publications.gc.ca/site/eng/9.838244/publication.html • https://www.nngroup.com/articles/working-memory-external-memory/ • https://webaim.org/articles/cognitive/ • https://www.microsoft.com/design/inclusive/ • https://www.usability.gov/how-to-and-tools/methods/writing-for-the- web.html • https://www.nngroup.com/articles/legibility-readability- comprehension/ • https://www.nngroup.com/articles/learn-more-links/ • https://www.nngroup.com/articles/chunking/ • https://www.nngroup.com/articles/mobile-content/ • http://csskarma.com/blog/dyslexia-typography/ • https://webaim.org/articles/cognitive/ • https://axesslab.com/fonts-dont-matter/#what-really-matters-for- readability • http://www.beelinereader.com/ • https://conversionxl.com/blog/testing-hamburger-icon-revenue/ • http://web.archive.org/web/20170903002757/https:// sitesforproft.com/menu-eats-hamburger • https://xkcd.com/1093/ • https://unsplash.com/photos/lUx8JtwReV0