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.

--

--

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