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?
  • This is a Q&A site, not an expert review site. If you want to write expert reviews I suggest you put it in a blog and then visit the chat and link to it. Thanks!
    – Rahul
    Aug 7, 2011 at 20:38
  • It would be good to clean up the question...make it simpler and clearer. (fewer words help) With that said, I would love to answer it here. I clicked "reopen". You need 4 more people with 500 experience to do the same to get answers.
    – Glen Lipka
    Aug 8, 2011 at 15:37
  • Hope this is better!
    – GUI Junkie
    Aug 8, 2011 at 20:57
  • Maybe also change the title: "Design pattern or best practices for top notification bars?" (or something). The point I am making is: Why is the StackExchange notification bar special? Google has one for Google Plus, Quora has one. Lots of sites have them. To me, it is a sensible question to ask what the right/wrong way of doing are.
    – Glen Lipka
    Aug 9, 2011 at 2:10
  • 1
    @Glen, great edit!
    – GUI Junkie
    Aug 9, 2011 at 7:26

3 Answers 3


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!

  • +1 for your detailed answer. I don't agree with everything, but a lot makes good sense. Especially the part about 'Ads'.
    – GUI Junkie
    Aug 25, 2011 at 7:23
  • +1 In your comment 'if there is an X to dismiss them you better dismiss them completely', would you recommend using cookies for this, or do you think a session variable would be sufficient? Basically dismiss the messages for a short amount of time or for all of time?
    – SwDevMan81
    Apr 22, 2014 at 12:33

I don't know of a written pattern, but I have some experience testing a variety of this at Intuit. There are two uses for a top bar.

  1. Access to links: Example prototype. I made this for Intuit's websites in 2005. It tested extremely well. Much better than a menu that overlayed the whole page. Today, IBM has a variety of this. Click on one of their top nav links.
  2. Notifications/Status: We used this also at Intuit to show how many items they had in their shopping cart. Amazon and others do this. At the top of SE, they show your score and use the left menu to show new comments.

There are two varieties of the top bar.

  1. Everpresent. This is like Quora.com where the notification actually scrolls down with you. They use JavfaScript to do it, which can be highly annoying on a mobile device that is slow. However, done correctly it eliminates some valuable (vertical) screen real estate, but increases the overall awareness of the bar.
  2. Normal. (I don't have a better label for this. It's like SE. It scrolls away with the rest of the page. It loads quickly and works for "above the fold", but is useless when it's off screen.

You have to weigh the overall scheme of your site and the importance of the information in the bar to decide which model works best. However, I believe (from the testing at Intuit and my own design sense) that a top bar is almost always a good idea for a site that has alot of links and some form of status. (shopping cart, complex site with notifications). It is easy for people to understand. It is a fairly efficient use of space and lastly, it allows you to communicate in a rich, yet predictable way with your users.

I hope this is helpful to you.

  • Glen, I didn't realize we are talking about different things. The top navigation bar is great, but the notification bar pops up (on SE) when a badge is awarded...
    – GUI Junkie
    Aug 9, 2011 at 23:15
  • I got the question re-opened and you negative vote me? Harsh. ;) I was trying to answer the updated text (which I wrote). That will teach me to edit people's questions.
    – Glen Lipka
    Aug 10, 2011 at 16:47
  • Glen, I never vote down! In fact, I was thinking about going to Meta to ask to transfer ownership of this question to you, but then I realized you were talking about something different. So, harsh but from someone else.
    – GUI Junkie
    Aug 10, 2011 at 17:03
  • Heh. No worries. Don't worry about the transfer ownership thing. Just write a new question and try to use the lessons of the "good question/bad question" formatting. I hate it, but it makes the powers-that-be happy. And vote up my answer anyway. :)
    – Glen Lipka
    Aug 10, 2011 at 17:27
  • That big blue bar at the top has multiple purposes, as I have stated. I treated them together because the design pattern needs to take into account both. God, I hate the open/close thing...making me sick.
    – Glen Lipka
    Aug 10, 2011 at 18:21

Should Color or Animation be used?

If the notification is pinned to the top of the window then it is likely to be towards the user's peripheral vision. As such, movement is more likely to be noticed and color changes less so. Just don't be annoying with it.

Some research that might be relevant: link

Yellow was, on average, the most quickly identified color(see figure

  1. at 73 degrees in the right eye and 73.5 in the left, red was second(72, 70.5). The least recognizable colors were green(60.5, 64.25) and purple(64, 63). Blue was recognized at 68.75 degrees from the center of the right eye, and 68 from the left. In addition the subjects often identified the color green as being either purple or red and in one case pink before reporting a sudden shift to a perception of the actual color.

For what it's worth I call these Status Blips.

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.