Reading habits on the Web

It’s a universal fact: people read online and offline content dif­fer­ently. There are many different reasons for this: firstly, online content is read up to 25% slower, yet at the same time, the internet provides users with an un­be­liev­able mass of in­form­a­tion. The com­bin­a­tion of these two factors means that the average internet user has become impatient. Whether the text is a news article or a product de­scrip­tion, these days it’s rare for users to consume each word like a good book. Instead, online texts are scanned and skimmed over, while search results are scoured and combed through. This must now be taken into account when designing web projects and content campaigns. Read on to find out about the con­sequences of modern reading habits for design, content creation, and search engine op­tim­isa­tion, as well as how you can display your content better with the help of the F pattern.

Eye tracking is a method of identi­fy­ing people’s eye movements. With so-called eye trackers, it’s possible to record eye movements and analyse them later. As a sci­entif­ic method, eye-tracking really belongs to the dis­cip­line of neur­os­cience, but it is also used in per­cep­tu­al psy­cho­logy, cognitive psy­cho­logy, and ad­vert­ising. Product design and edu­ca­tion­al research also make use of the method. It’s therefore also useful for exploring online reading habits. In online marketing and web design, people mostly refer to heat mapping. Heat maps are ana­lyt­ic­al rep­res­ent­a­tions for visu­al­ising data – in this context, it shows user behaviour or reading behaviour online and helps to analyze and optimise the structure of websites. A heat map works with colour gradation, usually from red (which stands for very hot) to blue (cold). Trans­fer­ring eye-tracking tech­no­logy to heat mapping, if an area appears dark red, that means that the user has spent a long time looking at the section of the page. Dark blue areas, on the other hand, are only glanced at or not re­gistered at all. For better analysis and usability op­tim­isa­tion ad­di­tion­al para­met­ers such as clicks and mouse movements are added for heat mapping in online marketing.

In addition to texts, the F pattern should be applied to overview pages, landing pages, and news­let­ters. Put simply, important elements should never be on the right side or at the bottom of the page. The most important headlines, in­form­a­tion, and keywords should always be placed at the top of the page. Fur­ther­more, website owners should aim to draw attention to their central in­form­a­tion or offers by men­tion­ing them as early as possible in the opening para­graphs.

1. Get straight to the point: if possible, try to in­cor­por­ate the key in­form­a­tion in the first section of text. Get to the point by sum­mar­ising your key points briefly and concisely. Avoid em­bel­lish­ments and un­ne­ces­sary in­form­a­tion within the F layout. The es­sen­tials first. However, you shouldn’t wait too long to add extra important in­form­a­tion, even if it affects the com­pos­i­tion of the text.
   
   
2. Create a structure: for online content, one should aim for a struc­tured style; lists, short para­graphs, and headlines and sub-headings are preferred. This structure enables users to scan texts much faster.
   
   
3. Focus on headings: headings and sub-headings are more than just a struc­tur­al element; rather, cap­tiv­at­ing headers with relevant keywords serve as a central anchor element for readers. When creating a text, therefore, one should leave suf­fi­cient time to plan and implement in­ter­est­ing headlines.

As one of the fun­da­ment­al and most popular concepts for creating content, the F layout is just as relevant for web designers as it is for editors.

Web designers use the F layout in order to ac­com­mod­ate for the user’s natural online reading behaviour. That’s why this layout feels com­fort­able and intuitive to the user. The most important in­form­a­tion can be absorbed easily and in a familiar way: from left to right and top to bottom.

The first thing that is normally noticed on a website is the branding, i.e. the logo and page title, as this is usually found in the page’s header area, or at least somewhere in the upper left area. This is followed by the content. One should be aware that image elements attract the most attention, followed closely by headings or titles. The main body text that follows receives far less attention, as the user mostly just skims through this section for their desired keywords. Bold text and sub-headings then serve as an anchor or focal point for the user. At least, according to the theory.

When it comes to the cohesive in­teg­ra­tion of design and text, the main challenge is giving equal weighting to each aspect of content: using visual anchor points skill­fully while not neg­lect­ing either text or content. Images and headlines stand out the most and far less attention is paid to main body text. The most important facts or offers should, therefore, be mentioned in the text as early as possible, so that no content is wasted. It’s important to keep gen­er­at­ing ideas for creative uses of ty­po­graphy and in­nov­at­ive page elements, so that the user does not get bored of the same format and so that designers don’t have to sacrifice their creative freedom. When working on pages with an F layout, graphic designers have to remember to create a format that suits texts, while writers shouldn’t forget about graphic design.

Content and design coming together gives rise to new concepts, such as the Z pattern layout. The Z pattern is another em­pir­ic­ally observed reading habit of internet users; this is where the eye moves in a ‘Z’ shape when scanning a website, i.e. starting the reading flow in the upper left corner, moving ho­ri­zont­ally to the right, then roaming di­ag­on­ally downwards to the bottom left of the display, before reading right to left again.

Online reading behaviour is an important aspect of search engine op­tim­isa­tion. The F pattern helps website owners design their pages so that the required in­form­a­tion is can be accessed as easily as possible to suit the needs of in­di­vidu­al users. The purpose of the op­tim­isa­tion of usability is to aid the user in finding the core aspects of their search as quickly and easily as possible and to provide the essential details at a glance. This is key for any website, even if it’s not one of Google’s main criteria when eval­u­at­ing websites in so far as ranking is concerned.   

On the topic of search engine op­tim­isa­tion, it’s important to keep in mind that SERPs and Google’s own search results pages are based on the typical F pattern. Many studies based on eye tracking results provide an insight into the way users view Google’s SERPs. If, as an SEO manager, you know which areas of the page the user spends the most time looking at, you have more control over at­tract­ing and main­tain­ing the user’s gaze. This in­form­a­tion is important for the creation of meta titles and de­scrip­tions. Correctly placing the right signals and keywords can prove massively ad­vant­age­ous here. Eye-catching elements like icons and capital letters are therefore becoming in­creas­ingly important.