The Anatomy of a Landing Page That Converts - Instapage Guide

What is a Landing Page?

Chapter 4

The Anatomy of a Landing Page That Converts

Converting a visitor takes the cooperation of many design elements. Together, they not only need to form a persuasive argument, but a usable landing page as well. At the bare minimum, here’s what you’ll need to include on your landing page to compel prospects to act:

Non-existent navigation

In most cases, navigation links are helpful to website visitors who want to learn more about your business via different pages like “About” or “Services.” On your landing page, though, they shouldn’t be needed. Here’s why…

Your landing page is a virtual elevator pitch. It’s a one-page summary of your offer that provides visitors all they need to know to decide whether or not to convert. If it’s not relevant to the offer, it shouldn’t be included in your design.

That means most of the information on your “About” page — like the story of how your company started — probably isn’t necessary. Your blog content isn’t either.

Every time you offer visitors a link to another page on your website, you offer them an escape route. And by doing that, you’re killing your conversion rate. Here are two case studies that prove it…

HubSpot tested two versions of a landing page — one with navigation links, and one without:

HubSpot Landing Page Navigation Tests

Here were the results:

HubSpot Landing Page Navigation Test Results Chart

Every statistically significant test showed that landing pages without navigation converted more visitors than ones with navigation. In one case, removing navigation boosted conversion rates by nearly 30%.

Another case study from Yuppiechef and VWO showed something similar, but even more impressive. Here’s the original:

Yuppiechef.com Landing Page with Navigation

And here’s the variation, without navigation:

Yuppiechef.com Landing Page without Navigation

This one boosted the conversion rate by 100%!

And while these tests focus on navigation links in the header of your landing page, there should be no navigation links anywhere in your design. They shouldn’t be in your subheads, body copy, or even your footer. It’s been mentioned multiple times but it’s worth repeating: Navigation links kill conversion rates.

An alluring headline

Without a call-to-action, no one will be able to convert on your page; without benefit-oriented copy, they won’t know why they should. But without an alluring headline, your visitors won’t stick around long enough to see any of the other elements on your landing page.

That makes your headline, in a way, your most important design element. Here’s how to make the most of it:

How to create an effective headline

You may not realize it now, but the subheading above this text contains a powerfully persuasive phrase. It’s likely been used in more headlines than any other string of words since the dawn of modern advertising — and for a reason: It works.

That phrase is “How to.”

And the reason it works is because it plays to visitors’ self-interest. When they see a headline beginning with the words “How to,” they know they’ll learn, or improve by claiming and using the content. Here are a few examples from current campaigns:

  • SEMrush Team: How to Get Customers to Your Local Business with Facebook Ads
  • Social Media Examiner: How To Use Facebook Stories For Marketing
  • Content Marketing Institute: (New Webinar) How to Build Your Email List
  • Eric Sui: How to Analyze Your Competition in Less Than 10 Minutes

Of all strategies, this is the safest to use. You can’t go wrong with a headline that starts with “How to.”

On top of the need to improve, there are other innate needs we all possess that skilled copywriters can take advantage of…

The need to satisfy curiosity

When we read headlines like “The One Skill That Will Take Your Writing From Good To Great,” we can’t help but click through them. The reason is something called the “curiosity gap.”

According to Joanna Wiebe of Copyhackers, who used the curiosity gap to boost clicks on a pricing page by 927%, the curiosity gap is defined as:

“The space between what we know and what we want or even need to know.”

Here’s an example, from the A/B test she conducted…

First, variation one of the pricing page:

Copy Hackers Pricing Page Version 1

Second, variation 2 of the pricing page:

Copy Hackers Pricing Page Version 2

The results of the test were as follows:

Copy Hackers Pricing Page Test Results Chart

Clicks to the gold plan in variation one were boosted by 927%. A closer look reveals why:

You’ll notice that, on the first variation, the gold plan isn’t listed in the pricing infographic. Instead, it’s just below it. The text reads:

“Got a big list? Choose the gold plan for up to 350,000 contacts, 3.5 million emails per month, and 4x the speed.”

The one thing it was missing: price. Because users wanted to know how much the gold plan cost, and because it wasn’t listed on the page like the other plans were, they had to click through to find out. Hence the boost in clicks.

Some curiosity headline examples:

  • eMarketerFYI: (New Report) Uncover Email’s Hidden Metrics
  • NextDraft: This Is What Drives Us
  • Eric Siu: Swipe this to grow your company

Be careful when creating this kind of headline, though. Relying on curiosity alone to get your content read is dangerous. If the curiosity gap is too large, visitors may not be tempted to read the rest of your landing page at all.

For instance, in the examples above, “This Is What Drives Us” is a headline that creates too large of a gap. Readers will likely wonder, “What does that even mean, and why should I care?”

The best curiosity headlines include an element of self-interest. Visitors should never have to ask themselves “Why should I care?”

A better example is the “Swipe this to grow your company.” The element of curiosity is there, and claiming whatever “this” is will help readers grow their business.

The need to solve our problems quickly

A universal truth about humans is that we’re all inherently lazy and greedy. Some say it’s evolutionarily embedded within us: We only exert effort when we have to as a way to conserve our energy for survival-related tasks.

That means we want the most return for the least amount of work — always — which is why “quick and easy” headlines work so well. They position your offer as an effortless solution to prospects’ problems.

