Part 2: The 5 Elements of an Effective Landing Page

Last time, we answered the question “What is a landing page?”. Today we’re going to take a look at the different landing page elements that go together to build your pages.

Effective landing pages have a blueprint.

Just like people, landing pages have moving parts that don’t function on their own. You need to plug them together to make them work.

Today’s Course Outline

Today we’ll learn which elements go into building an effective landing page.

There are 5 must-have core elements on any landing page, which can be broken down further into a more detailed list of building blocks:

  1. Your Unique Selling Proposition (USP)
    1. The main headline
    2. A supporting headline
    3. A reinforcement statement
    4. A closing argument
  2. The hero shot (images/video showing context of use)
  3. The benefits of your offering
    1. A bullet point list summary of benefits
    2. Benefit and features in detail
  4. Proof
    1. Social proof (I’ll have what she’s having)
    2. Trust indicators
  5. A single conversion goal – your Call-To-Action (CTA) (with or without a form)

Estimated time for lesson

Today’s lesson should take approximately 30 minutes including the video.

You can see how these can be used to construct the two different types of landing page in the diagrams below:

The elements of a lead gen landing page

The 5 elements of an effective landing page

The elements of a click-through landing page

The 5 elements of an effective click through landing page

1. The Unique Selling Proposition (USP)

Also known as the value proposition, this is where you present your core description of what the page is about.

Your USP is a high-level term for a collection of statements that you use to explain what your offering is. Which ones you use are dependent on the purpose and length of your landing page.

The USP can be broken down into 4 page elements, which collectively tell the story of your offering throughout the landing page:

  1. The main headline
  2. The supporting subhead
  3. The reinforcement statement
  4. The closing argument

1A. The main headline

Your headline is the very first thing that people will see and read. It’s critical that it very clearly describes what a visitor will get from the page (its goal) and that the message match is strong enough to show the visitor that they are in the right place.

1B. The supporting headline

Your headline can only say so much if you want to keep it succinct and easily digestible. The best way to keep your headline short and sweet is to add a supporting headline.

This can be used in two different ways:

  1. As a direct extension of the headline, where it follows the primary headline in such a way that it’s like finishing a sentence.
  2. To extend the message by applying an additional persuasive message to support the primary one.
TAKE AWAY
If people can’t determine the purpose of your page from the main headline (and subhead) you’re doing something wrong. If this is the case, try asking a colleague to describe what you do. Often, hearing someone else communicate it will strengthen your own understanding and to help you craft an effective USP.

1C. The reinforcement statement

People will scan your page when they are reading it. This makes it critical that any titles you use – such as your main headline and feature/benefit titles – throughout your page stand out to a reader.

There is another page title that you can use to drive home the purpose of your page. This is the reinforcement statement. It sits about halfway down your page, and serves to add a mid-experience message that you want to communicate to your visitors. Essentially it’s like a second headline.

Here is an example:

Main headline

The Easiest Way to Build, Publish and Test Landing Pages Without I.T.

Reinforcement statement

Create beautiful landing pages in minutes with no HTML

TAKE AWAY
Use a reinforcement statement to highlight another key benefit of your product or service. It should work hand in hand with your main headline to extend your value proposition.

1D. The closing argument

As your landing page comes to a close, you have one final chance to communicate the benefit of your offering. Similar to the reinforcement statement, it backs up your main value proposition. For a click-through page, it should be coupled with a repeat of your call-to-action.

Note: For a very short page, this isn’t always a requirement as your headline will still be visible.

TAKE AWAY
It’s common practice on long landing pages, to repeat your call-to-action in several places. When adding one to the bottom of your page, it should be introduced by a final benefit statement to “close the deal”.
5 five second test
A great way to identify whether your USP is clear enough, try a 5-second test.

This is where you present test subjects (people) with your landing page for 5 seconds, then hide it from view.

At this point you ask the test subject to explain what the page is about. Refine your USP until people are consistently getting it right.

Check out Five Second Test to try this online.

You will learn all about how to write effective headlines in part 5 of the course on landing page copywriting.

2. The hero shot

The hero shot is the best photograph or graphical image of your product or service, designed to make it stand out as something worth attaining. In this case it’s the image of an ebook. Notice how it dominates the page.

