Functional and visual proposal to improve the visual alert for push notifications (red dot on the bell icon)

[Jerome-Herbinet]

Is your feature request related to a problem? Please describe.
The visual indicator for the notification bell is currently (and has always been) :

• not visible enough (tiny red dot)
• not quantifiable (impossible to see how many notifications are pending)

As a result, push notifications really lack visibility.

Describe the solution you'd like
I propose the following improvement, which will resolve both of these issues. Here is my design proposal:

• bigger dot
• notification count

Currently	Suggestion (case n°1)	Suggestion (case n°2)

[Jerome-Herbinet]

@nextcloud/designers

[kra-mo]

Honestly, it would be good if we could badge the apps themselves as well. Not sure if we have the mechanism set up for that.

This also makes sense as an improvement though, but I'd probably limit the count to 9, and then just say 9+ afterwards.

[kra-mo]

Though if we have a count and a larger badge, maybe it's also fine to drop the red color? It won't work for some backgrounds anyway. Then the badge could just have the foreground color, which should always be visible:

[Jerome-Herbinet]

Though if we have a count and a larger badge, maybe it's also fine to drop the red color? It won't work for some backgrounds anyway. Then the badge could just have the foreground color, which should always be visible:

Thanks for the anwser @kra-mo

• 9+ : I agree
• white instead of red background ; I disagree (equivalent visibility lack as current tiny red dot)

[kra-mo]

equivalent visibility lack as current tiny red dot

It really depends on what color you have as the background. If it's blue, a red dot may work nicely, but orange/red/purple/pink is going to be trouble.

I think with the size increase and adding a counter, this would be an improvement overall in terms of visibility. The exact size and opacity we can play around with a little bit (for example, what I sent is only 90% opacity).

[kra-mo]

Here is 100% opacity and a larger size for example:

[Jerome-Herbinet]

Here is 100% opacity and a larger size for example:

Better but insufficient, IMO...

[kra-mo]

Ah, looks like we already have logic to handle red backgrounds specifically and use the foreground color there. Sure, I mean just keep the existing behavior.