[UX Mevs] #01 — The Gutenberg Principle

Çağdaş Yılmaz
2 min readJul 2, 2023

--

#S01E01

Introduction

Hello, I’m Çağdaş.

In the first episode of the series, I will discuss a topic that can add +1 value score to your designed interface when implemented simply and correctly.

[UX mevs] #01 — Gutenberg Prensibi

Development: The Gutenberg Principle, also known as the Z-Pattern

What is it?

The Gutenberg [Z-Pattern] is based on research that attempts to explain users’ general eye movements on a design.

How does it work?

According to the Z-Pattern, users who read from left to right typically consume content in a Z-shaped reading pattern.

  1. Primary Optical Area
  2. Strong Fallow Area
  3. Weak Fallow Area
  4. Terminal Area

Conclusion

Therefore, when implementing your designs, by placing important actions according to this pattern, you can enhance the usability of your designed products.

👎 Example of incorrect usage in the mobile environment — 🖖 Example of correct usage in the mobile environment:
👎 Example of incorrect usage on wide devices:
🖖 Example of correct usage on wide devices:

You can also observe and interpret your users’ reading habits using tools such as Hotjar, LogRocket, Inspectlet, or similar ones. By placing important content and actions in the appropriate areas based on these reading habits, you can improve the readability of your design. 🧠

And most importantly, designing according to the Gutenberg principle is free 🫠 In other words, it won’t cost you anything.

Bonus:

Also, remember that this is not a strict rule, and be aware that the F-Pattern, which has a different reading model, is also quite popular. Conduct your own research.

Pattern Wars: F Pattern vs Z Pattern.

References

--

--