1

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?

6

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.

enter image description here

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.

| improve this answer | |
  • 2
    My favorite quote from Jakob Nielsen (Nielsen Norman) is "Even better than good error messages is a careful design which prevents a problem from occurring in the first place" – Anders Aug 4 '17 at 12:26
3

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".

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.