Written by Merav Knafo | 14 October 2008

Together with links, buttons are among the most common tools for taking action online. Almost every site has them, and far too many sites get them horribly wrong. Buttons should make it easier for people to take action, not harder!

Here are some of the more common button mistakes I've found on websites.

1. Using a "reset" button. This is just nonsense. Why would I want to reset a form I've just completed? If I make a mistake I'll edit it, not wipe everything out and start again. Worse, often the reset button is placed on the right and the submit button on the left, which makes it natural to click the reset button by mistake. Who knows how much business has been lost by frustrated users leaving the site after accidentally deleting their submissions?
2. Buttons that are too small. If you really want people to click that "order now" button, make sure they can see it!  Make it BIG!
3. Buttons that are hard to see. And make it visible too. If the color of your button is almost the same as the background, it's going to disappear. Make the button different enough so that even color-blind people can see it easily.
4. Buttons that are in the wrong place. Buttons that move you forward should be on the right. Buttons that move you backwards should be on the left. It's just logical. 
5. Fancy Buttons. Some designers feel that they just have to be original so they create buttons that are very fancy... and which look nothing like buttons Users expect buttons to look like buttons, so the ground rule is to keep it very simple. A regular gray button with black text just works.  A fancy-shmancy button like this one doesn't.
6. Buttons with generic or misleading labels. If your all of your buttons just say "submit" or "next" regardless of the action that follows, then you might want to re-think your labels. Ideally, the button's label will clearly describe the action. For example, "Update my profile" or "Checkout" or "Next Step." It's also a good idea to have ">>" or "<<" added to the label, to emphasis the direction of the action.
7. Too many buttons. If you offer your visitors too many actions to take, you may end up confusing them so much that the only action they take is to leave. Choose the most important action you want your users to take and use one big, clear button. If you must request other actions, use smaller buttons. You can see the result of using too many buttons on the GoDaddy.com home page. It has so many buttons that it's really hard to figure out what to do.
   
8. Fugly buttons. Sometimes the buttons are so ugly you want to keep your cursor as far from them as possible. Just take a look at these buttons. Would you want to click these?
   
   
   
   
    
9. Buttons with no labels. If you want people to click a button, you have to tell them what the button does before they click it. Sounds obvious, doesn't it? Not to everyone:
10. Obnoxious buttons. Buttons that flash, rotate, or have horrible animations will just annoy and distract your visitors. These kind of buttons used to be popular in the early days of the Internet. Unfortunately some survived. If you want to make your site look amateurish, use an animated button like this one:

Do you know of any other button mistakes? Comment below.

Bookmark with:

              

Trackback(0)

TrackBack URI for this entry

Comments (1)

Subscribe to this comment's feed

buttons without text
written by brian teeman, February 07, 2009

The biggest usability mistake with buttons is forgetting that if you use an image you need to have "ALT" text as well for those users with visual impairments that may be using assistve technologies to read your site.there are over 21 million people in the USA alone with visual impairments.

• 
• +3
• 
• 

Write comment

Name

Email

Website

Title

Comment

smaller | bigger

Subscribe via email (registered users only)

I have read and agree to the Terms of Usage.

Write the displayed characters

Add Comment