Web usability: alert/notification - how to attract attention?

Question

I'm building a web application where one of the features causes users to be notified in real-time when an alert pertaining to them occurs, similar to the big orange bar in Stack Overflow.

I have a few options, and I was wondering if there was a usability guideline on the best way to go about this. One option is to have a small notifications box on the screen that flashes colors when an alert appears, but I'm worried that a simple, repeated change in color won't be sufficient to attract the user's attention.

Another option is to have a window come floating across the screen, demanding the user's attention, but I've always found those to be obtrusive. Maybe another form of animation could be less annoying yet equally likely to attract the user's attention?

I'm not really looking for an opinion as much as I'm looking for a usability discussion/resource that might cover this kind of decision.

Answer 1

IMHO, the annoyance level should reflect the error level... For an error, a layer with the error message, preventing the user to do anything else should be better. For a notification, a box that appears on the top of the page (like a browser asking you to save a password) is nice.

So I don't think there is a better solution... It just depends on the type of the alert... : )

Answer 2

The answer somewhat depends on how important it is that the user pay attention and how important it is that they take some action? E.g. is the alert of the "your server just crashed" kind or "you have new e-mail from aunt Zelda" kind?

For the first kind, something obtrusive is the best - either your option of floating a window, or may be change the page background to flashy color (and blink??? Don't hit me please!). One other nice way of grabbing attention I saw was to change the page (and thus a browser window) title to a flashing set of "* * * * * *" - that is un-usual enough to attract attention sometimes.

For something less obtrusive for less critical-too-notice-quickly, SO's top notification bar is one of the very best solutions from usability standpoint (if not the best), going by the main metrics (how much work does the user need to do to deal with this and to look at it, and how intuitive its behavior is):

• The user's eyes travel to top of the screen more often and more likely than elsewhere

• It is very easy to get rid of once you notice it - the bar is wide (easy to hit with mouse, no horisontal adjustments needed) and at the very top (not too much fine mouse work to get the pointer there).

Answer 3

Check out JGrowl, it's a nice framework for unobtrusive notifications, you can find some sample screenshots here.

Answer 4

If you are looking for resources, I suggest Don't Make Me Think by Steve Krug. His site, Advanced Common Sense, is also a great source.

Another great site for Usability tips and guidelines is Jakob Nielsen's useit.com

I was at a site the other day that had a product download button. I clicked on it, it seemed nothing had happened. I clicked it again, and the download link that the first button created did a little shake at me. Very effective and it got a laugh:

http://haanstra.eu/putty/

Answer 5

I find the jQuery UI highlight() effect function is good for unobtrusively alerting users that something has changed; however as others have said, it depends on the importance of the message - sometimes you just need to be obtrusive!

Answer 6

My system has three types of notifications. Each type of notification is styled with a border and background color:

• Success: Green
• Warning: Yellow
• Error: Red

Alerts, like "You didn't fill that field in properly!" are handled inline, so no popups to irritate the user.

I've designed my system to fade out notifications a few seconds - this means that users are accustomed to seeing the green box that fades away after a few seconds. However, when an error or warning occurs the box stays on the screen right in front of the user, demanding attention.

I believe warnings and errors should be used only when absolutely necessary - that way when they are used, they maintain a significant level of impact. In my system, warnings and errors don't fade out - they stay there to remind you SOMETHING IS NOT QUITE RIGHT.

In my experience, if you're going to interact with a user, make it large and in their face, but don't make it so much so that it obstructs the rest of the page. So no prompts, or lightbox style overlays (in my opinion).