Landing page design is all about communicating your offer to visitors in a clear and direct way. Part of that communication process is making sure that you influence people to notice what you want them to. Using white space to declutter the page and adding a contrasting CTA button are just a few ways to accomplish this.
In the end, though, landing page design is not just about how elements look, but what message they convey to visitors.
Visual appeal is just one facet of landing page design – how page elements interact with each other and flow together determines whether your page will successfully engage visitors.
This is where visual hierarchy comes into play.
Visual hierarchy determines which page elements engage the visitor first and which elements they interact with (and in what order) while on the page. By establishing a visual hierarchy, you ensure that communication between the visitor and landing page is seamless.
Visual hierarchy can be achieved using the following techniques:
All of the above design elements are important, but this post will focus on the page scanning patterns that eye-tracking studies have shown to be relevant to reading content on the web – in particular, the F and Z patterns.
In 2006, the Nielsen Norman Group conducted what is considered to be one of the most useful and most cited eye-tracking studies today. During the study, they observed how 232 users viewed thousands of different web pages. The findings showed that users’ main reading behavior was relatively consistent across the various sites and tasks.
More specifically, users read in an F-pattern.
The F-pattern dictates that visitors first read the page in a horizontal direction, mostly along the upper part of the content area, then move down the page and read across a second horizontal line. Finally, visitors scan the left side of the content in a vertical movement.
This is what the movement typically looks like:
The three heat maps pictured above are derived from user eye-tracking studies of three different websites. It is also worth mentioning that the F-pattern does not have to follow a strict two-stem horizontal pattern (see heat map on the right above).
The color key is as followed:
The key thing to remember here is that the user’s eye movement starts in the top left and moves across the page before scanning down the page to search for an element they find engaging. For elements you want visitors to notice on a text-heavy page (like an image), placing them in the F pattern ensures the elements are seen.
Hootsuite uses an F-pattern on their landing page to highlight the most important elements (above the fold):
BigCommerce also uses the F-pattern on their landing page (above the fold):
Arranging your landing page elements so they fall into this particular visual order ensures that visitors go through your page and click the CTA button.
The F-pattern usually works for pages that are content heavy, but can certainly be applied to pages with less content.
This is the viewing pattern that emerges from these eye movements:
Just like F-patterns, the Z-pattern layout does not have to be an exact Z-pattern. The horizontal lines do not have to be exactly horizontal — they can be angled as well. Furthermore, there can be multiple Z’s throughout the page. Just make sure that:
The Lyft landing page features a good example of the Z-pattern:
Our last example features LinkedIn using the Z-pattern:
In the end, you can use the Z-pattern to get visitors to focus on elements that persuade them to move closer to the conversion goal.
Placing the most important landing page elements along visitors’ natural eye paths, whether in an F or Z pattern, ensures you create an engaging landing page experience.
Use the power of visual hierarchy on your landing pages to make sure visitors absorb your message and take the actions you want them to take.
Tyson Quick is the Founder and CEO of Instapage, the leader in post-click optimization. He founded Instapage in 2012 after seeing how performance and growth marketers were losing money in underperforming advertising campaigns. Since then his vision has been to create a suite of post-click optimization products that maximize returns through advertising personalization.
Please read our Comment Policy before commenting.