What to consider when designing for on-screen reading

Creative Director

Blogs

In today’s information-rich world there are multiple things competing for a reader’s attention. This has created the perception that on-screen reading can cause the mind to wander off.

 

But it’s not quite as simple as that.

 

The move towards increased digital reading presented a change that has potentially impacted behaviours, but the evidence shows wandering off isn’t just due to the digital media format. It’s also due to the perceived quality of online content and the perception that paper is better suited for “effortful learning”. The research found that users believe the screen is for “fast and shallow reading of short texts such as news, e-mails, and forum notes.”

 

However, it can be said that if a user’s perception is that screen reading is for fast and shallow reading, then that is the experience they are likely to have. It’s true to say that several factors have an impact, one being the distractions posed by viewing content on a multi-use device. The other, as noted in ‘Reading linear texts on paper  versus computer screen: Effects on reading comprehension’, is the screen resolution, backlighting and illuminative effect of LCD screens. These affect the visual processing of text and therefore a reader’s comprehension.

 

While print reading offers the ability to absorb and ‘deep read’ information, digital reading can outperform the printed copy by offering the ability to quickly and easily navigate to relevant content.

 

Considering the UX design and improving the reader experience in digital reading can maximise the likelihood of comprehension and intake of information. Similarly, the aesthetic of the content is also linked to reader absorption.

 

Tips for improving the digital experience

Get the font selection right
Choose a font that clearly separates each letter, offering symmetry and balance. Use bold for emphasis and avoid using italics.

 

Font size
Ensure the font size matches the font type and offers clarity when reading.

 

Line height (leading)
Consider the line height (between each line) to help the eye/brain decipher letters. Consider height between each paragraph; it should be 1.5 times larger than line.

 

Structure content for digital reading
Readers stand in an F shaped pattern. Use clear sections and subheadings help the readers comprehension.

 

Consider the mobile layout
Display content in a single column and avoid actions such as hover.

 

Use contrast
Dark text on a light background improves readability and black on white also avoids difficulties with colour blindness.

 

Accessibility
Some of the key guidance to adhere to includes all text being ‘live’, pre-recorded audio and video should have text captions, text must have a visual contrast of 4:5:1 and text should be resized up to 200.

 

Designing for disability
Accessibility factors such as age, dyslexia and eyesight should be considered.
Our insight report Best practices for reading online is a great resource for anyone interested in creating accessible and engaging digital reading experiences. Download the full report to learn more about the science of reading online, best practices for visual design and best in class examples. https://makeitclear.com/insight/best-practices-for-reading-online

 

If you would like to discuss how Make it Clear can help your organisation create accessible online reading, sign up for a free Clarity Consultation to find out more.