Good calls-to-action

I recently wrote an article for UX Booth about Good call-to-action buttons. In it I explain that call-to-action buttons are clicked more often when they are made more prominent. Multivariate and split A/B tests have shown this to be the case.

It makes sense too. If you make one button on your page very prominent, you make it easier to notice. When it’s easier to notice, there’s less friction in that user journey. So if that button leads to the next step in your key user journey, then your website should enjoy greater success.

Restrictive colour palettes

Many brands that do business on the web have colour palettes that are restricted to just 1 or 2 colours. Their branding guidelines state that no other colours can be used.

In this article, I’m going to discuss just one example of such a company – the AA.  However there is a long list of companies who have similarly restrictive branding guidelines.

I believe that the AA could achieve a better conversion rate if only it expanded its colour palette to allow the very occasional use of a contrasting colour. I carried out a little experiment to test my theory.

The AA prominence test

I ran a test (using the Five Second Test) to check the visual prominence of the ‘Get a car insurance quote’ button. I tested 3 very similar versions of the AA homepage.

Version 1

Version 1 was the current AA homepage without any tweaks. The ‘quote’ buttons on this page don’t stand out enough. They have been made yellow because no other colour appears to be available for the designer. The buttons blend into the overall design.

Version 1

Version 2

I was worried that the design of the quote buttons wasn’t as clear as it could be. So in Version 2 I made the buttons smaller. I felt they looked more like buttons and less like a border this way. As it happened it didn’t make a difference to the test, but I wanted to be sure.

Version 2

Version 3

Version 3 was similar to Version 2. However unlike the people at the AA, I wasn’t constrained by their branding guidelines. So I changed the colour of one of the buttons and made it a shocking blue colour.

I chose this button because ‘Car insurance’ is in the top-left section and is therefore probably the most important product for the website.

Version 3

How the test works

180 participants were shown 1 of the 3 designs for just 5 seconds. This meant that each version was shown to 60 people.

During the 5 second period, the participants clicked on the page to point out the areas of the design that caught their eye. This test allowed me to find out which areas were visually the most prominent.

The results

Participants in the test clicked on various parts of the page, but the bit I was interested in was the ‘get a quote’ button for car insurance. How much of a difference would a change of colour make? Well, the results were pretty interesting.

15% of participants who saw Version 1 pointed out the quote button for car insurance. As you can see on the image below, the picture of the car was pointed out more often than the button. The red circles on the images below indicate one click from a participant.

Version 1

13% of participants who saw Version 2 pointed out the button. A very similar result to version 1. So I needn’t have worried about the shape of the button as far as the test was concerned.

Version 2

On Version 3, 35% of participants pointed out the button. This is a lot more than Version 1 or 2. In fact, more people pointed out the button in Version 3 than in Version 1 and 2 put together.

Version 3

So what does this all mean?

This test only tells us about visual prominence. It doesn’t mean that the blue button will get twice as many click-throughs as the yellow one. Instead it means that the designers at the AA could make this important button more prominent, if only they had more colours to choose from. And prominence has been shown to have a direct effect on click-through rates.

Restricting your colour palette isn’t just about conversions though. Colour is very useful for creating differentiation in a design. This can be used for creating things like:

• Headings with a clear sense of hierarchy (Heading 1,2,3 etc)
• Hyperlinks that actually look clickable
• Hyperlinked headings that look different from both normal hyperlinks and normal headings
• Bold text that isn’t mistaken for a hyperlink
• Creating clear differentiation between 2 or more page elements

Avoiding issues with these sorts of things helps to improve the overall usability of your website.

I intend to write a follow up post about the Five Second Test that discusses the benefits and limitations of this service.

What d’you think?

What’s your opinion of all this? Whether you agree or disagree, why not share your thoughts by leaving a comment.

If you liked this article, you might also enjoy:

• Let your hyperlinks shine
• Sub-headers are navigation
• Twitter, Tweetdeck and simplicity

• Prioritisation
• Language
• Positioning
• Colour
• Size
• Restraint

You’ll need to read the article on the UXBooth website if you want to get access to those pearls of wisdom.

Why the increased focus on e-commerce?

It’s cheaper for customers

