by Matt Pezzimenti
January 10, 2020 • 8 min read
Creating an effective Call to Action on mobile devices comes down to utilising best practice principles as well as an extensive suite of A/B testing tools to ensure changes are being received well by the customer base.
Conversion Design Principles
Colour is often the most talked about the point when it comes to increasing CTA click through rates. Many websites claim that changing a primary CTA to a big bright green button will instantly increase conversion rates, while others will go down the path of keeping the design in line with the rest of the page.
Fashion Bunker, an eCommerce apparel retailer, utilises the colour principle on their primary CTA to add some prominence to the button via a bright but pleasant green. This colour helps the button stand out amongst the page and encourages users to tap on the section and add items to the cart.
A simple colour change like this could increase conversion rates on that CTA by up to 35%.
However, simply changing a CTA to a bright green isn’t going to immediately raise a buttons click-through rate. The important thing to consider when it comes to colour isn’t the colour itself, but how it makes the button stand out from the rest of the page.
Topshop, a similar eCommerce fashion retailer, utilises a straight black for their primary CTA colour. Although it’s a simple palette, it is effective in the sense that it stands out from the white background and light colours utilised by the other CTA’s on that page.
However, even though it stands out from the page it doesn’t have the same prominence and effectiveness of a coloured button such as the one utilised by Fashion Bunker. The black still blends in far too much with the page especially when paired with the rest of the design.
Colour theory is a principle well dated, and it’s proven that colours can evoke certain emotions or desires in viewers. Red is often associated with anger or assertiveness, blue is linked with cool and easy emotions, and green is good and healthy. When it comes to web design, colours often have certain connotations as well such as blue for links and red for error messages.
CTA location is the most important aspects to consider when it comes to Mobile devices. One of the most contentious debates of CRO is scrolling and whether or not to place content before or after the fold.
Research always points that content below the fold doesn’t receive attention, sometimes as low as 23% viewability. However, there have been recent studies to refute that fact such as Time magazine’s research stating 66.7% of the time on a page is spent below the fold.
The actual truth is a mixture of both. Users definitely are spending time below the fold via scrolling, but they’re not spending time there absorbing the content.
What this means for CTA’s is that it’s important to put them in a prominent position where mobile users are able to notice them straight away and engage with them.
Dropbox, an online storage platform, uses an excellent mobile home page with a prominent above the fold CTA that stands out and encourages users to click through.
When a user first arrives on this page, they’re most likely doing so because they’re not signed in – therefore do not have a working dropbox account. By making the sign up for free button the first thing on the page, it helps increase their CTA as new users won’t need to be searching far on the page to find out how to make a dropbox account.
An important but often under-utilised tool in the belt of CTA optimisation is text copy. When it comes to increasing the performance of a CTA, the design is always the first thing that marketers try; but sometimes the simplest approach can be the best.
Call to Actions should have strong and powerful messaging applied to them, words that help encourage a user to click on the button and be taken to the next step. Bland CTA’s such as “Continue” or “Go” don’t perform as well as more personal and emotive ones such as “Click here to optimise your business” or “Try out this product for free”.
Crazy Egg is an online heat mapping tool with a simple dedicated lead gen home page. The messaging they put on their primary CTA is a simple “Show Me My Heatmap”, which is a personal and directed message to potential customers landing on this page.
What makes good CTA copy effective isn’t just the wording and emotion and around it, but also the context behind it. A CTA that just says “Go” doesn’t give a user many contexts around what will happen when they click on it without looking around the page first. In Crazy Egg example, just by having that button on the page with that copy, it’s abundantly clear that a user entering a website URL and hitting the primary CTA will be taken to a heatmap of their website.
With these three principles in mind, it’s fairly straight forward to combine all three to create a good CTA that converts well. Here are some examples of mobile web pages that utilise effective Call to Actions:
ASOS gates their website with four clear CTA’s to funnel users to the appropriate sections of their website.
Their use of colour helps to easily distinguish between the two types of CTA, and then working around them gives a clear indication as to what happens when a user is to click on one.
iSelect also uses a clear CTA on their landing page which uses bright on-brand colours to make the CTA pop out from the page and have a very clear interaction path.
Realestate uses a simple homepage design with three calls to actions in the header and two CTA’s underneath. Through their use of colour and position, it’s clear that the main interaction they want users taking is to sign in to realestate, but also present them with the choice of what kind of property they want in the header.
Australian Institute of Creative Design (AICD)
AICD strays away from the simplification of CTA’s and instead goes towards multiple CTA’s to provide users choice. With this industry, conversion depends largely around user preference, i.e. a user who wants to study photography is unlikely to want to click on Make Up.
By ranking these CTA’s based on popularity and making them easy and distraction-free, AICD is able to utilise an effective homepage design.
Google drive is a well known online file storage system that uses a stripped back and focused landing page.
The main CTA on this page changes based on what device you’re on. On a desktop device it says “Go to Drive”, but if you’re browsing on a mobile device it changes to “Download Google Drive” and takes the user to the app page.
This contextual CTA is effective as different devices will have different purposes, and by segmenting it properly Google provides an exceptional user experience.
Tinder is an app-based social platform. Although they have a website, they don’t provide any functionality on this website – it exists purely to drive users to the application.
On their mobile landing page, the primary CTA is “Download on the App Store”. By providing this solo CTA Tinder effectively communicates that it is an application that needs to be downloaded. Scrolling down on the page doesn’t reveal anything else except the footer, so by focusing on just the one thing users have no choice but to click on the App Store CTA to user Tinder
- Colour should be bright and draw the user’s attention
- CTA needs to stand out and be detached from the overall flow of the page.
- Primary CTA’s should always be positioned above the fold
- Stay away from generic copy
- CTA’s need to be effective signposts and clearly state what they’re pointing to
- When multiple CTA’s need to be used, they need to be linked well with each other and grouped in a logical format
- Creating a distraction-free CTA is important. Cluttering the area around it detracts from its effectiveness and can cause it to be overlooked.