009

Colorless Green Ideas

We discuss the importance of prioritizing user experience over color choices in design systems. We emphasize treating color as the final touch in design, similar to applying a finish to a woodworking project.
  • color
  • priority
  • accessibility

Transcript

00:49Hey, good to see you.

00:50Thanks for coming.

00:51This is another episode of wireframe.

00:53And today we’re going to be talking about color.

00:56Well, actually, before I get started, I want to let everyone know that

00:59this is actually a special episode of wireframe because I’m recording this

01:02live for the design system, community chapter of New Zealand all the way

01:06on the other side of the world.

01:07They’re living in the future right now.

01:08I’m so far behind.

01:10So for the folks that are, might be interested in what they are seeing in that

01:14event right now, there’ll be recording later on, which I will link to in the

01:18show notes around this, this point.

01:20So there’ll be a couple of slides that I’ll be showing off during this

01:24episode, but those are not required for you to listen to the content,

01:28understand what I’ll be presenting to you in this episode today.

01:31Just again, something a little new and fresh and different.

01:34Additionally since there’ll be slides there’s a lot of

01:37coordination to be having in here.

01:39So hopefully it goes according to plan.

01:43All right.

01:43So like I said, I’m going to be talking about color.

01:45And in fact, I am probably the least qualified person to talk about color.

01:50And I say that because I’m actually color deficient.

01:53I think many of the folks who know me in the design system community right

01:56now that I’ve said this on multiple occasions that I’m color deficient.

02:00And I use that as a benefit in many cases, because we are often talking

02:04about color and accessibility.

02:06And I am a good example of someone who struggles in some capacity

02:10to To see differences in color.

02:12So I happen to be you know, more of like the organic test of making sure

02:16that something may be accessible.

02:18Granted, you know, there are other color deficiencies out there, and I

02:21urge you to learn about those kinds of different ways of perceiving color.

02:25In fact, I’ll plug Nate Baldwin’s color and contrasts website, which is will be

02:30in the show notes 1 as well for wireframe.

02:32And it has a lot of information about how we perceive color.

02:36But, I’m actually, while I’m talking about color today, I’m not going to be talking,

02:40you know, in depth about choosing color or, you know, the science behind color,

02:43there’s lots of blog posts out there, in fact another thing that I’ll put in the

02:47show notes is from Matthew Strom, who’s over at Stripe, and he had a fantastic

02:52blog post 2 about how he chooses colors and, and puts math into it to determine the

02:57right colors, which is incredible, right?

02:59And there’s a lot of blog posts like that out there.

03:02A lot of tools that are out there like that.

03:05There’s a lot of I guess, exercises in people choosing color out there, right?

03:10There’s a lot of that going on.

03:13And for the folks who are seeing this first slide over here they will already

03:17see the I guess the opposition that I have to this, because my big take

03:22is that colors don’t solve problems. 3

03:25Now, what does that actually mean?

03:26Right?

03:26I know there’s a whole bunch of designers.

03:28As soon as I say that they’re like, what do you mean they don’t solve problems?

03:30Colors are important, et cetera, et cetera.

03:33No, I don’t think they are.

03:36In the grand scheme of everything now, just to kind of dive in a

03:41little bit deeper into the world that I’ll be talking about.

03:43I have a quote that is from the laws of UX and it is actually the first one,

03:48which is the aesthetic usability law.

03:50And it means it basically says that users often perceived aesthetically pleasing

03:54design as a design that’s more usable.

03:56Right.

03:56And that kind of makes a little bit of sense, right?

03:58If the, if the thing that you’re visiting either looks like Craigslist or it looks

04:03like eBay you might feel that eBay is probably a more trustworthy site just

04:08because it looks like there’s a lot more care put into it and therefore it

04:13should be more usable than something like Craigslist, which doesn’t look

04:16like it has a lot of care put into it.

04:18It looks like it’s just, you know, very functional, right?

04:20So it, Has this perception of actually being a lot better just because

04:25there’s a lot more care put into it.

04:27And Nielsen Norman actually has another quote on this that spins it a little

04:31bit differently and doesn’t necessarily suggest that that’s a good thing, right?

04:35And the quote is that users are more tolerant of a minor usability issue when

04:40they find an interface visually appealing.

04:42And this aesthetic usability effect can mask UI problems and can prevent issue

04:47discovery during usability testing.

04:49What does that actually mean?

04:50Right?

04:51I’m sure that there’s folks that are out there that have made these like sizzle

04:54reels or the, this next North star kind of design feeling and presented it to

