0

I'm designing a system where a list item can have one of 5 different status options:

  • ACTIVE
  • LIVE
  • PENDING
  • LEGACY
  • INACTIVE

I want to specify a different color for every status.

For ACTIVE, PENDING and INACTIVE i decided on Green, Orange and Red.

What colors should i use for LIVE and LEGACY ? Or maybe you can suggest different colors for the other statuses.

Also i added a Tooltip on mouse hover that shows the status name.

Thanks.


Quick edit

After talking to our product manager, it's now clear taht there is no view where ACTIVE and LIVE are in the same screen. so both of them can be Green. All others can be in the same view.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    What's the difference between "Active" and "Live" in your context? Generally those would both be green. On a similar note "Legacy" should be coloured based on what that actually means - is something with a status of "Legacy" still active (green) or is it inactive (red)? – Matt O'Keefe Sep 15 '16 at 12:54
  • If a task like this is hard it may be that your structure is not optimised for users. If your audience does not get the difference between active and live or between inactive and legacy then no amount of colour will fix it. – Aidan Hall Sep 15 '16 at 13:16
  • It would still help to know the differences in these statuses. Indicating two different statuses with the same color, even in different places in the app can cause confusion if not handled with care. – Jeff Sep 19 '16 at 17:18
2

The tooltip is a good addition, but I would also strongly suggest you find a way to use shape or icons in addition to color. Color can be tricky due to populations with colorblindness; you will want to take luminance values and contrast into consideration as well as the actual colors themselves.

You should also consider checking any color palette options using an on-line simulator such as Coblis (http://www.color-blindness.com/coblis-color-blindness-simulator/), which shows you how images look simulating various color-blindness variations.

As far as some insight into how much of an issue this can be, take a listen to an excellent story by Matt Desio from the Enterprise UX 2016 conference, in the Storytelling sessions (at about 21:00 in this video):

https://www.youtube.com/watch?v=HCI5LnEnTCI

As for coming up with pleasing and useful color palettes, you might try one of the on-line palette generation tools available:

https://color.adobe.com/

https://coolors.co/

http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

  • Still, what color would you use for LEGACY ? – dimshik Sep 15 '16 at 13:37
  • I'm not sure we can make that determination for you... it may depend on your overall color scheme, expectations and cultural backgrounds of your users, etc. But taking a flyer, perhaps you could use black, white, or gray for Legacy and Blue for live. – Mattynabib Sep 15 '16 at 13:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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