Tips for Effective CTAs on Mobile-first Sites

Tips for Effective CTAs on Mobile-first Sites

You’ve just visited a fabulous website and read some outstanding content on your smartphone. You know this is the right provider for the service you are looking for. So, let’s contact them. Now, where is that contact button? Found it, but can’t click it without touching the nearby buttons? You leave the site without contacting them. Sounds familiar, right? Are your customers facing the same issue on your website? Our web design team share some tips on how to make effective CTAs for mobile-first sites.

What is a Call-to-Action (CTA)?

In simple terms, a CTA is a clickable button that prompts a user to take an action. In business terms, it is an interactive element that presents an opportunity for lead generation and traffic conversion. It is, therefore, necessary to make your CTAs attractive, intuitive and compelling.
For a desktop, you have the flexibility that a bigger screen and features provide. For a mobile device, both are limited. On a smartphone, your CTAs need to be simple and compelling to be effective. If it’s a CTA, it’s got to be clickable.

Let us see how to make effective CTAs for mobile-first.

Use Recognisable Buttons

When it comes to CTAs, the well-travelled path is the best. Use the commonly used buttons that the users recognise. Don’t go for intricate designs or text-only ones. Give users a clickable button that they are familiar with. Use larger buttons with rounded edges. If needed, you can also use shadow effects.

Place it Right

Placement is vital when it comes to CTAs. High thumb activity on a smartphone falls somewhere in the middles and the lower part of the screen. And that is where you need to place your CTAs. Study your target audience – what catches their attention? What is the first activity they do when they land on your site? This information will help you to place your CTA strategically.

Colour it Up

Using colours can be tricky. The general theme of your site and how the audience will perceive colours both play a role. The buttons should be in contrast with the background colours. The text should be in contrast with the button colours. Use different colours for varying priority. For example – dark colours attract more attention. So, for a high priority button, you can use a darker button and light text, and lighter button with a dark text for the least priority action.
Using the same colour across call-to-action elements dilutes their importance. Use varying shades and contrasts of the same colour. This helps in being consistent as well as prioritising CTAs.

Use Icons

Placing icons inside your CTAs works in 2 ways: It highlights the CTA further. It is also useful for colour blind people who would not understand how the colours have been used for prioritising. Icons are a great option when you need to add extra zing to a CTA button.

Use White Space to Highlight

Don’t be afraid of white space. Mobile devices have limited space. But if you cram it up with text and other elements, it will confuse the user. White space helps elements stand out. So, have enough white space around your CTA buttons to make it easily noticeable and clickable.

Concise and Compelling Text

Short texts work better than long wordy ones for a CTA; especially on a mobile device.

• Use direct action-oriented words that tell the user exactly what they can expect from the action.
• Use simple fonts.
• Bold the text according to priority – least to high.

Go With the User Flow

You need to study the user journey on your mobile-first site. What do they do first on landing? How do they follow the content and actions? When do they need to interact or take an action? These questions will help you answer the placement of CTAs for your mobile-first site.
For example, on an e-commerce site – the general user flow is Buy or Checkout, View Cart, Continue Shopping and Make Payment. While Make Payment is the most important action; you cannot place it first. You can have a CTA at the end of a blog, not at the beginning. Or perhaps after some important piece of information about your services.
On a landing page, an effective placement will be after a brief description of the services or offer. This would also be in the high thumb activity area.

Keep One CTA per Page

Multiple CTAs may work on a desktop. But for a mobile screen, it can be self-defeating. Avoid using multiple CTAs on the same page of your mobile-first site. One CTA per page works well for mobile screens unless your content specifically needs it. Placing a single and compelling CTA on each page is highly effective to simplify user interaction.

These tips will help you to make effective CTAs for your mobile-first site. Is your site ready for mobile-first? Are your CTAs ready for mobile-first? Contact us today or email at sales@computingaustralia.group to get your site tested. We’ll help you switch your site into a highly mobile-first optimised one.

Jargon Buster

High thumb activity – The area of a touchscreen device, where users touch the most to scroll or click.
Icons – A small symbol that represents something; here, it represents an action that the user will take when clicking on the button.
View cart – A virtual cart where all the items you have selected are placed before you actually purchase them.