Visual Hierarchy - Z-Pattern

Walden Systems Geeks Corner tutorial Visual Hierarchy - Z-Pattern Rutherford NJ New Jersey NYC New York City North Bergen County

Visual hierarchy is the arrangement of graphic elements in a design in order of importance of each element. The visual weight defines the importance of an element in a design's hierarchy, communicating to a viewer's eyes what to focus on and in what order. It's an important question as responsive frameworks force designers to think about many different pages at once. Visual hierarchy is based on how viewers will scan the page.

As we explained in the previous article about F-Patterns, we can use another reading pattern for cultures who read left to right. This is the Z-Pattern. The Z-Pattern works best with websites where information is not presented in blocks of text.


Z-Pattern scanning occurs on pages that are not centered on the text. The reader first scans a horizontal line across the top of the page, whether because of the menu bar, or simply out of a habit of reading left-to-right from the top. When the eye reaches the end, it shoots down and left ( again based on the reading habit ), and repeats a horizontal search on the lower part of the page. The Z-Pattern is applicable to almost any web interface because it addresses the main website requirements such as hierarchy, branding, and calls to action. The Z-pattern is perfect for interfaces where simplicity is a priority and the call to action is the main takeaway. Forcing a Z-pattern for a website with complex content may not work as well as the F-pattern, but a Z-pattern can help bring a sense of order to simpler layouts (and increase conversion rates).

When using the Z-Pattern, keeps some simple things in mind. Separate the background to keep the user’s sight within your framework. The top, left part of the site is a prime location for logos. Add a colorful, secondary call to action in the top right part of the screen to help guide users to the Z-Pattern. Use a a image slider in the center of the page to separate the top and bottom sections and guide the eyes along the Z path. Add icons at the bottom, left part of the screen to guide the users to the final, and main call to action at the bottom, right part of the screen.We can extend the Z-Pattern throughout the whole page, repeating the guidelines if we need more value propositions before the main call-to-action.

Predicting where the user's eye will go is a huge advantage. Before arranging the elements on your page, prioritize the most and least important ones. Once you know what you want your users to see, it's just a simple matter of placing them in the pattern's hot spots for the right interactions.