my-10">

Letter

An AI-assisted newsletter builder for content creators, designers, and developers.

This article is supported by Letter.

1. Keep it short

Long forms can be intimidating as they require more effort to complete. When you’re defining the scope of the design, take some time to evaluate each input field:

Can the information be obtained from a different source?
Can the information be solicited at a later date?
Can the field be omitted?

If the answers to the above questions are “yes,” then those fields are probably unnecessary and should be eliminated. This process might require more time, but the reduced user effort and increased completion rate make it worthwhile.

ASOS sign-up screen is unnecessarily long and includes redundant fields.

There is really no point in separating the first name and last name fields.
This information can be collected via the user’s browsing or purchasing history.
This can be omitted as the user could edit it in the account setting at a later date.

2. Group related information

You should group related information in logical and visual sets. Avoid ambiguous spacing by placing the label closer to their respective fields; rather than having equal distance between all elements. This is to prevent confusing the user as humans perceive things closed together as related — Gestalt’s Principles.

This can also be done through the font hierarchy by having the right mix of size, weights, and colors to create contrast. You can use bolder and darker styles for section titles or smaller and lighter styles for text field labels.

3. Be clear on your requirements

Don’t let the user guess what you want, only to reject them with an error message at the end as it would cause frustration and result in a negative experience. The user won’t know what is required if there’s no clear indication of the validation rules.

This is especially important for “password” fields where there can be multiple validation requirements such as; special characters, uppercase characters, numbers, etc. It makes it a lot easier for the user to recognize what they lack by displaying the requirements.

Mailchimp lists out all their password requirements so that users know exactly what is expected out of them. The list is interactive and shows the user exactly which requirements they have fulfilled and which still need to be completed.

4. Place labels outside the fields

Labels are meant to inform users of the type of information required for any given field. It is unwise to place them within the field box as placeholders. It makes it difficult for the user to remember what information belongs in a field, making it harder to check and fix any possible errors.

The main problem of using placeholders as labels is that they would disappear once the user interacts with the input field. This would be annoying as the user would have to delete the text to view the label again.

Google overcomes this problem by implementing this smart micro-interaction that converts the placeholder into a floating label.

Google uses a smart micro-interaction to overcome this problem.

5. Auto-focus your fields

The act of auto-focusing the first input field gives the user an indication and starting point when filling up a form. It also allows them to start typing — reducing the interaction cost immediately.

When implementing auto-focus, it’s essential to highlight the active field by providing a clear visual cue to inform the user that the field box has been selected. This is generally done using an accented border color or a fade-in of the field box to attract the user’s focus.

By highlighting the active field, it makes it easy to focus on it.

6. Warn users that caps lock on

When entering passwords, the most annoying thing that can happen is not realizing that the caps lock was on and continually getting a vague error message. I’m sure that it has happened to all of us. This can be prevented by simply informing the user that their caps lock is on.

The MacOS shows a symbol to indicate that your caps lock is on (although it may not be very obvious for first-time users).

7. Set field length accordingly

When designing an input field, designers have to take into consideration the answer required from the user. For example, if you only require two characters within the “State” field, there’s no need to make it redundantly long. This will only confuse the user as they might assume otherwise.

The field’s length should act as a visual constraint, giving users a rough idea of the number of characters required.

Invision does a good job by having different field length sizes based on the required information.

8. Error messages have to be visible and specific

All users will make mistakes. It’s inevitable. That’s why it’s your job to ensure that the error messages are visible and specific so that the user would know what went wrong and how to fix it.

Some designs tend to display all the errors at the top of the form. This is bad UX as it puts a high cognitive load on the user’s memory, forcing them to remember the errors while locating the fields that require attention.

It’s much better to position the error message either next to or below the respective field. This will correspond with the user’s reading flow and allow them to view the error in context to their previous input.

For Facebook, the user will only be able to see the error message when they hover over the error icon.

9. Label your optional fields clearly

Ideally, optional fields should be kept to the bare minimum to keep your forms short. If they’re required, make sure to use the “optional” label to denote them instead of marking the required fields with an asterisk (*), which could be hard for the user to notice.

The main reason for marking optional fields and not required fields is that most of your fields should be mandatory. Therefore, it makes sense only to mark those in the minority.

10. Use images to increase engagement

When it makes sense, use images for selection to improve the user experience. This is good if you want to explain each selection better using text, icons, or images.

11. Implement predictive search

Predictive search is a dropdown of auto-suggestions based on what the user typed in the search bar. It is used to simplify and optimize the browsing experience by enabling the user to search for items easily as the backend algorithm would complete the rest of the search.

Reducing the need for complete input prevents errors or wrong searches due to misspellings; it also allows users to complete their searches quickly and efficiently.

Airbnb uses predictive search to help the user easily find their location.

12. Provide a “show password” option

By only showing a row of bullets or asterisks, you are forcing the user to type blindly, increasing the likelihood of an error. It’s necessary to provide an option to allow the user to view their input by having an “eye” icon or checkbox that unmasks the password. This allows the user to preview their password, reducing the chances of them making a mistake and allowing the opportunity for them to confirm their input.

13. Use a single-column layout

A single-column design allows the user’s eyes to read more naturally, from top to bottom. While using multiple-columns would cause the user’s eyes to jump all over, increasing the completion time. However, there are some exceptions like first name and last name, where multiple columns might be expected.

In summary

I know that designing a form can be a dull process, and most users invariably hate to fill them out. But following the above guidelines and injecting some humor into your UX copy, you can improve the user’s experience and elicit an emotional reaction.

Doing so will undoubtedly increase the completion rate, which is one of a UX designer’s objectives.

Originally published on jeremiahlam.com

13 Form Design Guidelines