Web 2.0 Blog

Designing Usable Buttons

As a web developer I use the Internet a lot as you might expect and I also have to fill out a lot of forms. Form building should be a University course on its own, but I’d like to relay some guidelines for button usability as a lot of people are making some basic mistakes.

1. Appearance

If you’re going to be using an actual button on your site for any purpose, make it actually look like one and it will greatly improve your chances of the user clicking on it. It all goes back to the basics of affordances. A chair affords sitting, a ladder affords climbing and a button affords pressing (or clicking). Therefore make it look 3D and get some colour in there to make it stand out - this will also prevent users from accidentally clicking on it. The button used in the example below looks real and tempting to click onto.

2. Terminology

All buttons should have words on them and it should communicate to the user in a simple way what is going to happen when it is clicked upon. If the button sends an email it should perhaps read ’send’, or if it is going to complete an online shopping transaction it might read ‘confirm purchase’. Also don’t use too much text, it should be three or four words maximum. The user should be able to safely predict what will happen when the button is pressed based on what it says. In the example below, using the word ’search’ to submit a callback form is very misleading and inappropriate.

Futhermore, don’t use negative words such as ‘no’ or ‘decline’ to proceed, as often users will just skim the text and click ‘yes’ as that would appear to be the button used to get though the process. The example below is an example of how this can mislead users and cause errors.

3. Feedback

As with many interactive elements on a webpage, giving feedback to the user lets them know they’re doing something to the object by manipulating it in some way. With buttons you can use rollovers and animations to alter the appearance of the button object when it is hovered over or pressed and this gives instant feedback to the user that something is happening.

4. Positioning & Visibility

Particularly important with forms, the button that will submit the information that the user has entered should be placed at the end of the form as this is the natural progression. Also, ensure that the button is contained within the form field and not outside, else the user may think it is a separate entity on the page. For example on Box.com, although the button is clearly visible it is not within the ‘boxed-off’ area of the form.

5. Damage Limitation

Clicking buttons can often have effects that cannot be reversed. It is useful to have message to confirm an action after the button has been clicked in case it was clicked by accident and if this isn’t appropriate then back buttons should be made available. Also, try not to position buttons that have opposite effects too close to each other and definitely don’t make them look to similar if they are. On eBay, you’re given a ‘last chance’ before you bid as you may have clicked it by accident. In this example I like the way it gives a very foolproof description about what will happen after clicking the button - you know you’ve reached the end of the process.