The Complete Landing Page Design Guide: Part 2

Posted by Hunter Liptrap on Feb 18, 2016
Hunter Liptrap

K29UC45CG8-1.jpg

In part 1, we looked at attention ratio, design match, and visual hierarchy.

If you want to go back and take a look at those topics feel free to do so by clicking here to view it in a new tab.

This time around we are going to take a look at the elements that you can use on a landing page, context of use, and how to optimize for mobile.

Bonus: Download our 52-point landing page design checklist in PDF format. Easily save it to your computer or print it for reference for your next landing page.

Landing Page Elements

Hero Shot

For a quick tip on choosing your hero shot, take a hint from Oli...

"Your hero shot should sell the hell out of your product – make it clear and dominant on your landing page." - Oli Garnder

The hero shot is the first thing visitors are going to notice on your landing page, almost guaranteed.

That's why it's so important to nail it, and it starts with choosing the type of hero shot for your landing page.

A hero shot is the visual representation of your offer.

It should demonstrate how your product or service actually works so your prospects can picture themselves using it.

When deciding on your hero shot you have 3 choices...

  1. Happy Customer
  2. Product Shot
  3. Video

Let's start with a popular choice...

1. "The Happy Customer"

Showing a smiling face on your landing page is fine, lots of companies are doing it and for good reason.

We are hard wired to look at faces, especially happy ones.

It's what we do.

However, this type of hero shot doesn't work for every company, that's why there are 3 other viable options.

But if you want to go with showcasing a person, you have to make sure it is conveying the message you want and that visitors stick around to learn more.

Let's take a look at an example from Scottrade...

bad-hero-shot

So this example is from a paid ad on Google.

How do you feel about that guy? He probably creeps you out, I know he creeps me out.

That's not good.

You want to avoid using stock photos in your hero shots, they either send the wrong message or no message at all.

The single most important piece of information you can have is knowing your buyer.

You should align your image choice with your buyer persona, your ideal customer.

They should be able to identify with your landing page, so when they see your hero shot they think "Great, I'm in the right place".

Now let's take a look at a better example...

better-hero-shot

Alright not a stock photo! That's a big first step.

While this isn't a great landing page, it still has the main site navigation on it, it's still a solid demonstration of a good hero shot.

I got to this page by searching for "open a bank account".

It's decent to assume that people who are looking to open a bank account are young. They are probably looking for one that has mobile access or an app for online banking. Plus, older people aren't going to be looking into changing their bank too often unless they have moved or something of that nature.

The hero shot here hits the mark for their "buyer persona", I can identify with it.

Now, that's lesson one. Don't use stock photos, but what about lesson 2...

Use your happy customer to direct the visitors attention.

I'm sure you are all familiar with this graphic...

8-baby-face-eye-tracking

This A/B test heat shows us two things...

First, it confirms that we indeed are hard wired to look at faces. The version on the left with the baby looking straight at us, draws our attention. However, we get lost in the baby's face and never make it to the rest of the page.

Second, the direction of the face is a powerful visual cue. The version on the right has the baby's face pointed directly at the headline. Therefore, we follow it and read the page.

Genius.

Let's apply this logic to the last landing page example we looked at.

Instead of having the couple on the right, they should be on the left.

Take a look at this crude mock-up of what that would look like...

good-hero-shot

Boom. Instantly, this page provides a directional cue to the buttons on the right.

To have an effective "Happy Customer" hero shot you need two things:

  1. You need to know your buyer persona (What's relevant to them and what they will identify with)
  2. You need to provide directional cues

2. The Product Shot

You just clicked on a paid ad for a new Deadpool t-shirt for your son, nephew, guy you know, or maybe yourself.

What's the first thing you want to see?

Yup, the shirt.

Product Shot And there it is. The totally awesome shirt you've been looking for.

What does this tell us?

That the "product shot", image of what you are shopping for, is an essential part of an e-commerce landing page.

So much so that I bet if you take the image of that shirt away, you would click "Add the Cart" no matter what.

When designing your landing page think about how much it matters to visitors to actually see what they are getting.

If you do have a landing page with a product on it or considering creating one, the image itself is crucial in turning visitors into customers.

Outside of e-Commerce, there are a few instances where you might want to consider using a product shot...

  • eBook
  • Free Trial
  • Product Demo

Obviously these might not always be tangible products, but they can provide a visual for a visitor to relate to.

If you have a landing page for an eBook download, you may want to take a look at PSDcovers.com.

To use this site you need to have photoshop.

If you aren't proficient with photoshop and have a graphic designer handy, this can be a real time saver.

You can download what are called Photoshop actions from PSDcovers that will create an eBook template in photoshop for you.

All you have to do is add the cover image and you'll have a realistic looking book when it's all said and done.

Here is what a completed template looks like...

Product Shot Ebook

Pretty nice right?

If you are offering a free trial or a demo, the same principle holds true as the t-shirt. The visitor probably wants to see what they can expect to get.

If it's software a screenshot of the dashboard might be enough.

PSDcovers has templates for laptop screen, iPhone screen, and desktop computers as well, but there are plenty of other websites out there that will help you with that as well.

Here's an example from HubSpot...

Product Shot demo

The screenshot of their dashboard goes a long way in building trust and letting me know what I should expect to get.

When you decide to go with a product shot like this from a demo or trial it's important to explain the product further throughout your landing page.

Explain your product step by step and include even more screenshots, like HubSpot does here.

3. Explainer Video

If you can make it happen, go for it.

However, if you implement your video incorrectly it can kill your conversion rate.

Absolutely destroy it.

Got it? Good.

Now, let's look at the right way to implement video on your landing page.

To start with what makes explainer videos so effective is our short attention span.

We have 8 seconds to capture a visitors attention before we lose them.

The average explainer video is watched on average for about 2.7 minutes, compared with 28% of website text shown to be read on average.

That's huge for getting your story across.

So what do you need to do to have a successful explainer video?

In less than a minute, a well-made explainer video should show us what we need to know about your business:

  1. Who you are
  2. What you do
  3. Why we should use your products or service

Backgrounds

First and foremost, when choosing a background for your landing page you have to consider design match.

If you have a CTA or a paid ad that has a background image, that's the background image that needs to be on your landing page.

Here's an example...

druva-ad

This is the ad

druva-lp1

This is the landing page

Notice how the background is the same? That tells the visitor, "Hey you're in the right place, stick around".

Now, with that out of the way here's what you should be looking for in your background image...

  • It draws the eye
  • It matches your identity
  • It contrasts your text
  • It conveys your message

Draw the Eye - You want to select an image that will draw the visitor in, without taking away from your page completely.

Match Your Identity - The image you choose should still reflect your brand.

Contrast Your Text - Readability is still important, choosing a background with a wide array of colors can make it difficult to read any one color of text. If you run into this you may want to put either a dark or light overlay on top of the image.

Conveys Your Message - Last, but not least, the image must be relevant to your business and your message.

Let's take a look at an example from Uber. This is the landing page you see when you go to sign up as a driver.

uber-lp

Does this image draw your eye?

Sure does, nice blue sky and contrasting bright white car.

Does this image match Uber's identity?

Yup, sure it could be an image you'd find on Lyft, but Uber's logo is black and white so I associate the white car more with Uber than I would with Lyft.

Does this image contrast the text?

Sure does, the sky is a deep enough blue at the top that the white text stands out.

Does this image convey their image?

Absolutely, it showcases an independent woman standing with her car.

Where can you get awesome images for your backgrounds?

Check out Pixabay.

Icons

Landing pages often list the reasons why people should sign up for the service, or download the product.

These reasons, either features or benefits, are almost always in the form of bullet points.

Bullet points take that wall of text and breaks it down into an easy to read and understand list that visitors will actually read.

But even better than bullet points are icons.

You can use icons to accentuate your bullet point list, by adding more visual weight to them.

Here are a couple of options you should checkout.

Iconfinder.com

Iconfinder

Iconspedia

iconspedia

When choosing icons make sure they go together, if you can find an icon set that's even better.

Video

As previously mentioned in this article, video is a great way to tell your story while keeping your audience engaged.

That's fine, but there are a few thing you want to keep in mind...

1. Using a background video

Having a background video is cool, you've probably seen them around, and they can even replace your hero shot.

However, when using a background video you should never autoplay the sound. Never.

If you opt for a video background and want sound, you should have a call-to-action or a visible play button that a visitor can click to play the sound or pop the video up in a modal.

2. Container Size

Wistia has done plenty of the dirty work when it comes to analyzing data on video.

They found that the optimal video container size for increased play rates is 540px by 380px.

Here's how big that actually is...

 

Probably not as big as you might have expected.

However, if you are using a two column layout there's a good chance that a video of this size is about the size of 1 column.

What does this mean for you?

If you are using a video in a 1 column layout, center it.

If you are using a video on a 2 column layout, using 1 column for the video is great. You can then use the other column next to it to explain the video or summarize it using bullet points.

3. Choosing the Thumbnail

The thumbnail is the first part of the video visitors will see. It's the stand still image that appears before they click play.

Having the right thumbnail image is a key part of getting your video played.

Everything that you know about selecting a hero shot image also applies to the video thumbnail, because you want to draw the visitors attention to it.

So, to recap your thumbnail should look to do the following...

  • Be relevant
  • Showcase the product
  • Showcase a user
  • Convey an emotional trigger
  • Keep it on brand

4. Using a Play Button

If there isn't a visible play button on top of your video, it's not going to get played.

Plain and simple.

If you are embedding your video from YouTube directly it will come with a nice big play button.

However, if you are using a service like Wistia to embed your videos, make sure the play button contrasts with your thumbnail image.

By default Wistia will give your a grey play button and it's not always easy to see.

Check out this example...

Wistia default

That's not exactly the most attention grabbing play button is it?

Switching to a bright red color, like YouTube, makes it more noticeable...

Wisita Change

Please note, that the color you choose for your play button is completely dependent on the rest of your page and your brand color scheme.

Your play button should contrast with your page. You may want to consider making it the same color as your call to action, if it isn't in the same space.

5. Page Position

How far down on the page your video is matters.

The further down, the less plays it will receive.

However, it doesn't have to be above the fold.

You can move your video just under the fold and receive similar results.

Using People

Not in a bad way, of course, but as testimonials.

Nobody, likes to be first, but they certainly don't like being last either.

Showcasing testimonials is a great way to build trust with visitors, but they need to be believable.

How do you make a testimonial believable?

1. Use their picture

Simple, if you can't see their face, how do you relate to them? You really can't. Without a headshot, it could have been anyone who said that amazing quote about your company.

Now, if you are using a testimonial from a business you can use their logo instead. However, if it's from someone at that business you would expect to find a headshot for them somewhere.

2. Use their first and last name

Don't say that great testimonial was from Suzy S., that could be anyone. To make a testimonial believable you should use their full first and last name.

Suzy Strutner carries far more weight than Suzy S.

3. Make it believable

If the quote says "This is the greatest thing since sliced bread", "This changed my life", or "This thing is amazing it can do everything" or anything of that nature. Don't use it.

It doesn't matter if they actually said it, it comes across as fake.

Any visitor who reads that is probably going to think, "Really, this roll of toilet paper is going to change my life?" and bounce.

Instead, include a testimonial with at least a few arguments against your own immediate self-interest.

Why on earth would you want to do this?

Well, according to research by Dr. Elliot Aronsen, who is considered to be one of the top 100 psychologists of the 20th century, this is the most effective way to build instant credibility.

Make sure your testimonials sound genuine and speak to visitors pain points.

The best way to choose your testimonials is to do buyer research.

Here's and example of a pretty solid testimonial on Unbounce's Agency Sign Up Landing Page...

Unbounce testimonial

Using a Confirmation Page

Your confirmation page allows you to give thanks and appreciation to your prospects for taking action on your offer.

It also lets visitors know that their intended action has been completed and their form submission went through.

But, why do you need a confirmation page, not just a thank you message?

Unlike a thank you message, a confirmation page allows you to provide your prospects with another opportunity to share the offer with their social connections and take the next step toward working with your business.

Let's take a look at 2 main options you have for creating your confirmation page....

Option number 1, the Pop-up

Unbounce uses a confirmation pop-up instead

of a confirmation page.

Unbounce pop-up

This makes grabbing your download nice and easy.

You might want to consider this method for top of the funnel offers, where awareness is more important than a secondary up-sell.

Option number 2, the Secondary Offer Page

They provide the option to download the file as well as share with your social connections similar to the Unbounce approach.

Thank you page Hubspot

They go hard with a secondary offer to move the visitor further down the funnel, while still providing a download link and a shareable link for the offer.

There are variations of these two options that you can check out here, where we break down 6 Thank You Examples from some of the best in the business.

Whitespace

Whitespace is what is going to enhance the user experience for every visitor to your landing page.

A cluttered landing page is no good for conversions.

By using whitespace you can help direct the visitors attention, and ultimately increase conversions.

I realize that might sound odd, how does the absence of something help convert visitors?

Let's take a look at 2 primary reasons...

1. It creates prominence

When you surround your landing page elements with whitespace you essentially make them more prominent, draw more attention from your visitors; making them memorable.

You know who the king of whitespace is?

Apple.

Check out their landing page for the iPhone 6s.

Apple

That's a hefty dose of whitespace. It's clean, it's simple, it makes the phone stand out.

2. It creates readability

It's hard to read a bunch of text crammed together. By using generous margins you can break up your content into easily digested pieces of information.

Keep this in mind when it comes to how readable your page is as well...

Users scan the text and take away only certain elements that they use to make a decision about whether the page is relevant to their goal or not.

Clean use of space allows users to scan and absorb key messages.

Navigation

Landing pages shouldn't have navigation on them.

A lack of navigation ties back to the idea that a landing page should have an Attention Ratio of 1:1.

Meaning that your landing page should only have one goal.

The exception to this is including navigation on a long landing page that takes you to a specific part of the page.

Context of Use

The Context of Use is the actual conditions under which a given artifact/software product is used, or will be used in a normal day to day working situation.

While that may seem like an obvious part of landing page design it can often go overlooked, because you are so close to your product.

Don't believe me? Take a look at what Spreadsheets App used to have as the hero shot...

spreadsheets-hero-shot

Based on that hero shot, what do you think this page is for? It's clear that it's an app for your phone, but what does it do?

With a name like spreadsheets you might think that it's a serious data analytics app.

If you thought that, you'd be wrong.

Spreadsheets is in fact the worlds #1 sex app.

Here's their new landing page..

Spreadsheets new

See they went ahead and cleared that right up for you.

What you can take away from this...

  1. Your messaging should make it clear what your product is and it should be the first thing visitors encounter on the page. (Use visual hierarchy)
  2. Make sure that the images and videos you are using provide context to how the product is used in real life.

Optimizing for Mobile

Mobile landing pages are a completely different beast than on desktop.

Visitors often have a different mindset when they are on their mobile devices, often times they are in research mode.

So when a visitor actually decides that they are interested in something on their phone, it's best to eliminate as much friction as possible.

Let's take a look at how you can do just that...

1. Use a Click to Call Button

Want to increase leads? Let them call you.

They are already on a phone, so why not make it easy for them to call you.

Angie Schottmuller shared this slide from one of her presentations, showing how to configure your click to call buttons (complete with GA tracking):

 

GA click to call

If that doesn't strike your fancy another option is to use CallRail for your call tracking.

You will still need to do some responsive coding and design to make it look clickable, but CallRail can make it easier to track how many times a certain number was called and offer recording capabilities.

CallRail will even swap out phone numbers so you can keep your regular number on the page.

2. If you Don't Want Calls Eliminate Typing

Eliminating form fields that aren't essential is a good start.

After that try to replace as many fields with dropdown's or selectors as possible.

Doing those two things will be all you need to reduce typing.

3. Don't Use In-line form Labels

Labels placed inside the form field (aka “inline labels”) are widespread in mobile apps and sites.

But they can be conversion killers.

What distinguishes one field from the next is its label – the label is the defining context for that box.

So, what happens when the label is gone?

You get frustrated.

In-line form labels are susceptible to a loss of context that typical form labels aren't.

Once you click into the form field, the label disappears.

mobile-forms-avoid-inline-labels-02-04abcbffae9730d3191a22657497686a

The only use for in-line form labels on mobile is to further explain the primary label, as shown in the image above.

Mobile visitors are more likely to be distracted than on desktop, and therefore more likely to lose their place while filling out a form on their phone.

What's Next

That's the end to part 2, take time to implement these tips on your landing page and make sure you have the elements you need to boost your conversion.

If you haven't read part 1, or want a refresher you can check it out here.

Still to come...

  • Web design trends to avoid
  • How to reduce friction
  • Optimization tests you can run
Author
Hunter Liptrap

Hunter Liptrap

Creative Director at Modgility
Hunter is Certified Inbound Marketing, Growth Driven Design, and HubSpot Design. He has a passion for the conversion rate optimization process. With 3 years of experience he has designed and built multiple websites across various industries.

Leave a Comment: