6

in the application i'm working on, there are 2 types of notifications: Confirmation messages (successful action results) and Alerts (unsuccessful action results/errors and Session expiration prompts). It was decided that messages would have a similar look to Gmail: successful action notification

Confirmations would be dismissed in 3-4 seconds and Alerts would have to be acknowledged and closed manually.

Would it make sense to distinguish between Confirmation and Alert messages - using either color, animation or icon? For example, yellow for confirmations, orange for alerts and red for errors.

Improve this question

3 Answers 3

Reset to default
2

The best solution in this situtation is to combine icons + color together.

For error usually red color and a strong X icon are used: enter image description here

For confirmation, success green color and a tick icon are used: enter image description here

And there others like yellow for alert (exclamation mark icon) and even blue (i icon) for information.

I think these 4 colors are generally used in online and offline applications, and together with the icons you can make sure everybody will understand and notice your message.

Improve this answer
1

You probably need to use a combination of methods - colour and icon would be the obvious paring. Animation should be used sparingly as it tends to get in the way of the message.

The reasons you shouldn't just rely on colour have been discussed many times before - colour blind users may have trouble distinguishing the colours you choose. This can be minimised by choosing colours that contrast with each other - but that's not always possible.

Another approach is to have messages that are purely notification messages remove themselves after a short period and messages that require the user to do something remain until that action is performed.

Improve this answer
3
  • thank you! i agree with you about relying on color alone, but i think orange is quite distinguishable from yellow, i probably should drop red which is close to orange in color density.
    – zuko
    Nov 27, 2011 at 21:36
  • @zuko - I'd do some testing - or at least ask for feedback - from your users to see which they respond to.
    – ChrisF
    Nov 27, 2011 at 22:07
  • Consider shaping them differently along with color to really drive it home … perhaps a different font from one to the other.
    – Taj Moore
    Nov 28, 2011 at 21:53
0

I have implemented similar message design in the past. I did not use icons, only different background colors.

You may consider green for confirmation, yellow for warning/alert, and red for error (traffic light).

I faded out the confirmation messages after 5 seconds.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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