5 ways to improve call-to-action designs for better conversions

A good design principle to live by when designing websites that create conversions is to ask yourself a simple question, “What is the purpose of this page, what do you want the visitor to accomplish on this page?”

Your website should essentially create a flow of traffic from start to finish, a funnel that the viewer can go through to get them to where you want them, be that purchasing an item or filling out a form.

1. Landing page

Your Landing page or Home page should be the guide the viewer will follow when navigating through your site, the tutorial that will give them the tools to accomplish the goals your site has laid out.  This page has two clear purposes;

1. To quickly explain your site.
2. To get users to take the next step in purchasing, booking or filling out a form.

In order to ensure the visitor can efficiently complete the second purpose, you have to ensure you get your primary CTA right.

An efficiently designed primary CTA should be a button with a contrasting colour to your main website’s colour palette to ensure it stands out. Ideally, you should only use this CTA once per page and it should remain consistent throughout your site so as to ensure users can easily recognise it. In most cases your CTA is going to take the user through to the search page where they can browse your products, book a holiday or fill in a form. Ensure you use decisive language like “Shop Now”, “Browse Online Now” or “Book Now”. Don’t use generic or broad terms like “See More”.

Don’t repeat links, with every extra link you create, there will be more elements for users to understand, thus you increase the complexity of your site, which makes it harder to use and easier for your visitors to quit the journey through the site.

2. Search

A good search page allows users to view your range of products, gives them enough information to compare them and make a decision on which products to learn more about. Seeing as this page has a number of product links, it has the potential for more CTAs. If you have images for your products on your search page, it isn’t necessary to add “View Product” CTAs as this is redundant, these CTAS will just look messy and distract the visitor.

Deciding on whether to add “Add to Cart” CTAs? Ask yourself these questions to determine if you need them:

1. Do users buy the products often?
2. Do users tend to order several products at once?

If the answers are yes, then go ahead and add these CTAs to the search listings. Ecommerce websites that deal in mass or bulk purchasing benefit greatly from these CTA options.

3. Product

Your product page has a few responsibilities, namely;

• Showcase the products (images or videos)
• Explain product features and list specifications
• Reassure users via reviews and social proof
• Make it easy for the user to finalise their purchase

The clearest CTA on a product page should be to buy the product or add to cart. If the user has reached this far down the funnel, they shouldn’t be left guessing as to how to proceed and finalise their purchase, this page has the most important task, so help the user accomplish it.

Matt Isherwood offers some advice  “Don’t blend it in, don’t make the wording unclear, and don’t prioritise other actions on the page (like adding a product to a wish list). If the CTA is prominently positioned, then it doesn’t need to follow the user around the page in a floating navigation”.

Don’t make the mistake of greying out or deactivating the “Buy” CTA, even if you want users to complete a task like choosing the size first, since this will cause confusion and leave the user with the idea that they can’t purchase the product. When something actually is out of stock, you could replace it with a link to a contact form so they can ask to be notified when it’s available again.

4. Checkout

A checkout flow is where users give you their personal and payment information to complete a purchase. It’s essentially a form-filling exercise, but a good checkout is pain-free and gets out of the way of the user. CTAs gain in importance as we reach this sharp end of the funnel, clicking them here is the difference between users paying or not. If you have a multi-step checkout, then the CTAs should look and read the same on each page. The exception is the final button to complete the transaction, particularly if you’re sending users to another site to pay, this is something you should make clear so they aren’t shocked when it happens.

5. Get some outside help

If you’re designing a new website, updating your existing one, or building a mailer, these are all great principles to follow when it comes to how you treat your CTAs. If you feel you need some help from the experts, feel free to get in touch with our UI / UX design experts here at MO agency.