Error message that always appears in the same place

Question

Is it okay if error messages always appear in the same place on a website? I know the right thing to do is place errors inline, close to where the error occured. But there's hundreds of errors that could happen when users play with my site and I don't have the time to create customized inline errors for each one. I'm proposing that I slide down a red box at the top of the page whenever an error occurs. The box slides back up and disappears in 5 seconds.

Since the error message always occurs in the same place, won't users be trained to look up there whenever something bad happens, even if they're clicking somewhere low in the page? And is there any better alternative to designing this generic error?

Answer 1

I usually like to show an error message on top that summarizes all errors on the page, plus in each location, highlight what is wrong.

For example with a form, on top you would say that email, phone and address are required, and in the form, set all of these three fields in red with a text along the lines of "this field is required" (or something more specific, depending on how it failed the requirements).

However, I usually keep the error message [on top] always open (because quite a few customers complained the message was gone before they're done reading it, so leaving it open (instead of disappearing after a few seconds) made everyone happy).

---

So in short for your question, yes they will be trained to look on top (Twitter does it too for example), it's the natural thing to look when something suddendly moves, but if you can add extra hints, so much the better. And I might suggest not to auto-hide the message, give a "close" button option instead (I quite like how StackExchange does it personally).

Answer 2

How about a compromise between showing inline messages, which I agree would take a lot of time, and having a slide down red box? Instead, show your red box just about where the error happened. You can then:

• Leave it for 5 seconds as you suggested, or,

• Have it go away only when the user has fixed the problem, or

• Have the dismiss button or close icon

Answer 3

Proximity is good for error messages, but having all the error notifications in one place has advantages too. The user learns to always look there. Now Apple puts all the notifs of the iPad at the top of the screen. Web browsers do that too with their yellow bars. As users, we get used to look there. Generally, the top of the view is a good place to put messages.

However, making a message disappear from its own after 5 seconds is a bad idea. This is against the W3C's accessibility guidelines, this harms accessibility, this harms usability. The Web page does not dictate where the user looks, neither during how much time, let alone the user's reading speed. Often we give instead a cross, or a button “OK”, that removes the message when clicked. If the removal of the message is a necessity. But leaving the message with the form as long as the form is not re-submitted is perfectly OK — as a user, I even prefer this.

I think “Add at least one file” is good, better than “At least add one file”. That is consistent with the button “Add files”.

Answer 4

Additionally, to make a few points explicit:

Do not remove your error message until it's corrected

Whatever error correction information you present to the user should last at least until they correct it. Your suggested method assumes that your user will always sit in front of your page, undistracted, and stare at only that page until the next action is ready to be completed. What if they switch tabs, answer the phone or sneeze violently after submitting that form section? They'll be back at your app page with an error and nothing to indicate anything is wrong.

Don't you already have your error messages?

You cite hundreds of possible errors that can occur as a barrier to making inline error messages. Why not simply displace (or otherwise show) the error text you've already prepared nearer to the input field that threw the error (since your mockup shows the error message to be fairly descriptive already).