Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question

closed as not constructive by JonW Apr 24 '12 at 18:57

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.If this question can be reworded to fit the rules in the help center, please edit the question.

    
Do you really mean that the word is included in the icon, or that it is a tooltip? –  DJClayworth Oct 1 '10 at 16:56
    
@DJClayworth: it appears underneath the icon in the HTML. –  adrianbanks Oct 2 '10 at 19:20

7 Answers 7

up vote 10 down vote accepted

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:

Notification icons in iOS

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

Notification icon within a chat bubble

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

share|improve this answer
    
+1 for the great idea –  Dan Barak Sep 27 '10 at 22:07
    
We went for an exclamation mark for the time being. –  adrianbanks Sep 28 '10 at 20:30

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

Gray ! for no notifications. Red ! for notifications.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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

share|improve this answer

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.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.