Design

Design Patterns: Gutenberg Diagram, F-Pattern, And Z-Pattern

The way a website looks should follow from its purpose. In other words, its goals should always be reflected in its structure and content. Researchers were always interested in how to increase the amount of people visiting a website, especially those who do a target action such as register or place an order. The main idea behind increasing the visitor/buyer conversion rate is making the whole path easier and faster. It will increase the efficiency of the website and will help you make loyal customers who will return again and again.

The major part of your visitors interact with your website in a similar way. This is because through their lives, they have learned the same skills of working with visual information: reading, searching for information in texts, looking at pictures in books. These basics skills are taught from childhood and are almost impossible to change. That is why they need to be taken into account when designing a website.

There are many ways of improving the customer experience on a website, and one of them is organising elements on the page in the proper way. We will consider three design concepts or patterns of how website visitors process written information. Which one to choose depends on your page structure and its specifics.

1. Gutenberg Diagram

When a user observes a page, his eyes always repeat the same movements, scanning the page from top-left to bottom-right. He pays more attention to the areas on this diagonal (top-left and bottom-right) than other areas. In its turn, the top-right area gets more attention than the bottom-left.

2. F-Pattern Layout

When researchers investigated how users scan content with their eyes, the resulting heat maps looked similar to the letter “F”. Users’ eyes pay more attention at the beginning of the page, checking all the content till the right boundary, then move down, checking part way across the line, and so on.

3. Z-Pattern Layout

This is a natural movement for people reading from the left to the right. their eyes start from the beginning of the line at the left and then move on to the end of the line at the right. At the end of the line, their eyes move diagonally to the next line and start a new cycle. Overall, the path looks like the letter Z. There are also several variations of these patterns which will be considered in this article.

Now, let’s review more clearly.


Gutenberg Diagram

The Gutenberg Diagram is a well-known, common pattern of observing information. If we divide the screen into 4 equal areas and analyse how a person’s eyes move across them, we will note that each area gets different attention.

Gutenberg Diagram

1. Primary area.

The top-left part of the screen automatically gets most of the user’s attention once the page is opened. as a result, it should contain the most important information: logo/logomark, logotype plus a unique offer. It will help to increase user attention in the company and its product.

2. Well-investigated secondary area.

Following their natural reading skill, the user moves to the next area but pays less attention. Some additional statements may be placed here. If you put a “call to action button” here, then chances are big that the user journey on the screen will end. It is a good place for a phone number, callback form, etc. Due to so-called 'reading gravity' while checking this data, the eyes move diagonally towards area 4.

3. Poorly-investigated area.

This area will be scanned quickly without paying much attention. Do not place anything important here, otherwise it will not be taken into account.

4. Terminal area.

Finally, the user gets into the bottom-right area and stops before deciding on their next move. This is a good spot to place the “call to action” button, link, or anything that requires user attention.

This pattern works in most cases, no matter what content is there: a book page, website, mobile application, etc. Understanding the Gutenberg Diagram will help place important content in the areas that get most attention and increase the chances that users will perform the target actions. The Gutenberg Diagram is the most universal pattern when designing digital products and modern websites.

The following picture demonstrates an example of elements which were placed incorrectly. Therefore, they are not getting the proper attention:

Gutenberg Diagram wrong example

And now some examples with elements placed properly. Note that your eyes always stop on the “call to action button” without realising it:

Gutenberg Diagram Good example

Gutenberg Diagram Good-example

F-Pattern

In the middle of 2000, Jacob Nielsen suggested using eye-tracking technologies to investigate how users look through content. During the research, a heat map was created, and it showed that most people scan content following a path that looks similar to the letter “F”:

Design patterns - F-Pattern

Note that the F-Pattern does not contradict the Gutenberg Diagram but complements it. The Gutenberg Diagram demonstrates the user’s path across the content placed on one screen (text, images, videos, buttons, etc.), while the F-Pattern describes user interaction with a large amount of mostly text consisting of several "screens" (an article, search results, etc.).

What makes the F-Pattern look like the letter F is the loss of attention while moving down the page. If in the beginning of the page user checks most of the information (the length of the top horizontal row is longer), at the end, he only scans the content quickly. In other words, the lower down the page the text is,  the less (fewer characters) the user reads on each line.

That is why the most important information should be at the top of the page where it will be read completely. Less important information should be placed below and along the left edge where the eyes move mostly vertically and less horizontally. An example of good placement would be placing lists in this area.

Also, divide the heavy text content into titled sections. This helps to catch the users’ eyes and find the needed content faster. And also remember that if the content is interesting to someone, it  will be read even if placed outside the F-shape, so these areas may be used for specific additional information.


Z-Pattern

Like the F-Pattern, the Z-Pattern follows the shape of the letter “Z”. The users eyes move in a path similar to that letter. First, the users scan along the top, horizontal line, then move diagonally to the beginning of the next line, and then till the end of the line. Of course, the movements are naturally not so sharp. That is why sometimes this pattern is also called the 'reversed S pattern'.

Design Patterns 6 Z Pattern

The Z-Pattern differs from the Gutenberg Diagram in that the users should follow the horizontal lines till the end through the "weak" areas 2 and 3. As a result, this choice makes sense for plain designs where there are only a few important elements which require attention.

This pattern is also used in content writing where some extended versions of this concept are used:

1. The Zigzag-Pattern.

The Z-Pattern can be repeated multiple times, and it reflects how we naturally read big amounts of plain text.

Zigzag Design Pattern

2. The Golden Triangle.

This is a special case of the Z-Pattern. The viewer's eyes move along the horizontal line to the right, then diagonally to the bottom left, and return to the initial position. Thus, the triangle should contain the most important information. As we see here in contradiction to the Gutenberg Diagram, the bottom-right area is not taken into attention. The Golden Triangle makes sense if that area is empty or does not contain eye-catching elements.

The Golden Triangle Facebook

The Golden Triangle 2 Google

Conclusion

People's basic interaction with content is based on skills learned during childhood and therefore, lies deep in their subconscious. We should not try to change that behaviour because it is almost impossible. Instead, we should use  design content according to those deep-seated patterns. The more the content matches the pattern, the easier it will be for the user to perceive the information and the higher the probability that the visitor will become your client. The patterns described in this post are the typical and most common designs for the web interfaces and content pages.

Also, remember: patterns describe the behaviour of a new visitor who is not familiar with your product or not very interested in your content. If a person is really interested, then they will read everything, no matter which pattern you chose. Make a good product, and it is sure that you will get clients.


Author image

About Konstantin Smirnov

I like computers and music.