05:00leadership and leadership goes, Oh my God, this is going to be incredible.

05:03I can’t wait.

05:04Right.

05:05And you see this, this wave of beauty and aesthetically interesting, you

05:11know, designs that are out there and it gets very exciting, right?

05:15Well, how many times when you go through that process, does the UX

05:20of this process actually updated or corrected or made more efficient, right?

05:25Not so often, right?

05:27It’s usually that, you know, prettiness that ends up coming through that really

05:32gets a lot of the attention and not really improving necessarily the user experience.

05:36I know from my personal you know, endeavors of going through these different

05:40rebrands that sometimes, you know, We just put that lipstick on a pig and assume that

05:46this pig is way better than it ever was.

05:48Right?

05:48And that’s kind of this usability effect that we’re talking about.

05:51So, moving forward from there, right, what I would recommend in this is

05:58really putting more emphasis on the UX.

06:01Right?

06:01As a product designer, right, your job, in my opinion, is to solve problems.

06:08Right?

06:09So you have some user need out there that has been identified and you need to

06:13come up with a solution to that problem.

06:17That solution, most likely, has nothing to do with color.

06:22Right?

06:23And that’s very clear when it comes to the way that we do user research to

06:29determine how to solve this problem.

06:31Right?

06:31You can imagine, again, a whole bunch of, you know, questionnaires

06:34that go out or doing user research studies or competitive analysis.

06:39And taking all of that data, culminating it into, you know, some sort of

06:43you know, . report, presentation, whatever you’d like to call it.

06:45And then moving forward with figuring out you know, IAs and then further

06:50wireframes in none of that process.

06:53Do we talk about color in none of that process

06:58and that’s what I think is missing in many, many cases here, because

07:03again, going all the way back to those sizzle reels, right, you see

07:06all this beautiful stuff that’s going on and we don’t see the improvements

07:10of the UX because it’s not sexy.

07:12Right.

07:12It’s just not sexy to talk about, Oh, well, you know, we changed it

07:17from the table view to a card view because users are complaining that

07:21they couldn’t see the images, right.

07:22Of, of listings or whatever.

07:24Right.

07:25That’s not necessarily a sexy thing to talk about.

07:28You just want to see boom, splash of color, right?

07:30That’s something that gets the emotions going right.

07:33And that’s really what color is going to be all about, but let’s

07:36talk a little bit about the color.

07:40Right?

07:40And we’ve seen posts out there again, I mentioned this earlier talking

07:44about how there’s posts that describe how teams have chosen color before,

07:48either using math or, you know, looking at the current color stuff.

07:52And, you know, we’ve seen all these things like this before.

07:55Massive amounts of color.

07:57I mean, one of the big ones was like material design, right?

08:00They have all these hues with, you know, color red 500 and color

08:04teal 900 and all these different things to choose from, right?

08:07Yeah.

08:08And one of the examples that I have in the blog post that I’ll link to

08:12is from Ferdy Christant which is this huge amount of color that was based

08:17off of another specification or another unit of exercise from open color.

08:22But again, this is just one example and you could see many, many

08:26examples of this on the internet.

08:27It’s not anything unique in this particular way and the way

08:30that I’m describing it, because when you look at all this color.

08:35Right?

08:36Hicks law, which is basically kind of decision paralysis comes in and

08:42it’s basically describing if I have so many, so many, you know, options

08:46to choose from so many colors of the rainbow, how could I be sure that I’m

08:51choosing the right one at any point in time when I’m curating this interface?

08:55So I’m, you know, coloring this interface in the proper way, right?

08:58You can imagine any one of these color scales could have dozens of choices to

09:02have and the difference between these colors could be very small, right?

09:08And we already kind of spoke about how the differences could be, you know,

09:11visually perception from a human or the way that they’re conveyed even,

09:15you know, through devices, right?

09:16From you know, low density to high density devices, even the way that the color is

09:20calibrated on any particular monitor, all that stuff is going to have some

09:23good effect on the final user experience.

09:26And much of that is completely out of our control.

09:30So, you know, in this color scale, you know, oftentimes we also see a

09:36lot of colors that end up kind of, kind of in the middle of the scale.

09:41Right.

09:41And just think about like the, the gray scale.

09:44Okay, you have white all the way on one side, black all the way on the other.

09:48And you’ll have some sort of like, you know, kind of logical gradient

09:52that goes in between, right?

09:53A logical progression that goes in between the white and the black.

09:56And imagine where you might use that middle color, that middle gray, right?

10:02In order for it to be accessible.

10:04It’s very, very hard.

10:06Right.

