Form Design Best Practices and Guidelines

Every day, we fill out forms. At the office to get our work done and at home to take care of our domestic needs. Forms are the lifeblood of digital information sharing. A couple of excellent guidelines on forms:

Luke Wroblewski’s Web Form Design Best Practices shares guidelines on input fields, input labels, validation, feedback, calls to action, and surrounding visual elements culled from international usability testing, eye-tracking studies, and over ten years of designing Web applications.

W3C’s form accessibility guidelines covers labeling controls, grouping controls, form instructions, validation input, user notifications, multi-page forms and custom controls.

In his post, The New Rules of Form Design, Mike Madaio shares some modern techniques for developing better forms:

Label Location Guidelines

Top-aligned labels result in the shortest completion times, due to the reduced amount of eye movement needed. For forms with commonly understood labels, right-aligned is the next fastest, and recommended when page height is a constraint. Though left-aligned labels produce the slowest completion time, this style improves comprehension when the data requests are less commonly understood.

Hint Guidelines

Providing ‘hints’ – brief text about what is required in the field – with the label, next to or below the related field.

Text in the field that disappears once the field gains focus causes strain on short-term memory and increases the chances of error. Even if the label is separate, adding a hint suggests, at a glance, that the field is filled out. Studies show that an empty field draw more attention than those with text, and that users are more likely to skip fields with placeholder text than those without.

Light gray hint text on white typically fails to meet the universally accepted guidelines for web accessibility (A ratio of 4.5:1 for normal text). In addition, according to the W3C, this text is not widely supported by assistive technologies, making it more difficult for these users to fill out forms accurately.

Input Mask Guidelines

Masks only appear once a user focuses on a field, preventing scanning issue. Masks format the text automatically, while the field is being filled out, allowing users to focus on the required data and more easily notice errors. Like the use of parentheses, spaces and dashes are applied automatically as phone number is entered.

This simple technique saves time and effort when filling out phone numbers, credit cards, currency, and more.

HTML Attributes for Input Fields

For fields that contain ONLY numbers like date, zip code, credit card, etc., the larger tap targets of the telephone-style keypad ensure that the input can be entered with the least amount of user effort. The full keyboard set to the number state, however, is still useful for mixed fields that typically always start with a number, like a street address.

There are several other attributes that can be added to text fields that will also eliminate excess key presses and errors.

AutoComplete: Browser function to show a list of previously entered values. Should be set to “off” for sensitive data.

AutoCorrect: Changes words that appear to be misspelled. Should be turned off for unique fields such as names, addresses, etc.

AutoCapitalize: Makes first letter a capital. Good for name, bad for email address.

SpellCheck: Underlines misspelled words in red. Should be turned off for unique fields such as names, addresses, etc.

Leverage Location

Especially on touch screens where typing is cumbersome, pre-filling information based on location awareness can save valuable time and improve conversion. Though possible, pre-filling a full address can be problematic due to accuracy issues, Google’s Places API uses both geo-location and address pre-fills to get the best of both worlds by providing accurate suggestions based on the user’s exact location.

Add these technology-driven form best practices to your checklist.