Guide to Landing Page Fundamentals

(This advanced guide will cover all of the components you need to build and optimise your landing pages for conversion.)

Get StartedGet Started

Contents

  • Introduction
  • Web conventions
  • Foggs behaviour model
  • Font/ Usability in Landing Page Design
  • Hero section, Headline and 5 second usability tests
  • Mobile responsiveness
  • Copywriting
  • Social Proof
  • Tools for Optimisation
  • Conclusion

Introduction

Let’s get straight to the point of this guide. When designing your landing page for conversion, you have to be looking at each component from a unique perspective. Most people look at the design of their website and want it to look beautiful. The truth is that beautiful doesn’t always convert. Often those sites that look nice, were designed for that very purpose. They missed out the whole point of the landing page – to convert users and generate you the highest ROI possible.

That being said, this does not mean the two are mutually exclusive – rather, you need to be including each of the conversion principles we’re going to cover whilst still creating a delightful experience.

The Fogg Behaviour Model

The Fogg Behaviour Model concludes that three key factors must all be present for a particular behaviour to occur.

In our case, that behaviour would be the call to action on your landing page. The three behaviours being;

  • Motivation
  • Ability
  • Trigger

When a behaviour does not occur, at least one of those three elements is missing. Therefore, you need to understand what is likely to be lacking in the mindset of the user visiting your page and how you can account for that to ensure the conversion takes place.

Behaviour = Motivation + Ability + Trigger

Now we’ll run through those three factors to outline the semantics and how you can raise the level of each.

Motivation

This is a combination of sensation, anticipation and social cohesion. Sensation is used for the desire of pleasure or avoidance of pain. Anticipation is the motivation to know what is going to happen next. Social cohesion is the desire to be a part of a group.

These are all very animalistic, evolutionary desires in the mind. An example would be, if someone lands on your page with low motivation then you may need to spike their interest. You can do this through sensation – you get across the pleasure they could receive from your product or you can show them which pain point they didn’t know they had that your product is about to solve.

Ability

This is their ability to actually follow through on the call to action. If the landing page is difficult to navigate then ability may be low for anyone not tech savvy. You can solve this by creating a simple to follow process on the page.

If the price is too high and the user cannot afford it, then their ability to follow through is very low. You can solve this with payment plans for example.

If the user is aged 19 but your product is for 21+ then their ability is zero. This isn’t exactly solvable. Rather, you are targeting the wrong people with your ad campaigns. Ideally you want to reach people who already have high ability.

However, some people perceive that they have low ability but actually they have high ability. In this case, you just need to express on the landing page factors that teach the user that they are a high ability person.

Triggers

The trigger is basically a call to action. If you have the best landing page in the world but you don’t clearly define and ask the user to take an action then nothing gets done, right!?

You MUST ensure that you have a very clear, concise call to action. We’ll cover this more later.

Types of Call to Actions

  • Facilitatorswork well when the visitor is high in motivation but low in perceived difficulty. They want to engage but think it’s expensive or difficult to sign up (low ability). These CTA have to make it look easy and thus drop the PD. Here you have motivation but lack ability. Your cta and copy should talk about how easy it is.
  • Sparks – high on ability but low on motivation. Sign up to newsletter for example. It is easy but they don’t have much motivation. So your CTA should be showing value and increasing motivation. Sign up to this and get 30% off, sign up and get this amazing content.
  • Signals – often there’s no major lack in motivation or PD, in this case, which is often, you just need some kind of signal to trigger and tell the person how to take action.

The Limbic System

When a landing page is designed with a very high production value, this taps into the limbic system. The user sees the website in an emotional way. Not just this, but the high production value creates a feeling of trust and credibility almost instantly.

On the other hand, a rushed and lack-luster website seems less trustworthy. It’s the equivalent of seeing a grimy run down shop in the high street – you get an instant feeling of caution going in there.

How do people take on information?

  • Visual – imagery, colours, videos, infographics.
  • Audio – voice, music, video, telephone.
  • Kinesthetic – quizzes, gamification, role playing.

Usability of Landing Page Design

Every page of your site should account for the following:

  • Useful – does it fill a need that your visitors have? Does it answer the questions your visitors want answered? Does it do something worthwhile that your visitors need done? Useful information, useful context, useful calls to action.
  • Learnable – can your visitors figure out how to use your website without additional instruction. Is it self explanatory?
  • Memorable – will visitors have to relearn how to use your site each time they visit? Is it unique in a way that your visitors will remember you as they continue to browse competitors and evaluate other options.
  • Effective – can users actually accomplish their tasks on your site. If your site sells something, can users buy it and buy it easily. Are there clear contact options?
  • Efficient – can users get the job done with as little resources and mental energy as possible? Any inefficiency is going to add a barrier in the way of conversion. Can include page load speed, offering too much info to read etc.
  • Desirable – are you selling something that people want?
  • Delightful – is there an experiential element to your website. Something that goes above and beyond that makes you special, enjoyable and not just a wall of sales text taking from you.

Perceived Value

Recommended Book: Steve Krug – Don’t make me think

