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.

I'm designing an app that allows people to indicate if they are in or out of the office. When they change state, I'm showing a pop-up screen with an in icon or an out icon.

Currently the background colour for this pop-up is green for arriving and red for departure. Someone suggested that this might not be so good for color blind people.

I was thinking maybe black logo on green background for arrival and white logo on dark grey background for departure? Any other thoughts?

share|improve this question
1  
Given Bevan's response, I suggest making the 'in' icon look like a shining light indicator, while leaving the 'out' icon dull (like an LED which is turned on/off). The shining effect could be achieved by surrounding the 'in' icon with a little "glow" effect, and adding a few rays radiating outwards. (Lens flare is also an option, but might be going too far!) –  joeytwiddle Jan 25 at 7:00

1 Answer 1

up vote 4 down vote accepted

You don't need to avoid colours to provide support for colour-blind people, you just need to make sure colour isn't the only thing to use.

Check out the "jelly bean" presence indicators used by Microsoft Office Communicator:

Office Communicator         Office Communicator

(Image taken from here)

The indicator for "Available" has a double-ring; "Do Not Disturb" has a horizontal bar and the other three are basically "not available".

I'd suggest that instead of changing the background of the popup, include a prominent icon to indicate the new status - with sufficient difference in shape or detail (e.g. the double ring for "Available" shown above) that colour isn't necessary to the perception, just a nice extra.

Two last comments.

Firstly, you can do much worse than copy UX ideas from companies that spend millions of dollars on the research.

Secondly, I'm writing from the perspective of someone who has a colour vision defect (for example, the "Be Right Back" and "Away" jelly beans look the same to me, but I can tell the rest apart).

share|improve this answer
3  
They look the same because they are the same! –  you786 Jan 25 at 8:18
    
According to the eyedropper tool in Paint.Net, "Be Right Back" is slightly more yellow than "Away" - at least on my work PC. Interestingly, in the screenshot I used above, they are the same - can't explain the difference. –  Bevan Jan 25 at 8:45

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.