In One Go: What Is Readability and Why Is It Important for Your Site?

In One Go: What Is Readability and Why Is It Important for Your Site? Background vector created by freepik - www.freepik.com

We all know the feeling: you search something on Google, open one of the top results - and leave the page after three seconds. All it takes is a glance for you to decide that the page isn’t what you’re looking for. Why? Because you can’t find the information you’re looking for right away, because it’s long and you don’t want to read it all, or simply because nothing grabs your attention.

The legibility of a text therefore influences both the reader’s behaviour and their how engaged they are. What techniques can we use to keep their attention?

Before going into the details, let’s take a crash course on the basics: We read differently on paper to on a screen.

Reading speed changes from one to the other, decreasing by 25-30% online.

But more importantly, we don’t read from beginning to end, like we do with books. What we do is skim over the content of a text: straight away we notice the elements that stand out, like headings, bold text or bullet points, to get a sense of whether what we are looking for is there.

The three factors we need to pay attention to when writing web texts are:

  • the graphics;
  • readability;
  • coherence.

Graphics

As expected, when faced with a web text, we don't read word for word, but rather scan for elements that grab our attention.

How we read on the web: Nielsen’s studies

Danish usability consultant Jakob Nielsen conducted so-called "eyetracking" studies, recording the way a reader’s eye moves across the screen and identifying recurrent patterns. The most frequent was the F-shaped pattern, so called because the eye draws an “F” shape as it scans the screen, something we have also discussed in the article “Writing for the Web”. Let's take a closer look:

  1. The eye scans horizontally - the user reads the first sentences at the top of the page (this is the first horizontal stroke of the F);
  2. The eye then scans downwards and again horizontally - the user reads the first words of each sentence (this makes the second horizontal stroke);
  3. Finally, it scans vertically down the left side of the page - the user skims the contents by scrolling down (this is the vertical stroke).

So the reader’s attention is focused on the contents at the beginning of the page and the first words on the left. The red areas in these images, taken from Nielsen’s website, show the parts of the page where the readers’ eye dwelt longer:

f shape

(J. Nielsen 2006)

The eye movements can be outlined as follows:

f shaped pattern

The F-shaped pattern is not the only reading pattern identified by Nielsen. There are other patterns.

  • Layer-cake pattern: the reader completely skips the text in search of headings and subheadings. The eye draws horizontal lines reminiscent of a layered cake, hence the name of this technique. layer cake pattern
  • Spotted pattern: the eye searches for elements that attract attention by drawing dots on the screen (a link, a word in bold or a different colour).spotted pattern
  • Marking pattern: The user's eye fixes on a certain point while scrolling through the page. This pattern is most commonly observed on smartphones.marking pattern
  • Bypassing pattern: if several lines all start in the same way, the user will skip the beginning so as not to have to read the same words repeatedly.

bypassing pattern

  • Commitment pattern: a less common pattern, used by those are careful to read everything - the entire paragraph or the entire page. This occurs when the user is interested in the content.commitment pattern

Making reading easier

Knowing how readers behave allows you to organise the content and graphics of your texts. Here are some tricks to have up your sleeve:

  • put the most important information in the first two paragraphs;
  • use headings and subheadings to introduce a topic and make it clearly visible;
  • insert keywords into headings and subheadings;
  • divide the content into paragraphs;
  • link each paragraph to a particular concept;
  • use bold lettering to highlight words or phrases (don't use underlined lettering because it suggests a hyperlink);
  • format hyperlinks in a way that makes them recognisable;
  • don’t use generic words in hyperlinks like go to or here, but keywords;
  • use bullet points or numbered lists to present a series of elements or instructions in an orderly way;
  • be brief, cut out any unnecessary information.

The inverted pyramid

According to Nielsen’s latest studies, readers spend 74% of their time on the first and second screens (the first being the part of the page displayed when the site was opened, and the second the part seen after scrolling down). For this reason, the most important information should be found in the first part of the text.

This way of structuring content is called the inverted pyramid and the structure is:

inverted pyramid.001

Let’s take Nielsen’s own site as an example.

NN-G Nielsen Norman Group website

(J. Nielsen, 2018)

In the upper part of the first screenshot, we see the heading, followed by two lines of text in red, which clearly present the main concept and a summary of the article. It’s everything we need to get an idea of the content and see if it’s what we were looking for. The rest of the text, not seen here, is divided into paragraphs introduced by bold subheadings.

Font, Line-Spacing and Alignment

The choice of typeface, line spacing and text alignment can also help or hinder reading. Some things to remember:

  • choose an appropriate font size;
  • try to use sans-serif fonts (like Arial, Verdana, Calibri or Helvetica) because some find them easier to read;
  • keep the lines well spaced;
  • pay attention to contrast with the background;
  • Stick to left-hand (or flag) alignment: justification may work for printed paper, but not for the screen since, if a window is resized, it risks creating excessive and ugly spaces between words.

A Brief Note on Accessibility

Creating a well-structured web text, making it readable and coherent - these are all essential, but there is another element to consider: accessibility.

Accessibility doesn't relate so much to individual texts as to a website as a whole, and it is a legal requirement. In the European Union, this is enforced by the EU directive on web accessibility. In the USA, web accessibility regulations are not legally binding in the public sector. On a broadly international level, we can also refer to the Web Accessibility Initiative (WAI) promoted by the World Wide Web Consortium (W3C), the international non-profit organization that defines the standard languages and procedures to make the web a democratic and universal tool. The WAI has drawn up guidelines for making web content, browsers, and software for content writing and publishing more accessible.

Accessibility is not just about disability

For a definition of accessibility, let’s refer to the words of Tim Berners-Lee, director of the W3C and inventor of the World Wide Web:

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

According to Berners-Lee, web accessibility should be guaranteed both to those who have a form of disability (auditory, visual, cognitive, etc.) and to those who are not disabled. Anyone can benefit from an accessible website, whether they are smartphone or small screen users, or even people with temporary disabilities, such as people with broken arms or who don’t have their glasses with them, and people with a slow or expensive internet connection.

Accessibility as an opportunity to expand your market

Accessibility should not be looked at as a legal obligation or a burden, but rather as an opportunity.

Making your site accessible helps you to expand your market because any user who can’t navigate or read the content is a customer lost. Let’s take the HTML “alt” tag as an example, whose value should contain the alternative (invisible) text that describes the content of an image on the page.

In this example, we see the image and the source code with the associated “alt” tag:

oxford dictionary

OED alt tag

The “alt” tag is read by screen readers or voice browsers and allows the blind or visually impaired to understand its content, as well as displaying it to anyone when the image is not available. Not using it in e-commerce is equivalent to excluding a part of the market. If we take the previous image as an example and block it, we see the “alt” tag appear in its place:

OED html

Legibility

When we talk about legibility, we mean the ease with which a text can be read. Legibility depends on the vocabulary and syntax: short words and simple sentences make a text more legible. The code word here is simplification.

We're all familiar with Officialese, the language of institutions and public administration that's full of endless sentences, subordinate clauses, long words and ambiguous meanings. This is exactly what we want to avoid.

Instead, try using short words. Write sentences of 20-25 words or less, and avoid subordinate clauses or digressions. Remember that any topic, even the most difficult one, can be presented in a simple way.

Measuring the legibility of a text

How do I check the legibility of a text? There are a few algorithms used to measure how easy it is to read a text, and several tools are available.

The Flesch Reading Ease Formula

The Flesch Reading Ease Formula was created in English, and this original version has been adapted to other Latin alphabet languages. It assesses the legibility of texts, taking into account the average length of words measured in syllables, and the average length of sentences measured in words, and is based on the principle that:

  • short words ought to be favoured over long ones;
  • short sentences usually have a simpler structure than long ones.

The formula is:

206 - (0,6 × S) - P
where:
S = number of syllables vs total words and P = average number of words per sentence

The values are based on a scale of 0 and 100, where 0 has the lowest readability and 100 the highest.

Other formulae 

Other languages have adapted this or created other reading ease formulae to meet their own needs, with the following being just some examples:

Coherence

Up to now, you have learned how to structure in a graphically appropriate and readable way. In this final point, we will explain how to make it coherent. Coherence, unlike legibility, is the ease with which a reader understands the meaning of a text.

Identify your audience

Who are you addressing? Use technical terms if you are looking for specialists but otherwise, make the meaning explicit or use a more general vocabulary. Adapt the text to the age of the target reader: if you’re targeting an adult audience, avoid using teenage expressions: they may not be understood.

Specify the purpose of the text

Is your text informative or is it meant to convince the user to do something? Make sure the purpose is clear to the reader. For example, if you have planned an event, make the time, date, place, and registration visible.

Use images and graphics

As well as attracting attention, images, graphics and infographics allow you to summarise information and visualise concepts. They’re perfect for people who don’t want to read.

Write short sentences and use simple words

  • Each sentence should express just one concept.
  • The subject, verb and complement should always be close together.
  • Go for words that everyone understands: you can get help from a Basic Vocabulary that collects the words most used and understood by the majority of speakers. The words not included are less easily understandable for those with a lower level of education or for those who don’t read much.
  • Use repetition to give emphasis and mark sentence rhythm.
  • Write numbers in digits: they’re easier to read and attract attention.
  • Try to use universal language and references. Ask yourself if the reader will know the meaning of the word or reference and whether you are using it correctly. If you use a regional term or make a cultural reference that will only be known in one country, you might end up alienating the reader.

Between legibility and comprehensibility: practical examples

Just a few small steps can be enough to make a text more readable and understandable. Here are some suggestions:

Rules No Yes
Use direct language: instead of using terms such as on the off chance that or in the event that simply use if. Should you wish to get in touch If you want to contact us
Do not use the gerund, especially at the beginning of the sentence. Having reached your withdrawal limit Since you have reached your withdrawal limit
Be concise. The manual that contains the instructions The manual containing the instructions (even better: The instruction manual)
Where possible, choose active, as opposed to passive, forms. The document was sent on... I sent the document on...
Also, choose the active form over the impersonal. It is recommended to contact We recommend contacting
Use shorter, more concise words. It is an extremely complex subject. 

Coordinate efforts with...

It’s a very complex topic.

Work with...

Avoid longer expressions where concise ones will do with a view to..., for the purpose of... simply use "to". In order to simplify To simplify
Avoid verbs followed by an infinitive or a noun: instead of purchasing, use buy. Make purchase Buy
Choose verbs over nominalisation (transforming a linguistic element into a noun) because they slow and weigh down reading. Failure to deliver the specified mail If the specified letter is not sent

 

Conclusions

  • The rules of web writing are different from those we learn at school. Writing a web text is not like writing an essay: The means the way we read, and the purpose for which we write, changes.
  • Nobody likes the institutional jargon of Officialese. Write texts that are short, simple and straight to the point: everyone will appreciate it.
  • Guide the reader through your text: create a visual map with headings, subheadings, bold lettering, paragraphs and images. Even those who don’t read everything will find the information they’re looking for at a glance.

Further reading

Want help improving your web texts? Write to us!

 

Qabiria white logo

We believe in the creative use of technology to enhance productivity.

Proud members of:

PIMEC's logo

LATEST NEWS

Contact us

Qabiria Studio SLNE
Carrer Lleida, 3 1-2
08912 Badalona
(Barcelona)
SPAIN

+34 675 800 826

qabiria

Send us a message

Get our Newsletter

Would you like to read Qabiria articles and news right in your inbox?