{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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. 

Graham Charlton

Published 19 August, 2014 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (5)

Avatar-blank-50x50

RAJ KUMAR

You are only attract any user call to action only with the help of any button in the image. If a person is walking on the road,if you will attract those person.

over 1 year ago

Pete Fairburn

Pete Fairburn, Managing Director at morphsites

Interesting to see the results of the Flat vs Skeuomorphic CTAs, in view of the debate currently going on in this area.

While not conclusive, it certainly reinforces my view that as usual, many of the design approaches in our industry are trend led, rather than based on empirical research.

Don't get me wrong, I love the flat design aesthetic, but to say that is now the only correct approach fails to take into account the needs and problems of the target audience, which is where the UX process should begin.

over 1 year ago

Avatar-blank-50x50

No Pork Pies

Pete, I agree with you.
When we ran the study the flat design test was added in with no logical reason why one would win over the other, and ultimately that's exactly what it has proven.

I guess the original argument for Skeuomorphic design was to make it obvious to the user that it is a button that has an action, where as a flat design doesn't highlight the action but users are now educated on how to use websites so don't need this extra assistance (in theory).

The study tells us that both designs get just as much attention. What we want to do next is run an A/B test against a Skeuomorphic and flat designed button and see which one (if either) gets a better click through rate.

over 1 year ago

Pete Fairburn

Pete Fairburn, Managing Director at morphsites

I would be very interested to see the results of that testing - we will be conducting similar exercises in the coming months, we'll keep you posted.

over 1 year ago

Avatar-blank-50x50

John Bachtiger

Great article. Very interesting looking at the results. From these case studies I would assume that CTA's mixed in with images that reinforce/draw the users attention to the CTA work best (be that subtle or direct). But as always the best way to test this of course A/B testing.

over 1 year ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.