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;
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:
- 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);
- The eye then scans downwards and again horizontally - the user reads the first words of each sentence (this makes the second horizontal stroke);
- 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:
(J. Nielsen 2006)
The eye movements can be outlined as follows:
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.
- 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).
- Marking pattern: The user's eye fixes on a certain point while scrolling through the page. This pattern is most commonly observed on smartphones.
- 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.
- 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.
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:
Let’s take Nielsen’s own site as an example.
(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:
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:
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:
The values are based on a scale of 0 and 100, where 0 has the lowest readability and 100 the highest.
Other languages have adapted this or created other reading ease formulae to meet their own needs, with the following being just some examples:
- The Flesch-Kincaid Index in Spanish.
- The Gulpease Index in Italian.
- Scolarius in French.
- The Wiener Sachtextformel in German.
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:
|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.
|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|
- 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.