Basic Form Elements

Whether it is a signup flow, a multi-view stepper, or a monotonous data entry interface, forms are one of the most important components of digital product design.

Below you will find common best practices of form design. Keep in mind there are exceptions to every rule. Feel free to download the UI kit and use in your next project.

1. Forms should be one column

Multiple columns disrupt a users vertical momentum.

2. Group labels with their inputs

Present the label and input close together, and make sure there is enough height between the fields so users don’t get confused.

3. Avoid all caps

All caps is more difficult to read and scan.

4. Show all selection options if under 6

Placing options in a selector drop-down requires two clicks, and hides the options. Use an input selector if there are over 5 options. Incorporate contextual search within the drop-down if there are over 25 options.

5. Resist using placeholder text as labels

It is tempting to optimize space by using placeholder text as labels, but it causes many usability issues.

6. Ditch the * and denote optional fields

Users don’t always know what is implied by the required field marker (*). Instead, it is better to denote optional fields.

7. Group related information

Users think in batches, and long forms can feel overwhelming. By creating logical groups, the user will make sense of the form much faster.

8. Differentiate primary from secondary actions

Provide visual prominence to the main action.

9. Make CTAs descriptive

A call to action should state the intent.

Errors and Validation

Inline validation is a method to check the validity of an input and give feedback before submission. It enhances the usability and user experience of forms.

Inline form validation and error handling design techniques are explained below. Feel free to download the UI kit and use in your next project.

5 ways to provide validation

Below are ways to present inline validation and errors. Each has its trade-offs and limitations. It’s important to address problems early and at their source.

1. Provide helper text until the entry can be validated

Immediately showing an error when a user clicks into a field is annoying, misleading, and distracting. Instead, when a user clicks into an input, present helper text in place of an error until the error is confirmed, or the entry validated.

2. Provide validation as a user types

This method provides helpful feedback for password strength and username availability. Avoid using this technique for other input types because it will annoy the user by harassing them with each entered character until the entry is validated.

3. Provide validation once the user reaches a character requirement

This validation method works for inputs with predictable character lengths like Zip codes, phone numbers, CC numbers, etc. However, this can be problematic for internationalization because the intended formate is not always known.

4. Provide validation when a user leaves the field

This is probably the best default behavior because validation occurs after the entry is made explicit. However, it can disrupt a user’s flow because it provides feedback after the user has moved on.

5. Provide validation when a user pauses

This mitigates the annoyance of inline errors as the user types, and provides feedback when they pause, as well as when exit the input.

Placeholder Text

Placeholder text can be used as an attribute for almost every HTML input type, and misguided designers and developers don’t hesitate. It is tempting to use placeholder text to provide text help for complex forms, or omit input labels to improve aesthetics. However, doing so causes many usability issues, which are listed below.

Avoid using a placeholder as a label

In an attempt to shorten the length of a form or reduce visual noise, designers use placeholder text as an input label. The label disappears as soon as the user begins typing, and the entry must be deleted to expose the label again. This practice places a burden on short-term memory.

It is better to include an input label directly above the input field. The blank input acts as an affordance to enter data

Avoid using a placeholder as example text

Providing an example helps a user understand the request. However, incorporating the example as placeholder text causes issues including: disappearance on focus, confusion regarding what was entered, and reduction of the input acting as an affordance. As an alternative, example text can be placed below the input.

Avoid using a placeholder as help text

Placeholder text is often employed to provide more information on what is needed to complete a field. This practice is bad for the same reasons stated earlier, and even more dubious because of the amount of text used. Misguided designers and developers often make the mistake of using a placeholder to communicate lengthy messages.

Avoid placeholders as secondary labels

It is tempting to use placeholder text for secondary labels. However, form usability will increase if a regular input label is used instead.

Placeholders should be of a lighter value than input text

Users fill in the blanks. A blank input is an affordance to enter text, which a placeholder can diminish. This is especially true when placeholders are high in color value because users can mistake it for a prior entry.

Placeholders should be visible on all screens

Placeholder text causes issues if the color value is too low because it may not be visible on certain screens, leading users to squint.

Placeholders should not disappear when a user clicks into the input

A burden is placed on a user’s short-term memory when a placeholder is omitted on focus.

Address Internationalization

We live in a globalized world and internationalization needs to be taken seriously. Below are four techniques to adapt form addresses to accommodate the structure variability of different countries.

Specific Format

The specific format works when the system can interpret the user’s country and present the appropriate address structure. This technique is problematic if the system doesn’t have access to a user’s geo-location data, or if the user intends to enter an address for a location outside their country. For example, geo-location data is of no use if the user is entering a list of global distribution centers into a network database. The changing format is a better approach for this use case.

Generic Format

The generic format is the most flexible way to capture an address. Each input is unstructured, which makes it hard to check for errors. This approach can cause data integrity issues because the user can enter an address in various ways. State/Province/Region and ZIP/Postal Code should be optional because not every address will have them.

Changing Format

Changing formats present the appropriate address fields based on the specified country. The country selector is presented before or after the address fields. When a user selects a country the field labels change and the structure reformats. The changing format can also be achieved by asking for a user’s country in a step before presenting the address fields.

Auto Morph

The auto morph incorporates an auto-complete address field input. A user is presented with a list of suggested addresses as they type. The user then chooses the correct address and the form changes structure based on the country and populates the selected data in the fields below. The user can then edit and add any missing data.

Coming Soon

Form Presentation

Read the Article