Steve Krug states;

“A person of average ability and experience can figure out what you do and how to use your website without being more trouble than it’s worth.”

Perceived Value (also mentioned in the book) looks at difficulty versus perceived value. The way this works is that, the higher the level of difficulty to complete an action on your landing page, the higher the perceived value must be for a conversion to take place.

Likewise, if you have a low difficulty landing page, then you can get away with a lower perceived value.

The aim is to get the highest perceived value and the lowest difficulty on your landing page. Achieve this and you’ll get a tonne of conversions.

Clarity and the Quest for Fewer Questions

Don’t name your site something too fancy and sophisticated, you don’t want the user to waste mental energy thinking about what it even means – don’t make them think! Same goes for the headlines.

‘The old lady should know’ is a good concept to have. When you write your copy, ensure that an old lady with little prior knowledge can understand it.

Clarity and Simplicity = LESS THOUGHT

They should be able to answer any questions without even thinking. Do I know where I am on the website? Do I know how to get back to the last place? Do I know how to progress forward? Do I know how to get help? Can I self select? (not always applicable).

Above the Fold

When we talk about ‘above the fold‘, we are referring to that section of the page before the visitor scrolls. You only get a few seconds to make a solid impression. You should be able to communicate some key concepts in those first few seconds.

One way to test this is with the use of 5 second usability tests. These work by placing your website in front of a random sample of people. They’ll get to see it for just 5 seconds and then will be presented with a series of questions.

Questions could include;

  1. What is the name of the company?
  2. What does the company sell?
  3. What value does this company provide?

Try to convey these three things in the first 5 seconds. Your main things that you’ll be able to test here are the imagery and the headline and sub headline.

The Art of the Call to Action

Your call to action is usually in the form of a button, contact form, phone call etc. It’s the action you want the user to take. But you don’t want to just put ‘submit’ into your button text.

The best practice is to follow the words “I want to…”. For example; “Book My Free Consultation”, “Request My Proposal”, “Improve My Landing Pages”.

The primary call to action should be very dominant and clearly the primary call to action. Make it consistent throughout the page. If you need to have a secondary call to action then you can use a hollow button to clearly show it’s not as important as the filled in, more prominent button that the main call to action possesses.

Finally, ensure the user knows what is going to happen when they click. Do not us any bait and switch. If they click expecting something to happen then don’t introduce any surprises.

And for the love of god, make your buttons look like buttons. Don’t leave the user guessing if something is or is not a button. You see lots of new fancy designs but they do not always communicate clearly enough that it’s clickable.

Readability and Visual Hierarchy

People do not read, they glance and scan. Once you have interest and they are thinking of purchasing, then they will read.

So, you need to communicate to a ‘scanner’ on your landing page.

Users will focus on things that match what they think they’re looking for – free, trial etc.

Their RAS is already looking out for certain things, you better have those on your page.

Create visual hierarchies. Always put the important things first.

Use bullet points and highlight key terms.

Very short paragraphs – no long form shit.

Don’t write in full sentences. Use short, simple language.

Avoid jargon and hyperbole – fewer adjectives, more objectivity.

Make important things more prominent or distinguished by; colour, space, size, etc.

You need to know how to orient around a page

Be consistent with the size of headings and how you differentiate them. Don’t make the user have to re-learn how the site works remember

Don’t float your headings. Rather have the closer to the below text than the above text

A good test is to cut the copy in half and try rewrite with half the amount of words – see if you can do that without losing any value to make things more succinct.

Respecting Web Conventions

Consistency is one of the most powerful user experience principles. When everything works the same, they do not have to use their brain anymore and so they enjoy the experience more.

The more a user can predict how things work and be correct in what they are doing, the more they feel comfortable and in control.

People spend most of their time on other websites and so they form expectations of how sites work based on all the sites they visit. Therefore you cannot deviate too much or else they feel insecure and will not convert.

Book: The Design of Everyday Things – Don Norman

Rules your website needs to stick to

We’ll cover a few things your main website needs to cover, bare in mind, a few of these things will differ for dedicated landing pages. For example, we remove much of the navigation and outbound links on landing pages.

Logo position

Always in top left and linking back to the homepage.

Navigation

Top menu to the right of logo.

Additional Navigation

Should be on the left hand side.

E-commerce

Shopping cart in top right. Utilities: (log in, about etc.): smaller above main Navigation.

Text Links

ANY text that you underline should be a link.

Buttons

ANY text with a outline around it should be a button.

Keep all the buttons looking the same. You only want the user to have to learn what your button looks like once.

Adverts

Anything in a solid attention grabbing box with a button is going to be perceived as an ad.

Images

Images are not clickable unless otherwise mentioned.

Font Size

LARGE text is meant to be read first.

Lead Forms

Need an asterisk (*) or required if the term is mandatory.

Free Means Free

If you offer a free trial then you cannot expect to take card details. It does not mean you can get a refund in 30 days if you aren’t happy. Do not lie or try to bend the rules.

Footer and Header

Should be consistently marked with different colours so you can be sure they’re not part of the page. – visual queues (at top or bottom of pages). This is more with regards to general web design.

