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.