Several layout patterns are often recommended to take advantage of how people scan or read through a design. 3 of the more common are the gutenberg diagram, the z pattern layout, and the f pattern layout. each offers advice for where to place important information, but i think these patterns are often misunderstood and followed without thought. The z shaped pattern: when you’re mixing text and visuals, this layout guides the eyes in a dynamic “z” formation, perfect for emphasizing calls to action. in addition to exploring these patterns, we’ll discuss how pretty links can help you seamlessly test different page designs to see which layout maximizes engagement and conversions.
The gutenberg diagram describes the natural z shaped pattern that a user follows when reading a web page. the diagram consists of four zones: primary optical zone (top left): the first point of interest. strong deceleration zone (top right): less attention, avoid calls to action (ctas). weak tracking zone (bottom left): least important content. F and z patterns. f and z patterns refer to how a person’s eye moves over the page—how people scan the content. an f pattern has prominent content across the top of the page, with additional content aligned under it along the page’s left side (in roughly an “f” shape). It suggests that most readers eyes will scan your page starting in the top left, move horizontally to the top right then diagonally to the bottom left before finishing with another horizontal movement to the bottom right, hence forming an imaginary “z” shape. example of website using z pattern. image credit: izettle. You’ll have four points joined by three lines going in a z shape. f pattern. designers usually apply the f pattern on websites that include text heavy content and or video content. with the f pattern, users begin by scanning left to right along the top, but then scan down the left side of the page, looking for visual clues to the information.
It suggests that most readers eyes will scan your page starting in the top left, move horizontally to the top right then diagonally to the bottom left before finishing with another horizontal movement to the bottom right, hence forming an imaginary “z” shape. example of website using z pattern. image credit: izettle. You’ll have four points joined by three lines going in a z shape. f pattern. designers usually apply the f pattern on websites that include text heavy content and or video content. with the f pattern, users begin by scanning left to right along the top, but then scan down the left side of the page, looking for visual clues to the information. Introducing the z layout. the premise of the z layout is actually pretty simple: super impose the letter z on the page. place the items that you want the reader to see first along the top of the z. the eye will naturally follow the path of the z, so the goal is to place your "call to action" at the end. all along the path you can include bits. Place the call to action (cta) at the end of the z line: the z pattern involves guiding the user’s eye from the top left corner diagonally down to the bottom right, and then back up to the top right corner. to make the most of this scanning pattern, designers can place the call to action at the end of the z line (i.e., at the bottom right.
Comments are closed.