How people read online

Tips for accessible text.

Person looking at the screen on which the heat map is represented

What makes a text nice to read? To know more about this, it is important to take a closer look at how people are reading. Additionally, it may be the case that someone is impaired, physically or mentally, to read a text. How does it work?

Saccades, fixations, and breaks

The reading process is not linear; our eyes jump (saccades) when we read. And between those eye jumps, there’s something that we call a fixation. So, this is when your eye stops and stays focussed on a particular point. During such an fixation, everything is blurry except for the fixation point.

Representation of saccades on a text. The reading process is not linear but jumps between words.

After a few fixations, the eye needs a short break. For this reason, it is good to build “resting moments” into your text. Besides the fact that white space is often aesthetically beautiful, it also actually has an important function: to provide peace for your eye.

Representation of fixations on a text. Between saccades, the eye freezes in fixation.

How often a reader has saccades and fixations also has to do with the type of text and the medium that someone is reading. For example, a book is read very differently than a web text. On the web (and on screens in general), we mainly use an exploratory reading pattern.

This means that we scan the piece of text quite a bit before we decide to read it. The web consists of so many pieces of text, so we don’t read word for word, but first determine whether we want to read this piece of text.

How people read online: eyetracking test and most gaze patterns

It is very interesting to consider that by comparing different eyetracking studies from 2006, we see that the fundamental scanning behaviors remain constant, even if the designs change. Thanks to these tests it was possible to explore the different gaze models that can be used on the web.

The most common are: F-pattern, Layer cake pattern, Spotted pattern, Commitment pattern, Exhaustive review pattern, Bypassing pattern, Zigzag pattern, Sequential pattern, Love-at-first-sight pattern. Some examples:

Infographic of some patterns: F-Pattern, Spotted Pattern, Layer-Cake Pattern, Commitment Pattern
Representation on a web page of the Lawn-mower Pattern, with the eye tracking test
Lawn-mower Pattern — Eyetraking test (ph. credits Nielsen Norman Group)
Representation on a web page of the Pinball Pattern, with the eye tracking test
Pinball Pattern — Eyetraking test (ph. credits Nielsen Norman Group)
Representation on a web page of the F-Pattern, with the eye tracking test
F-Pattern (Chinese site) — Eyetraking test (ph. credits Nielsen Norman Group)

Though light scanning is the primary method used to process information online, the amount of time any individual user is willing to spend reading depends on four factors:

  • Level of motivation: How important is this information to the user?
  • Type of task: Is the user looking for a specific fact, browsing for new or interesting information, or researching a topic?
  • Level of focus: How focused (or unfocused) a user is on the task at hand?
  • Personal characteristics: Does this individual show a proclivity for scanning and tend to scan even when highly motivated? Or is she very detail-oriented in her general approach to reading online?

Disability in online reading

When we design for people who have difficulty reading, we can roughly identify two groups: people with visual impairment and people with cognitive impairment.

For example, a visual impairment can be blindness or low vision. But, in addition to a (fixed) visual impairment, some people may experience temporary visual impairment. This might be due to an eye infection or hay fever. Even visual distractions can prevent someone from reading a text. Have you ever tried to tossing a ball and catching it while reading a text?

In addition to the many kinds of visual impairment, there are also different kinds of cognitive impairment. Several (identified) limitations include: dyslexia, hyperlexia, autism, ADHD, etc. Although, even if someone does not necessarily have one of these, there may still be a cognitive limitation. Language is a good example. Consider someone who speaks a different language and doesn’t understand what you say, people for whom Dutch is not their first language, or deaf people (for whom sign language is their first language). Even a stressful, chaotic environment where someone does not feel comfortable can be a contributing factor.

In sum, there are many situations that can present visual or cognitive limitations for a person, even if just temporarily.

Readers can therefore find themselves in all kinds of situations, visually or cognitively restricted, whether it be a permanent limitation or a temporary one. This can affect their way of reading. However, it is important to realise that even without these limitations, a reader may not read in the way that you expect. This has everything to do with how the text is visually structured.

Good tips for an accessible text nice to read

We can design content that supports scanning by:

  • Use headings and subheadings.
  • Start titles with the most important words.
  • Visually group small pieces of related text. You can do this by including an outline or, for example, a background colour.
  • Important words can be made bold. This can be done with a summary, for example.
  • Always underline your links. And make sure that the links included are meaningful. So not: click here, but instead: check out information about Australia.
  • Make use of bulleted or numbered lists to clarify certain processes or overviews.

In addition to these design-related tips, there are of course many more tips to improve in other areas, such as writing.

GOV.UK poster on the do’s and don’ts of designing for accessibility, especially on low vision and the autism spectrum
Dos and don’ts on designing for accessibility — Posters GOV.UK


How people read online was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.