123

Hey Dmitry,

Last week, we talked about how beginning UI designers have this awful tendency to use colored text way more frequently than they should. We talked about how, if you pop open any app that has a design team and millions of downloads, you’re rarely going to be seeing colored text. Why?

Colored text can be useful, sure, but most of the time, it looks awful.

If we’re going to drop this bad habit, then we need to understand why we do it in the first place. Last week: to make lists scannable by differentiating certain items. You can re-read that email if you forgot. Anyhow, why else do beginning designers rainbow their words?

I’ve got two ideas for ya. Let’s explore both.

Use Case #2: Grouping

Color is a really easy way to display groups of things.

In an example like this, let’s focus on the bottom bar, where basically all the text is colored. It’s not awful, but it doesn’t look good – and the color in the bottom 3 stats implies a tappability the isn’t there.

The simplest solution in many cases like this is to drop the colored text, but keep some indicator of which group things belong to – a colored icon, even a small colored circle.

Now this still leaves the “SHOW LIST” in green, which I’d also love to ditch. What options do we have here, if a user wants to see the list view of this map?

Well, recall that Google Maps actually has a similar bottom display with a text “button” in that very place.

“FILTER” is gray, but meets the primary litmus test of tappable gray text on mobile: does it look tappable?

In this case, “FILTER” does. Let’s follow suit. We’ll need to bump over our stats to make room.

And that solves the colored text issue!

Now this may be just about the most direct way to solve the issue given where we started, but it’s we want the best possible solution. Let's look around a bit more.

If you’re trying to create a really nice-looking UI, the fewer elements, the better. Simplicity is so revered by designers not only because it feels clean, but also looks clean. It’s much easier to make 4 elements look simple than 40.

So what can we strip away? We might come upon a different way of eliminating colored text.

Doing this the proper way would take some user research that we’re not going to go into here, but a few thoughts:

The list and map are two sides of the same coin – two views on the same data. I think there’s a control for this sort of thing already that might eliminate the need for the “LIST” button ;)

The filter floating action button will probably allow us to filter by the different customer types – if it’s not much more than that, perhaps we can remove the button (provided the functionality is still present somehow)

The count of each customer type seems pretty unimportant – perhaps we can make it a bit less visible at no real loss

So those are just a few thoughts, but we can come up with some pretty different concepts from that.

Cool, huh? Granted, this is not without its trade-offs – there’s less screen real estate for the map proper, and if there are more filtering functions that wouldn’t fit on this screen, this exact solution might be unfeasible. But we’re following the right principles here – a.) avoid colored text, b.) simplify when possible. It just happens that working on (a) is a good time to see if you can’t do a little (b) too.

Now it’s worth nothing that this “no colored text to represent categories” is not an absolute.

Here’s one example that seems to work:

By Shazu Ahmed

But there are similar examples that would fail under a similar scheme.

By Hope Armstrong

The former has a light, airy quality that the color of the labels add to just a bit (though I think they'd work fine in gray too). The latter, on the other hand, is anything but airy feeling, and the dozen colors would be ridiculous overkill.

Use Case #3: Eye-Catching

The third common reason I see text colorized is to attract attention. Error messages are the easiest way to justify this in your mind – after all, it is something that should attract attention. There are just better and worse ways of doing this.

Here’s an example (it leans worse):

Now, overall, this screen looks pretty good. However, the error message contains a short paragraph in red. It’s a bit of an eye-strain to read, and doesn’t feel really designed.

However, error messages should include some red (or a similarly attention-grabbing color). What options do we have?

This one! Change the background color. Then the text can be white, which makes it much more readable. The net pixels of red is higher, meaning an alert of this type is even more eye-catching, yet aesthetically, it’s more pleasing. Can't lose! (and, in the actual app, I did pick this solution)

Now every designer needs a few tricks up their sleeve. One just won't cut it. Let's see what else we can fit in our Designer Sleeves.

One option I like is the colored icon approach (that’s right – it strikes again!). However, in this case, there’s hardly enough color to draw the eye. So it would have to be used in combination with another effect.

Well this isn’t actually adding any new tricks – we already talked about colored backgrounds. But it’s a side of the coin that’s worth showing – notice that by adding a very bright, desaturated red, I could keep the text gray. However, if the background becomes darker or more saturated (that is, farther from white), then I want to switch to white text so it shows up better (like I did in the earlier example).

As it stands, this example is walking the line – the gray is not particularly dark, so it’s tough to get a really good contrast against this background. So while this might be a "local maximum" solution, I wouldn’t pick this over first solution presented.

Let’s Wrap it Up

OK, so those are three big uses cases for colored text, and a handful of strategies for avoiding them. Like I said, it's not an absolute rule that colored text = bad, but it's an impulse you'll want to keep under the wraps until you feel like you know the right time to let if fly.

Are there other big reasons folks drift towards using too much colored text? What other tricks are helpful for fixing it when you find it? Let me know – I’ll be reading every response.

In the meanwhile, if there’s a design problem you’ve been wrestling with, and you want to see it unpacked a bit in front of thousands of people… well, you've got my number.

Cheers,

Erik D. Kennedy