7

It seems really weird as they usually do nothing, only hide themselves. Is it a "turn a blind eye to problem in hope it goes away"?

I'm talking about inline status message like this one from Twitter's Bootstrap: enter image description here

You can click the X and the status message disapears from the page entirely.

Is there any reasoning behind this?

4
  • What exactly do you mean by a close button? One on the dialog or the system one on the window? If it's latter then it's often something the OS demands is present.
    – ChrisF
    Commented Apr 30, 2012 at 11:37
  • twitter.github.com/bootstrap/components.html#alerts
    – fallenboy
    Commented Apr 30, 2012 at 11:41
  • Can you post a screen shot of what you mean
    – ChrisF
    Commented Apr 30, 2012 at 11:51
  • 1
    Added an image, that's what you're referring to, right?
    – Zelda
    Commented Apr 30, 2012 at 13:08

2 Answers 2

3

Your inclination that this design is strange/purposeless is correct. In this particular case, the inline error message should not contain a close (x) button, as no interaction between the user and the alert is necessary. In fact, the error message shouldn't disappear until the user corrects the error.

You can see the ineffectiveness of this design here on https://secure.fleetio.com/users, (a site built with Bootstrap) by forcing an error on the sign up form.

Notice how the close (x) link invites the user to interact with the error message, while no interaction should be necessary (the error will go away on its own once the user corrects the mistake that triggered the error, and submits the form again)

Here's another example from another site built with Bootstrap: enter image description here

13

Really once the user has read the message and they understand it to the point that they wish to close it, there's no value in the message to the user anymore. Closing it just lets them unclutter the page.

In many apps like Twitter or Gmail a user might be on the same "page" for a very long time, so being unable to clear status messages would be extremely annoying; they'd take up more and more screenspace, or at least waste some space even if there's only one. A huge red error message bar at the top of your Twitter stream long after the error occurred doesn't really help anyone.

Messages occur so that a user can take action or understand that something has happened. Once the user has had the opportunity to react to that, on their own time, the message may no longer be helpful.

Note that manually dismissing is an alternative to temporarily showing the message such that it disappears after a time. This means users might not get to read it at all! The third option is to make the notification never disappear, but as I mentioned above that's not always useful either.

Letting the user manually dismiss error/status messages allows them to stay informed of their situation while in control of the interface.

4
  • +1 Also, in almost every (web-based) implementation I've seen, the dialogue's close method is bound to the entire dialogue box, not just the close button, which is just a hint that the window can be closed by clicking somewhere.
    – msanford
    Commented Apr 30, 2012 at 13:29
  • @msanford that's a dialog window though, which is slightly different from the inline sort of status messages the Asker referred to. You can see them in the Bootstrap example
    – Zelda
    Commented Apr 30, 2012 at 13:36
  • Ah indeed, Ben.
    – msanford
    Commented Apr 30, 2012 at 14:07
  • Nice Answer Ben. I like to break it down into three options: Show it forever, Show it and then remove it (toast notification), Show it and allow the user to close it. Which you use would depend on various factors, such as the importance of the information; The type of information etc.
    – Sheff
    Commented Apr 30, 2012 at 16:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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