ultimate-guide-to-landing-page-optimization-ebook-landing-page

Notice how the main headline, supporting headline and hero shot combine together to show exactly what the page is about.

There’s another element of successful hero shots, called context of use. This is the idea of showing your product or service in real-life action. Albeit cheesy, the Slap Chop or Sham Wow infomercials you see on TV do a great job of doing this. Some example ways you can do this based on the type of product or service you are promoting are:

  • Online service: video demo/screencast
  • Physical product: video of the product being used for it’s intended purpose
  • Ebook: a preview of a portion of the content as proof of its value

Just to make it super clear, watch Vince show the SlapChop being used. It’s entertaining and shows the benefit of use in context.

Using video as your hero shot to demonstrate context of use

According to ecommerce blog GetElastic.com, video is a very successful way to drive consumers to purchase. Consider the following statistics that back this up:

  • 52% of consumers say watching product videos make them more confident in purchase decisions
  • Shoppers who view product videos are 174% more likely to purchase than visitors that did not
TAKE AWAY
Your hero shot should dominate the page, making it immediately clear what the page is about. Your USP should reinforce the product shot and vice-versa. If they don’t work together, the audience will become confused.
SECOND TAKE AWAY
People are more likely to understand your product or service if you can demonstrate it in action. Seeing it in action can produce the “Aha!” moment that triggers purchasing decisions.

3A. Benefit statements (bullets)

Following the other elements on your page, you should by now have the attention of your visitor. It’s here that the benefits of your product/service should be highlighted in plain form. Bullet points should be used for easy scanning.

Your benefit statements should attach directly to the pain felt by people seeking out what you are offering. An example (for a dishwasher) being “Saves you hours every week by cleaning your dishes for you”. As opposed to a feature such as “Cleans dishes”.

Another example, for a phone, might be:

Bad (feature based)
Our new battery is twice as powerful as the competition’s

Better (benefit based)
Our new battery means you’ll only need to charge your phone every couple of days

We’ll learn how to write effective benefit statements – based on your feature list – in part 5 of the course, “Landing Page Copywriting”.

TAKE AWAY
Benefit statements explain how you are solving a problem that your prospects have. Ask yourself “What do my potential customers need?”, then write down one sentence solutions to those needs.

3B. Detailed benefit and feature descriptions

To support your brief benefit statements you want to extend the bullet point descriptions into a more detailed overview of their purpose and benefit. A good way to approach this is to expand upon the benefits first, and then if needed, add some feature details below.

The important point to remember here is that you need to communicate the benefit of your offering first. Then, and only then, do you start to add features – which are typically directed towards those who require more detail in order to make a decision.

The benefits describe the problem you are solving, and the features describe what it does.

You often want to include imagery here that shows how each feature will look when being used, such as screenshots, where applicable. You can also use icons that represent the feature.

4. Social proof

Social proof is a powerful persuasive concept. Simply put it’s the use of social signals to illustrate that other people have bought/consumed/read/participated in, what you are offering. The concept being that you are more likely to convert if you see that others before you have, and were glad they did.

Basecamp does an excellent job of showing social proof on their homepage:

social proof basecamp homepage

There are two key examples of social proof here:

  • The headline that points out how popular they are by virtue of the number of signups in a week
  • The personal testimonial from a customer, including a link to her company for added believability
TAKE AWAY
People love having decisions made for them. That’s why reviews are so popular. You’ll often see people checking out reviews on their phone while in an electronics store or when considering a restaurant. Leverage social proof to make purchasing decisions easier.

5. The conversion goal – your call-to-action (CTA)

Your conversion goal is a term that describes what the purpose of the page is to you. It’s purely a label intended to keep you focused on this page element when designing your page.

To a visitor, this is presented in the form of a Call-To-Action (CTA), which can either be a standalone button on a click-through page, or as part of a lead gen form.

Your CTA is critical to conversions as it’s the target of your pages’ conversion goal – in other words, it’s what you want people to interact with on your landing page. How you design it, where you place it and what it says are all important considerations.

To quote split testing junkie/expert Michael Aagard,

