How To Design Better Online Reading Environments

December 19, 2019 11:03 am. Published by

Online reading environments need better design

Online and offline reading experiences compared.

Whenever I attempt to read anything online that is more than a few hundred words long, I find that a different mode of literacy kicks in. As if trained in the art of speed-reading — which I am not — I begin to skip over paragraphs, looking for the power-words and killer-phrases, looking for the good stuff, and feeling immediately impatient with the words directly in front of me. The desire to click or scroll is persistent, leaving me with a type of reading entropy, where my attention gradually breaks up like ice melting on a pond.

As both a reader and a writer, I’m keen to understand why online reading environments seem to cause this breakdown of attention.

Cognitive and experiential aspects of reading

Norwegian psychologist Anne Mangen, who performs empirical research on the effects of digitization on cognitive and experiential aspects of reading, has found that we tend to read more closely on paper than on screens. In a study of how high school students comprehended the same text on different mediums, results showed that students who read in print were superior in their comprehension compared to their screen-reading peers. The students were placed into two separate groups: the first was given texts to read in on paper, the other group given the same texts as a PDF on a computer. When asked to evaluate the text, it was found that the paper-based reading environment better enabled concentration and retention of ideas.

According to Maryanne Wolf, the Director of the Center for Dyslexia, Diverse Learners, and Social Justice in the Graduate School of Education and Information Studies at UCLA, the brain’s reading circuit — which evolved in our brains more than 6,000 years ago — is not inborn to humans through a genetic blueprint like vision or language. Its development depends on the reading environments it is exposed to.

Thus, in our digital landscape, reading skills develop towards fast, multi-task oriented patterns, where environments of information abundance lead us to develop our reading circuits in the direction of sifting, sorting and skimming. It is an advantage that our brains can adapt in this way, yet what is neglected are deep reading processes like critical analysis and empathy.

Reading environments are not just confined to questions of on- or off-screen. The physicality of a real book or a newspaper in itself constitutes an environment. One can think of the physical reading habits we accumulate — the tracing of the words with a finger or the folding over a page corner as a bookmark — as meaningful interactions within a reading environment.

“We possess both the science and the technology to identify and redress the changes in how we read before they become entrenched,” says Wolf.

The F-shaped pattern of reading

The manner in which readers scan website text has been determined by heatmaps readings from user eye-tracking. One such study discovered by the Nielsen Norman Group found that the dominant reading pattern for websites looks somewhat like an F, where users first read in a horizontal movement, usually across the upper part of the content area, then moved down the page and read across in a second horizontal movement, then finally scanned the content’s left side in a vertical movement.

The same researchers analysed their findings and found that F-shape scanning could be deemed a negative reading habit that encouraged people to skip over large chunks of text that didn’t fall within these conventional reading movements. The F-shape reading pattern was present when the following conditions were met:

  1. There was little or no text formatting, such as subheadings, bolding and bullet points
  2. The user was trying to read the page efficiently
  3. The user was not so committed or willing to read every word on the page.

In short, the F-shape scanning pattern was indicative of page design that failed to secure the reader’s engagement. ‘Walls of text’ were most likely to shift the user into this mode of reading, encouraging the eye to skip over text in favour of milestones and other landmarks on the page, such as calls-to-action and other breaks in the text.


Distractions are, of course, another problematic aspect of any exercise in online concentration. Researchers have known for some time that repeated interruptions affect concentration. In 2005, research carried out by Dr Glenn Wilson at London’s Institute of Psychiatry found that persistent interruptions at work, such as emails and phone calls, can cause a 10-point fall in an individual’s IQ score.

When it comes to online reading environments, the most common distractions are well-known, such as persistent calls-to-action, multiple typefaces on a single page, advertisements, animated sidebar images, crazy colour schemes, pop-ups and too many outbound links.

Moreover, as efficiency in reading is treated more and more as a skill to be learnt, deep reading is losing out to skim reading as the primary convention. Smartphones now give us access to apps that will skim read for us: one such app promises “Key takeaways from the world’s best nonfiction books”; another has tagline that reads “Read 3x Faster, Save Time, and Be More Productive In Life”.

Undoubtedly, these tools have their uses, yet research shows that there can be a trade-off between speed and accuracy when it comes to reading. Moreover, I think it’s worth questioning a concept of productivity that appears to elide the difference between speed and substance.


As Maryanne Wolf says, “We possess both the science and the technology to identify and redress the changes in how we read before they become entrenched.” Looking at the design of online reading environments, these basic principles seem like a good starting point:

  • Appropriately placed milestones, such as paragraph breaks and pull quotes
  • Text formatting, such as subheadings, bolding and bullets
  • Keep outbound links to a small number or else collect them into a ‘resources’ section in the footer
  • Selecting a consistent typeface with good legibility between glyphs
  • Simplified colour scheme to encourage distraction-free reading.

Finally, I would like to say that one particular platform, Medium, is hugely successful with regards to reading environments since it appears to have achieved on two significant fronts: to value the long-form essay as a worthwhile form in itself, even online; and to deliver that form with a more or less distraction-free environment. By choosing to do without a page sidebar — which has become a convention in most other webpage layouts — and by avoiding the need of advertising through its subscription model, Medium is able to provide its readers (and writers) with a well-formatted and productive reading environment. Which is why I use it.

Tags: ,

Categorised in:

This post was written by Christopher P Jones