Layouts - Instapage Guide

Landing Page Design Best Practices

Chapter 3

Layouts

The order in which the elements appear on your page also plays a vital role in getting conversions.

When designing the layout, it’s important to keep in mind the way your visitors are likely to view your page. There are essentially two common ways your visitors scan your pages as noted through eye-tracking studies: the F-pattern and the Z-pattern.

The F-Pattern

The F-pattern (aka the “fast” pattern) is named because of the direction a user’s eye travels when they scan a page, which looks something like this:

F Pattern Diagram Example

An eye-tracking study performed by the Nielson Norman Group of 232 users showed that the participants’ primary reading behavior remained fairly consistent across various websites. This reading method resembled the letter F and had the following components:

  1. Users first read in a horizontal line, usually starting from the upper part of the content area.
  2. Then, users moved their eyes down the page and read in a second horizontal movement.
  3. In the end, users scanned the page from the left side in a vertical movement.

The eye-tracking study didn’t conclude that the user only looks at these three areas. Rather, it concluded that eye movement was quicker and spottier at other sections of the page.

What this means for your landing page

Since you know how people will likely view your page, use that knowledge to place the most important elements exactly where your visitors are likely to take the most notice.

The F-pattern works for content-heavy pages, so the pattern works well on longer sales pages. However, you can also design your short-form pages keeping this pattern in mind.

This is how visitors will see the Fleetmatics page:

Fleetmatics F Pattern Page Example

  1. The user starts reading the page in a horizontal line; this is where they’ll see the company logo and contact number.
  2. They will then read in a second horizontal line; this area showcases the main headline and image.
  3. Finally, they’ll scan the page in a vertical movement; this is where they’ll see the CTA button.

The Z-Pattern

The Z-pattern, similar to the F-pattern, is a name given to the way a user views a page. While the F-pattern may be more appropriate for content-heavy pages, the Z-pattern is mostly meant for landing pages that contain minimal copy.

The Z-pattern reading method has the following order:

  1. The user starts from the upper left corner of the page and does a quick scan across the top.
  2. The user then looks left and down in a diagonal path simultaneously.
  3. In the end, the user’s line of sight again moves across a horizontal line from left to right.

Z Pattern Diagram Example

Let’s look at the Offerpop page as an example:

Offerpop Z Pattern Page Example

This is how the Z-pattern will look like on this page:

  1. The visitor will start reading horizontally, starting from the upper part of the content area. This area features the primary headline and image.
  2. They will then move down the page and read diagonally. This area features the body copy.
  3. In the end, users will scan the page from the left side in a vertical movement. This is where the page has the lead capture form and call-to-action button.

The Page Fold and What It Means for Your Landing Page Design

The fold originally comes from the newspaper industry. Newspapers placed an intriguing headline and an enticing graphic “above the fold” because this was the visible part on newspaper stands.

In the internet age, the fold is the area of a web page that is visible to the visitors immediately upon landing on a page. The fold is not a definite line because it varies from the size of the screen you’re looking at to a particular web page you’re viewing.

To demonstrate, if your pixel screen resolution is of 1366 X 768 then the area highlighted in red below is where the page fold would lie:

Above the Fold Page Diagram Example

According to most web designers, an average fold line placement is approximately at 1,000 pixels wide and 600 pixels tall — this is mostly true for common types of monitor/browser combinations of 1024 X 786 pixels. However, with the rise of mobile browsing the most common dimension for the page fold is either 320 X 568 or 360 X 640.

The debate about the fold came into conversion optimization because marketers wrongly assumed that visitors will not scroll. This wrong assumption influenced most marketers to stuff every important page element (relative to conversions) above the page fold.

The problem with this strategy is that you will often see a very busy landing page like this:

SearchBerg Landing Page Example

Every element on this “landing page” is stuffed above the fold out of fear that the visitor won’t scroll.

Well, the truth is that visitors do scroll.

They scroll down your page if you’ve convinced them to do so by how you’ve designed the page above the fold.

In fact, according to Google’s report, The Importance of Being Seen: above the fold is not always viewable, whereas below the fold usually is:

Above the Fold Data Chart Example

If you want your visitors to scroll below the fold, convince them above the fold that scrolling is worth their time.

This Campaign Monitor landing page has placed convincing elements above the fold, making sure that visitors will scroll below the fold to get the remaining information:

Campaign Monitor Landing Page Example

How to Reduce Friction on Landing Pages

Lead capture forms can be intimidating. Not everyone feels comfortable giving their personal information to a brand they don’t know. Visitors also don’t usually like forms because they give off a demanding vibe.

When you place the form too soon on a landing page (i.e. before you have adequately described your offer), you negate the principle of reciprocity we mentioned in chapter 2. A prematurely placed form asks visitors to give something to you before you’ve given anything to them. This causes conversion friction on landing pages.

This conversion friction makes your visitors hesitant to convert on your landing page.

There are essentially two ways to remove friction from landing pages:

  • Add a privacy policy or terms of use link near your form.
  • Use a two-step opt-in form to collect leads.

A two-step opt-in form allows you to “hide” your lead capture form from plain sight because the form only appears once your visitors click the call to action button. This type of form doesn’t cause conversion friction because visitors only get to see the form once they’re convinced about your offer.

When a two-step opt-in form is used, visitors feel in charge and more comfortable about making the click.

Here is what the initial screen looks like on one of Instapage’s landing pages:

Instapage Landing Page Example

Once a user clicks on the blue CTA “Show Me The Techniques,” the two-step opt-in form appears:

Instapage Two-Step Opt-in Example 2

Your Landing Page Should Only Have One Exit Point

The purpose of your landing page can vary, but the number of goals on the page doesn’t.

Since there is only one conversion goal, there should also be only one exit point — the point that takes your visitors to that conversion goal.

This exit link is your landing page call to action button.

There should be no navigation links present that cause people to leave and land somewhere else. There is, however, one exception to this rule — a link to your privacy policy (as mentioned above) because it helps establish trust. If you choose to add a privacy policy, try having it open in a “light box” that keeps the person on your landing page (and doesn’t take them to a new tab or open a new URL within the same tab). Doing this helps keep their attention on converting.

For it to be a true landing page, no other links should be permitted because the only thing extra links do is distract your visitors from your page’s conversion goal.

Take the Act-On’s landing page as an example:

Act-On Landing Page Example

The navigation bar at the top ruins this perfectly good page because these links act as exit points and distractions from Act-On’s product demo conversion goal.

Now let’s look at this Autopilot landing page:

Autopilot Landing Page Example 3

There are zero distractions on this page. The only exit link provided is connected to the conversion goal — the call to action button.

In the end, there is no room for navigation links on landing pages, especially not entire headers and footers that can easily hurt your conversion rates.

Choose a Chapter

Sign Up for a 14-day Free Trial

Maximize your ad spend while significantly lowering your cost of customer acquisition.