September 23, 2021

Gutenberg & modern-day UX

Gutenberg & modern-day UX

Well, a lot of you might be wondering what Gutenburg has to do with UX! Yes, he invented the press — which had changed the world; but was there any concept of the idea of UX back then? Don Norman arguably the father of ‘modern UX’ — first coined the term User Experience in 1993 for the first time during his time with Apple — which has been coined as the ‘Dawn of UX’ by Jakob Nielson. Gutenberg Invented his press in 1440, at that time the only written documents were handwritten books and financial reports- which has only targeted a very small number of people, but after the famous Gutenberg’s Bible, a larger number of people started reading a lot amount of text.

Traditionally, handwritten books used to follow the rule of thirds used in painting/art which is still in use in most of the art forms along with performance arts like theatres, photography, etc.

An image showcasing rule of third, A single frame is divided into nine smaller pieces. Which creates 4 focal areas. The vision of any users goes 41%, 20%,25% and 14% respectively clockwise.
Image courtesy: Interaction Design Foundation

UI designers and visual designers are still very fond of this. Now when Gutenberg came up with the printing press the modern structure of books was created, A4 or letter size become the most comfortable page size or ratio. Which you can still see in your laptops, mobiles ( Well now some companies are going ahead with crazy sizes and ratios but they are not so mainstream yet) all follow the same ratio. Thus evolved the Gutenberg principle of UI which had affected our UX decisions from time to time.

‘The Gutenberg Principle is a lesser-known design principle that describes the general movement of the eyes when looking at a design in which elements are evenly distributed.’ It’s also known as the Gutenberg Rule or the Z pattern of processing.

When we look at a screen, page, or poster none of the users looks at them from a single static point, instead they constantly travel their eyes across the surface, looking for visual pathways, landmarks, and resting points- if not done properly it eventually ends up in higher cognitive load. It is up to the designer to control the path of travel and therefore the order information is received, by strategically positioning elements (shapes, lines, colors, textures, etc.) The more trained the eye of the viewer, the more of these elements will be found and the more engagement happens.

A quick example will be when the initial photo manipulation tools like Corel Draw came in 1989, people took some time to get accustomed to the patterns and visual pathways. But if you look at tools like Adobe XD, the learning curve is much lower. It is because over the period of the last decade our brain was trained to perceive digital tools/products in an intended way. At his time, Gutenburg also presented a visual path of travel (probably the first one to do this)to make users linger less or more on portions of the printed documents.

What is The Gutenberg principle assumes a design space is divided into 4 equal quadrants. Amongst these four the top left and bottom right are considered active quadrants. Where bottom left and top right are passive quadrants.

When a user looks at any frame, image or a screen- the top left corner is always the entry point and bottom right is usually the exit point. The path usually varies based on the content, but entry & exit point always remains the same.
Diagram by author

The uppermost quadrants are primary over their corresponding bottom quadrants. If a person had grown up reading left to right, ( English, Spanish, Bengali, Hindi) they naturally perceive the design space or template at the top left and flow diagonally down to the bottom right before exiting the frame. This is a natural path of travel for the eyes. It gets mirrored for the right to left readers ( Like Hebrew, Arabic, Urdu ) and rotates 90 degrees clockwise for some language which are read top to bottom (Chinese, Japanese, and Korean).

An example of ‘Z’ Pattern , with visual entry and exit point overlapped on a page of ‘Real Estate & Finance Magzine’ 2014edition.
The famous Z-Pattern of Reading (Real Estate & Finance Magazine-2014)

The designers, magazine layout creators can choose the natural Z pattern or may choose to present other entry and exit points( Refer to Stephanie Mialki and her articles on the same subjects at Instapage). Sometimes the designers use a modified version of the same. UX designers have been using the ‘ F ’- Pattern which is a modification of the same ‘ Z ’ -Pattern. The best part of using Z Patterns is, it uses the natural flow of reading gravity. Our brain has been trained for generation in these ways.

Showcasing of Facebook sign in page , with Z pattern overlapped on.
Remember this? One of the most popular UX decision taken quite early by Facebook

The UX designers usually place key elements and focal points — the most important information — along this path of travel, to get the best results. This increases comprehension and results in much less cognitive load. Sometimes to create a quirky experience the designers sometimes by choice naturally disrupt this natural pattern.

Overlay showing Z pattern on a UI Layout by Dwinawan for Paperpillar
Original layout by Dwinawan for Paperpillar

Here is an example, the green shows how the natural ‘Z’-pattern would have taken the users and how the layout differs to create multiple visual highlights.

UX Takeaways

As UX designers, it gives one a fresh perspective to figure out to place elements on interfaces. Especially if you are not designing a classic Web application or mobile app. This helps a lot in the case of new devices, such as smartwatches, holo lenses, TV applications, etc. It gives a fresh perspective when you don’t have apple human interface guidelines or a material design system or any other design system to follow. This might also help while creating B2B tools like banking applications, Inventory management Dashboard, etc.

A great way to proceed in these scenario would be mixing ‘The Gutenberg Principle’ with some other UX laws like ‘Occam’s Razor’ or ‘Zeigarnik Effect’.

The dashboard page created for Finacle products , which has been created with a mix of Gutenberg’s Principle along with Zeigarnik Effect, designed by Infosys XD
A mix of Gutenberg's Principles along with Zeigarnik Effect, designed for Finacle by Infosys XD

It appears then that Gutenberg’s legacy lives on. It lives on in all the greatness whenever a baby reads their first book, or a kid learns to click their first photograph. Do keep experimenting with this, let’s create a better UX together.


  1. Childress, Diana (2008). Johannes Gutenberg and the Printing Press.
  2. Duchesne, Ricardo (2006). “Asia First?”. The Journal of the Historical Society. 6 (1): 69–91. doi:10.1111/j.1540–5923.2006.00168.x.
  3. ‘Applying the Gutenberg Principle in Print and Web Design’ by Alvalyn Lundgren
  4. Putting the Gutenberg Principle to the test: Evidence-based design by Amy Shepheard