Spread the love

Rimidesigns Apply Now CTA

5 Tips for Designing a Call-To-Action Landing Page

When done right on your landing page, a call-to-action is what’s going to convert visitors to users. A CTA can call for a lot of things. Lead generation, blog/social media/e-mail followers, customers for a direct sale or attendees for an event. They can be used on any page of a website to get people to click where you want.

In this article, we’re going to talk about CTAs in the context of landing pages. This means, getting a customer to sign on for something that they know very little about from what is likely the very first page they’ll see of a company’s website. You can do it efficiently to help your client sell their product.

1. Use text to drive conversions

We want our call-to-actions to turn a website visitor into a paying customer – and we want to do it efficiently. The longer that it takes someone to sort through a landing page, the less likely they are to click on that button. Use the landing page to show a potential customer what’s in it for them.

A part of this challenge rests in the hands of a copywriter. As a designer, that task may not always fall into your hands. When it does, it’s your responsibility to know exactly what your customer wants accomplished with their CTA and find the most compelling way of articulating that. Be brief, be smart and, if you can, be clever.

2. Be direct

Your landing page should have a clear and singular call-to-action whenever possible.

While a company will often have many ways of interacting with customers (i.e. “Read our blog”, “Buy our product” and “Contact us for more information”), they also have a lot of web real estate where they can be using them.

In the landing page, often the most effective technique is to stick to using one call-to-action. Narrow down what the most important conversion goal is and go with that. Leave the subsequent goals for other pages of website.

If there needs to be additional tasks on the landing page, make sure that you’re creating a visual hierarchy, so that users go to the most important task first. Do this by using colour, size, shape or by strategically using the fold.

3. Direct the user’s eye

Just because you are trying to focus the user’s energy on one very specific button on the page, doesn’t mean that button can work on its own. A blank page with a call-to-action doesn’t mean anything. The user needs context to make that action relevant.

Three major cues you can use with your CTA include:

  1. The company or product title and description
    Don’t assume that the user knows what you are selling when they get to the page. It’s your job to show them. These are most often placed above a CTA, with varying degrees of subtlety. This information has got to be on there, but it doesn’t have to be the part of the page that first gets the user’s attention.

  2. A hero image, illustration or video
    One that will grab attention, show off your product and capture the user’s imagination. This component is often layered with the CTA at the same point in the page.

  3. Testimonials
    Testimonials help build trust with the user. People are being sold something pretty much everywhere they look these days. Show them that what you’re selling will add value to their life by using the space below the CTA to display happy customers.

4. Experiment with the fold

The fold is the point at which you have to start scrolling to see the rest of a webpage. What is above the fold you see immediately upon entering a website and what is below is strategically hidden.

There’s a whole science to determining whether CTAs should be placed above or below the fold and deciding what you should do is heavily determined by the type and amount of information you have on your landing page.

To help you decide what is best, figure out how much supporting information it is going to take to get your point across and if that information needs to appear before you call your user to action.

In most cases, it is going to behoove you to keep that CTA above the fold, but there’s no strategy that’s going to work 100% of the time. For information-heavy pitches, you may need to test out the road-less-traveled.

5. Focus on the nitty-gritty details

By now you all know your basic design elements and principles. They usually apply in almost any given design challenge. In creating call-to-actions, however, there are a couple that are particularly important.

  • Colour
    Contrasting but complementary colours help to make a button stand out, but in a way that isn’t jarring to the user. Make sure you understand and work with the brand’s coluor scheme and how far you can break from it.

  • Size
    Correlates very closely with colour. Considering the elements on the page, how big does your CTA have to be to grab attention while still keeping the page balanced?

  • Shape
    Also helps balance out the page while tapping into a certain mood. Does your style require harsh angles or smooth curves to help direct the user’s eye to the most important information on the page?

  • Whitespace
    As in all good website design, whitespace is a major factor in directing the eye, so don’t neglect it.

  • Symbols
    They can be your friend. Using something like an arrow can help clarify what the CTA is going to do for a user, as long as you don’t use it as a crutch to cover up an otherwise unclear design.

Final thoughts

We can give you all of the ideas in the world about call-to-actions, but it’s always going to be situationally dependent. What works for one landing page isn’t going to work for another and the best way to figure out what’s really going to convert more is to test out multiple versions.

Suggest to your client that they perform some sort of split or A/B test, showing one version of a webpage to certain customer segments and an alternate version to the other. That allows them to measure which version of the website converted more customers. And as a designer, pay attention to this!

When you have a company perform these tests on your work, get to know what happened so you will be better prepared to create options on the next project.

SOURCE: 99 Designs

Need professional assistance creating a great landing page?

5 Tips for Designing a Call-To-Action Landing Page

Spread the love
Tagged on: