Jump straight to the part you need:
🔑 The key takeaway to remember.
Here are the 4 key points to understand the Gutenberg diagram.
The Gutenberg diagram describes the natural Z-shaped pattern that a user follows when reading a web page. The diagram consists of four zones:
- Primary optical zone (top left): the first point of interest.
- Strong deceleration zone (top right): less attention, avoid calls to action (CTAs).
- Weak tracking zone (bottom left): least important content.
- Terminal optical zone (bottom right): the best place for CTAs.
This principle helps strategically place content based on your visitors' reading habits.
A good understanding and effective use of the diagram can guide your users' attention and prompt them to take action.
The Gutenberg diagram represents the way users consume information on your site.
Mastering the Gutenberg diagram means divulging the right information at the right time to capture your users' attention and motivate them to read your page.
In this guide, we'll break down the 4 main areas of the diagram that will help you improve your readers' experience.
Definition: what is the Gutenberg diagram?
There are a number of design concepts that illustrate the way people consume information on a website, including the Gutenberg diagram.
The Gutenberg diagram (or "Z-pattern") represents the movement of the gaze as information on a page is read or processed.
Your users' eyes naturally follow a Z-shaped visual trajectory.
The diagram distinguishes 4 content zones:
- Primary optical zone
- Strong fallow area
- Weak fallow area
- Final optical area
Each of these zones plays a very specific role in capturing the user's attention
The overall movement of the eye traverses the content area in 2 ways:
- from left to right, following the “orientation axes”
- Following the “reading gravity”, i.e., from the primary optical zone to the final optical zone.
Let's now examine each of these zones, one by one, to better understand their impact on the user.
1) Primary optical area
The top left of the page is the user's first point of interest.
This is where their gaze and attention is first focused, whether they're reading content, looking for information, or simply scanning the page.
This is where you need to concentrate your efforts to grab their attention immediately and keep them on your page.
2) Strong fallow area
The user's gaze then moves to the upper right-hand part of the page, which can be seen as a continuation of the left-hand part, but less important.
A call to action here could interrupt the user's experience. It should therefore be avoided.
3) Weak fallow area
The lower left is the blind area of the Gutenberg diagram. Although legible to the user, it gives little importance to the content of this area.
4) Final optical area
When the user reaches the bottom right-hand corner, the reading process stops and the user must perform an action.
This is the ideal place to insert calls to action such as buttons, links, forms and so on.
Gutenberg Diagram example
Why is this principle so important?
By understanding the reading habits of the users who visit your website, you can place the most relevant content in the areas where it will be most effective.
Understanding the Gutenberg diagram means you can use it to your advantage to capture your users' attention.
It's therefore a good idea to place your CTA at the end of this path (the final optical zone) to encourage users to take action.
Conclusion
The Gutenberg diagram is your handy guide to understand how people naturally navigate a page, tracing a Z-pattern with their eyes and scanning 4 main content areas.
The key? Pack your essential content along the diagonal path, the heart of the 'reading gravity'. This way, you can steer your users' attention to the information you want them to take in.
If you understand the importance of the Gutenberg diagram (which I hope you do after reading this guide), then you will be able to control your user's attention.
FAQ : Gutenberg diagram
1) What is the Gutenberg digram?
The Gutenberg diagram illustrates users' natural viewing path on a page, dividing the content into four quadrants.
2) What are the 4 main zones of the Gutenberg diagram?
The Gutenberg diagram includes: Primary optical area (top left) for initial attention, Strong fallow area (top right) to avoid distractions, Weak fallow area (bottom left) often overlooked, and Final optical area (bottom right) for calls to action.
3) Why is the Gutenberg diagram so important?
Understanding the Gutenberg diagram is crucial as it outlines a common pattern users follow when viewing content. This knowledge allows you to influence user interaction and highlight key information on your page effectively.
Webflow Services
Want better recognition, stand out from your competitors and sell more? We got you covered with our Webflow services.
