A quick introduction to the Gutenberg Rule
The Gutenberg Rule, is really a diagram. It describes the pattern which the human eye follows, when looking at evenly distributed information. It is one of my favourite design concepts.
The Gutenberg rule helps us understand how we can expect visual information to be perceived by our audiences (predominantly in countries where text is read left to right). It is sometimes referred to as the Z pattern.
What is evenly distributed information?
Evenly distributed information is content that can be discerned and understood by an audience. It is the pages of a magazine, containing text and images. It is a website with blocks of text and interface components. Similarly, a book, with columns of text.
The Gutenberg Diagram
The diagram splits the visual medium into four areas:
- Primary Optical Area
- Strong Fallow Area
- Weak Fallow Area
- Terminal Area
You can expect a strong inclination from your audience to scan these areas, in the order 1 to 4. It is prudent to shape your designs around these fallow areas.
By placing key interface components or salient content along the relevant fallow areas, you have more chance to capture the attention of your audience at the most natural moment.
Why? When we look at objects, posters or documents we do not focus on a single point. Our eyes scan the entire entity, seeking waypoints and pathways to inform our observations. By structuring our designs in lock-step step with how we naturally scan evenly distributed information, less cognitive burden is placed on our audience.
Below is a printed example where designers have made use of the Gutenberg rule. The Financial Times regularly place an advert in the fourth fallow area. I bet that advert placement doesn't come cheap!
You can feel it can't you? You care a little bit less about the content in the third fallow area. That's okay, it's natural.
If you were wondering, Gutenberg is indeed the man of printing press fame.
Thomas -