Landing Page Best Practices

Home/Design, Mobile/Web Development/Landing Page Best Practices

Landing Page Best Practices

Ask your kids to brush their teeth. Ask your spouse to do the laundry. And ask your boss for a raise. Depending on what you’re asking and who you’re asking, your pitch will be different. However the commonality is that you’re asking someone to change their behaviour. You know the best way to achieve this. Likewise at VoltLab we know the best way to get online users to act, to change their behaviour. We know how to create the perfect landing page to bring about conversions.

Converting a visitor is dependent on many design elements. The design has to entice the user to act and simultaneously be simple to navigate. Together, they need to form a persuasive argument.

Think of the process as your ABC

  • Attract the user to your page
  • Be simple
  • Conversion

Staying with KISS (Keep it Sweet and Simple) here are the basic requirements needed on your landing page to compel prospects to act:

Reduce distraction with no navigation bar

Every statistically significant test showed that landing pages without navigation converted more visitors than ones with navigation.

Navigation links are useful on your website when visitors want to learn more about your business via your “About” or “Services” links. However a landing page is like a minimal art work, less is more. All you need to do is offer a one-
page summary about your offer. This should be enough to let users decide whether they want your offer or not. Do not confuse the issue with adding in the proverbial kitchen sink. Remember if it’s not entirely relevant to your offer
do not include it.

A landing page is 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.

Trust us on this one. If you still need convincing listen to a radio ad. Do you respond to the 30 second or one minute message that is packed with information, or do you respond and react to the ad with one simple, yet compelling message? We thought so!

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.

This makes your headline your most important design element. Determine how your product or service transforms your visitors, and let them know in your headline.

A compelling call-to-action button

Making something look simple takes hard word! Ask a ballerina! Designing an effective call-to- action button takes more than simply throwing words on a shape that’s hyperlinked to your “thank you” page. You need to pick the right
copy, size, shape, location, and colour.

Prospective customers want to know what they get, not what they have to do. Rather than rattling off a list of instructions, make it an easy experience. Show users how you are going to make their lives easier. All they need to do is click.

When creating a landing page offer it’s not prudent to make your visitors work to claim it. Rather, get them excited by emphasizing the benefit of doing so on your button. Remember get your kids excited about brushing their teeth because of the minty toothpaste flavour! There is however an exception: If you’re creating a sales page it’s legally and morally correct to be clear with a Call To Action (like “Buy” or “Purchase” or “Donate) that their card will be charged when they click the button.

The Size matters

If your button is too small, it won’t just be harder to notice; it’ll be harder to click. Most people access the Internet via mobile devices, which means your button has to be a big enough for an adult finger pad, which is approximately
7 mm.

A comfortable minimum button size is 10x10mm. Go any smaller and your button will achieve the opposite effect. Once users have tried, been frustrated and tried again they may will give up! Size does count!

The Shape

After you have read this sentence close your eyes for five seconds. “What is the shape of a button?”

Did you see stars and squares? Probably not, the majority of visitors see the traditional button in the shape of a rectangular pill capsule.

If you make your button in the shape of a star, chances are visitors won’t know it’s a button. (For those that saw stars, well done for being creative, out-of-the- box thinkers!)

With a traditional rectangular shape, and textual clues like “Add To Cart” in block lettering, the button indicates its click ability. Other effects, like shadowing, can make a button more easily identifiable by creating a 3D appearance.

Location

When deciding where to position your button, consider your offer: If it’s complicated or expensive, it may require more elements in the form of testimonials, and media reviews to convert the visitor. As a result the CTA button will be lower. If your offer is simple or straightforward a short page with the call-to- action placed above the fold can be all it takes to convert a prospect.

Colour

High-performing CTA buttons don’t attempt to subliminally convert prospects with colour 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 stands out and announces itself to the visitor. There is no subtly here, just hard sell.

Skimmable, benefit-centric copy

Writing for someone who doesn’t want to read is like serving milk to someone who is lactose-intolerant. Your landing page is not a go-to site for people to read when they’re sipping their black tea. They are there to evaluate your
offer.

They need to know if your ebook is worth downloading, your product is worth purchasing, or your webinar is worth attending. And does this lactose-friendly milk really taste like the real deal? You need to convince them and fast.
Research indicates prospects decide in an instant whether they should read your copy. (Think love at first sight).