Consistency is Key

Don’t try to be innovative if you are going to make it hard for the user to move and interact around your page.

Imagery and Videos

These are the limbic system’s favourite asset.

Good imagery; tells a story, supports the product or service based on conventional understanding. helps clarify a confusing concept and are high quality, original and gives the site a professional look.

Bad imagery; makes text harder to read, unclear what the image even is, not inline with the brand aesthetic and messaging, looks like stock photo and are too frequent.

Information Architecture and Accessibility

Make sure people can find what they’re looking for – consistency + intuitiveness. It should work in the same way across EVERY page on your site. Don’t capitalise the full header, just do capitals on first letter.

A good font size would be to start 14 font-size and increase for older people.

Trust, Credibility and Safety

A user’s likelihood to convert is directly related to how credible and trustworthy your site feels and appears.

Trust and safety is formed in just a few seconds of visiting your site.

Elements that increase trust are subliminal in nature. If you have to point it out to the user then it doesn’t feel real or trustworthy.

Best practices:

  • Professionalism and refined aesthetics.
  • We do judge books by their covers. This is the hardest thing to get right.
  • Neatness, organization, high level of polish to your site all combine to create a sense of professionalism.
  • Clean typography, white space, professional imagery.

Transactional Assurances

These are subtle design elements that counteract innate anxiety and include;

  • Free trials
  • Guarantees
  • Demos
  • Returns policies
  • Spam safety icons
  • Safety logos
  • Clients and media awards, partnerships, studies, surveys.
  • Basically showing a logo that is tactful but that the visitor recognises.
  • In most cases you want your awards up above the fold if possible.
  • It’s often done with full white and then pale grey logos. Or they have a wide hero section background with a logo bar at bottom.
  • Testimonials, case studies, user feedback.

Dedicated Landing Page Design Best Practices

With dedicated landing pages you MUST capture the interest immediately.

The headline should not only be bigger font, it should also call people to act.

Trust is imperative.

Things to include; how long you have been in business, media mentions, how many customers you had, testimonials,

Should be in close proximity to the call to action.

Video goes between 30-90 seconds ideally.

Test splitting up long forms into smaller parts.

Be consistent in the messaging from the upstream click.

No bait and switch, it always backfires.

What you offer in the ad should be exactly what is on the landing page.

What should you test first?

Headlines
Form fields
Offers / promotions
Call to actions
Images/videos

Principals of Persuasion in Landing Page Design

Using Scarcity to Improve Conversion Rates:

Scarcity evokes a sense of urgency.

Research shows that people would rather make a quick irrational decision than missing out on the deal.

It can be time driven or quantity driven.

Believability – it must be believable.

You can use deadlines to create urgency – e.g. with countdown timers.

Sometimes you can have small or subtle markers, like ‘only 2 remaining’ etc.

Reciprocal Concessions & Reciprocity

You offer a product or service that’s too expensive (asking for too much) which the visitor refuses (you concede). He is more likely to concede later on the cheaper item if you conceded first.

If you say no to the first request then you are more likely to accept a second lesser request. It’s like bargaining. Give and take.

Reciprocity is where you feel a need to repay the goodwill. So if you give something little e.g. the mint after a meal, then the user is more likely to give something back (a bigger tip).

You are less likely to say no on the second time than the first time.

So you suggest 2 offers. The first is like, not going to be accepted but it can’t seem hugely unreasonable. Then they obviously say no, but then you say, well okay, how about this…

It’s like they conceded first in not selling me that and so i’ll concede next time and buy the next one. Comparison also comes into view.

Second option is to, if the customer says no to a price, you email them after with a new, lower price.

Anchors, people will anchor the first offer and then compare other options based on that.

Anchoring and Cognitive Dissonance

See the headphone $895 example. The user anchors the $895 and will make a decision as to ‘how much do they cost’ based on the anchor.

With the $895 – guess $145

Without the $895 – guess $36

So just anchoring with that gives your product a much higher perceived value.

Example: ‘obviously we wouldn’t charge you £1 million a month!’ then they anchor on that and the price i do offer is more accepted.

When you do favours for your customers, do not have strings attached. You are supposed to do something free and nice in order to get reciprocity e.g. the mint.

User Scenarios and Contextual Perception

Design versus UX, you can design things a certain way but they may be used differently, see the image of person not using the pavement but taking the shorter trail across the grass.

You need to be aware of who your visitors are. What led them to your site?

How much knowledge do they have?

What are their anxieties?

What are their expectations?

Re-marketing course -rudansky

Write out a persona, how the person found your site, what their needs are…

Paula is a 28 year old woman who has always felt self conscious about here teeth. She sees all of these people on reality tv with perfect teeth and sees how important a perfect smile now is. She is hesitant visiting the dentist and doesn’t have much money but wants to get her teeth fixed fast.

She googled teeth straightening and came across a bamboo ppc ad, clicked it onto the page.

She wants a safe dentist who has scenarios similar to hers. She wants to be sure that she can afford the payments, trust the dentist, and get the results she wants to be confident and happy.