Gutenberg Diagram — Why you should know it and use it

Mário R. Andrade
User Experience
Published in
3 min readJun 9, 2013

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

Mário R. Andrade
User Experience

🍄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