The Gutenberg Principle

cta

ux-laws

What is The Gutenberg Principle or Z-pattern layout in UI design?

The Gutenberg Principle (aka Z-Pattern Layout) states that users' eyes travel according to a Z-shaped path from the top-left area to the bottom-right area.

How the Gutenberg Principle can help us

It's a good practice to place your CTA at the end of this flow to lead users to take action.

←Previous Tip

Design Better Menus

Menus have readability issues very often A quick hack to make them look and function better is to add an icon next to every action. In that way, you help users visually identify actions without having to read the whole copy. Also, it's a good practice to highlight the active tab, if it's applicable to the menu's use case.

visual effect

Next Tip →

Delete Modal

Pay extra attention to your buttons' copies. Avoid generic out-of-context copies, like 'Yes' or 'No'. Instead, use a sentence to communicate clearly the button's actions.

cta

dangerous actions

Become a Better Designer.
The Fun way.

Join 100s of developers, entrepreneurs & junior designers who strive to become better in UI & UX design with byte-sized, practical tips & examples!

Get notified about new tips & articles before anyone else!

"
I love these little tips. It’s like Dribbble but actually useful.
Martin LeBlanc
CEO of Iconfinder
"
I love UX & UI tips. Especially, when they are practical and presented in a very good way. Yours are meeting both criteria.
Lisa Dziuba
Head of Marketing at Abstract