3 How people read webpages
3.1 People scan webpages
NN/g publish a book called How People Read on the Web (Pernice, Whitenton, and Nielsen 2021) in which they detail the results of their large scale eye tracking studies.
This is how NN/g describe scanning versus reading (Pernice, Whitenton, and Nielsen 2021):
The acts of scanning and reading are quite different. Reading includes looking at most words in chronological order in a section or on an entire page. But when scanning, people look at words, headings, or sections of pages, often out of order, fixating on only some of the words, not entire lines of text.
The hypothesis NN/g present for why we scan is because users are often looking for specific information when reading on the web. This is a different kind of task to reading a story or learning a subject step-wise. NN/g estimate users will only read around 20% of the text on the average webpage.
The behaviour is similar to that of desire lines, humans seeking out the most efficient (or lazy if you prefer) way to do things. Users have found that scanning on the web is more efficient than reading for extracting information.
NN/g observe we scan in a variety of gaze patterns and therefore we should design and structure our pages for ease of scanning. NN/g also discuss this in their article about formatting pages for long form content.
3.2 Working memory
Our working memory is how we store information in the short term. George Miller famously proposed in 1956 that our working memory can hold seven plus or minus two units of information (Miller 1994). More recent evidence suggests that the quality as much as the quantity of the information affects our ability to retain information (Ma, Husain, and Bays 2014).
What is clear is that capacity is limited and that this relates to cognitive load in terms of the quantity and/or difficulty of the information we can retain in the short-term i.e. seconds to minutes.
University of Southampton Library webpages are predominantly text and links. A quick browse suggests that most pages contain between 600 and 1,200 words. Based on a reading speed of 300 words per minute, this equates to between 2 and 4 minutes if one were to read the entire text.
Users are unlikely to read entire pages, let alone retain the contents. They wish to quickly identify the 20% relevant to their visit and move on.
Page structure, well-written content (Chapter 4) and consistency between pages can all reduce the effort required to sort, extract and retain information.
3.3 The unconsidered webpage is not worth creating
In Chapter 4 I outline some practical ways to improve writing, but before creating a webpage it’s worth spending time considering:
the purpose of the page
what the user will be looking for
how and at what level of detail to present the content to them
Careful consideration increases the likelihood of creating relevant content in an appropriate form, as opposed to a long-winded page that no-one reads. (See Section 3.2 and also the postscript.)
3.4 How to structure a webpage for ease of scanning
3.4.1 The most important information comes first
It might seem obvious, but putting the most popular or important information the user is likely to want at the top of the page will save them time and effort. This assumes that you have some insight into what matters to the user, but if one does then that should be the first thing the user sees.
The UK Government Digital Service redesigned their website to reflect their understanding of what users came to do, moving popular content to the top of pages to reduce the scrolling and scanning effort.
Hence the Summary at the start of this chapter page.
This approach is also reflected in the inverted pyramid strategy where the information most likely to engage the user comes first, followed by the secondary, tertiary etc. information. Those who want detail can find it further down the page, but those who are only interested in the main point are served it immediately.
3.4.2 Use informative headings
Because users scan for information, headings act as markers to help users navigate. This is also true for those using screen readers. Therefore it’s worth spending time thinking about how to make each heading informative and concise.
3.4.3 Chunks, bullets and callouts
Chunks of text, bullet or callout can be considered a unit of information we can hold in our working memory (Section 3.2).
A chunk of text is usually a short paragraph such as this, surrounded by white space so that it is distinct and therefore easier to pick out when scanning.
Bullets or numbered lists are a way of grouping related units of information, whilst callouts such as the summary at the top of this page highlight important units of information.
3.4.4 Bolding and highlight
Using bold font or highlighting text through colour and/or shape are examples of the Von Restorff effect where the isolation of the words using colour, shape or weight makes them more prominent and memorable.
The Von Restorff effect relies on the difference between the thing you want to isolate and everything else, so it becomes ineffective if overused.
3.4.5 Helpful visuals
Chapter 5 discusses how to use imagery and visuals in more detail. A helpful visual is one that supports the user’s aims either by informing or orientating them.
3.4.6 Fonts matter. But there is no best font.
A study by Adobe using English text found reading speeds varied by around a third on average between the best and worst of 16 fonts tested (Wallace et al. 2022). However, they report large variation between individual user’s reading speed and each font tested, and that other factors such as age, font familiarity and size were important for reading speed. The Adobe study is summarised in NN/g Best font for online reading.
This study implies that to account for individual variation it would be preferable to enable users to choose their own font for reading. However that’s generally not possible on a webpage (e-readers often do facilitate font choice).
Therefore to maximise accessibility (see Section 2.3) what matters is to choose a legible font and size.
There is no WCAG standard for font size or font face, but for reference the GDS use a default paragraph font size of 19px on large screens and 16px on small screens. This follows the recommendations of the British Dyslexia Society to not use fonts smaller than 12pt, approximately equivalent to 16px/1rem.
Cascading Style Sheets (CSS) specify the presentation of styling of webpages and have several ways of expressing units of length. This W3 consortium tutorial page on CSS units of length has full details and examples.
Points (pt) is an absolute length (for font size) originating in typography, such that a 12pt font is around 4.2 mm in size. (Try measuring the letters for a 12pt font your screen in Word or Outlook.)
Pixels (px) are absolute numbers, but a pixel is defined by the viewing device, such that 1px might be one dot on a display with few dots, but represented by multiple dots on a display comprising of many dots. So whilst 16px should be around 12pt or 4.2 mm on most screens, the screen resolution (number of dots) will determine the actual size.
Relative to font-size of the root element (rem) means scale the font size relative to a defined absolute font size in px - the root element. So if we define a root font size of 16px, 1rem is 16px and 2rem is 32px etc. And 2rem would be around 24pt or 8.4 mm on most screens.
TL:DR define a root font size of at least 16px (personally I’d go with 18px) and ensure all other font sizes on your page are at least 1 rem.
Suggested fonts for legibility are sans serif fonts such as Calibri, Arial or a serif font such as Garamond, but remember to be consistent across pages on the same site (Wallace et al. 2022).
Here I have set a root font size of 18px and am using the Atkinson Hyperlegible font designed by the Braille Institute.