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 ¹ 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 ² 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. ³

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/ ↩