What icon could be used to mean 'notifications'? [closed]

Question

As part of a web-based application, we have a toolbar at the top of the page. The toolbar contains buttons that consist of small (30x30) icons with a single word underneath (for example, a search button consists of an icon of a magnifying glass with the word "search" underneath).

We have added a new button which enables users to get notifications about items that they have previously registered an interest in (if they have since changed).

What would be a good picture to use for this icon to convey the meaning of "notifications"?

---

Thanks for the answers, but let me throw a spanner in the works:

We already use both exclamation marks and 'i' icons elsewhere in the application for other purposes, so reusing either of them will possibly introduce confusion. Additionally, the notifications feature is not passive (like getting a new email), but requires the user to actively load them, so it really just needs a static icon.

The options we've considered so far, but don't think are particularly obvious in what they mean:

• exclamation mark
• a "warning triangle" (eg. something like this)
• a speech bubble (eg. something like this)
• a loud-hailer icon (eg. something like this)
• something along the lines of an RSS feed icon

Any more ideas?

Answer 1

I've seen a lot of exclamation marks and "i"s as effective icons. If you make the icon white on red and circular, you'll invoke an association with iOS' convention of showing numbers in red circles to indicate "new" items in apps. So you could try putting an exclamation mark in one, or an "i". Then test the two to see what kind of effect it has on your user base.

Yellow is another color used for notifications in general, as well as as a color that usually stands out fairly well (although yellow sometimes implies a warning). Blue is used frequently as a neutral indicative color in combination with question marks (for help buttons, etc).

Here's how the icons look in iOS:

This icon invokes an association with messaging, surely part of the notification concept, through its chat bubble metaphor:

Try combining the above to create something suitable for your app and audience.

Answer 2

I would use an exclemation point and give it some sort of state for new notifications.

Gray ! for no notifications. Red ! for notifications.

Answer 3

I think the icon depends not so much on the fact that it's a notification as to what the type of the notice is.

If you're showing that there are three warning notices, then the warning icon is appropriate. But it seems you don't or can't know the type of notice when you show it, so the loud-hailer or as Rahul suggested, just a number is more appropriate IMHO.

I don't like white on red though because it appears to me that it's an error, although you could argue that it's white on red because it's urgent. If you don't know the count before you visit the notices, you could use a star/sparkle to indicate that there's something new in notifications.

Answer 4

In terms of notifications, I think Apple got it pretty spot on and most people who have heard of Apple or own an iPhone will know about their notification system.

If its a notification of a particular item then maybe you need an icon that reflects your item layouts.

Something similar to below with an apple style notification overlaying the top right.

http://www.iconfinder.com/icondetails/42270/48/bullets_list_icon

http://www.iconfinder.com/icondetails/42139/48/2_3x3_grid_icon

http://www.iconfinder.com/icondetails/42258/48/image_text_icon

If you aren't happy with a apple style new notification then maybe you could add a more vibant icon colour when a new notification appears. glows, pulses or similar are also great ways of getting the user's attention.

Hope this helps.

Answer 5

So you want users to notice the update and you want them to act on it by downloading the new notifications?

I would suggest a red circle (which, as Rahul's post explains well, is a common colour for new update alerts) with a white downward arrow. This, of course, being a widely recognised symbol for something needing to be downloaded or "fetched". If the micro-copy to accompany the icon is to be "Notifications", I think it's reasonable to presume that users will understand.

That said, the key with all such things is of course to test any of the alternatives you are considering.

Answer 6

If you consider synonyms of "notifications" such as "alert" or "alarm" then maybe something like a ringing bell.

Answer 7

Here are some simple to use notification guidelines:

1. Apple has a great way of showing notifications. They don't use an exclamation point. The neutral circle works because an exclamation point is too heavy-handed. Sometimes the user might have 200+ notifications for certain apps, and if 'everything is urgent, then nothing is urgent'.

2. Squares, bubbles, and other neutral shapes work. Try different color combinations as well. The color should stand out against the background, but shouldn't be so overwhelming that the user can ignore it and continue on with their business.

3. Reserve using exclamation points, speech bubbles, and other more literal icons sparingly. Use them for notices that scream 'Look at me, I'm here!!!' and other urgent matters that require user action before continuing.