Engaging Media

An image speaks 1000 words. 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 with visual stimuli. Visual clues bring to mind previous experiences.

On your landing page both still images and videos help the user understand your offering. Videos can detail how your offer works, and still images will become part of a user’s visual memory.

A condensed form

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

With every field you add to your form, you learn more about your prospects but there’s a trade-off. Every field you add is an additional obstacle that stands in the way of what your visitor wants. The form is a double-edged sword. Use it wisely.

Strong trust indicators

No matter your conversion goal, whether it’s signups, downloads, sales, or another call to action, to convince your visitors to change behaviour, to act, to accept your offer you need to gain their trust. Trustworthy indicators include
social proof and security badges, recognizable images and testimonials.

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

Putting it all together

A landing page is like a puzzle. Having all the right pieces isn’t enough. The elements need to come together to form a page that subtly guides your visitor toward conversion. Here are all the conversion pieces you need:

How people read on the web

  1. Readers first scan across the top of the page, entering it through the dominant headline. (The top horizontal line of the F).
  2. Next they progress down the page, skimming across bolded subheadings. (The bottom horizontal line of the F).
  3. Finally, they continue scanning vertically down the left side of the page, stopping to read when they notice formatted text. (The vertical line of the F).

The researchers named this the “F-pattern” for its shape.

Visual hierarchy

Humans don’t perceive their surroundings individually and equally; instead, they make sense of them in the context of the whole. People group together individual elements based on how alike they are to their surroundings.

The reason is our tendency to organize things based on their homogenous characteristics. And because of this tendency, our attention is specifically drawn to things that are different from those groups.

Because our attention is drawn to anomalies, (meaning different from the standard or normal) this has become synonymous with “important” in an age when advertisers are at war for impressions. On your landing page, the most
important thing to your visitors is what attracts their attention first. The second most important thing is what attracts their eyes next, and so on.

Anomalies on your landing page

  1. Your headline: It should contain your USP (Unique Selling Point) in a benefit-oriented fashion. Let visitors know what the biggest advantage to claiming your offer is.
  2. Your benefits: Every visitor should be able to quickly identify what the benefits to claiming an offer are. Features are not important. Instead, it’s the benefits those features provide that need to be highlighted on the page.
  3. Your call-to- action: Once your visitors know why they should claim your offer, they need to know how to claim it. That’s where your call-to- action comes in. It should be attention-grabbing and positioned where it’s easily seen.

The characteristics of a landing page anomaly

  • Size: Bigger = more important. Smaller = less important.
  • Weight: Darker = more important. Lighter = less important.
  • Color: More contrast = more important. Less contrast = less important.
  • Density: Several elements packed together = more attention. Spread out elements = less attention. (This doesn’t mean you should pack all your elements into one small space).
  • White space: Positive space = more important. Negative space, White space = less important.

Conversion-centered landing page color scheme

Studies have shown that simpler is better when it comes to picking a conversion-centred colour scheme. Three hues are an ideal number for guiding visitors toward your call-to- action button.

Use the 60-30-10 rule

Only 10% of your landing page should be filled with your accent. Once you have your accent chosen, the next step is picking a base colour for your header, form, and footer on which it displays well (30%). The background colour takes up 60% of a landing page’s visual space. This colour should be soft and nearly unnoticeable. Generally white is a safe choice here since all tints, tones, and shades display well on it, including the colour of your font, which is crucial for readability.

Now start converting!

Now you’re free to convert your traffic to leads and customers like never before. Start building professional landing pages using the best practices in the market.

Why Us?

At VOLT LAB, we’re all about the experience. We design simple, compelling, and functional websites that make it easy for users to quickly find exactly what they’re looking for when they arrive at your site and then convert them into paying customers. It’s about creating a online experience that transforms users into followers, customers into ambassadors. We do this by listening to you, understanding your target audience, and putting our extensive online knowledge to work on a plan that will improve your business goals and change the way you think about the potential of the internet. Oh, and if you’re wondering, we’re mobile first. It’s not just the way of the future. It’s the way of right now.

CONTACT US
By | 2017-10-16T13:17:32+00:00 September 13th, 2017|Categories: Design, Mobile/Web Development|0 Comments

About the Author:

Leave A Comment