Using our new eye tracking device We decided to run some tests to see what impact different designs may have on call to action (CTA) buttons. We ran a study with 62 participants to see how subtle changes to design affected their gaze on ecommerce websites.
Test One – Repositioning the CTA
In our first test we 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 we wanted to see the effect of moving it closer to the product details.
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.
As we 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 trialing as an A/B test to see what, if any, impact it may have on conversion rates.
Test Two – Looking at the CTA
In the past various studies have shown that if there’s a photo of a face users often follow the eyes of in the photo. We thought we’d see what happened if we used a variation of a design with a person looking at the call to action button.
The expected outcome of this was that our test participants would follow the eyes of the model and be drawn to the call to action button.
The ‘add to bag’ button in our variation did indeed get more attention. This wasn’t as clear cut as might have been expected though. 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.
Test Three – Using Arrows to Highlight the CTA
It’s widely accepted that using arrows in your designs can be a good way to influence your users. Last year Kristian wrote a blog post around this showing some good examples. We put this theory to the test by using the current Crazy Egg design, with a clear arrow, against a version with no arrow.
We expected the original version to get more attention around the pricing table than the variation.
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. It is also interesting to see that the highlighted option, for $49 a month, has drawn the most attention of all. This shows, as you’d expect, that Crazy Egg know how to make people convert!
Test 4 – Flat Vs Skeuomorphic CTAs
Finally we decided to have a look at how much impact a flat CTA had against a more ‘button-like’ CTA. Would the design that looked more like a button draw the eye more, or are people now more used to’ flatter’ objects?
We had no real prediction to this one. We thought that the change may be too small and subtle to see a notable difference but we weren’t sure whether the more ‘button-like’ design would get more attention than its flat counterpart.
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.
These general tests have shown some interesting results. In most cases they have backed up our hypothesis and shown that subtle changes to a design can 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.
The test 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. They do however 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.
Want to find out more about eye tracking? Contact us to find out how eye tracking can help improve your designs.