We be clickin ’n tappin: adjusting a CTA based on device capabilities

I’m a firm believer in the power of the 'Click here’ call-to-action (or CTA). It’s probably the simplest, most direct way of getting a user to perform an action in a banner. Although a lot of findings suggest the expression to be too generic, data shows time and time again that when used in the right setting, ‘Click here’ outperforms other CTA by far.

What's in a name

So it was no surprise that when Blue Mango started developing banners for mobile (i.e. for in-app display), we tested the wording of our CTA buttons. After all, since we were now developing for touch-enabled devices, we felt that using the verb ‘to click’ would not be appropriate for the desired user interaction. So we pitched three CTA buttons against one another:

Klik hier (‘click here’ in Dutch)

Tik hier (’tap here’ in Dutch)

Tap hier (our own wild mix of English and Dutch…)

The winner was our ‘Tik hier’ (tap here) CTA, with an APMV (Action Per Million Views) rate of 110, compared to 68 for ‘Klik hier'. This proved our hunch that device-optimised wording has a positive influence on user interaction.

Let's give 'em what they need

Fast forward to 2014, when Blue Mango switched from Flash to HTML bannering using our very own Splash! platform. The most obvious advantage of using HTML was without a doubt the fact that we could now start to develop banners that are truly platform independent. But with great power comes great responsibility: we needed to make sure that anytime a user interaction was referenced in our CTA, we needed to adapt our CTA to the user’s device.

So we decided to use vanilla Javascript to detect whether a device is touch enabled or not before adapting the CTA accordingly:

// Check if device has touch capabilities
var isTouchDevice = 'ontouchstart' in document.documentElement;

// Determine the CTA 
var ctaText = isTouchDevice ? 'Tap here' : 'Click here';

// Set the new CTA
document.getElementById('cta-button').innerText = ctaText;

There you have it. A clean, simple and user-friendly solution. As an added bonus, we quickly discovered that we could finally put our newfangled touchscreen laptops to good use. After all, the novelty of tapping a banner on a computer screen is far more fun than simply clicking it...

This goes to show that (and I quote Ludwig Mies van der Rohe) God is in the detail.

Happy clicking and tapping, y’all!