iphone-699089_1280

Mobile CTA – At the click of a button

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 to ensure changes are being received well by the customer base.

Typically, mobile devices have a very low conversion rate compared to desktop devices.

Design Principles

Colour

Screen Shot 2016-07-08 at 12.55.13 PM

Colour is often the most talked about 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.

Screen Shot 2016-07-08 at 12.57.17 PM

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.

Location

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

Screen Shot 2016-07-08 at 12.58.44 PM

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 drop box account.

Copy

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, 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”.

Screen Shot 2016-07-08 at 1.01.02 PM

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 much context 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.

Compilation

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

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 the working around them gives a clear indication as to what happens when a user is to click on one.

Screen Shot 2016-07-08 at 1.02.23 PM

iSelect

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.

Screen Shot 2016-07-08 at 1.02.36 PM

Realestate.com.au

Realestate uses a simple homepage design with three call 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.

Screen Shot 2016-07-08 at 1.02.43 PM

UX Pin

UX Pin is an online collaborative wireframing tool that takes a slightly different approach to Mobile CTA. They’ve placed a CTA on the bottom of the page, with the main idea being that a user will see the information presented on the screen before being asked to put their information in. What helps this page, is the placeholder text has a “Company Email” instead of “Your Email”, which helps reduce anxiety of lead generation on this page.

Screen Shot 2016-07-08 at 1.02.53 PM

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.

Screen Shot 2016-07-08 at 1.03.03 PM

Google Drive

Google drive is an 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.

Screen Shot 2016-07-08 at 1.03.20 PM

Tinder

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

Screen Shot 2016-07-08 at 1.03.33 PM

Key Findings

  • 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