Patterns — Generally

The better we get to know a person, their psyche, their way of functioning, the more effectively we can decipher and predict their behavior. When designing, we must take into account elements that will capture the attention of our audience or encourage action. What is very important is that when creating an interface and presenting content on it, we must be aware of how people scan content in order to appropriately highlight the most important elements and facilitate navigation for our users.

Here, patterns come to our aid, which tell us about the way users scan content presented on interfaces. Therefore, it is crucial for us to realize that people scan content in different ways before focusing on a chosen element, shifting their gaze from one point to another until something interests them or they spot the desired phrase.

Firstly, I must emphasize that how people read content on the web largely depends on:

• the task/goal,
• experiences with the internet, website, or brand,
• the layout of the page,
• the type of content on the page (e.g., text or images).

Eye-tracking studies are used to discover patterns of interface scanning. Currently, there are several popular patterns for scanning web pages, including the “F” and “Z” patterns.

However, before you start designing the layout of the page, make sure to find answers to the following questions:

• When do visitors come to your website?
• What information do you want them to notice?
• What do you want them to do?

When designing an interface according to a chosen pattern, remember to capture attention with relevant elements. You can use subtle motion or animations. It’s also important to know that some of the most attention-grabbing elements are photographs, especially those depicting human faces. By directing the face in the image towards the call-to-action (CTA) element that prompts action, you can completely change the perception of your project. Why? If the person in the photo is looking towards the element that the user should pay attention to, they will do so much faster.

The font size and button colors can also affect how your project is perceived. Also, remember to study the effectiveness of the created layout. To do this, use eye-tracking devices that track eye movements and create heatmaps, which will show you where users focus their attention the most.

F-pattern

The F-pattern is the first pattern reflecting eye movements when reading content. In the case of this pattern, a person focuses on the top part of the page because that’s where the headers, which are particularly important, are located. The next step is eye movement to the left side, where numbering or bullet points can be captured, and then a return to the right to read the bolded text.

When to use the F-pattern?

The F-pattern should be used in places where you have a larger amount of information to convey. When using this pattern, it’s important to remember that user engagement is always higher at the beginning and then decreases slightly.

Z-pattern

The Z-pattern is one of the most fundamental patterns. There are also variations of it, such as the Zig-Zag pattern and the Golden Triangle pattern. Zig-Zag involves repeating the Z pattern multiple times throughout a design, creating a zigzag effect, hence the name. On the other hand, the Golden Triangle pattern involves extracting a triangle from the letter “Z,” where, according to its proponents, the most important information should be placed because that’s where users’ attention is focused the most.

When to use the Z-pattern?

The Z-pattern is a natural reading pattern — we use it when reading books. It works particularly well in interfaces for advertising pages as well as when creating landing pages. As a pattern for building interfaces, it should not contain a lot of content but rather present very clear messages that prompt action.

Once you understand scanning patterns and choose the ones that will fit your interface, it will be easier for you to place important information exactly where incoming users will pay attention to. Remember that properly planned content structure is incredibly important. We cannot approach this stage of creation lightly, as we will quickly lose the attention of our audience. Importantly, pages with a more difficult scanning layout have a higher bounce rate, and readers find it much more challenging to navigate through the interface, which means that frustration can lead them to leave our website quickly.

However, the F-pattern and Z-pattern are not the end! We can also encounter many other patterns for content reception on a website. It’s worth familiarizing yourself with them because who knows, maybe you will use one of them in your project. Below are a few examples.

Spotted pattern

In this pattern, unlike the F-pattern, the user doesn’t start reading from the beginning but instead focuses only on selected elements located in various parts of the interface. The elements that capture the user’s attention in this pattern are usually visually distinct elements in the text. These can be bolded words, lists, links, as well as numbers and words in uppercase letters. However, it’s important to remember that what captures the user’s attention depends on the purpose of their visit to the website.

Layer-cake scanning pattern

What does this intriguingly named pattern entail? The name is a reference to a cake because readers, like some people eating sweets, tend to skip the cake base, which, in our case, corresponds to the text body, and focus mainly on the frosting and darker centers, which are the headings and subheadings. Therefore, we must remember that people generally have no desire to read irrelevant and unengaging parts of the text. What’s particularly important is that headings give readers an insight into what is discussed in the subsequent paragraphs.

Commitment pattern

As designers, we need to be aware that only a few content recipients are motivated enough to read and thoroughly go through the entire interface’s content, although such users do exist. Hence the concept of the commitment pattern — in this pattern, users focus on all (or most) of the words present in the text. It occurs when users are highly interested or motivated to read the content presented on the page. To incorporate this pattern into our designs, it’s important to understand that text comprehension is enhanced when the content is well-divided, marked with headings, or includes bullet points. Focusing on text walls can be challenging even for engaged users.

In summary, remember that users visiting your website pay attention to its entirety. Unclear texts with multiple formatting styles, illegible fonts, or excessive and numerous animations discourage them. Users analyze every detail, even the smallest one, from the moment they enter the website, and although they often do it unconsciously, it’s easy to scare them away. It’s important to realize that human behavior is influenced by a multitude of factors. Above, I described the most common eye-scanning patterns on web pages, but that doesn’t mean that only those patterns are used. Your audience may scan and browse pages according to their own patterns that have nothing to do with the ones described in this article. It’s up to you to decide how thoroughly recipients familiarize themselves with the page’s content, and the content itself depends on you. The effectiveness of using a particular product will depend on the layout you propose, and by appropriately placing CTAs, you can increase (or decrease ;) ) the number of registrations or purchases made by visitors.