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.
Slack handles it nicely. Maybe it will help you.
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:
- There are messages (the number gives some indication of how much time the task of checking messages will take me to handle)
- 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.
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.
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.
I haven't seen anyone try to cram a divider into a wide bubble, but it's something to explore...