Notification menu: merge green and blue notification bubbles into just blue

In this same conversation with a colleague, she told me she was confused by the green and blue notification bubbles. She could not figure out what the colors represent, and she was especially confused because she had alot of both of them. In this case, she has moderator privileges but does not log in often - mostly she participates by email.

Correct me if I’m wrong, but besides the red flag-related bubbles, I think the green notification bubble only shows how many new personal messages you have while the blue notification bubbles are for everything else.

I know there are probably very good reasons for having a separate green bubble for personal messages, but in my community I don’t think there is any need and they are confusing. Perhaps an admin setting could be provided to simplify the UX and just display a single blue bubble indicating the number of new notifications?

I think the green ones are more vital than blue as it’s a personal message rather than just a notification of which sometimes are not really needed to actively jump on and look at just like the red ones are. I understand your need but not sure there are many communities that would want to overlook PMs being sent.


Thanks. I figured that was the idea behind it. But I honestly don’t think it makes any difference in practice, on any site… except maybe support oriented sites and then not for users but for staff. For users, how do they figure out what the colors mean?

Yeah, it’s crucial to the way we use Discourse (support as you mention).

By going there once? Unless there is already a mental model in place, everyone has to learn something the first time.


This will become easier to intuit if we ever apply more structure to the notifications tab:

Then you’d immediately see that the green (2) corresponds with the 2 PMs you’ve received.


Maybe this could also tie into what @nbianca has been working on here:

So you could have the notification bubbles attributed to each of the new “tabs”:

(apologies for the awful looking bubbles)


A Problem is… The bubble is green but the notification lines for messages are still blue. This may be confusing.

At least make those lines green to match.


This is an interesting idea but to me it just reinforces the sense of information overload. Maybe if the avatar just had one bubble, or had blue and green rings with no numbers? (I like the way the who’s online plugin displays rings around avatars)

That’s not a bad idea. I like it, as long as the colors are not so bright as to become a distraction.

My point with this topic is that for the ordinary civilians in my community, the distinction between messages and other notifications is irrelevant. They just don’t care and find it confusing to see two bubbles. I can’t speak for other communities and obviously agree that for myself as admin/moderator it is important to see the personal messages. But I honestly also don’t need to see two bubbles to know it’s time to go to my inbox to go through my messages.

Anyhoo, bike shedding and all that. I don’t think this is so important that it needs any big structural changes. I am understanding notifications much better now and appreciate the effort discourse is taking to make sure that important notifications don’t get lost. Maybe simply making the notifications easier to dismiss so people can start fresh will resolve most of the concerns in my community. It’s only when there are hundreds that it seems to get weird for folks.

Blue bubble = blue lines
Green bubble = green lines

Then people natively understand.

Blue bubble = Some blue lines
Green bubble = Other blue lines

People get confused.

1 Like

Yeah - I get your suggestion. This is an interesting idea and it might work.

I wonder if there a CSS method to try it out?

.notifications i.d-icon-envelope-o + div {
    color: green;

Is that what you had in mind @schungx? Or were you thinking about adjusting the mouseover colour?


Making the text green is ok, but the most important thing is the make the unread messages background green. That is because the green bubble shows the count of unread messages.

The read background is always white.

EDIT: The background is set on the .notifications li element and there is nothing to distinguish messages from other notifications. I don’t think it is currently possible with a pure CSS solution without adding a class to the li element.


Something like this? (Pretend that highlight is on a PM not a like, I just didn’t have any PMs handy).


Edit: You are correct that there is no differentiation at the moment between notification types in the HTML, but that could likely change :wink:.


Yup. :clap:


Well, you’re @team and of course it can likely change. wink wink knudge knudge say no more


No, random color changes are not a good idea here. More colors is not more betterer.


True, but if color is used to distinguish things it helps to be consistent. You already have two color bubbles.

This will not be happening.