On your landing pages, the call-to-action represents the tipping point between bounce and conversion. When you ask someone to do something online, they have to go through your call-to-action in order to do it – regardless of whether you’re asking them to download a PDF, fill out a form, buy a product, or even just click through to another page.

Your buttons consist of two overall elements: design and copy.

Both these elements have direct impact on conversions; however, they play two different roles in the conversion scenario.

Button design is a visual cue that helps attract prospects’ attention to the call-to-action. In other words button design answers the question, “Where should I click?”

Button copy on the other hand helps prospects make up their minds in the last critical moment and answers the question, “Why should I click this button?”

CTA Design

Often, the best way to understand the design of CTAs is to look at examples for inspiration. This classic post from Smashing Magazine has a large collection of call-to-action examples.

Tip: We’ll cover a more detailed explanation of CTA design later on in the course.

CTA Copy

A simple guiding principle for CTAs is that the copy (text) on your button, should describe exactly what will happen when it’s clicked. Examples of this would include: “Get my free ebook now”, “Take the 5 minute tour”, “Start my 30-day free trial”.

Tip: It can help if you try to complete the sentence “I want to…” with your CTA copy, for instance I want to… “Download my free ebook now”.

TAKE AWAY
Never use the word “Submit”. Who wants to submit, anyway? Always describe exactly what will happen when your CTA is clicked.

Your CTA as part of a lead gen form

The lead gen form (if needed) is the workhorse of B2B marketing. It’s used to collect visitor information in exchange for something of value. It’s often the beginning of the marketing process, where the email address gathered is used to send follow up correspondence to try and convert the new leads into customers.

There are lots of incentives you can give away to prospects in exchange for their personal data. The important lesson for lead gen is to strike a balance between what you are giving away, and what you are asking for in return.

A fair exchange for a newsletter registration would be an email address and perhaps a first name. In this instance, asking for a phone number and the size of your company would create an imbalance that could hurt your conversion rates.

Some examples of landing pages with lead gen forms on them

landing-page-examples-lead-gen-forms-1-th

landing-page-examples-lead-gen-forms-2-th

landing-page-examples-lead-gen-forms-3-th

TAKE AWAY
Always try to balance the “size of the prize” (what you are giving away) with the level of information you are asking a prospect to provide. There is a fine line between being too greedy and not asking for enough to satisfy your marketing needs.

BONUS — The confirmation page

Your confirmation page is the first thing a new customer or lead sees after they have completed your conversion goal. For a lead generation landing page your prospect submitted your form turning them into a lead and they are now typically faced with a page that either says “thank you” or provides the link to download content.

For a click-through landing page, the confirmation page is encountered further down the sales funnel, often after the prospect has become a customer by purchasing something from you. Here, the confirmation page shows the result of completing your transaction.

Both of these locations are prime opportunities to strike while the iron is hot.

Take advantage of that magic moment directly after the customer says “Yes, I like you”. By paying careful attention to your confirmation pages you add the opportunity for some powerful brand extension touchpoints:

  1. The opportunity for more subtle follow-up marketing: keeping people within the sphere of marketing influence if they follow or share on social media.
  2. The opportunity to exceed expectations: differentiate by being the best. Surprise people with a bonus extra offer or content download.
  3. The chance to offer info/advice that would have crowded your landing page: if you wanted to convey a message that wasn’t appropriate for your landing page (as you were rightfully keeping it focused on a single message), you now have the opportunity to do so.
  4. The chance to offer a guided experience: most people like direction. Offer a suggestion of what to do next.
TAKE AWAY
Don’t stop after your landing page conversion goal is completed. Take advantage of post-conversion opportunities to extend your marketing potential and reach.

Let’s build a landing page!

It’s hands-on time. Today we start from a blank slate and add all of the elements you just learned about until we have a super awesome, fully functioning landing page.

Remember to follow along with a free Unbounce landing page account

If you completed “Landing Page 101” you should already have a free account to build your pages. If not, you can open a free Unbounce account (60 seconds to sign up – no credit card required). This will let you create landing pages for the examples we use throughout the course.

Watch this video to see how to build a landing page from a blank canvas, adding each page element to create a fully designed landing page.

Rocked this part of the course? Shout about it.

Remember to jump into the comments and tell us what you think.