usability - Design pattern or best practices for top notification bars?

The top notification bar on SE pops up to show messages like 'badge x earned'. What are the best practices for this type of UI?

Specific details:

1. On showing - Displace content downward (like on SE) or hover over the top of the page, hiding some content?


2. Always visible or glued to the top of the page?


3. Would it be a good place to show offers for a shopping cart?


4. Should Color or Animation be used?


5. How much vertical screen space can be used?


6. What kind of messages should be shown?


7. Anything else?

Answer

While I don't believe there's any published or definitive answer, I'll try and help and provide some examples I find useful, as I think this is a very useful topic to consider, even if clear cut answers aren't availible.

On showing - Displace content downward (like on SE) or hover over the top of the page, hiding some content?

Displacing content (IMO) only works if your bar is at the TOP or BOTTOM of the page; having a shifting disappearing box elsewhere in the page can be extremely disruptive to the appearance of the page. Hiding content is never a good idea either; when possible white space or screen edges can be a good place for notifications; you never want to cover up important things. Remember than if you have a "hiding" notification on the top of your page might hide your nav bar!

Always visible or glued to the top of the page?

If you actually want them to read it and then dismiss it, "glue" it somewhere important. I'd say the more important thing here is whether it ever goes away; for example Youtube has decided to notify me, upon uploading a video, that I am aloud to upload more than 15 minutes of video. As it has done for the last six months. Allow an option to hide notifications like these, and if there is an X to dismiss them you better dismiss them completely. If it's a message that's constantly going to pop up; e.g. facebook's "status update" count, consider making it an overlay on a permanent UI element, like Facebook does with the "new messages/new updates" counters. Making those a removable notification pop up would be very annoying.

Would it be a good place to show offers for a shopping cart?

People hate ads. People live with ads, but if you make ads that disrupt the flow of content, people will leave your site. I know you're saying "offers," but if you're trying to get someone to buy something they didn't explicitly seek out, it's an ad.

Should Color or Animation be used?

A brief animation in/out can be okay (personally I seldom find these amusing), but constantly "blinking"/"moving" elements appear more annoying than urgent; think about applications flashing the Windows Task Bar at you. A quick blink once or twice notifies you; a constantly flashing icon annoys you.

How much vertical screen space can be used?

As much as is necessary and no more. The SE messages are quite good: terse, just enough white space for readability. Especially if you're going to shift the page's content, you want as minimal a disruption as possible. Remember users might leave the notification up to react to it later and continue using the site as usual; especially if it's a "new messages" type pop up.

What kind of messages should be shown?

Things that the user would otherwise miss. To use the Stack Exchange example, I would have never known I had privilege levels on this site if a notification hadn't told me. IT's also great for new content/features; Google has notifications like this often. Note that even when vary familiar with a site users will often overlook small UI changes such as a single new link or menu item if their attention isn't drawn to it. If a feature doesn't get much notice you might consider a one time notification if you believe users would find it useful, especially if you often have users request a feature that already exists! Facebook frequently posts new notifications promoting their "friend finding" system; it's something that appeals to most users of the site, yet at the same time users rarely or never seek it out on their own; it can be useful to draw attention to it. Just don't make it sound like a sale's pitch!