Color: It's Not Just for Good Looks, It's for Great Workflow

Color: It’s not just something that makes the world pretty, it can also make the difference between a good tool and a great one. Color makes us work better.

Effective use of color helps you spot what you need more quickly and visually differentiate among various parts of the interface.

I’ve been thinking lately about the software I use as part of my routine re-evaluation of my workflow (insert a joke about the obsessive writer here) [How about one about methods to procrastinate on deadline? -- Ed.]. After looking around at different desktop and mobile apps, I find there’s too much color missing in so many of the different productivity-focused products out there.

So many UI designers are trying to make products look slick and streamlined, yet many finished products are just bland and lifeless. Then there’s the practical side to using color as a key component of an app and how users work within it: colors gives one the ability to quickly glance from one color to another,  to keep things organized, or to move through a series of steps in a task.

Here are a few examples of what I’m talking about, with a few thoughts on why differentiating the interface is good for both the form and function of an application.

CASE STUDY #1: EVERNOTE VS. ONENOTE

I recently took a similar journey down the OneNote or Evernote trek as our editor, as I wanted to pick one app to go all-in with for note-taking and other work (I chose the former). One of the reasons I went with Microsoft’s option, despite some looming bugs, is how much easier it is to navigate the interface thanks to the use of color.

The sections (tabs) can be assigned a different color, which makes them much easier to move between. Over time you start to learn that the meeting agendas are yellow and the note pages are orange. It makes it that much faster to move to where you want.

All that color makes it easy to train your brain to quickly look for the right tab. 

On the other hand, Evernote is caked in a stark white. The tags, notebooks, and other elements are much harder to distinguish from one another because the color scheme is all the same. It’s not necessarily a deal killer for everyone, but there’s something to be said about being able to glance at a color and then switch to what you want.

To be fair, Evernote is moving in the right direction. The new Windows app brings in more elements of color, and the ability to separate work and personal items in two separate tabs is very handy. But Evernote still doesn't allow users to fully deploy color for quick visual shorthand.

Evernote has embraced a tiny bit more color with the latest update to its Windows app.

Many people use the same service for work and personal items, and sometimes it’s nice to have work stuff parceled off so you don’t have to mess with it when you’re having a relaxing day. I still find there’s still too much white and gray for my taste, but Evernote’s decision to splash a few colors around confirm that color is a valuable part of making an interface that is both functional and more pleasant to look at.

CASE STUDY TWO: GOOGLE KEEP VS. APPLE NOTES

Let’s look at a set of mobile apps now. Apple’s Notes and Google Keep are both designed to be lightweight, fast-syncing services that let you make and store notes across respective platforms.

Keep wins the color test, as you’re able to assign a different color to each note. Sure, you can organize them by different #Labels (yes, that’s what Google now calls them) but it’s nice to have the option to make items that are for shopping green, that work project blue, and taxes red, as an example.

You can change up the color and hashtag-label scheme for each of the notes in Google Keep.

Apple’s Notes is good enough, especially at being rapidly available on iOS and Mac with fast syncing. But the same problem Evernote has to is also at work here: the app is so bleakly monochromatic that it’s hard to make out one note from another. This becomes more of a problem as you add more notes to the list.

How do you quickly distinguish between different notes? 'Quickly' is the key word here.

The search tool takes care of most of this as you can type the name of what you want, but I find if you like to keep even a visual differentiation as to what different types of notes are for, it’s just too hard to do here. Unless you want something very simple, and don’t mind the sameness, I’d look elsewhere.

WHEN AND WHERE TO PUT COLOR: A USER'S PLEA

This isn’t to say that interface designers should go crazy with splashing the digital paint everywhere. I’m no interface professional either - I approach this topic as the perspective of someone who finds that color, in the right place, helps to set the tone.

For instance, while I’m in general a pretty big fan of Google’s Material Design language, I find a few cases where the color goes overboard. Consider the YouTube app for Android:

It seems there could be a little less red at the top here.

It’s as if the top of the app is screaming, “LOOK HOW COLORFUL I AM!” I understand the general principle is to make this section flexible for any screen size, so no matter how small or large the device, the interface has room to grow.

But there still seem to be times when you ought to be able to scrunch things together so there’s not just so much there at the top. While too little color is stark and boring, too much in one place is definitely distracting.

You may, of course, feel differently. That’s why Apple, Google, Microsoft, and others have their own design schemes and guidelines for their products and operating systems. But if you look at your own workflow and experiment with other apps, you may start to notice that the ability to move from one task to another or remember something more clearly is best done through the use of color. And if nothing else, it may make the workday just a little more pleasant.