Buttons

Last updated November 25, 2012. Created by ry5n on November 25, 2012.
Log in to edit this page.

This page is a draft

Problem

The user needs to perform an action on the data entered in a form, such as submitting a query, or saving or previewing their content.

Solution

Single button

[img, TBA]

Multiple buttons

[img, TBA]

The primary goal of Web form design is to get people through a form quickly and painlessly. Where possible, create forms for a single purpose and provide a single button to complete that task.

Sometimes, however, forms will require additional, secondary actions, such as 'preview' as an alternative to 'save'. In such cases, visual distinctions are a useful method for helping people make good choices. The most important distinction is between the the primary submit button and any secondary buttons (the 'primary' submit button is the submit button that is essential to the form, and which fulfills its primary purpose). Therefore, in multi-button forms, the primary form button should be visually emphasized. For consistency, single-button forms should also visually emphasize their submit button.

Some forms may present different actions depending on the state of the form, which may depend on the users’s access permissions or other factors. This should be avoided where possible, but where necessary, do not emphasize different buttons in different states. Determine the primary button in the form based on its core functionality, and emphasize only that button when present.

Finally, if there is no clear primary button, do not emphasize one. Also consider whether your form or module can be redesigned to provide a less ambiguous path to completion for people using it. Consider for example whether the form is trying to do two things rather than one. If so, consider creating two separate forms.

Summary of Guidelines

1. Where possible, create forms for a single purpose only, and provide a single button to complete that purpose;
2. Whether a form has a single submission button or more, always visually emphasize the primary button;
3. If the primary button only appears in some form states, do not emphasize another button instead. In these cases, allow the form in such states to have no emphasized button;
4. If there is no clear primary button, do not mark any buttons as primary.