How to Create a Landing Page That Sells

This chapter is from the book 

Landing Page Design Guidelines

So, how exactly do you whip the landing page into shape so it answers visitors’ questions and meets business goals? Here are some effective guidelines to test on your site.

Establish credibility

As we mentioned earlier, it’s vital that a landing page represent a company well since they’re often the first contact with a visitor. A successful ambassador or salesperson will arrive with excellent references and present a sparkling, well-dressed appearance. A landing page can do the same through design, function, and visible references.

Use a professional, industry-appropriate design

A landing page provides visitors with a first, often subconscious, impression about a company. Employing a design that’s inappropriate for an industry, or that’s noticeably less professional than competitors, does little to increase visitor confidence in the quality of a product or service. And that initial impression can spread like a virus, infecting perception of the rest of the site.

Take a look at the sites of competitors and other authoritative sites within your industry. Include product review sites, industry-specific news sites, and resource sites. If it helps, print out their landing pages, home pages, and a secondary page from deeper in their site. Print out yours, as well, and lay all the prints side by side. How does your site design stack up? Does it look as professional as the other sites? Does it have a similar feel? Ask friends and colleagues for their opinions, too.

Include those excellent references

Include third-party sources who praise your company, service, or product. Industry awards, TV, newspaper and magazine quotes, certifications, and customer testimonials are all great. Ideally, you’ve selected them carefully for the best impact on the target audience. Avoid the temptation to overwhelm the page—and visitors—with references. Select up to three of the most compelling, and don’t let them clutter the conversion path.

Ensure everything works

Obvious display problems or functional errors—broken image references, misaligned displays, typos, and broken links—suggest to visitors that your company has equally slipshod manufacturing or service habits.

Simplify and separate

Until recently, companies created landing pages conforming to the site’s overall design, including the standard site header and navigation. It’s more effective, however, to simplify the landing page and separate it from the main site—visually and architecturally.

Why is this approach effective? It encourages the visitor’s attention to focus on your offer. Think of a landing page as a place to showcase your offer, like putting a spotlight on a Lamborghini or surrounding a diamond ring with a swirl of blue velvet. Instead of seeing distractions that have nothing to do with the immediate offer, visitors see what is most important.

Reduce or eliminate navigation

• “Why would I create a page without navigation? I want people to see ALL the fantastic content and choices we offer.”

No, you don’t. People aren’t coming to a site to see everything it offers, they’re looking for the one thing they’re seeking at that moment. This is especially true if you successfully drive targeted, well-qualified search traffic to a landing page. The most important, helpful thing you can do for visitors? Make it very clear you offer exactly what they want, then get out of their way so they can act.

Of course, it’s possible to go too far in limiting choices:

Reduce branding and other standard site elements

• “But why,” you ask, “would I create a page without my big beautiful logo and site header graphics? I want to make sure people know who we are.”

While it’s true you want to retain some branding for identification and credibility reasons, at this point a company’s identity is secondary to the offer. Devote as much real estate as possible to the offer. Also, there’s no need to match a site’s design literally. If you use a smaller logo and retain key branding elements like the company color palette, font treatments, and other branded motifs, visitors will effortlessly make the connection.

Make the landing page an extension of your ad

Many companies use templated landing pages. That is, they develop a single layout template, and then reuse it for an assortment of ad campaigns with slight differences in appearance, offer, and call to action. The reason for this is usually economic. After all, landing pages cost time and money to produce, and reusing a basic template saves resources in the short term.

But this approach ignores the importance of a consistent, seamless experience. To smooth the way for visitors, make the landing page an extension of the ad. This applies to the ad content, call to action, design, and tone.

Provide what the ad promised

Even the most forgiving visitor will be taken aback if you offer apples in your ad but carrots on your landing page. It’s annoying to respond to an ad, only to discover the advertised item isn’t in the store. At best, visitors will think they made a mistake by clicking the wrong ad. At worst, they’ll think your company is incompetent or pulling the old “bait and switch” routine. Either way, you just lost a potential customer.

The moral of the story? If an ad offers a free white paper on processor speed comparisons, make sure that’s exactly what’s available on the landing page. The additional conversions are worth the extra effort.

Match the wording of the ad’s call to action

Another fine point that makes a difference: match the wording of the ad’s call to action as closely as possible. If an ad says “Free Trial Offer,” repeat the phrase in the landing page’s call to action: “Get your free trial offer today.” A mismatch between the ad’s call to action and the landing page’s creates hesitation and doubt in the visitor’s mind.

Use consistent graphics and illustration

Did your marketing department create a cool new graphic treatment for your ad campaign? Make sure to use it on your landing page! Consistent imagery glues the conversion process together, creating an unbroken experience.

