Action button
The Design Need:
Users need to take any form of action and need to be able to start that action.
Design Examples:
Design Solution:
When designing action buttons for your website keep in mind the following:
- Make the button large enough.
- Design the button so that it gets the attention you want it to get. If you want to sell something from the homepage, the button needs to stand out more. If you want users to proceed to the next step, the button doesn’t have to stand out as much.
- Use clear labels in your form design that inform the user about what will happen if they press the button.
- Make sure your buttons do not look like banners. If they do, they will be mistaken for advertisements.
- Place your buttons correctly. Depending on the situation, placing might vary as follows:
- Generally: as close as possible to the object it belongs to
- Forms: at the bottom right of the form
- In lists and/or tables: above and below the list or table.
- Do not use too many buttons on one page. The more buttons there are, the more distractions for the user.
- Do not use ‘clear’ or ‘reset’ buttons in webforms. There are hardly any situations where users want to erase all data they have entered and start over. If users want to change a specific entry, they will alter it directly, and if they do not want to submit the form, they will navigate to another page. Offering a ‘clear’ or ‘reset’ button only increases the risk of users pressing the wrong button.
- Do not forget the alt-tag for each button – a button is also an image. Tell it the alt-text what the button will do.
When to use:
In all instances where you want to prompt the user to take action. Situations where you might want to prompt the user to take action such as:
- buying a certain product
- logging in or registering on the website
- proceeding to the next step
- searching the website
Why use this solution (rationale):
An important part of your form design:
Action buttons are often very important website navigation elements, triggering important actions. Designing good action buttons can increase not only the usability but also the conversion rate of your website.
More info elsewhere:
- “Good call to action buttons” on www.uxbooth.com
- “ Use verbs as labels on buttons” on www.usabilitypost.com
- “Reset and cancel buttons” on www.useit.com
- “Ok-Cancel or Cancel-Ok” on www.useit.com
- “Action button” design pattern on www.welie.com
