There are many factors that can influence the design of your call-to-action and it’s certainly a feature that benefits from extensive testing and tweaking.
An effective CTA should leave the shopper in no doubt about the next step they need to take to add an item to their basket, complete a purchase etc.
To achieve this, they need to catch the user’s attention, and eyetracking is a great way to measure the effectiveness of different CTA designs.
Thanks to Luke Hay, Research and UX Director at noporkpies, we have some useful tests on CTA design for you…
The tests
Luke ran eyetracking tests to see what effect different designs and placements for call-to-action buttons would have on users.
The study included 62 participants, using eyetracking to measure the areas of greatest attention on each page.
The tests took existing product pages from sites, tweaked them, and gauged users’ responses.
Repositioning the CTA
In the first test, Luke took a product page from the PC World website and changed the positioning of the main call-to-action button.
The current design has the button positioned in the top right and the test was whether moving it closer to the product details would have any impact.
According to Luke:
Our thinking was that that the CTA on the current design seemed a bit removed from the product details. The natural pattern of the eye would tend to suggest that the user would look below the product details for the button rather than moving back up and to the right.
Results
As predicted, more people focused on the button in the variation. This does not mean that they are more likely to buy of course but it might be worth trialling as an A/B test to see what, if any, impact it may have on conversion rates.
Models looking at the CTA
In the past, studies have found that people often follow the gaze of the eyes if there’s a person in the photo.
So would this work with the model looking at the call to action?
Results
The ‘add to bag’ button in this version did indeed get more attention, though it wasn’t as clear cut as might have been expected.
Part of the reason for this could be that the photo used was not a close up of a face and therefore that the eyes aren’t as obvious. It does still show though that subtle changes can lead to notable differences.
Using arrows to highlight the CTA
Using arrows in your designs can be a good way to influence your users, so Luke put this theory to the test by using the current Crazy Egg design, with a clear arrow, against a version with no arrow.
Results
The results suggest that the arrow makes a difference. The current version of the site, with the arrow, has more activity around the pricing table while the arrowless design has more attention higher up the page.
In addition, the option highlighted in black and red, for $49 per month, has drawn the most attention.
Flat vs Skeuomorphic CTAs
In the final test, Luke looked at the impact a flat CTA had against a more ‘button-like’ version.
Would the design that looked more like a button draw the eye more, or are people now more used to’ flatter’ objects?
Results
Luke:
There was virtually no difference between the two designs. This test is quite inconclusive, perhaps due to the fact that there was little content on either design to draw attention. To get a better idea of the impact of flat design we would need to run several tests on different designs with flat and skeuomorphic buttons.
This test would be another good contender for A/B testing though, as the conversion rate may have little relation to where users focus on the page and more to do with how well they identified the call to action as a button.
In summary
In most cases these tests have backed up the hypotheses and shown that subtle changes to a design can indeed have a big impact on how a user engages with a page.
It is also good to have these ideas backed up with real evidence, rather than just assuming them to be true across the board.
There are a couple of caveats though. For one, these tests on their own do not necessarily tell us which variation of each design is the ‘best’.
That is still open to interpretation as users focusing on your call to action buttons does not automatically mean that they are more likely to make that purchase.
What they do is give us some useful information on what draws a user’s attention on each design which we would not be able to get from traditional user testing or website analytics.
The second caveat is that eye tracking should be used alongside other UX methods such as MVT and A/B testing in order to form a more complete picture.
Our Festival of Marketing event in November is a two day celebration of the modern marketing industry, featuring speakers from brands including LEGO, Tesco, Barclays, FT.com and more.
