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.

 

Web Form Standards

Separate the content of the form from the code that takes place when the form is submitted. It is WAY easier to maintain the design, allows for the possibility of different file formats, and easier to setup for testing.

Follow the process through from start to finish until there are no errors; but create a test routine in the form to allow full access for debugging the code.

1. Variable names should be logical and explanatory.

2. Set the maxlength attribute to match the MySQL field length.

3. Validate the content input into the form. Always.

Where to Place Labels for Form Fields:

As per this article on optimal form field labels, for most input forms found on the web, such as contact forms, account creation and e-commerce, optimal form usability would be to place the label above the form field.

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).

https://www.sitepoint.com/ux-design-passwords-registration-forms/

http://baymard.com/blog/accordion-and-tab-design

This page contains information I gathered and thought were very useful. See more notes on design.

Just to let you know, this page was last updated Tuesday, Jun 19 18