I need to choose a color to be used with notifications. I was placing an exclamation mark over a red circle, but I was told it looks more like an error if you haven't seen it in the UI before. So now I'm a bit lost...

6 Answers
6

Red is effective merely because that's what we've become accustomed to using Facebook, gmail and other popular systems. Also, it indicates something needing attention just as errors require attention. Good question though. Was just thinking about that today.

For notifications, the colour scheme should match with the scheme for the rest of the site. So look at the colour scheme of the site, and find something that stands out, but also fits - dark rather than light is probably better.

If you are using contrasting colour - including the red often used for error indicators - it will be seem as an alert, not a notification. That is, something that requires attention immediately, not something that is useful information.

As well as considering colour - you should at least consider if you can make something more conspicuous by it's absence of colour - i.e. a black background, in which case be sure to use a larger clear font colour such as white for ensuring readability.

I think the notification bar here at StackExchange works well, which I think is white on black. If necessary you can incorporate branding and colour themes a little by making it a very dark version of a colour as the background.

Naturally, any notification colour scheme depends on how it contrasts with the rest of your colour scheme. A yellow notifaction is less suitable if the rest of the scheme is a similar colour, for example, but if the rest of your scheme is already black then this concept is less suitable and perhaps the yellow should indeed prevail.

Consider whether your colour schemes may vary across pages or other content. If you have quite varied content, especially with a lot of images, then picking a generic notification scheme that stands out in all situations is tricky, and this black background may complement more scenarios than other colours.

Ensure consistency as this will breed familiarity and therefore faster recognition, allowing notifications to be registered as such more quickly, but also bear in mind that users frequently ignore and dismiss notifications without reading, so really important notifications may need something extra that attracts the user's attention. One alternative to providing a dismiss capability is to show the notification for a specific time period, possibly fading it in and out smoothly.

If the notification is pinned to the top of the window then it is likely to be towards the user's peripheral vision. As such, movement is more likely to be noticed and color changes less so. Just don't be annoying with it.

Yellow was, on average, the most quickly identified color(see figure
1) at 73 degrees in the right eye and 73.5 in the left, red was
second(72, 70.5). The least recognizable colors were green(60.5,
64.25) and purple(64, 63). Blue was recognized at 68.75 degrees from
the center of the right eye, and 68 from the left. In addition the
subjects often identified the color green as being either purple or
red and in one case pink before reporting a sudden shift to a
perception of the actual color.