How Visual Flow Shapes UI: From Gutenberg to F‑ and Z‑Models

Visual flow refers to the natural path users' eyes follow when viewing screen content, a concept originally from interior design and later applied to printing and UI design.

The Gutenberg principle, derived from Johannes Gutenberg’s 14th‑century printing insights, states that readers scan from left to right and top to bottom, so designers place key information in the primary optical area.

The page is divided into four quadrants: Primary Optical Area (top‑left, most important), Final Optical Area (bottom‑right, secondary information), Strong Follow Area (top‑right, less critical), and Weak Follow Area (bottom‑left, least attention).

In mobile design, the Gutenberg principle is applied by placing the main title in the primary area and the decision button in the final area, as seen in the 58到家 app homepage.

The F‑shaped visual model, introduced by Nielsen Norman Group in 2009, shows that users first scan horizontally across the top, then a shorter middle horizontal line, and finally a vertical line down the left side, giving more attention to the first line and the leftmost words.

Mobile examples include the 58同城商家版 app’s clue subscription page, where the top filter guides the first visual, and single‑row cards highlight key content.

The F‑shaped model improves user attention and browsing efficiency, though it may not suit pages with extensive content or highly customized layouts.

The Z‑shaped visual model, emerging around 2010, suggests users scan the top, then down, and finally across the bottom, forming a Z path; it suits content‑heavy, multi‑task pages and emphasizes simplicity.

Understanding these visual flow models helps designers create layouts that align with user habits, enhancing readability, reducing search time, and improving overall user satisfaction.