Alternative method of displaying notification alert to user with awkward icons

Question

Due to the awkward nature of my notification icon, I've been forced to settle with a red dot near the notifications icon, which seems less than ideal from a UX point of view particularly because it isn't clear enough. I tried to putting it at the top right of the icon, but it did not work, so I wanted to ask, can user notification alerts be displayed in any better ways?

In a situation where I would need to change the icon - I would welcome any suggestions.

enter image description here

This might have an obvious answer, but couldn't you just change the notification icon? — Sherwin, Dec 26 '13 at 21:20
@Sherwin - thanks for your answer Sherwin, I'd welcome any suggestions. — methuselah, Dec 26 '13 at 21:23
Or I guess, what do you dislike about the existing notification design? — Sherwin, Dec 26 '13 at 21:24
I think it does the job well, but I would struggle to display the number of notifications the user has without disrupting the overall UX flow with the current setup. — methuselah, Dec 26 '13 at 21:30

score 6 · Accepted Answer · answered Dec 28 '13 at 01:33

6

I would make 2 changes:

Replace the notification icon for the one shown on the screenshot. It's from the Iconic theme. (http://somerandomdude.com/work/iconic/)
Have 2 states for the icon:
- Inactive: display white icon.
- Active: change the icon's background color and display the number of notifications. I would limit the numbers up to 3 digits. This way, if you have more than 99 notifications display "+99".

enter image description here

answered Dec 28 '13 at 01:33

mencina

159
2

1

Not sure if that was a typo but it may be better to say 99+ instead of +99 – Rajmera Nov 09 '15 at 07:05

score 1 · Answer 2 · answered Dec 26 '13 at 21:40

1

If the icons and labels can not be changed, maybe you can add the number of new/unread notifications to the red dot?

[ICON]      # No unread notification
[ICON] (1)  # one unread notification
[ICON] (2)  # two unread notifications
…

answered Dec 26 '13 at 21:40

unor

3,956
1
24
47

Thanks for the response - I have toyed with this idea. Does the placement of the red dot not bother you? – methuselah Dec 26 '13 at 21:41
1

@methuselah: In combination with this megaphone icon, not at all. Placing it to the right is the obvious choice here (well, it’s where the "sound" comes from). What exactly does bother you? Aesthetics? – unor Dec 26 '13 at 21:46
Perhaps because traditionally I've grown accustomed to seeing the red dot on on the top right of a notifications icon, but due to the shape of the megaphone icon, the top right seems a rather awkward position to place it. – methuselah Dec 26 '13 at 21:48

score 1 · Answer 3 · answered Dec 27 '13 at 22:53

What about simply replacing the red dot altogether with a red number in a badge? This is a pretty common design element; for example, see Bootstrap badges: http://getbootstrap.com/components/#badges

iOS notifications, for example, doesn't have a red dot at all; only the number of notifications is shown.

score 1 · Answer 4 · answered Dec 28 '13 at 07:33

1

Changing background and border colors might be worth consideration, too.

answered Dec 28 '13 at 07:33

adam-asdf

307
1
4

Alternative method of displaying notification alert to user with awkward icons

4 Answers4

Linked