User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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:
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!
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.
There are two varieties of the top bar.
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.
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
- 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.
