How to Optimize Your Website for Z Pattern Scanning
We’re busy. It’s just a fact of modern life. We have things to do and people to see and we don’t have time to waste on a website that isn’t going to solve our problem. That’s alright… we have a built in mechanism that protects our time. It’s called scanning.
Why do people scan our websites?
Our brains are hard-wired to thrive and survive. Our brains do anything they can to help us and scanning is part of the survival mechanism.
Time is incredibly valuable to us and we protect it like we would protect water in a desert. This is why the brain automatically kicks into scan mode when we are presented with a new website. We scan it first to get the okay from our brain to spend our valuable time reading the rest.
How do people scan websites?
Different parts of your website are scanned in different ways. The hero section or top of your website is scanned in a ‘z’ pattern. The main content of your website may be scanned in an ‘f’ pattern depending on how you have the content setup.
Today we’ll explore the hero section since this is the first thing people see and is the determining factor in whether or not they continue through the rest of your website.
How do I optimize for Z pattern scanning?
When someone visits your website their eyes scan the page from top left to top right, then down diagonally to the bottom left corner, then from bottom left to bottom right. You can see this in the graphic below.
This is why the information ‘above the fold‘ is so critical. We want to be sure website users get a chance to scan all the important information. This will allow them to make a better informed decision as to whether or not the information they will receive on the rest of the website is worth spending their time reading.
This decision is made in a split second so optimizing each part of the Z pattern is critical to your website’s success.
Let’s take a look at our main page as an example and take you through the importance of each part of the Z.
Top left:
The first thing people see. We want to be sure we are telling them who we are and, if possible, use a tagline to let them know what we do. If you don’t have a tagline that’s okay. We’ll let them know what we do later on as well.
Scan to the right:
DO NOT CLUTTER! This area should be clean and simple, don’t clutter it with navigation. Navigation is confusing and a hurdle to scanning. It interrupts our brains natural desire to help us survive by scanning. Besides, you’ve spent a lot of time creating a beautiful web page, why would you want to send people somewhere else before they’ve had a chance to read it?
Top right:
Call to action. Give people a chance to contact you right away. If they’ve done a branded search or they typed your URL directly into the web browser, this is probably what they want to do anyway. We’ve shown them their in the right place with our top left logo now we need to tell them how they can get started doing business with us.
Down and to the left:
This is the most important part of this pattern. This is where you want to tell people what you do, how you do it, who you do it for and how to get started. The catch. You have to do it quickly and in the simplest easy to remember way you can.
You can see from the example in our website hero’s center, we take the user through each step in short, easy to read and easy to remember language. If possible, show someone enjoying your product or service or what success looks like after using it. It’s hard for us to do that so we show a happy guy who represents our target audience pointing to our content. By pointing, he’s telling the user to take action and they can be happy just like him.
Back to the right:
Now that we are at the bottom of the screen we will go back to the right. This is a great place to show the benefits or the value you provide. You want the last thing users see before making the decision to continue to be positive and focused on the value they will receive if they continue and use your product or service.
What can I do now?
You should rework the hero section of your website to optimize it for Z pattern scanning. It’s not that difficult when you follow the formula. Write ad copy focused on the customer, keep it clean and eliminate the navigation, leave them with the value they will receive.
