How Experts Arrange Landing Pages That Convert - Instapage Guide

How Experts Arrange Landing Pages That Convert

Last updated on August 15, 2017

Creating a landing page involves more than haphazardly throwing the elements from chapter four on a web page. Those elements need to be arranged correctly to persuade visitors to take action.

To do that, you’ll need some knowledge of design concepts rooted in Gestalt psychology, along with an idea of how people read on the web.

How people read on the web

Around 2006, researchers at the Nielsen Norman Group learned that the findings from Munich’s Direct Marketing Association translated to the internet. In a study that tracked how 232 internet users viewed thousands of web pages, they noticed that…

  • Readers scanned across the top of the page first, entering it through the dominant headline.
  • Then they progress down the page, skimming across when they see bolded subheadings.
  • Afterward, they continue scanning vertically down the left side of the page, stopping to read when they notice formatted text.

The researchers named this the “F-pattern” for its shape:

F Pattern Chart Showing the Visual Shape

Though, they also noted that people’s eye movements don’t always form a perfect “F:”

Obviously, users' scan patterns are not always comprised of exactly three parts. Sometimes users will read across a third part of the content, making the pattern look more like an E than an F. Other times they'll only read across once, making the pattern look like an inverted L (with the crossbar at the top). Generally, however, reading patterns roughly resemble an F, though the distance between the top and lower bar varies.

Whether their reading pattern forms an “F,” “E,” upside down “L” or “Z,” the implications are the same for English speaking people: Readers progress from left to right, then top to bottom, scanning for important pieces of information on the page. So it’s crucial to know what makes a piece of information “important” to the reader.

Gestalt psychology and visual hierarchy

In the early 1900s, three German thinkers began forming the foundation of Gestalt psychology, a theory of visual organization that can be summed up in one commonly known phrase: “The whole is other than the sum of its parts.”

The founders of the theory proposed that humans don’t perceive their surroundings individually and equally; instead, they make sense of them in the context of the whole. From their research, 8 laws of perceptual organization were developed. One of them, the law of similarity, describes how people group together individual elements based on how alike they are to their surroundings.

For example, in the image below, most people see three rows of white dots and three rows of black dots instead of 36 dots, or 6 rows of dots, or 6 columns of dots:

Column Showing Black and White Dots

The reason is our tendency to organize things based on their similar characteristics. And because of this tendency, our attention is specifically drawn to things that are different from those groups.

The Gestalt psychologists called these different things “anomalies.” The red jellybean below is an anomaly because it stands out from the group of similar yellow jellybeans:

Landing Page Anomaly showing a red jellybean among yellow jellybeans

Because our attention is drawn to anomalies, “different” has become synonymous with “important” in an age when advertisers are at war for impressions. On your landing page, the most important thing to your visitors is what attracts their attention first. The second most important thing is what attracts their eyeballs next, and so on.

Since readers don’t read, but instead skim, it’s important you create a visual hierarchy that highlights the most important information on your landing page. You need to make sure that, even at a glance, they can quickly identify why they should claim your offer.

Drawing attention with anomalies on your landing page

Together, these anomalies will form a visual hierarchy. The most attention-grabbing anomaly is at the top of the hierarchy, the second most attention-grabbing is second priority, and so on. If you’re optimizing your page to be readable at a glance, this is what you’ll want to highlight at the very least:

1. Your headline: It should contain your USP in a benefit-oriented fashion. Let visitors know what the biggest advantage to claiming your offer is.
2. Your benefits: Every visitor should be able to quickly identify what the benefits to claiming an offer are. Features are not important. Instead, it’s the benefits those features provide that need to be highlighted on the page.
3. Your call-to-action: Once your visitors know why they should claim your offer, they need to know how to claim it. That’s where your call-to-action comes in. It should be attention-grabbing and positioned where it’s easily seen.

Your hierarchy will vary from page to page. Sometimes, for example, an image will be the biggest attention-grabber. Other times, you’ll want to work testimonials into the hierarchy.

However, these three elements should be present on every landing page. Here’s how to highlight them in a way that makes them readable even at a glance.

The characteristics of a landing page anomaly

Making your headline, benefits, and call-to-action noticeable on a page with many elements takes some design know-how. To create a visual hierarchy, here’s what you should manipulate:

  • Size: Bigger = more important. Smaller = less important.
  • Weight: Darker = more important. Lighter = less important.
  • Color: More contrast = more important. Less contrast = less important.
  • Density: Several elements packed together = more attention. Spread out elements = less attention. (This doesn’t mean you should pack all your elements into one small space).
  • White space: Positive space = more important. Negative space, White space = less important.

Take a look at how DigitalMarketer manipulates them on this landing page to create a visual hierarchy:

DigitalMarketer VIsual Hierarchy Example

Let’s break down the elements of visual hierarchy on this page:

  1. The headline = big, heavier weight, positioned high on the page
  2. The subheadline = big but smaller than the headline, differently colored, more heavily weighted than the body copy
  3. The benefits = bulleted, positioned below the headline, more heavily weighted than unformatted body copy
  4. The CTA button = big, brightly colored, positioned to the right of the benefits (or below) to accommodate the F-pattern of reading. A directional cue in the form of an arrow helps guide the visitor from the copy to the CTA button.

Similarly, your landing page should draw attention to the headline, benefits, and CTA at the very least. If you’re using elements like images and subheadlines, they shouldn’t get in the way of the reader’s ability to determine your USP and the benefits of your offer, or click the CTA afterward.

Look up at the image on the DigitalMarketer landing page. It doesn’t interrupt the flow of the user, who arrives at the CTA by reading in the shape of an L (headline, benefits, call-to-action) or F (headline, image, benefits, call-to-action).