Here’s an example from AWAI:

AWAI Quick and Easy Headline Example

The words “fastest” and “easiest” draw the reader in, as does the phrase “just 10 exhilarating and highly-productive hours.” Most people would jump at the chance to learn skills they can turn into a six-figure career in such a short amount of time.

This can work for nearly any product or service. Ask yourself: What does my offer turn people into?

Software can create agile marketers; courses can create master storytellers. Determine how your product or service transforms your visitors, and let them know in your headline.

The need to stay up-to-date with knowledge

As the world advances at a frantic pace, we all have a need to keep up with the newest tools and knowledge to solve our problems.

If your offer is a new arrival that can improve your prospects’ lives in a way they’re not familiar with yet, it’s important to let them know like these headlines do:

  • Introducing LinkedIn Lead Gen Forms
  • Attention sophisticated marketers and early adopters: Be among the first to try self-service Sponsored InMail
  • 2016 Email Marketing Metrics Benchmark Study
  • NEW DATA: Does Social Sharing Impact Organic Ranking & Cost Per Click?

As is the case with quick & easy headlines and curiosity headlines, news headlines work best when combined with self-interest. Without a reason to click through, visitors won’t.

A compelling call-to-action button

Designing an effective call-to-action button is more complicated than you’d think. It takes more than simply throwing words on a shape that’s hyperlinked to your “thank you” page. Carefully, you need to pick the right copy, size, shape, location, and color.

1. Copy

The traditional call-to-action makes little sense. Up until now, marketers have focused on emphasizing what readers have to do to claim an offer, using words like “Download” and “Request.” But usability expert D Bnonn Tennant thinks CTAs should be written a different way:

After spending hours on funnels and objectives, sequences and timings, it’s only natural we start thinking in terms of what our prospects must do to trigger the events we have planned.

That’s why we talk about the call to action — we are asking our prospects to do something.

The trouble is, that’s backward. Prospects want to know what they get, not what they have to do. Rather than calling our prospects to action, we should be giving them the payoff we’ve promised. We should be emphasizing what you will do for them, not what they must do to get it.

For example, Impact Branding & Design used the idea to optimize a CTA button on an ebook landing page. The original button read “Free Download:”

Impact Branding & Design Ebook Landing Page Free Download

The variation, though, emphasized the benefit of claiming the download with the copy “Show Me How To Attract More Customers”:

Impact Branding & Design Ebook Landing Page Attract Customers

The new button improved conversions by nearly 80%:

Impact Branding & Design Ebook Landing Page Test Results

Take another example, this time from Empire Flippers, who changed their CTA from “Join Us” to “Make Money Flipping Websites.” The result was a 33.1% boost in conversions:

Empire Flippers Landing Page CTA example

Here’s one last example to drive the point home, this time from Roader Studios. First, the CTA before:

Roader Studios CTA Version 1

Then, the adjustment, which brought an 8.39% increase in conversion rate:

Roader Studios CTA Version 2

The next time you create a landing page offer, don’t make your visitors work to claim it. Instead, get them excited to claim it by emphasizing the benefit of doing so on your button (exception: if you’re creating a sales page. In this case, it’s best to be clear with a CTA like “Buy” or “Purchase” or “Donate,” so prospects know their card will be charged when they click the button.)

Beyond copy, there are three things you need to keep in mind when designing your CTA button:

2. Size

If your button is too small, it won’t just be harder to notice; it’ll be harder to click too. Most people access the internet via mobile devices now, which means your button has to be a big enough target for your prospects’ fingerpad.

An MIT study shows that the average touchpad is between 10 and 14mm, which makes 10x10mm a good minimum button size:

Graphic showing the average Touchpad size between 10 and 14mm

Any smaller than that, research indicates, and your button will be too little of a target. Visitors will frustrate themselves trying to push it:

Graph showing the average touch size for fingers

3. Shape

If you make your button in the shape of a star, chances are visitors won’t know it’s a button. That’s because they have a preconceived idea of what a button looks like based on encounters in real life and online.

The keys on their keyboards are buttons they’re used to pressing, so are ones online that look like this:

Picture showing a blue rectangular button with "Button" text included

Here’s an example of a button they won’t recognize:

RIPT Apparel showing a poor example of a button

The amorphous blob in the lower-right corner doesn’t resemble a button at all. When designers altered it to look more like a traditional button, conversions predictably increased:

RIPT Apparel showing a great example of a button

With a traditional rectangular shape, and textual clues like “Add To Cart” in block lettering, the new button indicated its clickability.

Other effects, like shadowing, can make a button more easily identifiable by creating a 3D appearance.

The technique falls under a concept known as “skeuomorphic design,” which revolves around creating identical digital versions of real-life objects. Here’s an example of a calculator created with skeuomorphic methods:

Skeuomorphic Design of a Calculator

Buttons created with effects like these are best used on audiences who aren’t as internet-savvy. For seasoned users though, flat design techniques may work just as well. Here’s the calculator again, this time created using flat design:

Flat Design of a Calculator

Notice that there are no 3D effects used, like drop shadows or excessive shading. If buyer persona research indicates that your target audience is made up of veteran web users, this style button can work well too.

For a happy medium, consider “Flat 2.0.” The design style strikes a balance between the overly formatted skeuomorphic button and the minimalistic flat button. It uses shadows and shading to indicate pressability, but it does so subtly. Here’s a Flat 2.0 button:

