UX Tip #2: Better form errors

Write friendlier and intuitive errors with these little tips

Properly designing user input and error handling can make or break an experience for your users. In this short design tip, we will cover the guidelines for writing effective inline errors as well as error summaries.

Inline errors

Pro tip: Use precise, inline field errors in an empathetic tone.

Guidelines

• Indicate the reason a field is invalid: Is it empty? Is the formatting wrong? Has it been used already?

• Avoid negative sentiment. Errors like “This field can’t be empty” or “You didn’t enter a valid email” can invoke negative feelings for your user.

• Use short, punchy copy that is to the point.

• Use a consistent tone of voice: The two predominant ways of displaying errors are the friendly active: “Please enter a valid email”, or the passive “This email is invalid”. There is no right or wrong here: an active tone of voice can come off as friendlier, but it’s more important to stay consistent with the rest of your product.

• Don’t be afraid to be branded.

• (optional) Give them suggestions. E.g. if a username is taken, provide them with alternatives that are available.

When to display them
Right after a user has filled an input field. Make sure not to display errors before or while the user is typing, but rather after they focus on a different field or outside the form.

Error summaries

Pro tip: If your users are filling a long form, summarise the errors in the page and give them ways to quickly go and edit them.

When to use them
If your user is filling a long form with more than 3-4 fields, and is unlikely to be able to see all fields without scrolling. Error summaries are used more in websites and web apps, where long forms are more frequently used.

Where to show them
On web based forms, error summaries are usually displayed next to the submit button.

On mobile apps, error summaries can either be displayed close to the submit button, or as a snackbar/notification.

What to write
Give your users a summary, also highlighting the number of errors in the page.

How to make it even more useful
”Don’t make them think”. Give your users a link to the first error in the page, so that they don’t spend time going back and looking for errors. This is especially important on mobile forms, where a user is unlikely to be able to see all fields when trying to submit a form.

References

https://www.nngroup.com/articles/errors-forms-design-guidelines/