Sometimes designs are created meticulously and with great care, other times, haphazardly and almost unconsciously.Whether we do so intentionally or not, every time we design something, we give it a flow. The key is knowing how to control flow to accomplish our goals, particularly with something as focused as a landing page. How do you do this? Ask yourself three important questions:
- Where will the viewer’s eyes go initially to focus?
- What will influence how their eyes move and where their focus will go next?
- Can we design our pages to control their focus in order to guide them towards our goal?
There are several tools and theories that can help us find the answers to these questions, and help us design landing pages with an intentional flow, that leads your viewers to the CTA and makes them more likely to act.
Important among these tools, eye tracking has elucidated the way people look at things — both on the printed page and on the web. When it comes to landing pages, it’s especially important to understand how people will perceive the pages that we create:
This is where eye movement patterns come in.
Eye tracking:look where they’re looking
—
Eye trackinghas elucidated the way people look at things—both on the printed page and on the web.As a field of study, it came into its own in the 1980s, butobservations were being made about how the eye moves across a page as early as the 1800s. Historians credit Louis Émile Javal as the first to observe that rather than a smooth sweeping of the eyes across a page, reading involves a series of fixations and saccades—stopping to focus on a point followed by a quick movement to the next focus point.
Naturally this raised questions as to why one might focus on one thing instead of another, and how one decides where to move one’s focus to next. These questions formed the basis of over a century of eye-tracking research. While significant headway has been made in answering them, they remain a point of intrigue today.
The F-Pattern
The findings of the Nielsen Norman Group, compiled in various reports, remain perhaps the most cited and the most useful eye tracking resources in the design community. Chief among their findings, this report describes the now famous F-Pattern:
- Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
- Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
- Finally, users scan the content’s left side in a vertical movement. This last element forms the F’s stem.
The following heat maps demonstrate the F-pattern:
In the absence of anything placed intentionally to grab their attention, the F-Pattern describes the way a person’s eyes will move across a page that is dense with text, making it particularly applicable to blog posts and search results pages.
The important thing to note is that the eyes will start in the top left before scanning down the page to search for something interesting or relevant. If you have something you want someone to pay attention to (like a value proposition)—and your page is text-heavy—it’s a good idea to place it towards the top left to ensure it will get the attention it deserves.
It’s also worth mentioning that F-Patterns do not have to follow a traditional “F” with two horizontal stems. To demonstrate, Fleetmatic’s landing page shows three stems (logo, headline, CTA), but the F-Pattern is still clearly visible:
The Z-Pattern
Pages that are less informationally dense, or as Jerry Cao writes, “organized looser”, tend to elicit eye movement that resembles the letter ‘Z’. This so-called Z-Pattern has many of the same characteristics as the F-Pattern. But as Mr. Cao points out, “where simplicity is a priority and the call-to-action is the main takeaway,” the Z-Pattern will emerge instead of the F-Pattern.
This focus on simplicity makes the Z-Pattern uniquely suited to landing page design, where you want one singular focus to draw people in and encourage them to take action. To take advantage of the Z-Pattern, Brandon Jones, place your call to action along the Z path to make sure your viewer sees it. This will lead to more conversions.
Take a look at Offerpop’s landing page and how the Z-Pattern is applied, drawing more attention to the form and CTA:
The above examples use landing pages—focused pages with a single goal—to demonstrate effective use of the F and Z-patterns. Notice how the main component of each page, the CTA in the first example and the form in the second, is placed exactly along the path someone’s eyes will naturally take when they look at the page. Placing your most important components along the natural path like this, and doing a little bit of landing page optimization, will ensure you get the most conversions. Sometimes this natural path fits exactly the F or Z-pattern, but at its core the strategy is about using visual hierarchy to guide people.
Visual hierarchy: the key to good design
—
Both the F and the Z-patterns are extremely well documented, and have been used by designers to great effect on pages across the web. In the absence of any other intentionally created flow, these are the patterns people’s eyes will follow. And that is extremely useful knowledge to have when putting together a page.
Ultimately, however, design is about guiding people towards your desired goals. F and Z-patterns are without a doubt powerful tools, but even more powerful is the idea of establishing a visual hierarchy to guide people through a page.
In contrast to the F and Z-patterned pages above, let’s look at another example:
When you first look at this page, where do your eyes go?
- The woman’s face?
- Yellow price tag?
- Money back guarantee?
- The form?
- The graphic in the bottom right?
Each of this page’s elements has been designed to draw as much attention as it can, with the result being that none of them succeed. It’s like trying to have a conversation with someone in a room full of people that are shouting at you. With so many distractions, the page fails to focus your attention on the single goal of getting a “free SEO audit report.”
Notice the lack of visual hierarchy—it doesn’t follow either an F or Z pattern—making it more difficult to generate conversions. Think about it: if you came to this page, would you convert? Do you even know what to convert on, what the offer is, and is it immediately known to you? What would you do to fix the hierarchy and overall layout?
White space
In his post on WordStream, Fahad Muhammad explains how white space can be the key to establishing an effective visual hierarchy:
“All elements deserve a noticeable place on your dedicated page because it’s the balance between these elements that helps persuade the visitor to convert into a lead/customer… With the help of white space, you can establish a visual hierarchy for visitors by dictating which element they should see first and which element needs to follow. White space is the reason why your visitors will first look at your headline, then move to the copy, proceed to the form and finally your call-to-action button. White space allows you to provide spatial relationships between each page element—allowing you to guide your visitors through the page.”
Using white space to guide your visitors through the page makes the difference between an effective visual hierarchy and a page with no clear structure or indication of what to do.
Lyft’s landing page to sign up drivers gives each value proposition a huge white-space buffer, allowing them to each draw our gaze. A page with a clear visual hierarchy will convert at a much better rate because the people visiting your page will know exactly where to look, achieving both your goal and giving them what they came for.
Taking control of your designs
—
Design is a combination of art and science. Let’s look at one last example that demonstrates how eye tracking, visual hierarchy and human psychology can cue visitors to focus on what you want them to focus on.
You’ll notice the heat maps aboveare for the same page, the only difference isthe baby’s eye line. On the left, the baby is looking directly at you, and the hottest part of the heat map is on the face. On the right, the baby is looking at the headline, which directs our eye from his face to the headline and copy. This variation would likely perform better when A/B testing because visitors’ attention would be on the most important page elements. Humans automatically want to look where other humans are looking. By shifting the baby’s gaze, we have subsequently taken control of our visitors’ gaze and directed it towards the value proposition.
It’s not only important to understand structural rules, but also be sensitive to thecontent of our text and images. While the F-pattern and the Z-pattern serve as useful tools for structuring a page, you’ll find more success (and have a lot more fun) if you embrace the true power of design and create a visual hierarchy to guide people through the most important parts of your page. Take control of your designs and use them to accomplish your goals—you’ll be glad you did.
—
About the author:Nicolai Doreng-Stearns is a User Experience Designer at Instapageand is firmly committed to living his best life. When he isn’t designing intuitive experiences, he’s training Brazilian Jiu Jitsu, riding his bike through San Francisco and making terrible music.
