What is the most effective color to be used on notifications?

Question

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...

Note, I used green already on "adding" a friends button.

Answer 1

Yellow (maybe). I say maybe because it might clash horribly with your site design colors, or even blend in with your site design colors.

See my answer from here: Design pattern or best practices for top notification bars?

Should Color or Animation be used?

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.

What colors work better?

Some research that might be relevant: http://www.alma.edu/departments/psychology/SP98/ZaMa/pcv.html

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.

Answer 2

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.

Whatever the situation, use notifications sparingly as they are strong distractors - there are plenty of questions here on ux.se about notification best practices

Answer 3

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.

Answer 4

There is actually no right answer to this questions. It is very relative to the sort of design scheme you have pre-existing on the app or website.

I guess the use of colors in normal life should be extended for notifications or alerts as well. Example 'Red' would signify urgency, danger, warning so probably use that accordingly.

Normal guidelines we use while developing out apps and websites are: Maybe this can help you too

Answer 5

I always defer to consistency as the standard.

Being mindful of being 508 compliant, I also try to use bold or some other change in weight.

Answer 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.