10:06It would be very, very hard for you to choose the right place to

10:10put gray 500 in your experience alongside any of the other colors.

10:15And many of these colors will have a section in them that was

10:19most likely totally unusable.

10:22Now, Ferdy actually goes ahead and says that calls this out in.

10:26Their description of this and says that open color does not rank well

10:30when it comes to contrast and the root cause here is because we’re

10:33paying for the price of beauty.

10:35That’s a quote from from that blog post.

10:37That ferdy wrote and I Respond kind of you know, with with a bit of a quip because

10:43you know, you’re going to be paying more Then the price of beauty when it comes

10:47to making inaccessible colors, right?

10:49Because we’ve already seen lots and lots of lawsuits that are related

10:55to accessibility out there, right?

10:56When you have an inaccessible experience, you could be fined or your company could

11:01be fined very significantly, right?

11:03And we have lots of effort that is put into making sure that these

11:08things are accessible, right?

11:10It’s a huge amount of discourse in the design system practice to

11:13make sure that we have accessible colors and there are great ways of

11:17attempting to keep things accessible.

11:19In fact Ferdy includes even more color as a response to that in order to make

11:26things more accessible because again, there is colors in there that aren’t so.

11:30This person is adding additional colors in there in order

11:33for things to be accessible.

11:35And, you know, that Hick’s Law goes right through the floor down to the basement,

11:39goes, into the core of the earth.

11:41And it’s just too many decisions, right?

11:44To try to figure out what the right color to choose is, right?

11:49So that’s why I’m Suggesting to the folks out there that if you are in a position

11:56where you are considering, you know, starting a design system or maybe doing

12:03a refresh of your design system, right?

12:05Or just a refresh of your experience.

12:07Let’s just, you know, go from the top level here.

12:10If you’re considering that, try to prioritize what’s

12:15going to have the most impact.

12:18Okay?

12:19Because The fact of the matter is, is that color making those color changes

12:24low hanging fruit, especially in a mature system that has design tokens

12:28that can then, you know, inform the larger experience very quickly, you

12:31know, making color changes again is a very low hanging fruit that makes what

12:37seems to be a Significant visual impact.

12:40That’s true.

12:41That’s true.

12:41It’s absolutely true that you can make something look completely

12:45different with a few changes of color.

12:47But again, going all the way back to that aesthetic usability law.

12:52What if we actually just improve the user experience?

12:57Right.

12:58What if we actually solved the user problem instead of just spinning our

13:02wheels, finding a new shade of lipstick for this pig, that’s something that I

13:07think is more impactful and yes, is it a lot more work could be right, but to be

13:14able to solve the user problem that is.

13:17I would like to think a lot of the reason that certainly for me why I

13:21got into this industry and hope that many of us also want to solve user

13:25needs out there and changing colors isn’t going to solve a user need

13:30unless of course, you know, it was an inaccessible experience to start with.

13:34So that’s something that’s important in there.

13:36There’s other folks that are out there that don’t believe in.

13:39You know, restricting a color palette, right?

13:42Reducing the amount of colors, you know, that you could choose from.

13:46Cause I kind of mentioned that earlier, right?

13:48If you, you know, take out the middle colors in there and you only have these

13:50very stark contrast, you know, the less, you know, choices that I have, the less

13:56control it feels like I have, right?

13:57I have, Oh no, I only have.

14:00You know, two shades of red.

14:01How could I possibly make an interface like that?

14:04And, you know, there’s other folks that are, that are,

14:06you know, opponents of that.

14:08Catherine here has a quote saying that first restricting a color palette to only

14:13three colors inhibits creative designs.

14:15While it prevents overstimulation, exploring more rebellious designs, make

14:20brands stand out from their competitors.

14:22This is talking about the 60, 30, 10 rule, which is basically

14:25the easiest way to choose color.

14:27And 60, 30, 10 actually comes from interior design where we’re

14:31trying to figure out the right palette to portray in a room.

14:36But that comes very closely to user interface design as well.

14:40And we see that in our modern interfaces today, right?

14:44Look at a platform like Twitter, which is composed mostly of three colors.

14:50Right?

14:50Think about it.

14:51I use Twitter in dark mode, so you’ll have a very dark background.

14:55You’ll have the text that’s in a very light

14:57. Maybe close to white color.

14:59And then you have the accent color for the button and a couple of the other icons.

15:03And that’s it, right?

15:05That’s all that the interface really needs to be usable as much as we think

15:10to Twitter could be usable, of course.

15:12So.

15:13Taking this back to interior design, just take a look at the room that you

