There is no definitive answer, however, on what kind of button works best. The colour, size, placement and text on the buttons play a subtle role in influencing your user’s purchase decision. Here are five tips to keep in mind while designing a mobile call-to-action that will help you effectively engage with your intended audience.
1. Use colour to make the CTA buttons contrast with the surrounding
The fastest way to grab the attention of your user is by making your CTA stand out from the background, as well as any other icons on the product page. Using color is a great way to add contrast. While vibrant colours work best in catching the shopper’s attention, even muted colours can be used provided they do not blend in with your surrounding text.
ASOS, one of U.K’s largest online fashion retailer, employs an orange ‘Add to bag’ CTA to draw the attention of their users to the button without being too bright. The orange colour also makes the button pop against the white page.
2. Convey a sense of urgency through the content on the CTA
The content that you use as the call to action needs to be simple and ideally start with an active verb – For example,’Buy Now’, ‘Add to Bag’, etc. Using bold and commanding words to phrase the action can create a sense of urgency in your customer’s mind and can nudge them into a purchase decision there and then.
Topshop, a British online fashion retailer in clothing, shoes and accessories, adds urgency to their CTA by using phrases such as ‘Checkout Now’ which are snappier than words like ‘Proceed to Checkout’. Using such CTAs help them to convey the desired action clearly and quickly, in as few words as possible.
Unless you choose to go ahead with progressive enhancement, a highly recommended mobile design best practice, most product pages are very lengthy with a lot of information on customer reviews, product description, product specifications etc. Having just one CTA button below the product image on such pages, makes it difficult for your users as it forces them to scroll all the way up to find the button. In such cases it is best to add multiple calls to action on the product page.
Greats, a Brooklyn based online retailer in sneakers, for instance, has two ‘Add to Cart’ CTAs, one above and the other below the fold. These buttons play a crucial role in increasing the opportunities for their shoppers to add further items to their shopping carts.
4. Provide CTAs to direct your shoppers to checkout as fast as possible
When it comes to the fashion industry most online purchases are impulsive. Given that, once your shopper has added an item to their shopping cart, it is best to direct them to the checkout process right away before they change their mind.
John Lewis, a British online store, uses big green ‘Checkout’ CTA buttons that stand out against the background, to direct their shoppers straight to the checkout once they have added an item to the basket. The shopper can choose to continue shopping or proceed with the checkout process.
5. Add ‘click-to-call’ buttons to make the checkout more human
Giving your shoppers the option to click on a button to speak to your customer service expert is a good way to ensure extra conversions from customers who would otherwise abandon the purchase. This way, they can just make a call to clear their queries or seek help when they get stuck.
Home Depot, an American online retailer in home improvement products, for instance makes the checkout process easier for their customers by letting them click on ‘Call Customer Service’ at the end of the checkout page to get in touch with their customer care expert.
Thus call-to-actions are the cornerstone to a successful mobile commerce website. The above mentioned tips are sure to help you create perfect mobile CTAs that truly speak to your shoppers. Are there any other best practices that you think we missed here? Share your thoughts in the comments below.