At the most basic level, your website exists to make somebody do something; whether that’s getting users to fill in a form, download a PDF or buy something shiny. When this happens, it’s called a conversion. The more conversions your website gets – the more successful it is.
So how can you increase conversions? A lot of time effort and money has likely already been spent on your website; it may already be performing above your expectations. The role CTA design plays in the success of any website cannot be overstated. That’s why I believe, with a simple 5 step review process – you can maximise the success of your CTAs and increase conversions.
For this post, I’ll be focusing on button CTAs. Humans like the familiar – buttons fit this bill extremely well, both in the physical and digital space.
“Put it at the top and in the middle”. How many times have I seen this in countless CTA-related articles? All this does is perpetuate the myth that website users are mindless drones. The likelihood of a user hitting a website page and being ready to instantly convert is slim. Really slim.
By using the AIDA principles as a guide, you can determine where on the page your CTA(s) should reside:
Where your CTA(s) appear on the page should be defined by this, or a similar thought process. If your service or product is relatively simple it could be completely acceptable to have a CTA front and centre at the top of the site. But, if what your offering requires a bit more explanation – logically it makes sense for your CTA to appear further down the page (Yes, even if that means going ‘below the fold’).
The diagram below, sourced from the Kissmetrics blog, shows how CTA placement should be relevant to the product/offer complexity.
If we apply the same logic to everyday life it makes even more sense. Everyone knows what they’re getting when they buy a Coke. It’s been around for years and 1.7 billion of the putrid little servings are consumed every day. Then you have the latest Super Smoothie range from Innocent. As you enter a shop you notice a promotional Innocent Super Smoothie poster in the window (attention). You walk to the chill cabinet and notice a big point of display ad board showing the drink/slogan and what makes it different from the other smoothies (interest). You pick up the bottle and read its list of health benefits and the five different vitamins it contains (desire – for the health conscious among you) and into the basket it goes (action). My point here is that the whole process doesn’t work if the shop owner just puts the bottle in the window. The product’s placement, in terms of the user’s journey, is crucial.
Basecamp is a great example of how, if your offering is simple or well known enough, a minimal CTA can have a huge impact. A great leading headline and message is supported by a striking illustration. Once the user has digested this information, a simple-looking contact form lets potential clients get into the system quickly and easily.
Jumo, as a new product to a very crowded market, has afforded itself the luxury of space in order to get users to the point of conversion. If what you’re selling is particularly new or high value – spending longer on the ‘sales pitch’ can reap conversion rewards. My favourite part of this design is how Jumo uses photography of the lamp in situ to delight the user. The CTA area at the bottom is beautifully simple as well. White or black – make your choice.
Although this step refers directly to size, I’m cheating somewhat. Size is a crucial factor in designing an effective CTA, but only when contrasted with the relative size and spacing to the objects around it.
Your website has been designed with a set of rules in mind. These rules dictate things like image sizes, typographic styling and layout changes depending on device size. The measure of good CTA design is executing a button, link, form etc. that sits seamlessly within the rest of the website’s design – but sets itself enough apart so that a user can easily identify it.
Browser landing pages are going through a bit of a cookie cutter design phase at the moment. Headline, CTA and screengrab of the browser at the bottom are common elements across all the major players, clearly seen here for Chrome and Firefox. Although both designs are essentially the same layout – the size of the CTA directly reflects the brand of the browser. Chrome’s blue CTA is less than half the size of green Firefox one. Despite the size difference, both buttons do an equally good job of working with the page design and standing out as a definitive CTA.
Dropbox has always had exceptionally effective CTA options for its users. The example above illustrates how using size (as well as colour, which we’ll come to in a bit) you can hierarchically differentiate between CTAs. The blue CTA is clearly the most popular choice on this page and the one Dropbox wants new visitors to find first. The white CTA (top right) is smaller and subtler and has another use…
Once the user starts scrolling to see the benefits of Dropbox for business, the white CTA and header stay in view. They’re subtle enough to let the user concentrate on reading the page – but clear enough that should the user wish to try Dropbox they can without having to scroll to the top of the page.
Gravity, the company which serves sponsored articles to thousands of news publishers, has made hard work of CTA imho. It’s got some nice interactivity happening on the homepage but, whilst ‘learn more’ is the most obvious CTA for this particular section, it’s far too small relative to the rest of the design. Users are likely to miss it altogether. By increasing the size of this button, you would expect to see more conversions. The largest CTA on this page (bottom right) takes the user off the site and onto Facebook – not ideal when you’re trying to sell an advertising network.
One of the easiest actions to improve a poor CTA is to adjust its colour and contrast in relation to the page design. Simply put, a CTA has to stand out. The biggest mistake when using colour for CTAs I’ve seen is the default action of making the button green, red or orange – though it’s easy to see why this is commonplace. A simple google search for ‘best colour for CTA buttons’ returns 458k results. Whilst it’s true a lot of these articles don’t focus specifically on ‘the best’ colour – some do and nearly all of them use the aforementioned in the example images. The fact is, there is no ‘best’ colour. The best option for your CTA is the best contrasting colour that works with your website’s design. The last part of that sentence is important – great CTA design is the marriage of making your button stand out as well as ensuring it looks like it belongs on the site. It is with no hint of irony that the examples below are orange, red and green.
B&Q underwent a huge re-design that spanned several years, for its ultimate launch in 2014. Aside from its new ‘mega menu’ that has received much praise – the use of colour and contrast with its CTA buttons has impressed me just as much. B&Q has a strong brand palette already with its use of orange and dark grey. Using colours that contrast with these (greens, reds and greys), B&Q is able to use its core colours for CTAs.
The Charge Bikes website demonstrates another way of using your brand palette to maximise CTA effectiveness. The site is heavily led by great photography, as with many lifestyle brands. What Charge does a little differently is limit the colour palette so the only real flash colour is the CTA. On every page – the purchase decision CTA is top right and in vibrant red.
One of my favourite new banking websites, Lloyds, has a great responsive design and is excellent from a usability POV. The company addressed a lot of the problems of its last design for this version, things like poor access to information, terrible accessibility and poor UX. There is one thing I believe would improve this site no end – working on the CTA colour and contrast. Everything is green – so very, very green; the site, photo colour balance and the buttons Lloyds wants you to click. Aside from colour accessibility issues (see W3C for contrast guides), which are vast, I believe that the brand manager has overstepped the mark here. Every designer appreciates the need to stay ‘on brand’ – but never at the expense of the user.
The copy on your CTAs can be a really simple thing to fix and see immediate improvements upon. Tell your users what will happen when they action the CTA. Things like: “Download my free white paper” and “Sign me up to the newsletter” are prime examples. Using copy like “submit”, or the most useless web copy that has ever been created, “click here”, should never be used.
Be concise and don’t waffle – keep your copy action-orientated. If there’s a time limit on your CTA action, try this in your button copy: “Download my PDF for free, today only!” Adding a more general sense of urgency can also be a great tactic for more standard CTAs: “Submit my details now”.
First person copy has been shown to increase CTR (click through rate) on some occasions. There’s a great Content Verve case study that details how changing CTA button text from second person (“get your free template”) to first person (“get my free template”) resulted in a 90% increase in conversions. Put your user in the centre of your messaging.
King of the one page landing page, Unbounce has a lot right with its homepage design. The CTA sits logically within the design, it’s a good relative size and its colour is in direct contrast with the brand’s blue palette. But it’s the messaging on the CTA that is really powerful. “Build a high-converting landing page now”. The user knows exactly what to expect when they action the CTA and the simple addition of the word ‘now’ adds just the right amount of urgency to help the user make a conversion decision resulting, hopefully, in a positive action.
The UK version of Volkswagen’s site offers multiple CTAs that all inform the user in a tidy, succinct manner. It’s logical to suggest that VW found visitors to the website fitted in 3 main categories (existing customers, new wanting new and new wanting old). It’s also logical to assume users also used the site to find their local dealer or to seek documentation/support. VW places this options on the very first page of the site – helping users get where they need to quickly.
My last and most expansive suggestion to improve your CTAs is to work on the experience your user has after they’ve gone beyond your CTA. This simple idea is neglected by many websites – but is crucial in maintaining your users’ interest, especially if your conversion relies on further steps after the point of CTA affirmation.
Some common questions to consider when thinking about post action UX:
By considering what the user experiences beyond your CTA, you increase the chance your user will convert again in the future, or recommend your service and/or product to their friends and peers.
Useronboard is a great resource to see how websites deal with users past the point of CTA affirmation. By looking at how successful companies treat their users, it should help you borrow ideas to positively impact your users.
CTA button design is the tip of the iceberg when it comes to improving conversions. Ultimately, your whole website must work as a cohesive marketing tool to achieve the best results. That said, by breaking down each CTA button on your website and running A/B experiments (perhaps through a simple 5 step process?), it’s completely possible to see positive results with very minor tweaks.
12 tips for good design/” title=”landing page design”>landing page design
Inside Vertical Leap: Launching successful design from a data platform
Design ROI: Is your business looking good?
Wez headed up the design team at Vertical Leap. A brand and UX specialist, Wez has spent the last decade travelling the world working with iconic brands in event and digital marketing activation projects. Wez now lives on the Isle of Wight and commutes by boat to Vertical Leap HQ.
Website under-performing but not sure why? Our free review will reveal a list of fixes to get it back on track!
Categories: CRO, Design
Categories: Design