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:
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:
Here were the results:
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:
And here’s the variation, 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:
Second, variation 2 of the pricing page:
The results of the test were as follows:
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:
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.
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.
The variation, though, emphasized the benefit of claiming the download with the copy “Show Me How To Attract More Customers”:
The new button improved conversions by nearly 80%:
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:
Here’s one last example to drive the point home, this time from Roader Studios. First, the CTA before:
Then, the adjustment, which brought an 8.39% increase in conversion rate:
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:
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:
Any smaller than that, research indicates, and your button will be too little of a target. Visitors will frustrate themselves trying to push it:
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:
Here’s an example of a button they won’t recognize:
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:
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:
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:
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:
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.
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):
…to here (below the fold):
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:
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:
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:
When the button was moved to accommodate visitors’ reading style, conversions boosted by 591%:
To accommodate the natural progression of the visitor, you need to understand how they read. That will be covered in the next chapter.
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:
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:
Here’ an example of an illegible typeface:
And here’s another:
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:
Then the variation, which drew more attention with a larger and more legible “Sale Price” type:
The result was an increase in “Add to cart” conversions by over 36%!
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:
- 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.
- 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:
- 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.
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.
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:
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:
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:
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:
Here’s an example from Angie Schottmuller:
Both photos show the product, but the one on the right helps visitors visualize its benefits. Here’s another one for the same offer:
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.
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:
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:
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.
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:
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:
And here’s one more from Wrike, which draws attention to the benefits of using the software according to customers:
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.
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:
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:
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:
The Baymard Institute found that, among these, the most recognizable and trustworthy were as follows (for buyers specifically):
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:
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.
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:
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.
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:
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:
But, how much is too much? The exact answer is different for every business, but the process of getting there is the same.
- 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:
The labels on this version of the form, on the other hand, are closer to their corresponding 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:
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:
Instead, here’s a better example, with permanent labels above each field:
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:
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:
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:
Here’s a better example from MailChimp:
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:
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%:
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.
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:
A review that reads “This was a good product” won’t compel someone to buy as much as one that reads like this:
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:
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?
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:
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:
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.
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:
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:
But the third testimonial featured on the page is less specific as far as results are concerned:
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:
Are Julie, Sarah, and Dawn real people? Or are all three of these testimonials created by the business owner?
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:
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.
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.
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:
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.
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:
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:
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:
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:
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:
Here’s another example from Louder Online, a San Diego marketing agency:
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:
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:
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:
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.
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:
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:
Here’s a Facebook “Like” counter from another landing page, which indicates the brand has 563,000 fans on the platform:
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.