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

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.

You might be interested in

Comments (5)

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 3 years ago

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.

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 3 years ago

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.

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.

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 Digital Pulse newsletter. You will 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.