Aim to design similarly: First, grab your visitors’ attention with a compelling image or headline; then draw them to your benefits; and lastly, guide them to the form/call-to-action button. Here are a few more examples of this design in action:

1. Marketo

Marketo Landing Page Design Example

2. Microsoft

Microsoft Landing Page Design Example

3. UserTesting

UserTesting Landing Page Design Example

This design in particular is popular on many landing pages because it naturally guides the visitor to the CTA button. And if that call-to-action button is designed correctly, it will be highly noticeable. Here’s how to use color to create an attention-grabbing button.

Choosing a conversion-centered landing page color scheme

Though many marketers believe it, choosing a color scheme has little to do with the psychological meaning of a hue. Countless bloggers claim “blue means trust” or “green means go.” Here’s an excerpt from that button color case study discussed in chapter 3:

Green connotes ideas like ‘natural’ and ‘environment,’ and given its wide use in traffic lights, suggests the idea of ‘Go’ or forward movement.

The color red, on the other hand, is often thought to communicate excitement, passion, blood, and warning. It is also used as the color for stopping at traffic lights. Red is also known to be eye-catching.

While not completely useless, these statements have a major flaw: They’re based on cultural associations. For example, in the western world the color red symbolizes danger; but in China, it symbolizes happiness, celebration, and luck.

Instead of designing your page based on these largely subjective color meanings, it’s more important to design based on color theory. With it, you can create contrast between your background, form, and CTA button, which contributes more to conversion rate than subliminal messages. Here’s how to design a scheme that converts:

Use the 60-30-10 rule

Studies have shown that simpler is better when it comes to picking a conversion-centered color scheme. Three hues are an ideal number for guiding visitors toward your call-to-action button.

To pick those three colors, Jared Christopherson from Yellowhammer suggests using the “60-30-10” rule of color in web design. Here’s how it works:

Choose an accent color

An accent color is going to be the brightest and boldest on your page. It should draw attention to the CTA button with a hue, tint, or shade that contrasts the rest of your color scheme. Only 10% of your landing page should be filled with your accent, and a safe way to choose it is by starting with a color from your logo or its variations.

Coordinate with a base color (30%)

Once you have your accent chosen, the next step is picking a base color for your header, form, and footer on which it displays well. On the color wheel, pick a tone, tint, or shade, that’s opposite your accent to give it the most contrast. This is called a “complementary” color:

Complementary Color Wheel

Choosing a split-complementary color will also create the same contrasting effect. These are colors next to the hue that’s opposite your accent color. In the above photo, that would be yellow-green and yellow-orange. Here’s another example:

Split-Complementary Color Wheel

Complementary to blue is yellow-orange; and next to yellow-orange are blue’s split-complementary colors: yellow and orange. Overall, your base color will fill 30% of a landing page’s visual space.

Lay it all on a soft background (60%)

The background color takes up 60% of a landing page’s visual space. This color should be soft and nearly unnoticeable. Generally white is a safe choice here since all tints, tones, and shades display well on it — including the color of your font, which is crucial for readability.

If you’re firmly opposed to white, choose a color that’s monochromatic or analogous to create a subtle background.

Analogous colors are neighbors on the color wheel. If your base is blue, you might choose blue-green or blue-purple as a background.

Analogous Color Wheel

Monochromatic colors are all the variations — tints, tones, and shades — of one particular hue. If your base is yellow, you might try combining it with:

  • White to create a lighter tint.
  • Grey to create a darker tone.
  • Black to create a dark shade.

Monochromatic Color Wheel Chart

Examples of conversion-centered color schemes

Conceptualizing these color schemes is easiest with visual examples. Here are a few landing pages, along with descriptions of the colors used for their background, base, and accent:

Infusionsoft

Infusionsoft Conversion-centered Color Scheme on Landing Page

Background: White
Base: Grey
Accent: Orange

This is a great example of how a landing page should draw attention to important elements with color. Notice how the base and background are different, but both subtle, and the most persuasive information on the page is highlighted in orange: the CTA button and numbers relating to ROI.

TurboTax

TurboTax Conversion-centered Color Scheme on Landing Page

Background: White
Base: Blue
Accent: Orange

Here’s another great example of a conversion-centered color scheme. Your eyes barely notice the white background or the blue base. Instead, they’re drawn to the orange accent color on the CTA buttons.

Hit Search

Hit Search Landing Page Example

Background: White
Base: Light grey
Accent: Red

Here’s an example of what not to do. The only color on this landing page is in the featured image and on the logo. These elements draw the eyes of curious visitors but don’t provide much value. To the right, the form without a base color and a translucent ghost CTA button fail to draw the attention of scanning prospects.

MarketingProfs

MarketingProfs Landing Page Example Showing poor use of Colors

Background: White
Base: Grey
Accent: Green

Here’s another example of what you should stay away from. This time, MarketingProfs does a great job of choosing a background and base color, but they use their accent color, green, a little too liberally. A quick fix could improve the page’s ability to draw attention much more effectively: Change the top portion of the page — on which the text “Build a SQUAD around your brand” sits — from green to grey. The result is a subtler base and an accent that grabs more attention.

Learn how to pick the right type of page for your campaign

You’ve learned a lot so far, and there are only two more chapters to go. By now you should know:

  • The benefits that landing pages have over most web pages.
  • What kinds of campaigns shouldn’t be run without a targeted landing page.
  • What persuasive elements every landing page needs to convert its visitors.
  • How to arrange landing page elements and colors to subtly guide your prospects toward conversion.

The last thing left to learn is which type of landing page will produce the best results for your campaign. There are five main kinds, and the one you choose will depend on a number of factors. Find out how to pick the right landing page in the next chapter.