Website Usability: How to optimise buttons for better website usability
Following on from last week’s post on what usability is and why you should care about it, this post puts buttons under the microscope.
Let me pose a question. If I asked you right now to click on one of the following buttons to book a trip, which button would you most likely click on:
Exactly. If you don’t know where a button is going, you’re likely to hesitate to click it. This is especially the case for those visitors who are not comfortable using a computer. For them it’s like sitting there wondering if a bomb will go off if they click a button. Particularly if that button is going to delete, cancel or remove something. Might sound a little extreme but that is just how stressed they feel.
The buttons on your website should give the visitor a clear indication of where they might go or what clicking it will do. No stress involved.
Here’s some examples of bad labeling, why it’s bad and what a better alternative would be:
|Bad||Why It’s Bad||Good|
|Download||Visitor doesn’t know what they are downloading.||Download administration guide|
|Cancel||Visitor doesn’t know if it will cancel immediately, what it will cancel or if they can change their mind.||Cancel order, Cancel order now, Request order cancellation|
|Purchase||Visitor doesn’t know if it will purchase straight away, whether they can review their cart first or will be able to change cart contents.||Proceed to Checkout, Review Order|
|Sign up||Visitor doesn’t know what they are signing up to.||Sign Up To Mailing List|
|Click here||Visitor doesn’t know what clicking the button will do.||View recipe, Visit Julia’s website|
A visitor reads ecstatically through some sales copy shouting to themselves yes, yes YES! that’s me and I want to buy your product right now! This is right where you should put your call to action buttons – those buy product, order product, sign up to list buttons. A user shouldn’t have to read an entire paragraph only to scroll back to the top and click “buy”, “add to cart”, “shop” or any other button to go and hunt around to find the item they just read about in order to purchase or order it.
This point is your prime opportunity to reel them in while they are still excited. Button placement is all about convenience and making it easier for your visitor to purchase, order or download from you.
Order, purchase, download and enquire buttons should be after your sales copy or after key points like packages in your sales page. They should be right at the bottom on landing pages. Buttons that are useful but not necessarily related to the current website page are best placed in sidebars.
This is how you lead your visitor to purchasing, ordering or enquiring. You guide their behaviour. If you want them to read down a page and then order, ensure you have an order button at the end of the sales copy. If you want them to enquire first, replace that button with a form.
Not too many options
A couple of months ago I went to a grocery store to buy some toothpaste. I was changing brands going back to one I’d used earlier so I went straight for the brand I knew. There were about 5 different options for this brand sitting on the shelf in front of me. I had a choice between whitening, “fresh”, “cool”, “extreme clean” and some other one I can’t remember now. All I wanted was normal toothpaste whatever that was called. It took me 10 minutes to make a decision after trying to figure out what the actual difference was and by the time I made that choice, I was annoyed. Who would have thought it would have been so hard to buy a tube of toothpaste! What’s incredible is I still didn’t think I’d bought the right one even after doing so.
This story illustrates what happens when you have too many options. Making a decision becomes harder. Studies have even shown that the more options/choices you offer, the harder it is to make a choice. The same things happen on sales and landing pages on your website. A sales page or a landing page should have one or two goals in mind. Not 7.
It’s much easier to make a choice when presented with this:
We associate colours with certain actions. In the world of websites, you’ll want to avoid using colours that are prohibitive and follow these almost universal colour rules. That means green for good, proceed, play, success messages or anything positive. Red for cancel, unsubscribe, error messages or anything negative. Call to action buttons (order, go, sign up) – any colour other than red that makes them stand out.
You can use colours on buttons to help them stand out and draw attention. You can also use it to indicate what the button will do (e.g. red for stopping something, cancelling something).