In 2020, web designers will, for the most part, continue focusing on what they’ve emphasized in 2019: user-friendliness. Web design trends continue to be shaped by the mobile revolution, which has forced web designers to rethink their approach as screens become smaller and the internet has to follow suit. We reveal nine trends that show how much web design will evolve in 2020.
It’s a universal fact: people read online and offline content differently. 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 unbelievable mass of information. The combination of these two factors means that the average internet user has become impatient. Whether the text is a news article or a product description, 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 consequences of modern reading habits for design, content creation, and search engine optimization, as well as how you can display your content better with the help of the F pattern.
The F pattern or F layout
Looking at the changing trends in online reading habits over time, one can see different patterns emerging. According to recent studies, one of the most common new habits is the method of taking in information in an ‘F’-shaped formation. In design, therefore, using an F pattern, or F layout, reflects the typical reading pattern of most Internet users. The process of the F pattern occurs as follows:
- The user initially scans the horizontal line at the top of the page and glances the first paragraph, creating the first bar of the ‘F’.
- The user’s gaze then drops vertically down the left side of the text. The user reads the first words of a paragraph and then jumps to the next line, scanning the text. The user does not initially register the elements on the right side of the screen.
- After the first scan, the user starts to look at the content more closely in order to find the relevant information. If the user then identifies significant keywords, their glance will go to the right for a second time, thus making the second bar of the F pattern.
- As the process continues, the gaze remains on the left side of the screen and wonders downwards vertically to the bottom of the page.
The origins of this F layout lie in behavioral psychology and reflects a long-established pattern that began in the offline world. This way of reading is common for scanning information in languages that read from left to right and top to bottom. The only difference is that internet users now jump from line to line far more frequently, with the focus on the first words of a line or paragraph.
This has been proven by numerous studies on usability. Danish usability consultant, Jakob Nielsen, was the first to coin the term ‘F pattern’ after his 2006 studies of eye tracking proved that the eye movements of website users correspond to the ‘F’ shape.
Side note: eye tracking
Eye tracking is a method of identifying people’s eye movements. With so-called eye trackers, it’s possible to record eye movements and analyze them later. As a scientific method, eye-tracking really belongs to the discipline of neuroscience, but it is also used in perceptual psychology, cognitive psychology, and advertising. Product design and educational 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 analytical representations for visualizing data – in this context, it shows user behavior or reading behavior online and helps to analyze and optimizethe structure of websites. A heat map works with color gradation, usually from red (which stands for very hot) to blue (cold). Transferring eye-tracking technology 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 registered at all. For better analysis and usability optimization additional parameters such as clicks and mouse movements are added for heat mapping in online marketing.
The F pattern with online texts
In addition to texts, the F pattern should be applied to overview pages, landing pages, and newsletters. Put simply, important elements should never be on the right side or at the bottom of the page. The most important headlines, information, and keywords should always be placed at the top of the page. Furthermore, website owners should aim to draw attention to their central information or offers by mentioning them as early as possible in the opening paragraphs.
The F pattern put into practice: 3 tips for optimized texts
- Get straight to the point: if possible, try to incorporate the key information in the first section of text. Get to the point by summarizing your key points briefly and concisely. Avoid embellishments and unnecessary information within the F layout. The essentials first. However, you shouldn’t wait too long to add extra important information, even if it affects the composition of the text.
- Create a structure: for online content, one should aim for a structured style; lists, short paragraphs, and headlines and sub-headings are preferred. This structure enables users to scan texts much faster.
- Focus on headings: headings and sub-headings are more than just a structural element; rather, captivating headers with relevant keywords serve as a central anchor element for readers. When creating a text, therefore, one should leave sufficient time to plan and implement interesting headlines.
The F pattern in web design
As one of the fundamental 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 accommodate for the user’s natural online reading behavior. That’s why this layout feels comfortable and intuitive to the user. The most important information 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 integration of design and text, the main challenge is giving equal weighting to each aspect of content: using visual anchor points skillfully while not neglecting 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 generating ideas for creative uses of typography and innovative 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 empirically 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 horizontally to the right, then roaming diagonally downwards to the bottom left of the display, before reading right to left again.
What the F pattern means for search engine optimization
Online reading behavior is an important aspect of search engine optimization. The F pattern helps website owners design their pages so that the required information is can be accessed as easily as possible to suit the needs of individual users. The purpose of the optimization 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 evaluating websites in so far as ranking is concerned.
On the topic of search engine optimization, 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 attracting and maintaining the user’s gaze. This information is important for the creation of meta titles and descriptions. Correctly placing the right signals and keywords can prove massively advantageous here. Eye-catching elements like icons and capital letters are therefore becoming increasingly important.