Flat 2.0 Button Design Example

Ultimately, the effects you add to the shape of your button will depend on who you expect to click it. The shape itself, however, should remain rectangular. Take a look at these 100 landing page examples. You’ll find no round, square, or octagonal buttons.

The reason comes back to Jakob Nielsen’s Law of the Web User Experience, which states something obvious but valuable to your page design: Internet users spend most of their time on other websites — not yours. That means they develop their expectations of how the web works on those other websites.

So, if every other landing page features a rectangular button, yours should too. Sacrificing usability for uniqueness (like in the RIPT Apparel example above) can get your page abandoned.

In copywriting, it’s important to separate yourself from your competition. But when it comes to design and usability, deviating from the norm can confuse and frustrate visitors into leaving your landing page.

4. Location

You’ve probably heard it a million times: “The call-to-action always goes above the fold.”

Usually, those recommending this “best practice” do so because they’ve read that people don’t like to scroll. But that’s not necessarily true.

Marketing Experiments proved that CTAs could work below the fold when they moved one from here (above the fold):

Above the Fold CTA Example

…to here (below the fold):

Below the Fold CTA Example

The result was an increase in conversion rate by 20%. The cause, researchers say, has to do with the content presented before the call-to-action:

If you just rotely put the call-to-action above the fold, you may be making “the ask” before your potential customer sees the value in why they should act. Or, sometimes, before they even know what you’re asking. A long, ugly page with a call-to-action “buried” below the fold can outperform this so-called “best practice.

That’s why, many times, you’ll see the call-to-action “buried” much further below the fold on sales pages. Before they can be convinced to hit the “buy” button, visitors to these pages need to be presented with far more persuasive information than they would on a page offering a free ebook.

When deciding where to position yours, consider your offer: If it’s complicated or expensive, it may require more elements — like copy, testimonials, and media — to convert the visitor. And that will inherently push the CTA button lower.

For instance, on longer landing pages like this one, a CTA button doesn’t appear until the visitor scrolls through thousands of words of copy and countless testimonials.

If your offer is simple or straightforward, though, a short page with the call-to-action placed above the fold can be all it takes to convert a prospect. Such is the case on most landing pages that offer free resources like ebooks or reports. Here’s an example from Superior Visual:

Superior Visual CTA Example

But above or below the fold isn’t the only consideration you’ll need to make when positioning your call-to-action button…

Consider this example, from Nature Air, in which the call-to-action button is placed to the far right of the page:

Nature Air CTA Example

In that location, it was mostly missed by visitors, who upon arriving to the page likely followed this pattern of page consumption:

  • First, they noticed the photo of the surfers.
  • Next, they were drawn to the headline “Tamarindo Flights.”
  • Finally, they continued down the remainder of the page to consume text and subheaders until they reached the bottom.

In that entire progression, readers missed the call-to-action because it didn’t fit into their natural flow of consumption. Since the right sidebar tends to contain less relevant information to the visitor, like ads and navigation links, it usually gets noticed less than the left side of the page. Research reinforces this:

Nielson Group Horizontal Attention Chart

When the button was moved to accommodate visitors’ reading style, conversions boosted by 591%:

Horizontal Attention Reading Style Results

To accommodate the natural progression of the visitor, you need to understand how they read. That will be covered in the next chapter.

5. Color

If you’re new to landing page design, you probably stay away from green buttons. In their place, you prefer red ones because they generate more conversions. Among other case studies, this one from HubSpot proves it:

HubSpot Button Color Test Results

But a closer look at this study reveals that the takeaway isn’t “red beats green in all cases.” Instead, it’s that the button which stands out more earns more attention.

In this instance, red beats green because it better contrasts other page elements. Green, the color of the original CTA button, is already included on the page in several places: the logo, the image, and an icon at the bottom of the page.

What it comes down to is this: People need to know where to click to convert.

High-performing CTA buttons don’t attempt to subliminally convert prospects with color psychology. Green’s relation to “go” or “environment” and red’s “danger” connotation have little to do with their ability to convince people to click.

Instead, it’s contrast and clarity that makes them so appealing to visitors. A red button screams “here I am” to the visitor upon arrival. In this case, a green button doesn’t.

Skimmable, benefit-centric copy

Writing for someone who doesn’t want to read isn’t easy. On your landing page, that’s what you’ll need to do, since visitors are there strictly to evaluate your offer. They don’t want to pleasure read.

What they want to know is if your ebook is worth downloading, your product is worth purchasing, or your webinar is worth attending — and they want to know quickly. Even early research indicates prospects decide in an instant whether they should read your copy.

Decades ago, Munich’s Direct Marketing Association ran one of the first studies that aimed to discover how people read. With cameras, they watched subjects’ eyes intently as they encountered a freshly printed page for the first time. They found that…

  • People “entered” the page through the “biggest splash of ink” — the dominant headline or image.
  • Next, readers scanned down the page, looking to captions, bolded words, bulleted text, and short paragraphs.
  • Lastly, they read regular, unformatted body copy.

To accommodate that style of reading, you’ll need to emphasize your offer’s benefits concisely. Here’s how…

Legibility, readability, and comprehension

According to famed usability expert Jakob Nielsen, to write copy people read, you need to optimize for three things:

Legibility

Here’ an example of an illegible typeface:

Illegible Type Font Example

And here’s another:

Illegible Type Font Example 2

To be legible, your landing page copy:

  • Shouldn’t be too small (D Bnonn Tennant suggests 16px since it’s what we’re used to reading in books).
  • Should contrast the page it’s written on (dark font on a light page).
  • Should be clear enough for visitors to discern between characters. Try administering the Il1 test, using sans-serifs for body copy, and staying away from decorative fonts at small sizes.

Here’s an example from Royal Discount and VWO that shows making a font more legible can result in a conversion increase. First, the control page with the small “Sale Price” type:

Royal Discount Legible Font Example Version 1

Then the variation, which drew more attention with a larger and more legible “Sale Price” type:

Royal Discount Legible Font Example Version 2

The result was an increase in “Add to cart” conversions by over 36%!

Readability

Readability has to do with how easily lines and blocks of text can be read by a visitor. To make copy readable, you have to pay attention to:

  • Line length: The left margin is our eyes’ home base when reading. If a line of text is too long, it will test the endurance of our attention. If it’s too short, however, it will break our rhythm by forcing us to return back to the margin too often. A happy medium, experts say, is a line length of 50-75 characters.
  • Line spacing: The spacing between your lines of text has a lot to do with whether your visitors can read your landing page. If it’s too small, your copy will look compressed — one line blending with the line below it. If it’s too large, it will strain prospects’ eyes when they try to bridge the gap between lines. Designer Matthew Butterick claims that readability is maximized when line spacing is 120%-140% of the type size:

Maximized Readability Line Spacing of 120%-140% for type size

  • Layout: For years, humans have read with the help of a grid system. Before the internet, newspaper columns and book pages helped guide our eyes toward the next word, sentence, and line. A good landing page designer will recreate that grid system on the web. Disregard it, studies have shown, and you’ll hurt the readability of your content. In this case, traditional works best.

Landing Page Readability Example

  • Block text: Block text should be nowhere on your landing page. Studies have shown copy is much more easily readable as small chunks — two to three-sentence paragraphs maximum. Large blocks, like the one below, will only intimidate your visitors into abandoning the page before they begin reading:

Microsoft Landing Page with Block Text is shown

  • Stock phrases and unnecessary adverbs: “Fact of the matter is,” “that being said” — they’re just two examples of phrases that contribute to your word count without adding value. Cut them, along with unnecessary adverbs that could be substituted for something clearer and less verbose. For example, “Move quickly” becomes “dart.” “Absolutely perfect” becomes “perfect.” On your landing page, where attention is low and time is valuable, it’s important to make one word do the work of two.

Comprehension

The third and final necessity for skimmable copy is comprehension, which centers on the issue of whether your visitors can actually understand your offer. To maximize comprehension:

  • Use small words. They’re not only easier for visitors to understand, but in addition, research has shown they’ll make you seem smarter.
  • Remove jargon. Made-up words like “dipperability” mean nothing to visitors. They don’t care about your offer’s features. Avoid confusing them with trade terms or your own language. Speak their language. A lawn mower’s “Platinum series 19 HP Briggs & Stratton Intek OVE engine” is meaningless until you explain that it extends the life of the product. Notice how every bullet point on this page presents a feature, then spells out its benefit clearly.
  • Cut ambiguous content. Your product isn’t “premium” or “great.” It’s fast, or it’s durable. It doesn’t “improve marketing performance.” It “turns you into a master copywriter, capable of selling anything with the written word,” or even better: It teaches you all the skills you need to know to become an in-demand, six-figure copywriter.

Being clear about what your offer can provide is crucial for comprehension. A study by Sheena Iyengar showed that when employees were told to imagine all the benefits of saving money, they were 20% more likely to open a retirement fund. They also committed to contributing 4% more to it regularly than those who were not instructed to consider the benefits of saving money.

Engaging Media

Where words fail to convey the value of an offer, visuals can excel. Studies have shown that it’s far easier for people to process images than text, which makes sense when you consider humans largely interpret the world around them without the help of words.

On your landing page, visuals like explainer videos can detail how your offer works, and images can help your visitor imagine how your product or service changes their world for the better.

At the same time, visuals aren’t a one-size-fits-all solution. The type you choose to persuade your visitors depends on what you’re offering.

Here are a few types you might consider using on your landing page:

Landing page images

Picking the perfect image to represent your offer is tough. You might wonder what you should choose: a shot of your product or a model using it? Should you include a photo of your ebook cover, or a page within the book itself?

Whatever you decide, it’s important to remember one crucial guideline for adding images to a landing page:

Always be informational. If an image doesn’t help visitors evaluate your offer, it doesn’t belong on your landing page. Here’s an example of a no-value-added image:

SEO with each letter contained in a light bulb

Research from Nielsen Norman Group shows that generic images like these get ignored. Below is a map that tracked a group of internet users’ eyes as they scanned a web page. Notice how the stock image goes completely unseen:

Example of a poor stock image on a landing page

To get the most out of your landing page image, it’s key to ensure you pick one that actually contributes to the goal of the page. Here are a few to consider:

Hero shots

These images (and sometimes videos) tout your product in a different way. Instead of spelling it out in words, a hero shot shows a visitor what the benefits of claiming your offer are:

Example of what Hero Shot Images are used for

Here’s an example from Angie Schottmuller:

Angie Schottmuller Hero Shot Image Example

