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.
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.
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).
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.
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.
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.
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’.
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.
Sources:
.png)
![The Definitive Guide To A Creative Website Design [2023]](https://assets-global.website-files.com/60f120767a8f0187072655dc/64bdfda95d10b365e8f1dcfa_ADPList%20-%20Creative%20Websites.png)