We’re likely to be buying on the internet more often, because we’ll be trying to find a better deal. When our disposable income is reduced, we’re more likely to shop around. These days that means buying and researching prices on the internet.

Those of us who are shopping online already, are likely to do it more and for a wider range of purchases. Others who aren’t yet shopping online may soon find it hard to resist.

The price comparison website Confused.com recently launched a new TV advertising campaign based exclusively on  the usability of its new website. The campaign appears to be aimed at people who want to get the best deal, but are resistant to using a website to get it. Confused.com are trying to entice reluctant internet shoppers on to their website and usability is their selling point.

It’s cheaper for businesses

According to the Society of Information Technology Management,  the average web interaction costs a UK organisation £0.27. Over the phone it’s £3.76 and face-to-face is £9.34 (borrowed info from Gerry McGovern). So the cost-saving benefit of e-commerce is pretty obvious really.

When budgets are being slashed, it’s a good idea to use it wisely. The web is the cheapest route-to-market for most companies. So we can expect to see some of them pushing their web offering strongly.

Getting more from your e-commerce site

You can increase the volume of business you do online in 2 ways.

• Increase the number of people who visit your site.
• Reduce the number of people who leave without buying anything

You can increase the number of people coming to your site by spending  more money on advertising, pay-per-click campaigns and search engine optimisation. But you could also get more out of your current visitors, by fixing the problems that make them leave without buying anything.

Most of the people who visit an e-commerce website will leave without making a purchase. So even a small reduction in the number off these drop-outs can result in an impressive increase in sales. These improvements can often be achieved with relatively simple changes.

An extreme example is described in Jared Spool’s article, the $300 Million Button. Spool explains how an e-commerce website saw a massive increase in sales just by letting people buy without creating an account.

As amazing as this story is, you don’t need to look far on the web to find a retailer repeating the same mistake. Perhaps you’re reading this and realising that your own site is one of them.

Breaking the redesign cycle

You don’t need to redesign your website in order to make significant improvements to it. A good thing that might come-out of the credit crunch is that more web managers realise, large-scale redesign projects are a waste of time and money.

A responsive company does not improve itself by throwing everything away and starting again every few years. Instead it tweaks and adjusts itself by improving only the things that need to be changed. It’s just a matter of finding the things you need to improve.

Finding the areas to improve

The 2 techniques I most often use to help my clients improve their websites are:

• Expert usability reviews
• Usability testing

It’s often a good idea to use them both, but not at the same time. You start with an expert usability review and then follow up with usability testing after you’ve made some improvements. This allows you to get more out of both techniques.

The expert usability review

Many e-commerce websites make similar mistakes, so an experience usability person can often spot them. By asking a usability specialist to review your site, you can find issues that are likely to cause problems for your visitors. They should be able to recommend positive changes for you to consider.

A classic example is the number of websites that force registration (or even appear to do so) before making a sale, as described in Jared Spool’s article.

Usability testing

Usability testing is a very good way to find the problems that are limiting your site’s potential to sell products. This involves watching people using your website unassisted.  You can run your own usability testing or get a professional to do it for you. There are benefits in both approaches and you can also do a bit of a mixture of both.

What’s more important is that you take enough of an interest to watch the tests yourself and that you test regularly. It’s better to test your site with a handful of people every few months, than do all-singing-all-dancing studies every year or so.

Such grand studies can leave you with more information than you know what to do with. They can also be fairly demoralising, rather than inspiring a culture of constant improvement.

Measuring success

Before you begin to improve your website, it’s a good idea to find some measurements that you’d like to see improve. It’s all very well trying to identify usability issues. But the changes you make should lead to a measurable improvement in the performance of the site. Surprisingly, this is a step that many businesses overlook.

Continuous improvement

Your website can be improved. This is a fact regardless of which site it is. Improving websites is easier and more effective manage when done continuously. If you manage an e-commerce website and are worried about the financial climate. Then I recommend you start improving your website now and never stop.

Did you find this useful?

If you found this article useful or even if you want to tell me I’m wrong, please leave a comment using the form below. You might also be interested in the following posts:

• Focus group usability testing
• Usability test tasks to avoid
• The benefits and limitations of expert reviews