Both photos show the product, but the one on the right helps visitors visualize its benefits. Here’s another one for the same offer:

Example of a Hero Shot Image showing 2 people relaxing near a lake

This type of image can work for nearly any product or service — from lawn care to watches, and even software. Learn more about creating epic hero shots here.

Product images

A good product shot enables a visitor to see the ins and outs of your offer. If that offer is technical, this is an effective way to showcase its features:

Product Landing Page Example Featuring a Red Hiking Backpack

This backpack has lots of pockets and angles and straps. Several product photos help people better understand it. If your offer similarly has many features that need to be highlighted in order to help visitors make better buying decisions, this type of media may be appropriate.

If you do take product photos, put yourself in the mind of the visitor. What will they need to see to evaluate your offer fully?

For example, most ebook landing pages feature a picture of the resource’s cover. But, that doesn’t help visitors evaluate what’s on the inside of the ebook. Instead, a preview of the inner content would, as shown on this this Relevance landing page:

Relevant Landing Page Example

Remember: Developing great images for your product isn’t just about using the right camera or finding the right lighting. It’s about creating something informational that your visitors can actually use.

Infographics

Conceptualizing data can be hard for the average consumer. On your landing page, infographics like charts and graphs can make statistics more accessible. Here’s a basic example from Five9, a call center software provider:

Five9 Landing Page Example Featuring Bar Chart

The small bar graph helps people conceptualize exactly how much Five9 can improve call center effectiveness.

Here’s another example from Malwarebytes — an infographic that helps visitors compare the company’s various plans:

Malwarebytes Premium Landing Page Example

And here’s one more from Wrike, which draws attention to the benefits of using the software according to customers:

Wrike Landing Page Featuring Benefits of Product

If persuading your prospect to convert involves comparisons or the presentation of numbers, an infographic can be a powerful way to illustrate the data set.

Icons

On landing pages, icons are especially useful for the reasons presented before. First, people are able to process images more quickly and easily than text. A well-designed icon can make an idea or action more recognizable.

Second, people don’t like to read. Like bullets, icons can break up unnecessarily long blocks of text. Take a look at how QuickBooks uses them on this landing page:

QuickBooks Landing Page Example Featuring Icons

Each complements the accompanying text well in a recognizable way that enhances comprehension. The “Effortless Invoicing” icon, for example, uses lines behind a slanted image of a document to communicate movement and indicate a speedy invoicing process.

The “Get payment instantly” icon helps people understand that customers can quickly and easily pay with account information stored in the cloud. If you choose to incorporate icons into your landing page design, make sure they’re…

  • big enough to grab attention and see the details of
  • clear enough to understand
  • that they’re placed closely to some type of accompanying text that helps clarify their meaning

Here’s a page that could benefit from some icons to break up the text:

Landing Page Example showing text needing to be broken up to make easier to read

Trust badges

These images make prospects more comfortable with converting on your landing page. They’re indicators that your website is safe to complete transactions on, or that you operate a legitimate business.

Because visitors know little about what makes a site secure, and they won’t always have time to research your company intensely, they look for seals or badges like the ones below as shortcuts to determining your trustworthiness:

Image Showing Landing Page Trust Seals

The Baymard Institute found that, among these, the most recognizable and trustworthy were as follows (for buyers specifically):

Chart Showing the Baymard Institute Site Seal Trust Study

However, which you choose to display will depend on the message you’re trying to communicate. More on how to pick the right trust indicators later in this chapter.

Landing page videos

The web is becoming increasingly video-centric as people express their preference for watching online content. One shocking statistic: American adults, on average, spend more time watching online video than they do working.

And so, marketers are now investing heavily in video. A majority of 93% report using the medium for sales, communication, and some form of digital marketing.

On your landing page specifically, research has shown that incorporating video can boost conversion rate by 80%. Here are a few types that could potentially do it for your landing page:

Explainer videos

When your product is new or especially complicated, explainer videos can detail exactly how it improves your customers’ lives. These short, routinely animated clips often take visitors through a PAS scenario that introduces a problem, agitates it, then presents your offer as the solution.

Dropbox famously jump-started its company with a short and clear video description of its service:

Crazy Egg’s founder, Neil Patel, generated an extra 21,000 a month with an explainer video that helped people better understand his tool. If there’s a barrier to comprehending your solution, this type of media is highly effective at helping your visitors overcome it. Learn more about creating them here.

Introductory videos

When a business is relatively unknown or when the success of a landing page depends on the person behind the offer, an introductory video can establish the credibility needed to convert a visitor.

This landing page features one from Sam Ovens:

Sam Ovens Landing Page Example

In it, he describes his rise from a kid living in his parents’ basement to a 7-million-dollar business owner in just a few years. A nice suit, gold watch, and expensive accessories add to his authority (a principle you’ll learn about later in this chapter), helping him convince people he’s as successful as he claims.

With a video introduction like this one, Sam goes from an unknown guy selling his services to a seemingly credible source of information.

Video testimonials

A testimonial nudges your prospects toward conversion by showcasing your happy customers, usually with a textual review accompanied by a name and head shot. Here’s an example from ROI Revolution:

ROI Revolution Video Testimonials Example

A video testimonial brings that review to life by capturing it on camera. Here’s an example from Jamie, a LifeLock customer:

In particular, video testimonials like these add credibility to an offer by humanizing the reviewer. They help landing page creators overcome a common design hurdle: making a testimonial, along with the person giving it, appear believable. There are some other ways to do that too, which you’ll learn a bit later in the chapter.

Video case studies

On your landing page, a short case study in video form can be an even more powerful persuader than a video testimonial or an introductory video; and that’s because case studies prove to your prospects you can meet their needs based on real results from past performances. Here’s an example from Cognizant:

Notice how it’s less about the client’s experience with the service provider — the way a testimonial would be — and more about the solution Cognizant provided, along with the process it took to deliver it.

A condensed form

Nearly every type of landing page features a form. And on all those landing pages, the form is commonly the biggest source of friction. It’s where you ask your visitors for their personal information — from name to credit card number, and everything in between.

It’s for that reason the landing page form has been a highly examined design element by many conversion optimization teams. As such, there’s a lot of information on the internet about creating an effective one.

What’s the best number of form fields?

With every field you add to your form, you learn more about your prospects — but, there’s a tradeoff. Every field you add is an additional obstacle that stands in the way of what your visitor wants, says Joanna Wiebe:

Think of every field in your checkout as a hurdle your prospect has to leap over. Then ask yourself if it’s worth the possibility of losing a sale — or thousands of sales — because you want to fill a database.

After the Great Field Culling Exercise, as it will come to be known in your office, you’ll want to make sure the forms that remain are so frictionless, users will barely notice they’re doing actual data entry.

Her quote refers to a checkout form, but it’s the same case even on pages that don’t solicit the sale. Ask too much, and risk losing conversions. Here’s data from 40,000 forms that proves it:

HubSpot Chart Showing # of Form Fields and their Conversion Rates

But, how much is too much? The exact answer is different for every business, but the process of getting there is the same.

Ask yourself:

  • What stage of the funnel is this offer for? Awareness? Consideration? Decision? At the top of the funnel you’ll want to ask for email, phone number, and whatever else you’ll need to begin nurturing your prospects. Closer to the bottom of the funnel, you’ll want to ask for information that will help you better qualify them to ensure they’re a right fit for your business.
  • Do I need more leads or higher quality leads? For businesses with an empty lead database, forms with fewer fields will result in more leads that the sales and marketing team can work to qualify. For teams that spend too much time sifting through a high volume of leads, more form fields can decrease the time it takes to follow up and qualify them.
  • How valuable is my offer? The more useful it is to your prospects, the more they’ll be willing to submit in exchange for it. A tip sheet might only win you 4 fields of information, but an industry report filled with data-packed insights could result in 10 fields’ worth.

Arranging your form for optimal usability

Looking at most forms, you might not think much thought went into their design. But, because the form is where all interaction on your landing page takes place, it has to be carefully created according to certain principles that make it easy to use.

According to the Nielsen Norman Group, those are as follows:

1. Visually group form labels near their corresponding fields so it’s clear where users need to input their information. This form’s ambiguous white spacing may make visitors question where which label belongs to which field:

Form Showing Space Between Text and Form Fields

The labels on this version of the form, on the other hand, are closer to their corresponding fields:

Form Showing Proper Space Between Text and Form Fields

2. Present your form fields in a single-column layout to keep from interrupting the downward momentum of the user, unless fields are related (like first name and last name or city, state, and zip code). Here’s an example from SkillJar:

SkillJar Landing Page Form Example

3. Avoid the use of placeholder text, as it’s been shown to confuse visitors, test their memory, and make form fields less noticeable. According to NNG:

When you place the labels inside the text field as filler text, the label disappears when users input their text and they must remember it as they fill in the field. This especially causes an issue if users use the Tab key to move through a form. When they tab to the next field without looking, they will miss what information is required. Also, users are drawn to open text fields; they might mistake the filler text as a default answer and skip that form element.

Here’s a form that misses the mark:

Form Using Placeholder Text

Instead, here’s a better example, with permanent labels above each field:

R Systems landing page

4. Request prospect information in a logical order. Don’t ask for first name, then email address, then last name. Ask for first name, then last name, then email address.

5. Make sure the size of the field corresponds to the size of the input. If an input is expected to be short, like zip code, then the field should be short. If a field only has three possible inputs, consider displaying those inputs as radio buttons instead of in a drop-down. Here’s an example from Hillary Clinton’s Onward Together landing page, which lets visitors simply click to select a donation amount and the type of credit card they’re using:

Onward Together Form Showing Radio Buttons

6. Eliminate as many optional form fields as possible, then make sure you distinguish between the rest of the optional ones and their mandatory counterparts. Here’s a good example from ACT, who uses asterisks as indicators of required fields:

ACT Form Showing Required Fields marked with Asterisks

7. Let visitors know if a form input has any special rules. If it needs a capital letter and a symbol, the form label should specify that. This form does it, but in the placeholder text, which will disappear once visitors start typing:

Hired Form Field Placeholder Text

Here’s a better example from MailChimp:

MailChimp Signup Form Field Example

8. Prepopulate common inputs. If your form features a “Country” field and most of your prospects are from the United States, prepopulating “United States” can save them the time it takes to search for it in the drop-down. Here’s both a good and bad example of prepopulating form fields:

Fitness-Singles Prepopulating Form Field Example

The “Country” form field is populated (good) and so is the birthdate — but with the current date (bad). This field is better left blank, since there’s no way of knowing what the birthday of the visitor is. It serves no purpose because, in all cases, visitors will have to change that input from the current day to their birthday. It doesn’t speed up the process of filling out the form.

9. Make sure error messages are clear and noticeable to users that either forget to complete a form, or submit incompatible information. Use red lettering as well as other attention-grabbing indicators, like more heavily weighted text and a red box around the field in which the mistake was made.

10. If you do absolutely need to ask for a lot of information from your prospects, consider asking for it in steps, the way the landing page below does. According to Formstack, multi-page registration forms have been shown to outperform single-page ones by more than 9%:

Multi-Page Registration Form Example

You’ll also notice that this form, at the bottom, features two badges that let visitors know their personal information is safe when they submit. Throughout your landing page, these “trust indicators” play a big part in proving that you have your prospects’ best interest at heart.

Strong trust indicators

No matter your conversion goal — whether it’s signups, downloads, sales, or anything else — to convince your visitors to claim your offer, you need to get them to trust you. With indicators like social proof, security badges, and more, it’s possible.

Each indicator communicates something different, so it’s important to know when and where it’ll have the maximum impact on your landing page.

Testimonials

Touting your own products and services has never been an effective way to sell them. Nobody believes the owner of a company when he or she claims their solution is the best on the market.

What they do believe, though, is when other people say an offer is the best, or the most affordable, or the tastiest. Research shows that product reviews are trusted 12x more than product descriptions from manufacturers — and for good reason: Customers have no incentive to mislead their peers about a product’s effectiveness.

That’s why testimonials — reviews from delighted customers — have the potential to boost the perceived value of an offer, even if the reviewer is unknown to the reader. A report from the Nielsen Norman Group indicates that 70% of people will trust a testimonial from someone they’ve never met.

What they won’t trust, though, is a lazy testimonial. An effective one will optimize for:

1. Positivity

A review that reads “This was a good product” won’t compel someone to buy as much as one that reads like this:

TopSpot Internet Marketing Testimonial Example

Feature testimonials from your most enthusiastic brand advocates. The more positive a review is, the more power it holds.

Here’s an example of a testimonial that’s not positive enough:

Valpak Customer Testimonial

Translated, this testimonial says, “You break even and then make a little on top of that when you advertise with this company.” Is that really “what you’re looking for in advertising”? The bare minimum?

2. Recognizability

A review’s level of persuasiveness is also impacted by the person giving it. If that person is an expert in their field, known by the reader, or works for an established company, their opinion carries more weight.

A glowing review from Neil Patel, marketing influencer and co-founder of Crazy Egg, is more persuasive than a testimonial from an unknown individual:

Neil Patel Testimonial Example

Similarly, a review from someone you know will be more persuasive than from someone you don’t know, which is why Facebook will let you know when one of your friends likes a particular brand:

Facebook Brand Friend Notification Page Example

When evaluating the trustworthiness of a brand online, people look for indicators of familiarity. The more recognizable it is, the more they’ll trust it.

3. Specificity

Details are crucial to establishing trust. The more specific a review is, the more credible it is, and the more a visitor will trust the value of the offer behind it.

For example, here’s a specific testimonial from AdLift:

AdLift Customer Testimonial about SEO Traffic Increasing in Under 4 Months

It touts the service with actual results: “We achieved a 185% increase in keywords driving SEO traffic in under 4 months.” This one does the same thing:

AdLift Customer Testimonial about SEO Traffic Increasing 6x YoY

But the third testimonial featured on the page is less specific as far as results are concerned:

AdLift Customer Testimonial that is less specific on clear results

What they all do well, though, is provide specificity as it relates to the reviewers. Full name, title, and company are all listed next to a headshot of each reviewer — which humanizes them — letting visitors know that these are real people.

You can Google “Erin Renzas,” “Dennis Mink,” and “Tommy Griffith,” and likely find identifying information — like a LinkedIn page or personal website — associated with each.

On the other hand, a review from “Tom G.” without any identifying details, like where he works or what his position is, comes off as fake. Tom G. could be real, but there’s no way of confirming. Here’s an example of testimonials that could use more identifying details:

Food Babe Testimonial Bland on Details

Are Julie, Sarah, and Dawn real people? Or are all three of these testimonials created by the business owner?

4. Relevance

Relevance and recognizability work together. When a testimonial is given by someone well-known, it carries more persuasive power. But, for maximum effectiveness, that person should be relevant to the offer and business.

For example, these testimonials for writing software, MasterWriter, are more powerful because they’re given by award-winning writers:

MasterWriter Testimonials by Award-winning Writers

If they were instead given by professional athletes or celebrity chefs, they wouldn’t hold as much power. For a workout or diet program, an endorsement from an athlete or bodybuilder could sway the visitor. But, for a writing software, testimonials from well-known writers are more persuasive because the target audience is writers.

Security indicators

Before submitting their personal information on a landing page, visitors will look for signs that indicate it’s secure. The “https” in your URL isn’t enough. You’ll also want to include clear and obvious signs, like:

  • Badges from trusted security companies like Norton or McAfee near your credit card field.
  • A link to your privacy policy where prospects can find out how their personal information will be used.

Pages that don’t include these indicators communicate to visitors that their information could fall into the hands of malicious hackers or immoral spammers. Here’s a page that gets security signals right:

Example of Security Signals on a Landing Page

Authority indicators

