Forms on Websites

Best Practices

  • Explain the process and provide cues as they proceed through the process.
  • Put cursor in first required form fields
  • Show progress
  • Fix tab order
  • Integrate help
  • Provide confirmation
  • Indicate required fields with an asterisk and/or include the word 'required' or 'optional' next to each field.
  • Indicated required field titles in bold.
  • Provide formatting examples for data
  • Provide pulldowns or lists to ensure accurate data.
  • Use Javascript to disable buttons once they are clicked (have them fade out or change the text on the button).
  • Offer contextual help right on the form.

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/

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.
  4. Prevent form submission by “graying” out the Submit button on forms until all of the regular expression rules for each form field have been met.
  5. Use cookies to uniquely identify the user (more precisely, the user’s computer) based on registration information and check cookie data against a database during transmission of user-supplied data.
  6. Clean user-supplied data when it arrives at the back-end process to make sure the data doesn’t contain harmful statements or characters.
  7. Transmit the data over a secure connection (HTTPS [HyperText Transfer Protocol Secure]) to prevent outsiders from “sniffing” information traveling from and to the Web browser.

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

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

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, Mar 19 24