5 tips for designing a landing page CTA

Kaitlyn Ellison

CTA — it stands for “Call to Action”. When done right on your landing page, it 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.

But today 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

Ritual CTA

Ritual has found a clever and clickable call to action with “Start your ritual”

We want our CTAs to turn a site 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

icon works

There’s really no question what Icon-Works wants you to do on their homepage.

Your landing page should have a clear and singular CTA 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 site. 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 using color, size, shape (see tips down below), or by strategically using the fold.

3. Direct the user’s eye

Sosh-1

Sosh uses engaging, but still faded imagery to get the user’s attention and direct it toward the CTA

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 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 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

Every last drop

Every Last Drop uses a very bold and targeted technique to get users invested in an idea before showing any sort of CTA.

The fold is the point at which you have to start scrolling to see the rest of a web page. What is above the fold you see immediately upon entering a site, 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

Tumblr-1

Tumblr’s landing page is fascinating, beautiful, and functional. It relies on imagery that still gives a sense of white space, pairing it with a small but contrasting form.

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

  1. Color: Contrasting but complementary colors 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 color scheme, and how far you can break from it.
  2. Size: Correlates very closely with color. Considering the elements on the page, how big does your CTA have to be to grab attention while still keeping the page balanced?
  3. 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?
  4. Whitespace: As in all good website design, whitespace is a major factor in directing the eye, so don’t neglect it.
  5. 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 CTAs, 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 web page to certain customer segments and an alternate version to the other. That allows them to measure which version of the site 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.

There you have it, some basic guidelines for creating a fetching CTA. Go forth and apply them, and link us to your best results in the comments.

The author

Kaitlyn Ellison
Kaitlyn Ellison

Kaitlyn is part of the Community Team at 99designs.com. She grew up in Boulder, CO and went to school at Northwestern University in Chicago. When she's not blogging, she spends her time having adventures and being generally creative. She's all about having new experiences as often as possible!

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%