Maintain language and tone

Is your ad erudite and intellectual? Then don’t speak hip-hop on your landing page. Tone and language consistency is as important as imagery for creating a seamless flow.

Offer segmenting options for different audiences

There is often no way to learn in advance the audience to which a visitor belongs. For example, if a visitor performs a search for a very general keyword such as “printers,” it’s impossible to tell from that search alone whether the visitor is a parent, a small business owner, or a purchaser for a large enterprise corporation. So how do you greet these unknown visitors? How do you address the specific questions and concerns of multiple audiences on a landing page?

One way is to offer segmenting options that allow visitors to prequalify themselves. A landing page with segmenting options includes a clear, audience-specific path for each of the most important audiences you anticipate will see the page, as in this example:

Personalize to the visitor

Let’s say you’re trying to get the attention of a friend, Joe, who’s standing some distance from you. Would Joe be more likely to respond to a general “Hey, you!” or to the more specific “Hey, Joe!”? Which would a crowd in Seattle prefer to hear from an entertainer: “Hello, there, everyone!” or “Hello, there, Seattle!”?

It’s intuitive that when a communication is personally addressed to a specific audience it’s more likely to create and build a connection with that audience. Snail-mail marketers have used this technique for years, inserting recipients’ names into requests for donations and notices of sweepstakes winnings.

Landing pages can also benefit from this insight. Personalizing the look and wording of a landing page to a particular visitor or audience is a powerful way to capture and keep attention.

Use fewer, better graphics

Graphics have powerful uses on a landing page. They guide the visitor’s eye in the desired direction, convey mood and company identity, and emphasize compelling aspects of your offer.

Too many graphics, however, confuse and distract. They divert attention from the message and slow visitor action. Buttons, icons, charts, diagrams, smiling-happy-people pictures, and especially flashy-twirly animated things: oh my! Every graphic element has the potential to overwhelm the call to action. Thus... reduce the number of graphic elements. Eliminate the nonessential. Don’t decorate merely for decoration’s sake.

We’re not advocating removal of all graphics, of course. The right graphics can clarify your offer and have a measurable, positive impact on landing page effectiveness. For instance: a diagram may instantly communicate what several paragraphs of text usually explain. A photo can answer questions, clarify new or difficult concepts, and display the product.

On the next page we compare the graphics used on four landing pages that are all attempting to communicate a fairly challenging concept—software that enables remote access to another computer:

Choose the most effective media type for your offer

We discuss media choice in more detail in the Detail Pages chapter, but the key point to remember for landing pages is that the choice of a graphic also requires selecting the most effective media. By “media” we mean a range of visual presentation formats, including photos, illustrations, charts, videos, and animations.

Each media type has strengths and weaknesses. Photos are great for beauty shots but not very good for flowcharts. Videos and animations are terrific for demonstrations, but may be skipped or ignored by impatient visitors. It’s important to consider which media type will communicate your offer quickly, clearly, and with the most impact.

Create interest and desire with compelling copy

Facts alone are usually not enough to make a sale. Important? Yes. Interesting? Yes. Compelling? Well...

Visitors arrive at your landing page already somewhat interested in its offer; after all, their arrival resulted from an ad click or e-mail link. Now they need a reason to continue, an emotional connection to overcome hesitation. Compelling copy connects customers to your offer.

How is this done? This is an area worthy of much in-depth discussion, but some key points follow.

Speak the customer’s language

Don’t use corporate lingo, technical jargon, or “marketing speak” and expect visitors to respond to it. What we’ve observed during user testing is that even minor phrase differences—for instance “auto insurance” instead of the more colloquial “car insurance”—can have a dramatic influence on whether visitors complete the desired action.

What does this mean for the landing page? Make sure its language matches the language of the target audience. If your target audience is internal salespeople, use cool brand names heavily; for an audience of CTOs use technical terminology. For general or multiple audiences, however, be sure to include the common terms for your product or service.

This concept also has applications specific to Paid Search advertising. When a visitor performs a search and clicks on your paid ad, they’re sending a clear signal about how they think about your product. Ideally, the same search term they used—or something very similar—should show up in your paid ad and prominently on your landing page. This is a small but effective way to speak your visitor’s language, immediately personalizing the offer and making it more compelling.

Engage the visitor with benefits, reasons, or scenarios they can relate to

This guideline encourages you to translate your offering into something more personal—something that could benefit your visitor’s life. For example, if you’re offering low-cost retirement accounts, show how much a typical person might save in fees over 10 years, and as a result, how much more money they’ll have in their account by the time they retire. Answering the questions “What does my audience truly care about?” and “What problems does my offer solve for my audience?” will help you write truly compelling copy.

Include only the most important points

Your offer may have so many outstanding features it’s physically painful to leave any off the list. Remember: you have limited space and time to make your point. Provide immediate answers to only the most relevant, motivating questions about your offer. Other questions can be answered elsewhere.

Accommodate different reading patterns

Different visitors have different reading patterns, and your challenge is to provide enough compelling content for each pattern. Some visitors don’t read at all; another reason to include at least one strong image. Some visitors read every word; for them provide enough solid detail to satisfy their inquiry.

Other visitors are somewhere in between. They scan headlines, maybe read the first couple of sentences. For these readers you need clear headlines that emphasize the benefits and important information early in each paragraph.

Include the right amount of copy

How much copy is the right amount for your landing page? It depends on several things: the nature and complexity of your offer, your sales approach, and your audience’s willingness to read on the web. If the offer is a commoditized product like a movie DVD, not much explanation is required, or desired. If the offer is more unusual, complex or specialized, then more description, testimonials, and examples are needed.

If the offer requires a significant amount of copy, a split presentation is an effective compromise:

• Above the fold place a condensed conversion area that includes your essential points, main call to action, and action area (a button, or a form plus button). This gives visitors who don’t like to read a way to quickly scan the offer and take the next step.

  Fold

  The bottom edge of what a visitor can see of a web page without scrolling. A word originating in newspaper publishing.

• Below the fold, include more detailed information followed by another call to action and action area.
• Avoid a visual false bottom at the fold, or few people will scroll down. Arrange the page layout so at least one element—a graphic or a paragraph of text, for example—obviously crosses the fold-line.

  False bottom

  An effect created when a web page appears to end at the fold, due to a significant visual gap in the design or content at that position.

• If copy is lengthy enough to require much scrolling, repeat the call to action and action area every 2–4 paragraphs, or once per visual “screen.”
  

  Click to view larger image

This approach addresses visitors at different stages of the sales cycle as well as those with different reading patterns. As with any guideline, we recommend testing and tracking results to see what works best for your product, company, and audience.

Provide a clear call to action

Visitors want you to show them where to go and what to do next. A clear call to action that’s aligned with your ad’s call to action makes it easy for them to see the path ahead.

Be clear, obvious, and concise

Your call to action is the essential focus of the landing page, the place where you make the visitor’s next step perfectly clear. Trying to be subtle, clever, mysterious, long-winded, or timid at this point will hurt your landing page’s effectiveness. Instead, make the call to action a concise distillation of all the elements in the ad and on the landing page. Headlines, copy, graphics, and charts should all support the actionable magic words, whether Register Now, Add to Cart, or something else.

Avoid intimidating or unclear language

Some phrases sound more threatening, challenging, or difficult than others. Buy Now, for example, is often viewed warily, as if it may somehow be able to instantly debit money from one’s bank account if clicked. Silly or not, this language often represents too high a threshold of trust and effort to expect from your visitor. Yet, we see calls to action all the time that make our hackles stand up, for instance: Send Us Your Personal Information.

A few more “bad calls” and why they’re bad:

Bad Call to Action	Why It’s Bad
“Make Your Dreams Come True!”	Too vague, difficult to accomplish
“Improve the quality of your life by buying our vitamins online today using our easy order form”	Much too long
“Start Celebrating!”	Too vague, and has nothing to do with the actual action needed to reach the celebration
“Buy Instantly!”	Too demanding
“Go!”	Unclear, and adds no reinforcement of the messaging

Provide a secondary, “safety valve” call to action

As you design your landing page, consider offering a secondary call to action. This is simply a fallback or “safety valve” alternate action the visitor can take if they don’t wish to pursue the primary call to action just yet. The safety valve call to action is usually made less prominent on the landing page than the primary call to action, through the use of visual treatment, positioning, or both.

• “But I thought a landing page was all about focusing on a single goal! Why would I want to offer another, different action for the visitor to take?”

What if the visitor isn’t ready to take your primary offer? Would you prefer to stick to your guns and lose a prospect entirely? Providing a secondary call to action allows you to have a partial win that continues some level of contact.

Some examples of complementary primary and secondary calls to action:

Primary Call to Action	Secondary Call to Action
“Add to Cart”	“Download a product brochure”
“Review Order”	“Questions? Chat live with one of our helpful team members”
“Download Trial Now”	“See Demo”
“Make Donation”	“Learn more about our mission”

Secondary calls to action are especially important if the primary call to action is complex, pricey, or requires a high level of commitment. The secondary call to action provides a simpler, easier path that makes the visitor more comfortable. For instance, if the product is expensive, offer a Download Product Brochure link.

And don’t be afraid to provide offline alternatives. Many visitors are more comfortable talking to a live person on the phone than filling out an online form, so a phone number is an ideal secondary call to action.

Whatever your secondary call to action, be sure to implement tracking for these conversions along with your primary call to action conversions.

Before:

After:

Keep form design clean and simple

We discuss form design in more detail in our Forms chapter, but some key points bear repeating here. Forms are intimidating enough without making them look unnecessarily complicated. Even complex forms can appear less difficult when they have a clean layout and simplified treatment. An “easy to do” appearance increases the odds the form will be completed.

Ask for the minimum amount of information you need

Reducing the number of fields in a form can dramatically increase its completion rate. So, take a hard, ruthless look at your form. Which fields are really necessary? How will each field be used? Is it truly vital, or just nice to have?

But wait. If your form lacks fields that are crucial lead qualifiers for your business you may trade too much lead quality for quantity. Deciding which form fields to keep is a balancing act. Too many form fields and the completion rate drops. Too few, and your sales team wastes time on poorly-qualified leads or you don’t receive enough information to complete a transaction.

What we generally see, however, are forms with far, far too many fields.

Make buttons easy to find

A button is the tool visitors use to act, so why are so many buttons hard to find? We’ve heard live feedback from usability testing that will curl the hair of any web marketer:

• “Where’s the Buy button? I can’t find the Buy button!”
• “Well, I want to get to the next page, but how do I do it?”
• “I just can’t figure out where to get started with this thing.”
• “Oh, that button? No, I didn’t see that one.”

To avoid feedback like this, improve the visibility and clarity of your buttons with these guidelines:

Make buttons look like buttons

Like calls to action, buttons work best if they aren’t subtle or mysterious. They should look exactly like what they are: buttons. This doesn’t mean they have to be red rounded rectangles with a big drop shadow, but they should be easy to distinguish from their surroundings, have enough buffer space to separate them from other elements, and look somewhat like a physical button.

Buttons That Look Like Buttons	Buttons That Don’t

Make buttons large enough to read and click

Reading and clicking your buttons should not be a test of vision and dexterity. Of course, large button size can be taken too far, but we generally see buttons that are too small and hard to read.

It’s easy to allow factors other than conversion—like available space in existing page templates, rigid design standardization, etc.—to drive button design. But the clickable action item on a landing page is one place where it’s worth bending the standards. Give important buttons the size and legibility they deserve; they’ll reward your attention with a better conversion rate.

Buttons That Are Large Enough	Buttons That Aren’t

Make important buttons more prominent

When we recommend making buttons large, we don’t mean make every button look the same. Instead, important buttons should be more prominent than less important buttons. This can be achieved through size, color, placement on the page, or a combination of all three. Visitors should be able to tell at a glance which buttons corresponds to the most important actions on a page, which to less important actions, and so forth.

Use clear, concise, inviting labels

On landing pages, button labels often summarize the call to action. These labels should be clear, concise, and inviting. Take our quick button label quiz to see what we mean by this:

Notice that the selection supports and reiterates the call to action, which is concise, clear, and enticing in its own right. “Register” and “Register now” are both clear, but they concentrate on the process (registering) rather than the much more interesting end result (getting a free newsletter).

Buttons with Clear Labels	Buttons without

Be clear about what’s coming next

People like to know what to expect, and are annoyed if they don’t find it. Your button labels and design set the appropriate expectation for your visitors, mentally preparing them for whatever comes next.

Setting expectations is especially important if a landing page is the first step to a multiple-step process. If you don’t indicate the next step, you’ll likely see a large dropoff rate.

Of course, it’s possible to overdo it. For instance, there’s usually no need to add explanations to common buttons for standardized procedures like Checkout and Search:

However, giving some indication of the process with a simple Continue is preferable to surprising the visitor.

Place buttons intuitively

A final note on buttons: Don’t hide them! Even large, colorful buttons can be missed by visitors if they’re in an unexpected location on the page. Place them in a visitor’s natural scanning path. For most western visitors, this means the button that completes a process appears in the lower-right portion of your landing page.

For longer pages, place a button both above the fold and again at the end of your content, if your content extends below the fold.

Ideally, your overall landing page layout should guide the visual flow directly to the most important button, so visitors don’t have to work hard to find it.

Putting it all together

We’ve talked about a lot of individual design elements. But how can you tell which combination of these elements creates the best-performing overall layout?

First, we recommend starting with a professional design. An experienced designer who really understands the importance of conversion will intuitively solve many design challenges. Next, test variations of the page against each other and compare results. One way to do this is by using a simple technique called A/B testing.