by Nick Babich
Published in · 5 min read · Jun 16, 2017
When you prepare a content for you website, it is easy to assume that your site visitors will read every letter you write. Unfortunately, it won’t happen because users don’t read, they scan.
Users don’t read web pages, they scan.
Scanning means they only stop to read when something catches the eye.
Does it mean that we should avoid policing a copy. Absoutely not. As a designer, you have a lot of control over where people look when they’re viewing a web page you’ve designed. To create the right path the visitor’s eyes are going to follow, you need to understand how our eyes process information. In this article, I’ll explain the theory and practice of creating visual hierarchies in web design using Z-pattern.
As you would expect the z-pattern layout follows the shape of the letter Z. A z-pattern design traces the route the human eye travels when they scan the page— left to right, top to bottom:
- First, people scan from the top left to the top right, forming a horizontal line
- Next, down and to the left side of the page, creating a diagonal line
- Last, back across to the right again, forming a second horizontal line
When viewers’ eyes move in this pattern, it forms an imaginary “Z” shape:
This pattern works because most western readers will scan your page the same way that they would scan a paper sheet — top to bottom, left to right.
Z-Pattern scanning occurs on pages that aren’t centered on the text (for text-heavy pages such as articles or search results, it’s better to use F-Pattern). This makes z-pattern good solution for simple designs with a minimal copy and a few key elements that need to be seen. Minimalist pages or landing pages centering mostly around one or two main elements can implement the Z-pattern to make the procedure of page scanning much easier for site’s visitors.
Before you start designing page layout it’s essential to find answer on following questions:
- When visitor lands on a page what information do you want them to notice first (the key message)?
- In what order do you want them to see other information?
- What do you expect users to do on a page?
The premise of the Z-layout is actually pretty simple: impose the letter Z on the page. Ideally, you want people to see your most important information right from the start and your next most important information second. Thus, important elements should be placed along the scanning path and visitors should be presented with the right information at the right time.
It’s essential to create a flow for visitor’s eye
Flow is about leading the eye from one part of a page to another in the direction you want it to move. You create flow through a combination of visual weight and visual direction. Here are a few best practices to keep in mind when creating a flow:
- Point #1. Point #1 is a starting point of viewer’s journey. It’s a good location for your logo.
- Point #2. Place the items that you want the reader to see first along the top of the Z. The eye will naturally follow the top line of the Z, so the goal is to place your secondary “call to action” at the end. Put more visual weight into Point #2 element — make the button (or another key element) contrast enough to capture users attention.
- Center area of the page. The trick to this area is fill it with content that will keep user interest, but won’t distract them from continuing to scan. For example, you can use a hero image in the center of the page to separate the top and bottom areas and guide the eyes along the Z path.
- Point #3. The purpose of Point #3 is to guide the users to the final call to action at Point #4. For example, if your page promotes some product that you want to sell, you want potential customers to read something about the product that will convince them to buy before they see the “Buy Now” button. You can use Point #3 to provide benefits of using your product or other helpful information for your visitors that will help them create context.
- Point #4. Point #4 is the finish line, the row between it and Point 3 should contain content that pushes the user’s sight to the corner. Point #4 itself is an ideal place for your primary Call to Action.
Below you can see two great example of Z-layout from Basecamp and Evernote.
The interesting and useful thing to know about the Z-pattern is that we can extend this pattern by creating a series of z-movements instead of one big z-movement.
As you can see below, this is exactly what Dropbox does by guiding users through a few key product features and finishing their repeated Z-pattern with “Sign Up For Free” call-to-action button. In this layout “Learn More” buttons play a role of secondary call-to-action buttons that help readers go to the next relevant page without needing to read a full copy.
Z-layout has some great things to offer, and this is exactly the reason why so many websites adopted it. You can take advantage of z-pattern and present important information in a way that will help the eye naturally scan it. But always remember what you want to communicate and in what order.
Check out the “F” shaped pattern post!
Thank you!
