The Gutenberg Diagram in Web Design

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:

  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.

By understanding the reading patterns of the users who visit your website you are able to place the most important content in the areas where they will be most effective.

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

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.

The Gutenberg Diagram is applied to users with a genuine interest on 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:

Show your support

Clapping shows how much you appreciated Mário R. Andrade’s story.