zshaped

Zshaped is a term used in web design and user experience to describe a pattern of visual attention and navigation on a page or screen. In a Zshaped pattern, the viewer's eye tends to follow a path that resembles the letter Z: a horizontal sweep from the top-left to the top-right, a diagonal down to the bottom-left, and a final horizontal sweep to the bottom-right. This pattern is most common on short, purpose-driven pages with concise text, such as landing pages or portfolios, where primary information and the main call to action are placed to guide the reader along this path.

Design implications: To support a Z-shaped pattern, place a strong focal point in the top area (branding, headline) and a clear call to action at the top-right or bottom-right. Use a prominent visual anchor in the mid-page to create the diagonal pull, and lay out supporting content along the lower horizontal band. Limit clutter, use a clear typography, and ensure adequate contrast.

Responsive considerations: On mobile, scrolling replaces the fixed horizontal spans, so designers often adapt the pattern into a vertical reading flow, while preserving visual anchors and a clear CTA sequence.

Limitations and context: The Z-shaped model is a simplification and not universal. On pages with dense text or complex navigation, the reading pattern may resemble an F-shape or a more dynamic path. Designers should rely on data such as heatmaps and analytics rather than hard rules.

Related concepts: F-shaped reading pattern and visual hierarchy.