15:16might be in right now or the car that you might be in right now and look

15:20at it and say, like, you know, yes.

15:22Okay.

15:23There is a majority color that exists in my space right now.

15:26Then there is a color that’s just below that.

15:29And maybe another one that’s below that.

15:30But I’m not stopping there, right?

15:33Because if you look at that room, there’s Got to be more than three colors in

15:36that room and that’s exactly what I’m I guess trying to convey here Right

15:41is that I’m not saying to remove all the color and make your experience

15:46Practically Twitter right where it’s just black white and an accent color.

15:49Although, you know, I think you can probably go A good

15:53distance with that alone.

15:55However, you know, looking at any particular interior design or

15:59user interface, you can include additional color to provide more

16:03personality to that, that experience.

16:06Absolutely.

16:07Right.

16:08But I’m again, conveying that.

16:10Perhaps you shouldn’t go overboard with this, right?

16:13You shouldn’t, in my opinion, you know, try to collect all of these

16:18colors and make the scale and, and be sure that all the colors work

16:22together in harmonious unity, right?

16:24A whole bunch of work goes into that only to find out.

16:27That you’re only using a very small handful of those colors at best.

16:32Because at worst, you might have a team that selects from that palette

16:37because it is available and there is no guidance about which one

16:40to use at any one point in time.

16:42Making this experience less consistent, right?

16:45Because one person has chosen a particular kind of red for their

16:49critical state, while a person over here has chosen an ever so slightly

16:53but still in the same palette Color red for their critical state, right?

16:58And that immediately becomes a problem.

17:00So, if you have only two reds to choose from, and one’s on one side

17:05of the scale and the other one’s on the other, it makes it much easier

17:08for everyone to be on the same page about what color to be choosing there.

17:12And again, you can choose those colors however you like.

17:16It does not matter the way that you choose that stuff.

17:19But again, what I’m saying there is that there’s definitely more things that

17:24could be prioritized in the things that we do day to day that I think would help

17:29the user directly as opposed to just making it look like we’re doing work.

17:34The final thing that I like to say here is In making physical

17:39projects, especially in woodworking.

17:41There’s a term that’s basically called the finish.

17:44Okay.

17:44And the finish is just actually a product that gets put onto a table.

17:49That’s like a, you know, like a varnish or, or something of that nature that

17:53kind of like seals up the wood and.

17:55Gives it a different color, different vibrance and make

17:57sure that it lasts a long time.

18:00And I really like the word finish in that way because it is truly

18:04the last thing that you do when you are building that table, right?

18:09Before you build that table, you are looking at you know,

18:12inspiration that is out there.

18:13You are taking measurements you know, looking for material looking for the

18:18fasteners getting the tools that you need, putting all that stuff together,

18:21you know measure twice, cut once, trying new, different things in there, and

18:28then finally putting together that table and having something to potentially

18:32show for it and that final step, right?

18:35That final step that you are about to do to really make this a finished piece

18:40of work is to apply that finish, right?

18:44That finish is the last thing that you do.

18:46It provides the additional, you know personality to that piece

18:49of the piece of work, right?

18:51It seals it up.

18:52It basically makes it that final product.

18:55And that’s what I’d like to.

18:58Convey to other folks that are out there doing design work, interested

19:02in design systems and thinking about the next thing that they want to do.

19:07You know, I really do believe that color should be one of the last

19:10things that you think about, right?

19:12The first things that you should be thinking about is

19:15absolutely user experience.

19:16And I think, especially with a mature design token strategy, which is a totally

19:21separate topic that I’ve talked about in different mediums The last thing that you

19:25can absolutely do is apply color because that color can switch to lots of different

19:29things very easily now in the year 2024.

19:32And I hope that that shines some light on some of the folks that

19:36are getting into this stuff.

19:37I’m sure this is going to be sort of contentious to the mature folks that

19:41have been doing design for a long time.

19:43But again, I think, you know, if we really.

19:46Look back and, and see what our roles are in user interface design.

19:52I really think it’s again about the user and a lot less about the color, but

19:57let me know what you think out there.

19:58You can tweet at me wireframe FM and tell me exactly how you feel about it.

20:02Love to know.

20:03But until next time, I know this was a short one because I’m trying to

20:05keep it with the event here make sure we’ll have a long one on the next one.

20:09But anyway, thanks for listening.

20:11Catch you next time.

Shownotes

  1. https://colorandcontrast.com/

  2. https://matthewstrom.com/writing/generating-color-palettes/

  3. https://blog.damato.design/posts/colors-dont-solve-problems/