“Go to checkout” buttons

I have been working for a client recently helping to review their online checkout process. As part of the discussion, the client asked me “What colour should my Checkout button be?”

Of course the right answer is “Whatever works best for your audience” and the only way to know that is to test it – remembering that different audiences might respond to different designs and that seasonality may play a part as well.

As there was no definite “right answer” I could give our client, I thought I would trust to the wisdom of crowds and see what other people were doing. So I analysed the form of checkout buttons for the top 40 retail sites in the UK (as listed by digitalstrategyconsulting).

Colour

The first thing I looked at was colour. The results surprised me: Green came out way ahead of other colours, with Orange, Red and Blue being used by half as many retailers (Green 14, Orange 8, Red 7, Blue 6, Pink 2, Grey 2, Yellow 1). Personally, as an unreformed direct marketing practitioner, I like red although my user experience colleagues point out that this colour could have subconscious associations with mistakes, as error messages online are generally shown in red.

Shape

Next I looked at shape. No great surprises here. Half the buttons (20) were rectangles with rounded corners, and there were also a fair number (13) of what you might call “square rectangles”; ovals (where the end lines were curved for more than half their length) only accounted for 5 buttons.  Two buttons were odd shapes – Amazon’s is a combination of oval and rectangle, while the right side of the CineWorld button is an arrow shape.

Most of the buttons (29) had some form of 3D or “button” effect, often quite subtle. Generally this effect is a simple shading, often with the bottom of the button slightly darker than the top, although in 16 instances the 3D effect is achieved or supplemented by a shadow “under” the button, a line inside the outer edge, or by a stronger line on the bottom and right sides of the button.

Size varied widely. The largest button (Travel Republic) was around sixteen times as large as the smallest (Travelodge).

Wording

The wording on the buttons varied unexpectedly. Only one retailer used the word “Trolley” and only one used the word “Checkout”. The most common wording was “Add to basket” which was used in ten cases together with one “Add to shopping basket. Many (but not all) clothes retailers used “Add to Bag” or “…myBag” (eight instances). Travel sites (seven of them) used “Book”, “Book now” or “Continue booking”. Only six sites used phrases with “Buy” in them and two used “Pay” or “Payment”. “Add for delivery (2), “Confirm tickets” and “Get started” (a nice call to action for a service I think) made up the rest.

Only nine sites used capital letters (sensible as capitals are harder to read than lower case); most (21) used lower case letters with the initial letter a capital, although 12 sites had an initial capital on a second or third word as well.

In 17 cases the wording was supplemented by an icon (an arrow, a trolley or a shopping basket) and these were fairly evenly distributed on the right or left of the wording.

What does this mean?

What can we conclude from all this? Probably nothing! As I said above, what works for one audience may not work for another. (And at least one site, Asda, seems to recognise this by having different buttons for different parts of the site, although I ignored that for the purpose of this analysis).

But, if you wanted to follow the most popular conventions, then your “Go to check out” button would be a green rectangle with rounded edges, darker at the bottom, containing the words “Add to basket”.

And one final point: whatever design you chose please do make sure you differentiate it clearly from any other buttons on the page.

The dirty dozen of e-commerce

At the User Experience conference in Brighton yesterday Harry Brignull ( http://www.90percentofeverything.com/) was talking about underhand online design tricks some of which he has started to list at darkpatterns.org .

Well, I won’t pretend that I agreed with all his examples – some, such as preventing people from comparing prices easily, seem to be legitimate standard marketing practices while others, like intertia marketing, are commonplace, if aggressive, tools.

But he came up with some interesting examples in his talk and, importantly, suggested that it would be beneficial to agree a set of best practice guidelines that “ethical” websites could follow. Perhaps some form of kitemark could then be awarded to sites that comply with the guidelines.

It’s a good thought. There are certainly some dodgy practices out there and while many of them are I believe counter productive in the medium term, others will have the effect of fooling some people into doing things they don’t want to do.

I think it is possible to exclude “black hat” SEO practices from a list of underhand practices because Google is perfectly able to police this itself. And “black hat” social media marketing is generally going to backfire so again it is probably sensible to take out social media practices out of a list of ethical practices in order to get as simple a list as possible.

But there are other areas of web marketing – in particular e-commerce – where a set of best practice guidelines might well be helpful.

Obviously , in addition to any list of ethical guidelines, any online retailer needs to comply with existing laws and regulations. But these don’t always work well online. For instance the CAP code (http://bcap.org.uk/The-Codes/CAP-Code.aspx)  applies to corporate websites does start to address unethical online sales practices. But it only addresses content as opposed to structure and functionality and could potentially allow unethical marketing practices to be given the green light.

So here is my first attempt at a “dirty dozen” set of underhand marketing techniques that reputable companies should probably steer clear of.

1. In any form designed to collect personal data for first-party of third-party marketing, all data collection options should work in the same way: all should either be “opt in” or “opt out” and making the choice should always either involve ticking a check box or leaving a check box unticked. That way users don’t get confused.
2.  Only personal data relevant to the task in hand should be collected in a mandatory field. To be honest this is good practice from a marketing perspective anyway – but some companies are tempted to trawl for as much data as they can get
3. It should be simple to unsubscribe from emails – the unsubscribe process should take the form of a single “unsubscribe” click or a simple email; the unsubscribe link or the email address should be published visibly on any email generated as a result of the personal data that has been collected
4. All costs for buying a product should be stated upfront and not only on the checkout page; these should include taxes, obligatory insurance and post and packing. Again this is simply good marketing practice and companies who hide this data may well be shooting themselves in the foot
5. Details of the carrier that will be used to deliver products together with an indication of delivery time should be given up front as issues around delivery can affect people’s decisions
6. A  customer service telephone number should be given on all ecommerce pages including check out pages. Again this is no more than a sensible sales technique
7. The name of the company providing the service or selling the products and a physical address should be provided on all ecommerce websites, as part of the “contact us” page
8. It should be simple to cancel a purchase after it has been bought (but before it has been shipped or downloaded); the cancellation process should be online and  take no more clicks and data input fields as the purchase process
9. “Recommended” products or services should never be added into a shopping basket without the purchaser actively requesting this
10. Information about how to return products should be easily available on the website before and after a purchase is made and this information should include details of the returns address, any data required when the package is returned, and any other requirements such as postage
11. Misleading input field prompts and options  should be avoided. For example, where the question is “Do you want to buy insurance” it would be confusing to have a prompt in the data field which says “Input your country of residence”, a list of countries of residence in the drop down options, and a single “No thanks” as an option hidden within the list of countries of residence.
12. Where an online retailer also has offline retail outlets, the specifications and quality of any product sold online should be the same as the specifications and quality of the same product when sold offline