What's the best way to alert someone to an error on their form?

Question

When someone submits a form on a Website or mobile app that has an error, what's the best place to show them the error? Should it be by the submit button or by the errant field? If it's by the errant field, should that field zoom into focus?

Answer 1

Try indicating errors (as a summary) both at the top of the page and adjacent to the input itself (for each individual error).

Because of viewport size, scrolling and plain old human attention and perception, having an top section showing a summary of the errors will allow users to see in an unscrolled page that something is wrong.

If you have a long scrolling form (i.e. on mobile), maybe you can put the error summary block before the submit button as well. Test with users to see if they notice either.

In addition, errors should indicate at the field level:

• What is incorrect
• How to correct it

Try inline validation

If you have inline validation, the user can see the error before submitting the form. If possible, you could also allow the Submit button to enable only after meeting the form requirements. Talk to your developers about what's possible given your resources and constraints.

Here's a mock example of both a visual 'error summary block' and a field level indication. Its message indicates that the user made an input error by adding letters as opposed to digits.

If space permits, try to indicate an error with more than a color change.

Nielsen Norman Group has some error guidelines from 2001, but the principles are still valid:

A related design flaw is to indicate an error state solely by turning the field label red. This violates one of the oldest and simplest rules for making technology accessible to users with disabilities: Never use color as the only encoding mechanism; always include redundant cues that color-blind users can see.

Another consideration: how to prevent errors in the first place.

Again I'll refer to NNGroup, with Preventing User Errors, in which they mostly focus on slips.

In About Face: The Essentials of Interaction Design, by Alan Cooper, he has some good insights about error messages (pg 533):

There's a final irony to error messages. They don't prevent users from making errors. ...What error messages really do is prevent the program from getting into trouble.

If you can, use the forgiving format pattern:

Permit users to enter text in a variety of formats and syntaxes, and make the application interpret it intelligently.

Remove as much of the burden from the user, and let the system take care of it.

Answer 2

I would suggest at the field that has the error. You could change the border of the input field to a red color and give some sort of hint as to what the user did wrong, i.e. "password must contain a special character and number".