From a young age, we’re taught to obey authority figures like doctors and police officers. And so, as we get accustomed to seeing these figures repeatedly in everyday life, our mind creates shortcuts for determining whether we should trust someone without question.

We look for uniforms or scrubs, guns or stethoscopes, badges pinned on collared shirts or titles embroidered on lab coats. Dr. Robert Cialdini, famous for his work on the psychology of persuasion, called these shortcuts titles, clothes, and trappings:

  • Titles: Dr., Lt., PhD.
  • Clothes: lab coats, scrubs, uniforms, fatigues, expensive suits
  • Trappings: guns, badges, rosaries, expensive cars or watches

By working these elements into your landing page, you can boost the odds your offer gets claimed. Tai Lopez, for example, is someone known for using authority indicators to prove his offer is valuable. In this video, he shows off a new Lamborghini and seven new bookshelves:

When they finish watching the clip, most viewers will assume the following:

  • Tai has enough money to purchase an expensive car.
  • If he has seven bookshelves filled with 2,000 books, Tai must also possess a wealth of knowledge.

Whether it’s true or not (he could’ve borrowed the Lamborghini from a friend, and he may have never read any of those books), we can’t know for sure. However, judging by his nearly 1,000,000 YouTube subscribers, most people accept his authority without question.

When designing your landing page, consider what you want to communicate to your prospects. Then, determine what titles, clothes, and trappings you possess that can convince a visitor you embody those qualities.

Credibility signals

We all assume that people in positions of authority are trustworthy; but to be credible, it takes something extra. Here’s the major difference between the two phenomenons:

Authority is assumed. Credibility is earned.

Dr. Hyman’s “Eat Fat, Get Thin” landing page has authority built in simply because the man who created it is a doctor, and his title is referenced throughout the page:

Eat Fat, Get Thin Landing Page Example

But is Doctor Hyman a good doctor? Should visitors trust his health advice? They’ll look for credibility signals to determine, like:

High-profile clients and testimonials

Remember: Nobody will trust you when you tell them your offer is worth claiming, but they will trust someone else, especially if that someone else is authoritative and relevant to the offer. Here’s an example from Dr. Hyman’s landing page:

Dr. Hyman Customer Testimonial Featuring Dr. Mehmet Oz

Mehmet Oz is an authoritative and recognizable celebrity who, as a doctor, is relevant to the offer. A testimonial from him adds much credibility to the page. So does this testimonial from Dr. Toby Cosgrove:

Dr. Hyman Customer Testimonial Featuring Dr. Toby Cosgrove

He’s less recognizable than Dr. Oz, but a title underneath his name reveals why Cosgrove is in a position to give an authoritative review on Hyman’s diet program: He’s the CEO of the Cleveland Clinic, one of the most well-known medical institutions in the country.

Optimized testimonials like these let visitors know that people outside of the offer’s creator also consider the “Eat Fat, Get Thin” diet to be effective.

The same goes for high-profile clients. When a business features logos of well-known companies they’ve done business with, it essentially says, “some of the most trusted brands trust us, so you should too.” Here’s an example from Mindgruve:

Mindgruve Trusted Brands Example

Statistical proof

Numbers are almost always more persuasive than words. Statistical proof of ROI from real customers beats even the most positive testimonials, because the old adage really is true: Numbers don’t lie.

Here’s an example from Dr. Hyman’s landing page:

Dr. Hyman Customer Testimonial Featuring Stats of over 1,000 Participants

Here’s another example from Louder Online, a San Diego marketing agency:

Louder Online Trusted Brands Example

On your landing page, if you feature results from particular case studies, keep them brief and highlight the numbers. Nobody will read them in block text form, the way they’re written on this landing page:

Block Text Form Example of Subaru Sedan

Awards

To boost credibility, you can never go wrong by showcasing awards. Even if they’re from little-known organizations, these convey an outside party’s acknowledgement of your excellence in a particular field or on a certain campaign. Here’s an example from L7 Creative:

L7 CREATIVE Awards Section on their Homepage

Publicity

If your business or offer has been featured in any well-known publications, on your landing page is the place to let people know. Here’s an example from the “Eat Fat, Get Thin” landing page:

Eat Fat, Get Thin Landing Page Publications

Visitors view outlets like CBS, PBS, and ABC as credible sources of information. They assume that if you or your offer have been featured on any of them, you are credible by association.

Social counters

Think, for a second, about what happens when you see a long line outside a restaurant: You assume the food is good.

Similarly, when you see a brand is followed by thousands of people, or a product has been claimed millions of times, it’s an indicator that brand is worth following and that product is worth claiming:

McDonald's Billions and Billions Served Logo

That’s why counters can be an effective way to showcase your brand or offer’s popularity, and by extension, its value. Here’s an example from Content Marketing Institute:

Content Marketing Institute Social Proof Example

Here’s a Facebook “Like” counter from another landing page, which indicates the brand has 563,000 fans on the platform:

Facebook Like Counter on a Landing Page

These counters effectively communicate the message, “our content/product is valuable to hundreds of thousands of people,” which makes visitors think, “this could be valuable for me too.”

Putting it all together

A landing page is like a puzzle. Having all the right pieces isn’t enough. Your elements need to come together to form a page that subtly guides your visitor toward conversion. Learn how to put them all together in the next chapter.

Choose a Chapter

Sign Up for a 14-day Free Trial

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