UX: Color is only meaningful if it’s different

Color is important for UX

On the daily, when I’m not lurking imgur, I work on HR case management software. HR case management isn’t exactly the sexiest technology sector, but that doesn’t keep me from trying to provide the best User Experience possible.

Recently I’ve been working on a light switch type control that can use various colors when they are in the active state

Here’s the toggle color for making a case “Sensitive” in our application. A “Sensitive” case is restricted and can not be seen by users in our public facing application.

Here’s what it looks like in the app on our case page.

The color helps the user see from a glance that this Case is different, because the color isn’t the normal state. That’s the key here, it wouldn’t be special if it was always yellow.

The main purpose of our application is to keep track of the entire conversation over the issue. This mostly consists of comments and emails between the employee and their HR rep.

Notice here that I used the same control and color for toggling comments. If the HR rep doesn’t want a comment or an email to be seen by the employee they can set it to Internal. The logs are created as public so the color is meaningful because it’s different.

Some customers want every log (comment, email, ect.) to be internal by default, so we have a setting they can configure that will create all of the logs as internal. This changes the meaning of the color, if everything is internal by default then the yellow color is no longer special it’s not different so it’s no longer meaningful.

When that happens the control changes to “Public” and the color changes from a warning color to a primary color.

Color is great in an application, but it’s only meaningful if it stands out from what’s normal in your application.

Keep herpin` while you’re derpin`

About Ryan Rauh

My name is Ryan Rauh and I like shiny things. If I've seen it on twitter more the twice most likely I've looked at it or tried it. I really like memes and other silly and seemingly useless things out on the internet. I blog about things *I* think are cool and interesting, I hope you will find them cool and interesting too.
This entry was posted in Uncategorized. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Michael McGuire

    An interesting screenshot: Burt Sex? 

    • Chris Bristol

      Yeah, I was wondering if that was intentional or not.

    • Rauhr

      Haha, that wasn’t intentional… The title of the case is “Burt sexually harassed me at the Christmas party”

      Where the concerning employee is Burt Reynolds… I have a huge test data suite involving characters from Smokey and the Bandit

  • jbogard

    Just make sure you don’t forget the significant percentage of the population that are color blind or have other visual impairments!

    • brandewinder

      As a member of the color blind minority, thank you! Standard color codes often don’t work at all for me, having the ability to redefine color mappings is a very valuable feature for me. One typical case is test runners – Red, Orange/Yellow and Green are pretty bad defaults for the color blind…

  • Chris Bristol

    Probably OT, but under what circumstances would an HR rep not want a comment/email seen by an employee?  I am assuming that these cases are things like employee complaints, worker’s comp, etc… and that such a feature could allow the company to hide information that the employee may have a legal right to know.

    • If another employee is whistleblowing about their manager, for example. In US Federal Law, they are protected and their anonymity must be protected by the employer.  That’s just one of many examples where an employee is not entitled to see what’s being said about them.

      In fact, in most cases, they are not entitled to private conversations, so that is usually the default for most of our customers.

  • sodablue

    So look at a real light switch on the wall.  As long as it’s not  3-way, the switch has words on it that indicate ON and OFF.  When you flip the switch up, the OFF is hidden by the plate and now you can only see the word ON.

    UI controls should not simply change the color, they should change the way it is represented.  A checkbox clearly shows something is checked.  In the case of a switch control the color helps as a visual cue, but the word should change as well.  Just like on the real lightswitch on the wall.

    The iPad/iPhone switches do this, change the word from OFF to ON as well as change the color.

    I find color changes by themselves confusing and I’m not color blind.  It takes a lot of experience working with the UI before you realize the developers choose orange to represent on.  When you’re neck deep in the app you don’t realize this.

    I think that’s why it’s also important to do usability tests by showing screenshots to someone not familiar with the app and ask them what it means, or what they’d click if they wanted to do something.

    • Rauhr

      You bring up a very good point. 

      This feature evolved from a previous feature where the internal status was represented by a simple word with a colored background.

      After we added that our customers wanted the ability to change the internal status after the log was created (which previous could on be set when you created it)

      None of our usability tests turned out negative, when it came down to it the crux of the issue was that we couldn’t settle on the inverse language for the “off” state.

      Sensitive [Insensitive] [Not Sensitive] [Unsensitive] [Safe to view] …
      Internal [Not Internal] [Safe] [External] … 
      Public [Private] [Not Public] …

      We got a lot of positive feedback after we shipped, but I’d love to revisit this I just haven’t come up with a better alternative yet.

      • Nzr

        Sensitive Safe
        Internal External
        Public Private

  • Dr T

    Sensitive Sharable

  • elzalem

    +1 for imgur

  • There’s even an issue with the “word change”. E.g. a light switch with the On/Off idea is pretty self explanatory.

    However, a button to click would usually contain a word defining the action when clicking on the button. So does a button showing “On” mean it is already turned on, or does it mean it will turn on after you’ve clicked it?

    I’m in agreement that some visual state for the button gives more UI feedback. It need not be a colour though. The Checkbox idea shows pretty clearly an On/Off state. If you want something to work for both the mind-reading-impared (Ha!) as well as the colour blind, then your best bet is not to focus so much on colour or words, but rather contrast:

    I.e. give the button a different surround when on, or give it a higher contrasting backgound, or as in some apps: make the On state into a depressed look.

    There’s obviously nothing stopping you from combining 2 methods to enhance the “feature” though. And IMO that’s always a better idea than to simply expect the user to know what you (as the developer) intended for  button with a particular state.