Gutenberg Diagram — Why you should know it and use it

Mário R. Andrade
Jun 9, 2013 · 3 min read

The Gutenberg Rule is used to show a user behavior known as reading gravity, the western habit of reading left-to-right, top-to-bottom.

It is represented by dividing the visible content area in 4 quadrants:

Image for post
Image for post
  1. A Primary optical area;
  2. Strong fallow area;
  3. Weak fallow area;
  4. Terminal area;

Primary Optical Area

The higher left portion of the page is the user primary focus, it’s where the eyes will automatically focus regardless if the user is searching for something, wanting to read or just doing a quick scan on the page.

Strong Fallow Area

The second stage of the reading habit is moving to the higher right portion of the page, you can think of it as a follow up from the left portion but less important. It’s not a good idea to break the reader’s experience created from the starting point. Meaning that if you have a call to action the user will stop at this point and act.

Weak Fallow Area

The lower left portion is the blind portion of the Gutenberg Diagram, although readable the user will not give much importance to content in this area of the page.

Terminal Area

When the user reaches the lower right portion of the page there is a break in the reading or “page scan” process and the user will need to take an action. This is the perfect spot to insert call-to-action such as buttons, links, forms, video, etc.

If you research papers on user reading behavior you’ll find an interesting case study lead by Jacob Nielsen called F-Shaped Pattern.

Image for post
Image for post
Jacob Nielsen F-Shaped Reading Pattern

This study states the lower right area of a page as the least important area.

Although I wouldn't say Jacob Nielsen statement is incorrect, but it shows a user behavior that can be applied when the user has no genuine interest on the page content thus shifting from the reality where a user is genuinely reading and understanding the page content.

Let’s say the user is searching for information about the Gutenberg Diagram and finds this article.

The typical pattern will be the user looking at the diagram image and after reading the lines above it, starting an inverted Gutenberg Diagram. If a user is looking for products on E-bay the primary pattern, on the product listing pages, will be a typical Gutenberg Diagram.

But if the user is trying to gather information and a search engine shows multiple articles, the user will apply the F-shaped pattern when visiting those pages trying to find quick and concrete references to it’s search.

Complementary readings:

User Experience

A collection of articles regarding User Experience

Mário R. Andrade

Written by

🍄Hi, I’m Mario. Welcome. I am on my path of 🔥 self-discovery and I write about it. I am passionate about 🤩 innovation and 👨‍💻 technology. Hope you enjoy

User Experience

A collection of articles regarding User Experience

Mário R. Andrade

Written by

🍄Hi, I’m Mario. Welcome. I am on my path of 🔥 self-discovery and I write about it. I am passionate about 🤩 innovation and 👨‍💻 technology. Hope you enjoy

User Experience

A collection of articles regarding User Experience

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store