Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

error

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?

share|improve this question
4  
Error messages disappearing in 5 seconds does not sound like a good idea. –  Tsuyoshi Ito Jan 4 '11 at 7:34
1  
'At least add one file' reads better than 'Add at least one file,' I guess. –  rightfold Jan 9 '11 at 0:17
    
While I understand the desire to cut down on the amount of work you have to do when building the site - what development project doesn't have a tight timeframe? - this kind of shortcut seems like a bad idea to me. Broadly speaking, trading worse UX for faster development is seldom a good idea. –  Bevan Jan 9 '13 at 21:17

4 Answers 4

up vote 14 down vote accepted

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

share|improve this answer
    
I think his main problem is that he doesn't want to have to create individual inline error lines. He might be able to get away with that if the error types are simple or intuitive (e.g. required field is empty, malformed email address ...), but if there are multiple error types per field that are less than intuitive, then he might need to do more than just highlight the field. Perhaps he can have the top error dialog change to a detailed error description of each field on hover. –  Lèse majesté Dec 31 '10 at 7:20

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

share|improve this answer

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

share|improve this answer
    
Good answer, but can you cite (and ideally link to) the relevant W3C guideline that this refers to? –  JonW Jan 10 '13 at 18:43
    

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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