One of the ways you can help people along with what's an appropriate input is by creating the right field length. Field lengths, when appropriately sized, help provide valuable cues about the type of input that makes sense. When those field lengths are random, it really doesn't do much to assist people. This is particularly applicable for input fields such as postcode and phone number. Rather than using arbitrary field lengths, use meaningful ones and then provide enough room for every other one with the consistent lengths.
Input groups
Field length and required indicators aren't the only ways you can help people understand how to provide input. The natural structure between a series of input fields can actually communicate a lot. Input groups are the way you represent that structure inside of web forms.
If you group input fields in ways that imply a relationship, make them meaningful and use visual communication to communicate that meaning, so that it's deliberate, not unintentional.
Only display fields when you need them
An extension of the previous tip, think about how you can hide form fields that are optional – revealing them only when the user selects the relevant option on a radio button. This way you can reduce the clutter on the page and with fewer form fields you are less likely to overwhelm the user.
Multiple pages
Consider splitting your form across multiple pages if your form has large number of fields, but make sure you provide clear sign-posting so your user knows what page they’re on and if they can move back and forward through the form and if their data is being saved as they go.
Limited placeholder text
Placeholder text is the text that appears within the form field itself. It should only serve as additional hint, minimal description, or as an example of the information required for a particular field. It should provide only supplementary information and is not be used instead of labels. Eye tracking studies have pointed that users best notice empty fields.
These hints typically disappear when the user types in the field. Sometimes placeholders do not disappear when users move their input focus into the field. If the placeholder text remains in the field as editable text, users are forced to manually select and delete it. This creates an unnecessary burden on users and increases the interaction cost of filling in the form.
Ensure the placeholder text is non-intrusive, visible, legible and readable with appropriate font, text size and colour 45% grey if the text is against a white background.
This technique can be used on smaller form factor devices where space is at a premium. However, note that placeholder text is bad for accessibility – for users with visual impairment and cognitive or motor impairments. For blind or visually impaired users, screen-readers may entirely miss reading the hints.
Rather than risk having users stumble while filling out forms or waste valuable time figuring out how they work, the best solution is to have clear, visible labels that are placed outside empty form fields.
Mandatory/optional inputs
Don't make fields mandatory unless they truly are. To indicate that users must provide information in a control, consider the following options:
- Don't indicate anything but handle missing required input with error messages. This approach reduces clutter and works well if the form page is long or most input is optional or users aren't likely to skip controls, thus keeping the number of error messages low.
- Indicate either mandatory or optional (whichever has lesser occurrences) input by mentioning either “Mandatory” or “Optional” respectively under the field. Not all users can understand the commonly used asterisk symbol with the label. Using asterisk has disadvantages – it requires a tooltip and a footnote at the bottom of the content area that says “* Required input”. If the form page is long, the user can completely miss the footnote.
- If all controls require input, display "All input required" at an appropriate place at the top of the content area. This approach reduces clutter for this specific case.