Web Forms

Buttons on Web Forms

Buttons are a key component of your Web site, here are some common practises:

First, make the label clear and concise. Always label buttons with the name of the action that the user is performing. And always make it a verb. A common mistake is to label buttons "Go" for various actions such as searching, sending email and saving. Labels should also be short and to the point; no need to clutter the user interface.

Include all button states (default, hover, active) to provide clear visual cues to the user as to what is happening. Button outlines should remain in the active state only.

Clearly distinguish between primary and secondary actions. The most important action should be the most prominent. This is usually done by giving primary and secondary actions different colors.

Pay close attention to consistency. Buttons should be consistent throughout a Web application, both visually and behavior-wise. Use CSS sliding doors for reused buttons or CSS 3 rounded corners to maintain consistency.

The entire button area should be clickable.

Source: http://www.smashingmagazine.com/2009/11/18/designing-css-buttons-techniques-and-resources/
However, because they play a critical role in website usability, the buttons should meet some key principles:

1. First consider the labeling. Always label buttons with the name of the action that the user is performing. And always make it a verb. A common mistake is to label buttons “Go” for various actions such as searching, sending email and saving. Labels should also be short and to the point; no need to clutter the user interface.
2. As mentioned, include all button states (default, hover, active) to provide clear visual cues to the user as to what is happening. Button outlines should remain in the active state only.
3. Clearly distinguish between primary and secondary actions. The most important action should be the most prominent. This is usually done by giving primary and secondary actions different colors.
4. Pay close attention to consistency. Buttons should be consistent throughout a Web application, both visually and behavior-wise. Use CSS sliding doors for reused buttons or CSS 3 rounded corners to maintain consistency.
5. Though obvious, we should note that the entire button area should be clickable.

When making your button transparent, adjust the opacity, not the color. The optimal opacity level will vary based on your background color. A rule of thumb to aim for is an opacity of less than 40%, or until the text label is unreadable. It’s important to make the opacity level low enough, or users may perceive the button as active.

Source: https://uxmovement.com/buttons/why-you-shouldnt-gray-out-disabled-buttons/

List of forms and data entry usability guidelines

• Fields in data entry screens contain default values when appropriate and show the structure of the data and the field length.
• When a task involves source documents (such as a paper form), the interface is compatible with the characteristics of the source document.
• The site automatically enters field formatting data (e.g. currency symbols, commas for 1000s, trailing or leading spaces). Users do not need to enter characters like £ or %.
• Field labels on forms clearly explain what entries are desired.
• Text boxes on forms are the right length for the expected answer.
• There is a clear distinction between "required" and "optional" fields on forms.
• The same form is used for both logging in and registering (i.e. it's like Amazon).
• Forms pre-warn the user if external information is needed for completion (e.g. a passport number).
• Questions on forms are grouped logically, and each group has a heading.
• Fields on forms contain hints, examples or model answers to demonstrate the expected input.
• When field labels on forms take the form of questions, the questions are stated in clear, simple language.
• Pull-down menus, radio buttons and check boxes are used in preference to text entry fields on forms (i.e. text entry fields are not overused).
• With data entry screens, the cursor is placed where the input is needed.
• Data formats are clearly indicated for input (e.g. dates) and output (e.g. units of values).
• Users can complete simple tasks by entering just essential information (with the system supplying the non-essential information by default).
• Forms allow users to stay with a single interaction method for as long as possible (i.e. users do not need to make numerous shifts from keyboard to mouse to keyboard).
• The user can change default values in form fields.
• Text entry fields indicate the amount and the format of data that needs to be entered.
• Forms are validated before the form is submitted.
• With data entry screens, the site carries out field-level checking and form-level checking at the appropriate time.
• The site makes it easy to correct errors (e.g. when a form is incomplete, positioning the cursor at the location where correction is required).
• There is consistency between data entry and data display.
• Labels are close to the data entry fields (e.g. labels are right justified).

Read more on Form Usability: The Pitfalls of Inline Accordion and Tab Designs and UX Design for Passwords.