12

I'm working on a simple registration form which, when invalid data is entered, will display both a generic error (e.g: "There is an error on your form") and also specific errors (e.g: "This is not a real email address").

The specific errors will be placed next to the relevant input field, but I'm wondering where best to put the generic message, at the top of the form or at the bottom next to the submit button.

My thinking for placing it at the top is as follows...

  • Broad content (generic message) will drill down to specific content (messages).
  • Screen readers will be told right at the start of the form that there's been a problem, rather than having to go through the whole form again (if it's at the bottom, they won't know there's an error message there until they get to it)
  • Having a generic message at the bottom seems a bit pointless if the user has already gone back through the form and acted on the specific messages (especially relevant for screen readers)
  • If the page increases in size (likely as more fields may be added), submitting the form would trigger a page reload, causing the generic message to drop below the fold.

On the other hand, placing it at the bottom would...

  • Maintain the practice of having the error in close proximity to the relevant input (in this case, the submit).
  • Potentially be easier for visual users to orientate themselves, as the last thing they would be fixated on would have been the submit, so placing the message next to it would require less scanning on their part.
0

3 Answers 3

7

If your error message display is dependent on a page submit (rather than in-line), I would very strongly advise against putting it at the bottom. A user's automatic reaction on seeing it next to the "submit" button will be that their errors have not yet been resolved and that there's therefore no point in clicking that button again. The most likely scenario is that they'll get incredibly frustrated, changing perfectly valid fields to try and get rid of the message.

Having it at the top in that case at least removes it from relevancy once the individual field(s) have been corrected.

Of course there is now a convention shift towards in-line validation, which is either a nice surprise or an expectation for users. Any chance you could play with this?

2
  • I agree inline validation would be preferable, but I don't think it's doable in this case (due to many reasons I won't bore you with!). To be honest, I'm coming at this from a front-end dev POV, but I just wanted to get a broader opinion from some more UX-centric folk.
    – Simon
    Jun 1, 2011 at 7:34
  • 1
    Cool - in that case stick to the top! Jun 1, 2011 at 8:24
7

The error message should be wherever the user is most likely looking. If your technical design requires that the entire page reload to show the error, then chances are the user will be looking at the top, since that’s where users eyes naturally go as they see the page flash or clear. On the other hand, if you can do partial page refreshes (e.g., with AJAX), then put the message by the submit button since that’s where the eyes will be, especially if validation is fast.

A third option is to on-the-fly build an error page that includes only the field(s) with errors. This will likely be compact enough that you only need the specific message(s) immediately above the field. This saves users from having to read two error messages and hunt down the offending field in a long form and may be an emotionally more positive experience since it suggests the user is making progress and isn’t “stuck” on a form.

1
  • +1. Placement should be driven by the user workflow; put the message where he'll be looking when you generate it (or want him to act on it). Jun 1, 2011 at 14:23
0

Just remember to distinguish between crucial errors and "not so important" errors and place them according to that. E.g., errors that the users mustn't miss should be placed where the user is likely to look, and less crucial errors can be placed in the context. It's bad design to frighten a user with a big red error if it's not in the same magnitude as the error message it self...

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