6

What is the best way to display two notification statuses on one icon. Business has requested need to view escalated items as well as new items on first glance.

I would like to know is if its proper to have 2 notification bubbles on one icon to display different notices. I have attached an illustration of what I am trying to explain enter image description here

Improve this question
2
  • 2
    What do you have currently?
    – JonW ♦
    Nov 23, 2015 at 9:48
  • Could you provide more information?
    – Mayo
    Nov 23, 2015 at 11:21

4 Answers 4

Reset to default
8

Slack handles it nicely. Maybe it will help you.

enter image description here

https://slack.zendesk.com/hc/en-us/articles/201675007-Dock-icon-notifications

Improve this answer
3
  • 1
    How does it display both?
    – Daniel Zahra
    Nov 23, 2015 at 10:32
  • It doesn't. Direct messages have a higher priority, so it displays the number if possible, otherwise the dot is displayed. In the case of escalated and new items, I assume escalated needs immediate action and is therefore also of higher priority.
    – Martyn
    Nov 23, 2015 at 10:35
  • That's is a fair functionality in terms of how slack works. Cheers.
    – Daniel Zahra
    Nov 23, 2015 at 10:37
3

I would question whether the user needs two badges.

Allow me to make some assumptions as you have not provided details of how the information meets user needs.

Does the user need to know there are escalated messages or how many there are? Which is more important?

Presumably if there are ANY escalated messages, the user will go to the inbox sooner. I don't imagine it's a case of the user saying, "Oh, there are only 3 escalated messages. I'm not going to check out the inbox now. If there were 4, I'd go immediately to the inbox."

It seems the NUMBER of escalated messages is immaterial to the user's decision to act and is therefore clutter. What matters is that there are ANY escalated messages.

So, what the user really needs to know is:

  1. There are messages (the number gives some indication of how much time the task of checking messages will take me to handle)
  2. Some are escalated (presumably these would be a the top of the inbox)

I would therefore have one badge showing total messages, and vary the treatment somehow when some of those messages are escalated. Color, shape, position and size are typical ways to show the difference between the escalated and non-escalated states.

Improve this answer
1

One option is the unified inbox method. It shows a total count of alert items, and the breakdown and grouping is revealed on click or mouseover. The top bar here on a stackexchange site is a good example. I see a total of 2 in the red bubble, and when I click on it I see which sites and categories those two alerts fall into. screenshot of alert dropdown

Facebook has a slightly different way to break those down by high-level categories receiving their own icons [Friend Requests, Messages, Global Notifications] Each of those gets its own active state and badge count.

screenshot of alert icons

I haven't seen anyone try to cram a divider into a wide bubble, but it's something to explore...

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
0

While the questions seems to be a bit vague, I can think of using colours and numbers on an icon to show different statuses.

Improve this answer

Your Answer

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

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