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.

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.

share|improve this question

3 Answers 3

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.

share|improve this answer

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.

share|improve this answer
    
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 '11 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 '11 at 22:07
    
Consider shaping them differently along with color to really drive it home … perhaps a different font from one to the other. –  tajmo Nov 28 '11 at 21:53

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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