Transcript

00:49 Hey, good to see you.

00:50 Thanks for coming.

00:51 This is another episode of wireframe.

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

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

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

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

01:06 on the other side of the world.

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

01:08 I’m so far behind.

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

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

01:18 show notes around this, this point.

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

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

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

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

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

01:37 coordination to be having in here.

01:39 So hopefully it goes according to plan.

01:43 All right.

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

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

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

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

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

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

02:04 about color and accessibility.

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

02:10 to To see differences in color.

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

02:16 that something may be accessible.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

03:25 Now, what does that actually mean?

03:26 Right?

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

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

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

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

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

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

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

03:48 which is the aesthetic usability law.

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

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

03:56 Right.

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

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

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

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

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

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

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

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

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

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

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

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

04:40 they find an interface visually appealing.

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

04:47 discovery during usability testing.

04:49 What does that actually mean?

04:50 Right?

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

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

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

05:03 I can’t wait.

05:04 Right.

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

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

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

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

05:25 Not so often, right?

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

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

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

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

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

05:48 Right?

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

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

05:58 really putting more emphasis on the UX.

06:01 Right?

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

06:08 Right?

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

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

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

06:22 Right?

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

06:29 determine how to solve this problem.

06:31 Right?

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

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

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

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

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

06:50 wireframes in none of that process.

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

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

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

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

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

07:12 Right.

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

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

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

07:22 Of, of listings or whatever.

07:24 Right.

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

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

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

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

07:36 talk a little bit about the color.

07:40 Right?

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

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

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

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

07:55 Massive amounts of color.

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

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

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

08:07 Yeah.

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

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

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

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

08:26 examples of this on the internet.

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

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

08:35 Right?

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

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

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

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

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

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

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

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

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

09:15 you know, through devices, right?

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

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

09:23 good effect on the final user experience.

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

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

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

09:41 Right.

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

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

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

09:52 that goes in between, right?

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

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

10:02 In order for it to be accessible.

10:04 It’s very, very hard.

10:06 Right.

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

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

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

10:19 most likely totally unusable.

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

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

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

10:33 paying for the price of beauty.

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

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

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

10:47 to making inaccessible colors, right?

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

10:55 to accessibility out there, right?

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

11:01 be fined very significantly, right?

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

11:08 things are accessible, right?

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

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

11:17 attempting to keep things accessible.

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

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

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

11:33 for things to be accessible.

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

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

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

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

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

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

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

12:05 Or just a refresh of your experience.

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

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

12:15 going to have the most impact.

12:18 Okay?

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

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

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

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

12:37 seems to be a Significant visual impact.

12:40 That’s true.

12:41 That’s true.

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

12:45 different with a few changes of color.

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

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

12:57 Right.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

14:00 You know, two shades of red.

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

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

14:06 you know, opponents of that.

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

14:13 three colors inhibits creative designs.

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

14:20 brands stand out from their competitors.

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

14:25 the easiest way to choose color.

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

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

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

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

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

14:50 Right?

14:50 Think about it.

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

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

14:57 . Maybe close to white color.

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

15:03 And that’s it, right?

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

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

15:12 So.

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

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

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

15:22 Okay.

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

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

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

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

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

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

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

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

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

15:53 distance with that alone.

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

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

16:03 personality to that, that experience.

16:06 Absolutely.

16:07 Right.

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

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

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

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

16:22 together in harmonious unity, right?

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

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

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

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

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

16:42 Making this experience less consistent, right?

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

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

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

16:58 And that immediately becomes a problem.

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

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

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

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

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

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

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

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

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

17:39 projects, especially in woodworking.

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

17:44 Okay.

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

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

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

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

17:57 sure that it lasts a long time.

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

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

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

18:12 inspiration that is out there.

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

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

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

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

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

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

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

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

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

18:49 of the piece of work, right?

18:51 It seals it up.

18:52 It basically makes it that final product.

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

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

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

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

19:10 things that you think about, right?

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

19:15 absolutely user experience.

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

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

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

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

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

19:36 are getting into this stuff.

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

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

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

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

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

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

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

20:02 Love to know.

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

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

20:09 But anyway, thanks for listening.

20:11 Catch 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/ ↩