DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

The Fine Art of Landing Page Design: Using F & Z Patterns to Increase Conversions

by Today's Eggspert

In a saturated online world with an abundance of information, marketers are constantly battling for attention. You’ve likely read that online users have an attention span less than that of a goldfish. Therefore, the more organized and straightforward your strategy is for converting a lead, the better.

Over the last couple decades, eye-tracking studies have been performed to ascertain where consumer’s eyes move when they land on a web page. Jakob Nielsen even authored a book Eyetracking Web Usability which analyzes “1.5 million instances where users look at Web sites to understand how the human eyes interact with design.

Landing pages are one of the best marketing tools to capture your audience’s attention since they are a clear and concise way to control the first impressions visitors have of your brand and offer. To keep your visitors engaged, designing a landing page will help visitors remain focused on your offer so they convert, instead of bounce.

With so little time to connect with online users, several techniques have proven to be more effective including designing with the F and Z patterns in mind.

How do F-patterns and Z-patterns work?

The F-Pattern is the way our eyes read across the page when we scan content online. Our eyes move across website’ copy and other visual elements, quickly reading the page in a specific order.

First, viewer’s eyes move horizontally across the top of the page to read important headlines. Next, they proceed vertically down the left side of the page to view other notable page elements like numerals or bullet points. Lastly, they zip across the page again to read any bolded text or subheadlines.

Here is an example of the F-Pattern. Notice how the heat map resembles the letter “F:”

landing page elements eye tracking

The Z-Pattern leverages a visual hierarchy in a similar way, but with a few differences.

First, readers look from the top left to the top right, forming an imaginary horizontal line. Next, their eyes move down and to the left side of the visible page, creating an imaginary diagonal line. Last, they head back across to the right again, forming a second horizontal line. When viewers’ eyes move in this pattern, it forms an imaginary “Z” shape.

landing page elements Z pattern

While your landing page elements don’t need to follow a strict F or Z-pattern, you can make sure the most important page elements, copy, and calls-to-action fall along these visual hierarchies, to help draw attention to them and persuade visitors to take action on your landing page.

The psychology behind landing page element design

Focus can be challenging to capture in the digital realm, and to maximize on what we know, placing key elements on a path which the eye will naturally follow will give you a better chance of hitting the highest conversions possible. These crucial elements include headlines, images, bullet points, copy, form and CTA.

Since we know readers tend to progress from left to right, then top to bottom (scanning for important pieces of information on the page), it’s crucial to know what makes a piece of information seem “important” to the reader.

Whether your page visitors are reading pattern forms an “F,” “E,” upside down “L” or “Z,” the implications are the same for English speaking people who read from left to right and top to bottom.

Different designs for different landing pages

Depending on the offer, the page design will likely change. For example, a lead capture page with an “ebook” offer download is likely a short landing page with minimal copy where Z-pattern is best applied (see example above).

A sales landing page needs to convince people to buy, so it will likely need a longer page with a lot more copy where the F-pattern applies.

Regardless of your landing page’s primary focus, the goal of converting visitors remains the same. Keeping these visual patterns in mind will help you design custom landing pages with the highest level of efficacy possible.

Design examples

Before we show examples of the F and Z Patterns, let’s demonstrate how a landing page lacking in structure can cause visitors to bounce instead of converting. This Analog Devices landing page follows no clear structure or pattern:

Without a clear structure, your visitors’ eyes end up bouncing around aimlessly. While it does help that the CTA is a slightly different color than the rest of the page elements, the form and image are not aligned. Additionally, the block of copy is unstructured and uneven at the top.

This page would likely convert better if all the elements were left aligned or centered and didn’t seem to be randomly laid out. Given the minimal copy, this page could follow a Z-pattern to clearly direct visitors and lead them to complete the form.

With that example in mind, let’s now review some examples where brands took a more thoughtful approach to their landing page designs.

F-pattern landing page examples

This ebook landing page from Mitel follows a clear F-pattern:

What this page does well:

Your eyes quickly gather what the topic is with the clear headline across the top, see a visual of what you can expect when you download the asset, as well as easily scan the contents, which are organized into bullet points. The form only requests email, is encapsulated, and the CTA button uses a color which isn’t found anywhere on the page. This page also leverages white space to draw your eyes to the important content.

What could be A/B tested:

The hyperlinked Mitel logo and footer links could be A/B tested, removing the links in one version to not give visitors an exit link before converting. While having a privacy policy does help to instill trust in prospects, an abbreviated version could go directly on the landing page (or in a lightbox) and not send visitors away before they have a chance to download the lead magnet.

This Oz webinar page also leverages an F-pattern design:

What this page does well:

The clear use of white space draws prospect’s eyes to the copy and the form. The copy previews what you will learn in the webinar and helps the prospect decide if it’s worth spending their time. The headline also incorporates a clear value proposition and makes a convincing promise.

What could be A/B tested:

Lots of block copy make the page more painful to scan than it needs to be. This could be consolidated and simplified/structured to make it more readable. Additionally, the stock photo doesn’t seem to relate strongly to the content. Showing something more action oriented or a picture of the assets that the webinar covers could establish validity and lead to more registrations. Finally, the CTA blends into the background and isn’t very personalized. Something like “Improve my content now” coupled with an orange button would likely improve conversion rates.

Z-pattern landing page examples

This Oracle Report uses a Z-pattern design:

What this page does well:

Prospects’ eyes will follow a Z-Pattern from the logo to the stock photo, downward left to the visual of the report and then to the CTA. Oracle uses an arrow as directional cue on the CTA which is also on a different colored button than the rest of the page. The two-step form appears as a low barrier to entry, only revealing the four field form once the user has inserted their email and clicked continue. A visual of the report on the device also helps visitors envision what they can expect to receive.

What could be A/B tested:

Removing the links in the footer could be tested to see if it results in higher conversions. Also changing the generic headline of “report” to something more targeted such as “CMO report” might connect further with their audience.

This PayScale compensation report also utilizes a Z-pattern design:

What this page does well:

The page uses contrasting colors calling attention to the core elements. Visitor’s eyes naturally follow the Z-pattern going from the logo to the headline, then downward left to the report cover page and finally over to the form and CTA button. It also leverages a directional cue having the paper airplane point to the report title. The visual of the form is relevant to the subject matter and gives the prospect an idea of what to expect when they hit “GO!” Minimal copy that is broken up into bullet points makes this page very readable while explaining key takeaways of the report.

What could be A/B tested:

Shortening the seven field form may provide a lower barrier to entry and result in more report downloads. Additionally, the litany of exit links in the footer could be removed to limit the opportunity for visitors to leave the page before converting on the offer.

Design better landing pages

As with anything, designing landing page elements takes practice and an in-depth understanding of your audience and goals.

If you’re looking for more inspiration for your next campaign, head over to our comprehensive post highlighting 100 landing page examples. Understanding how users view and comprehend information can make or break the efficacy of your next campaign.

About the Author: Twila Liggitt is a Content Writer & Editor for Instapage, the most-advanced landing page platform for teams and agencies. Her specialties include digital marketing, content marketing, and writing about her agency experience. When she’s not working, she enjoys travel adventures, food/wine tasting, and reading literary masterpieces. Say hello on twitter!

No Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Today’s Eggspert

This article was written by today's Daily Eggspert. If you would like to contribute as an Eggspert, please reach out to us here.

NO COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

Show Me My Heatmap

Tools like @CrazyEgg & @mouseflow are a few user testing tools to make websites more awesome: hubs.ly/H01gDZZ0

HubSpot

@HubSpot