Forms

Overview

Filling up forms can be a lot of work. Minimize errors and increase your users’ productivity by creating user-friendly forms.

Guidelines

Allow users to preview long-form information before they submit or complete transactions

Use previews or confirmations to reduce errors caused by accidental or unconscious actions. This is especially important in long form or multiple-step submissions.

Avoid drop downs for form inputs less than 5 options or more than 15 options

  • When there are too many options, consider a text field with auto-complete
  • When there are too few options, consider radio buttons

dropdown best practices png

Avoid reset button

The risk of accidental deletion outweighs the unlikely need to ‘start over’ on a web form. In reality this button almost never helps users, but often hurts them.

The only exception for this rule is when a form is being repeatedly completed with entirely different data each time (e.g. BPO data-entry tasks)

Choose meaningful and smart defaults for form inputs

Using smart defaults or pre-filling form fields with educated guesses removes the amount of work users have to do. This is a common technique for helping users move through forms faster by being respectful of their limited time.

smart defaults

Consider the different ways to prevent errors

A good form (or a good interface, for that matter) prevents users from making serious errors.

instructions.png

Ensure that progress is not lost (either by the user or site error)

Users should be able to quickly recover from errors and proceed with current task. Automatically save your user’s work using the following tools:

Indicate mandatory form fields clearly

Help users determine which fields are optional, and which are compulsory, so that they do not get an error on submission. This is usually done with an asterisk beside the form label.

required fields

Maintain close proximity between form fields and their labels

Align form labels directly adjacent to or on top of fields. Keep labels and their form fields near to each other, and maintain far-enough spacing between multiple fields. If possible, include the label attribute for screen readers for improved accessibility.

label-proximity.png

Show the status of the user in a multi-step operation

Use clear status indicators that are timely, and accurate to help users be aware of the state and estimate the progress.

delay-indicator.png

Simplify decision making by reducing number of alternatives and fields whenever appropriate

When creating forms, get only the information that you actually need. If there is a way for the system to get the information elsewhere, the better.

Minimise the number of options involved in a decision to reduce response times and minimise errors.

Use a single column for fields in a form

Users are required to scan across (and down) the page, if form fields are presented in multiple columns, and this zigzag flow is less user-friendly for them.

Validate form input provided by the user in context and in a timely manner, instead of after submitting the form

  • Provide inline validation after entry (i.e. when the user goes to the next field), and remove error messages (or replace with a success message) immediately (i.e. during input) when the error has been fixed
  • Place validation messages after the field (right side or below)
  • Use a combination of visual cues and clear language for validation messages (instead of colors alone)

 form-errors.png