This post was written by MVP Greg Alchin as part of our Humans of IT Guest Blogger series. Learn more about Greg and his journey with inclusive design. In this article, we look at how our design decisions about text-based content can either hinder or support our audience to quickly and easily read, comprehend and act upon it.
About Greg
I share my time working as an independent inclusive design consultant and a disability employment specialist for New South Wales State Government Department of Education. What is common to these roles is ensuring that no matter how we live, learn and work, our environments are accessible and designed to enable and maximize participation by people with disabilities - on the same basis - straight from the start. It involves the removal of barriers to participation through embedding inclusive design in everyone’s thinking and responses. My passion for inclusive design is based on my own visual disability and progressed to professional studies and industry accreditation. Through inclusive design, we can create solutions that are essential for some and useful for all.
Improving reading efficiency
The COVID-19 global pandemic has seen a growth in inclusive solutions. It prompted many companies and communities to transform how they live, learn and work. Working flexibly has become the default with inclusive platforms such as Microsoft Teams as the hub for communication and collaboration, and its tight integration with Office 365. The accessibility support within Microsoft Teams and across Office 365 has enabled and empowered people with disabilities to participate as equals right from the start.
No matter how accessible the operating systems and apps that we use are, the weak point for inclusion is the everyday design decisions we and our team members make when designing digital resources (content, apps and systems). In particular, it can be something as simple as text-based content. Our design decisions shape the ability of others to access, participate in, and contribute to on the same basis. In this article, we look at how our design decisions about text-based content can hinder or support our audience to quickly and easily read, comprehend and act upon it.
Sadly, much of the current content I encounter (such as briefs, reports and educational resources) hinders reading efficiency and disables it. The central problem lies in the fact that content design decisions are based on paper-based rules whilst our workflows are digital-first. As eye-tracking research highlights, applying paper-based design rules to a digital-first workflow reduces reading efficiency by 20–25%! Our content design decisions do not consider the impact of newer high-resolution screens as well as changes in visual acuity as a result of ageing.
Yes, an accessibility checker can help, but our answer lies deeper where accessibility, usability and inclusive design intersect. Yet, while the answer lies deeper, the solution is surprisingly simple and elemental.
Issue 1: The impact of age on visual acuity
What is it that differentiates a 40+ year old reader from a 25-year old reader, and why is this important to how we design? A lot of changes start to occur to our body from around the age of 40 (no, it is not a second puberty!). Around the age of 40, we begin to notice a decrease in our visual capabilities. This is part of the normal ageing process. Some examples of the 40+ experience include:
- Need for more light. As we age, we need more light to see as well because our pupil size becomes smaller (senile miosis) and the lens becomes thicker. In fact, it is estimated that for the same light level, a typical 60-year old receives about one-third the retinal illuminance of a 20-year old.
- Difficulty reading and doing close work. Printed materials can become less clear, in part because the lens in your eye becomes less flexible over time. This makes it harder for your eyes to focus on near objects than when you were younger.
- Problems with color perception, contrast and glare. The normally clear lens located inside your eye may start to discolor. This makes it harder to see and distinguish between certain color shades. The lens becomes less clear and, as a result, begins to scatter more light as one ages. This scattered light reduces the contrast of the retinal image. This effect also adds a “luminous veil” over colored images on the retina, thus reducing their vividness (saturation). Reds begin to look like pinks, for example. The older eye also loses some sensitivity to short wavelengths (“blue light”) due to progressive yellowing of the lens.
- Reduced tear production. With age, the tear glands in your eyes will produce fewer tears. This is particularly true for women experiencing hormone changes. As a result, your eyes may feel dry and irritated. Having an adequate amount of tears is essential for keeping your eyes healthy and for maintaining clear sight.
These common age-related vision issues are important considerations when creating content (and designing digital systems). Legibility is critical to reading efficiency for anyone, but especially for people with low vision and those over 40 years of age.
Issue 2: Understanding digital-first environments
Digital-first workflows are characterized by creating and reading onscreen. Devices come in different shapes and sizes, but what is shared is the resolution of the screens.
- iPhone 11 Pro - 5.8” display. Resolution: 2436 x 1125 pixels @ 458 ppi.
- Surface Book 3 - 13.5” display. Resolution: 3000 x 2000 pixels @ 267 PPI.
- Surface Pro 7 - 12.3” display. Resolution: 2736 x 1824 pixels @ 267 PPI).
- Surface Go 2 - 10.5” display. Resolution: 1920 x 1280 pixels @ 220 PPI.
- MacBook Pro - 16" display. Resolution: 3072 x 1920 pixels @ 226 ppi.
- iPad Pro 12.9" display. Resolution: 2732 3000 x 2048 @ 264 PPI.
The sheer number of pixels densely packed into hi-res screens make the content look sharper, but it also makes it look smaller. As an example, an 11pt font only equates to about 15 pixels (px) in height. On hi-res screens, this makes the 11pt font look like an 8pt font which is harder to read and slower to comprehend. Taking this into consideration is an important design consideration.
How do we respond to these design issues?
Firstly, Microsoft has done exceptional work in supporting everyone to improve their on-screen reading with the development of Immersive Reader. It is a free tool that implements proven techniques to improve reading for people regardless of their age or ability. Immersive Reader features are available in multiple products including Microsoft Teams. It really is brilliant, and Microsoft is to be congratulated for their work on this feature.
However, just because Immersive Reader exists, it doesn’t let individuals off the hook from making inclusive design decisions! First and foremost, it is about changing mindsets that work in digital-first environments.
Mindset 1: It is about word limit, not page limit.
Page limit is paper-based thinking. Word limit is digital-first. Applying page limits leads to poor design choices. An example of poor design decisions is the common executive brief template. It has a paper size of A4, with a 2-page limit and a default paragraph style of Arial 11pt and single line spacing. These design decisions are chosen to constrain document length whilst maximizing (shoehorning) the amount of text on those pages. These design decisions decrease legibility and reading efficiency. Word limits will encourage clarity of thought, while increasing the default paragraph font size. Line spacing also increases legibility and reading efficiency.
Mindset 2: It's all about legibility
In the late 90s and early 2000s, the simple rule for improving legibility was to use a Sans Serif font such as Microsoft-designed Verdana to enhance on-screen reading. Now with hi-res screens, we have more choice, but it has to be an informed choice centered on legibility.
Legibility is whether people are able to easily see, distinguish, and recognize the characters and words in your text. The main guidelines to ensure legibility are:
Choose a clean typeface
A clean typeface is one where the:
- Weight of the regular font is clean and contains maximum uniqueness of shape
- Width of the font characters is not too skinny nor wide
- Difference between the main and additional strokes is low and medium contrast
- The X-height of the lowercase letters against capital letters and their own ascenders or descenders is around 2/3 to ¾ the height difference
- Counters (the white space within letters such as ‘o,’ ‘e,’ ‘c,’ etc) are large and open,
- Character shapes are obvious and easy to recognize, are not excessively light or bold.
- Typeface offers a variety of weights, (regular, medium, semi-bold, bold etc)
Examples of clean typefaces designed for reading efficiency include Microsoft’s Calibri, Apple’s San Francisco (SF) and NewYork fonts and Google fonts such as Montserrat or Open Sans.
Be generous with line spacing, font size and spacing
- Use a minimum font size of 12- 14 pt with a line spacing of 1.5 lines as the default for normal or body paragraphs
- Use normal or expanded character spacing, rather than condensed spacing
- Have high contrast between characters and background. Preferably, employ a plain background instead of a busy or textured one, since the latter interferes with the recognition of the fine details in the letterforms.
It is worth noting that Apple uses 17pt (23 px) as their default body text size on the iPhone with a line spacing of about 1.28 li. Similarly, self-publishing sites such as Medium use a 22pt (29px) font size with a line spacing of about 1.5 li. These larger font sizes and more generous line spacing increase reading efficiency and engagement.
Keep it simple
- Use line width of 45 to 75 characters in order for your eye to easily follow one line to the next.
- Format text to the left margin or justification. —don’t break it. The left margin is sacred. It’s how we track text down a page in the Western world.
- Both center and full justification slow readers down. In particular, full justification creates irregular spacing between each word.
- Large amounts of text set all in caps, italic or underlined decrease reading speed and comprehension.
Contrast is key
Contrast and color use are vital to reading efficiency and accessibility. All readers, including readers with visual disabilities, must be able to perceive content on the page. The Paciello Group's free app Color Contrast Analyser (CCA) helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.
Summary
Adopting the mindsets and methods of word limits and legibility will make a big difference in improving reading efficiency. Both are easy to adopt and implement. It takes the pressure off tired eyes, enables better decision making and gives time back to those forced to struggle through poorly designed content. The next part of the journey for improving reading efficiency is to stop colleagues exporting documents into PDFs. But that is a story for another day. 
#HumansofIT
#TechforGood
#InclusiveDesign
#Accessibility