These days we can’t seem to do anything without going online. We rely on the internet to check our social accounts, buy products, chat to our friends, consult with clients, book a trip or even to choose what’s for dinner! Although we are completely dependent, our lives have also been made more convenient and efficient thanks to one click of a button - the call to action (CTA) button. How many CTAs have you clicked on today?
You can probably recall the actions you completed online but what about the details of the actual button you clicked on to do this? Can you remember the colour or size of the button, or its position on the web page? The answer is probably not. And that’s not due to your faulty memory but because the CTA button was deliberately designed that way. It’s designed to be intuitive, subtle but also eye-catching. That’s quite a feat to accomplish for one button.
It's an art
As a user you don’t pay much attention to how you’re navigating through an app or a website, that is unless it’s badly designed and you’re stuck. But good UX design ensures you almost glide through each interaction. When something is simple there is a big misconception that little effort was done to create this effect. But this definitely can’t be said for the CTA button. A lot goes into this design. From a psychological perspective designers have to really understand how users think and feel during these interactions and even have to predict future behavioral patterns. Not only that but they then have to bring the button to life with the right colours, shading, size and font. Too bright a colour and the button becomes an eyesore, too little contrast and the button is invisible. Even with IOS and Android guidelines available it’s up to the designers to get the balance just right. It’s an art.
Here are some of my favourite examples of great call to action buttons.
Spotify
Over the years Spotify’s CTA hasn’t changed much. Paired with its iconic gradient background and simple yet bold design, Spotify has inspired many designers to follow suit. It’s not only appealing but also friendly and inviting.
Netflix
Netflix doesn’t mess about; its message is clear, to the point and informative. Its large, red button invites you for a monthly test trial without being intrusive or too in your face. The background image is subtle yet noticeable showing us what we can get with their service. This is a great example of a CTA that works!
Medium
Ah, Medium’s minimal design is so crisp and soothing. I love this site’s simple design. What works well here is the balance between heavy fonts with the bold green CTA nestled between lots of white, breathable space.
Airbnb
Another good example of negative space is Airbnb’s landing page. A hero image dominates the page and is visually attractive. Design principles of proximity are applied here as content is grouped together in a step-by-step hierarchy. What’s also particularly brilliant about this page is that the weight of the hero image tends to fall more to the right of the page, which perfectly balances with the content on the left. Top it off with a bold CTA button and the user is immediately sucked in!
L’Occitane
Similar to the Airbnb example above, L’Occitane also attracts the user with imagery, which is nicely balanced with the content on the right. Using imagery is especially powerful in the beauty industry. What’s also really clever here is how the yellow colour is threaded throughout the page to match the CTA button.
Even the prettiest website is pointless if it doesn’t get the user to do something, whether that’s buying a product or getting information. These interactions are made possible by effective CTA buttons. Taking the time to design the right CTA button is vital for increasing conversion rates. There’s no one right colour, size or text to follow, it all depends on what works for your user. So play around, do the research and test your call to action buttons regularly to see if they’re still effective.