Hey folks, welcome back. We're now going to be moving on to our second and third of, although they're very related, design principles, color and consistency. So just a quick reminder, the challenge in this short series of videos on design principles is to figure out how to take all these pictures, information, buttons, UI elements and optimally display them on the blank canvas that is your smartphone or your app smartphone or desktop app screen. Again, these are all rules of thumb so there are clear exceptions especially in the context of user research. And, actually, especially in this lecture we're just getting the tip of the iceberg. A useful tip of the iceberg, but it is just the tip of the iceberg, there's a lot more to learn about color in particular. Okay, like we saw before, we can think of issues that we're going to be talking about in this video through the lens of geography, and through the lens of psychology. I'm a geography nerd, so I'm going to go through it in the context of geography. I think it also is a much more grounded, no pun intended, way to talk about these things. But I'll briefly at the end talk to you about how you can understand this through Gestalt psychology. So, let's get started here with our geographic analogy to understand color and consistency principles in user interface design. Again, we're going to be looking at US Presidential election results from 2012. So, this is a familiar map from the last video and the thing I want to point out here is that there is a clear set of, in this case just two colors. We have blue which is states that the Democratic party won, that Barrack Obama won, and we have red which are the states that Mitt Romney won, right? The Republican Party. This is something that seems intuitive, it's how you do cartography, right?. Read this map it's very familiar. Well, we used the exact same principles in user interface design, right? Let's take a look at this screen, just a blank Word document, Word for Mac. You can see that blue in this case means sort of high level menus. Grey in this case means items or actions that I can take on my document, in this case, white is my document. Same type of deal. In this case, blue has a specific meaning, it states that Barack Obama won, right? Red as a specific meaning, states that Mitt Romney won. Blue has a specific meaning, high level menus, grey, actions you can take, and white, our document, same type of deal. To make this even more explicit, let's take a look at Google search results. Once again, blue in this case is a link. This is something that we're very familiar with, it's definitely a norm or a standard. We'll talk about that in a second, but in this case, everything that's blue on this page is a link. So, just like everything that's blue on that map is a state that Barack Obama won, everything that's green here provides a little bit of context about that link. The rough domain, a little bit of more information on top of the domain about the URL. And then you can see the gray text and the bolder gray text. These are snippets and the search term in the context of the snippets. Each color has a defined meaning in Google Search results just as each color has a defined meaning in that election map result that we just saw. So that brings us to the first of the several color and consistency principles we'll going to be talking about in this video. And that is to explicitly state this here, that is that colors should in general be used to indicated similar items or functions. Want to point out this, of course again rules of thumb, not laws, there's some exceptions. So if you have an image or icon that might share a color with another color that's used for something else, especially if it's just a highlight in the image or icon. You know what, that's fine, if we went back to that word slide, you'd see all sorts of examples of that. But, in terms of the general themes of your user interface, a color should, in general, be used to indicate similar items or functions. I also want to point out that this can also be a useful, a redundant indicator with layout. The blue in the Word document was at the top so the layout also indicated what was a menu, but the blue helped to sort of give that [SOUND] give that separation [SOUND]. And another way to think about all this, this is a color and consistency lecture. Another way to think about all this is that the use of color in your user interface needs to be consistence, right. Blue should mean something, a grey in general should mean something and so on and so forth. Again, rules of thumb. There are going to be exceptions you encounter, they're going to be important and that you should enact, but in general this something that you should keep in mind. So, how do we choose which consistent colors to use? Well, this is a nice counter example here and this one of my favorite homework assignments that any student has ever turned to me. I was teaching a spacial computing here at the University of Minnesota, and instead of teaching cartography in sort of the traditional way, I decided to flip everything. Teach people the rules, and then have people do their assignments trying to break the rules as much as possible rather than follow them. I found that actually to be a very fun way I think for everyone to learn the concepts. And people did definitely learn the concepts perhaps better than they would have in sort of the boring do the right thing approach. But this is a map that came out of one of those assignments. It's probably the ugliest map I've ever seen. I got the student's permission to tweet it out and it ended up being a little bit viral, it was fun to see this go around the Internet. But the reason I bring this up here is this is clearly not the way to choose colors. But, how do we go about choosing the right ones? How do we know why this is so incredibly wrong? And so, we'll be going through a couple of principles that will help us figure that all out here next. One principle that is quite helpful here is standards. Blue is not a random choice in this case for states that the Democratic Party or Obama won. Ever since 2000 or so, blue has indicated the Democratic Party here in the United States and red has indicated the Republican Party. Had they flipped this, had they used different colors, say pink and bright green or something like this, this would have been very confusing. The employment of standards in this case is absolutely essential, as it is, for your user interfaces. And that's actually something that is really important for you to consider, and really quite common as well. So, just to show you how common, I was working on this slide here, and [LAUGH] what do you know? In that same window, you can see the use of standards applied in terms of color design. So, this is the top left of the MacOS window. Green means expand, yellow mean minimize, and red means close. You can imagine it'll be very confusing because of the way that green, yellow, and red are used on stop lights, which are something that we've encountered since we were very small, so it's become a standard. If we'd flipped this around [SOUND] this would have caused a lot of confusion, especially early on with first time users. Another standard is making links blue. Now, this is something that you can deviate from for sure on your website, especially if you use other indicators, color and otherwise to highlight links. But in general, people who see blue and underlined texts, the underlined sort of, of course not associated with color, but same type of deal. Blue and underlined texts they know they can click on that, it's a standard. So, using blue in this fashion on the web, is pretty important. I will say if you make text blue especially a subtext in a webpage blue and you decided that's not going to indicate a link, you'll have a lot of people clicking on a lot of non-links on your webpage. Okay, so that's our second principle, when possible, color choices should conform to standards or norms. Okay, another reason this map was a problem is that there are way, way, way, way too many colors, especially up here. [LAUGH] In general rule of thumb here, you can see our little rule of thumb icon. The maximum number of colors that you should use in meaningful ways outside of like icons and photos and these types of things is five to seven and I'd prefer many fewer. The reason the five to seven is used is related to short-term memory. We learned in previous lectures that humans can only hold five to seven different categories of things in their short-term memory at a time. So, if you're using color to indicate something important, you're using it to symbolize a menu, whether Barack Obama or Mitt Romney won a state, these types of things. We only can keep five to seven of those types of things in our memory at one given time. And I would recommend that you do try to go smaller than five to seven if possible. So again, using PowerPoint as an example here as we're zooming out on that slide to see what it looked liked when I was making it. You see PowerPoint roughly speaking employs three different colors, just like Word did. We have our orange, we have our white and we have our gray. White is the active editing space, orange is the menu and gray are things I can do to my content. Okay so, that’s our third principle, right? Minimizing the total number of colors. But, given that you have say, three or maximum five to seven colors, which colors do you choose? There are an infinite number of colors I have to choose from of course, and one really, really important factor to consider when you're answering this question is the fact that a large percentage of your user base is almost certainly going to be color blind. So, in the United States, roughly speaking around 8% of the population is colorblind, way more men than women. And if you forget this, you can run into problems. So one of my favorite incidents of one of these problems associated with a designer failing to consider the colorblind population, actually emerged from the National Football League or American Football League, right? Grid iron football, and although this is not user interface design, it is design and the same principles hold especially with regard to color across pretty much all aspects of design. In this case, what we had was the National Football League was very excited to introduce a new sort of special version of uniforms they called color rush uniforms. And on the first game these color rush uniforms were going to be deployed, they had a green team, so this color rush uniform had all green, and a red team, in this case all red playing against each other. All well and good for folks like me who are not colorblind, but for the 8% of the population that were colorblind, including one of my favorite NFL commentators Gregg Rosenthal down here, this was a pretty rough experience. They couldn't tell the difference between [LAUGH] the two teams. And for them it looked roughly like two people wearing the same uniform running in seemingly arbitrary directions, because you can't tell [LAUGH] which team each player was on. And running into each other, right? Because it's American Football, and some folks on the website called Deadspin, put together a video simulating effectively what this might look like for a colorblind person, and I'll just play this video for you right now. >> [APPLAUSE] >> So fortunately, while there's a lot of science behind how to design for color blind folks and the various sub-populations of colorblind folks and these types of things. The scientists behind all this science have developed some tools to help us out, so we don't have to dig into that unless we're interested. Two tools that I'd like to call out here are ColorBrewer.org. This is a map color website, but I actually use it for all sorts of design. The challenge is as we've learned in this lecture, the challenge is associated with cartographic design or design in the geographic domain or map design more specifically. Those challenges are very often similar to many other design challenges including user interface design. And then there's this nice website out of Canada that has a nice long list of a good explanation of how to design for various color blind folks and includes a bunch of color palettes. So, if you're not interested in those tools there are a couple more general solutions that you can employ. One is your safe most of the time, if your colors not only vary in hue, so sort of red to green, but also in brightness. So had the NFL had really, really, really light green and really really dark red, right, it would have looked to colorblind folks as various shades of gray, right? Or at least in the analogy, the video of various shades of gray, but distinguishable, because they had roughly the same brightness, that was also a cause of the problem. You can also use position as a redundant indicator, this is what happens with stop lights. So, if you can't tell the difference between red and green, this could in theory cause a lot of car accidents, but colorblind folks can tell the difference between top and bottom. And that is a completely redundant indicator in stoplights. Another approach is to use hashing, so if you have two colors, say if you have red or green, use dots or little lines on one of them. So, that's going to be very visible, regardless of whether someone is colorblind or not. Okay, so, our fourth principle there is choosing a colorblind-safe color scheme, it's a critical principle in color design. Okay, I did mention that there's another way to understand a lot of the things we've talked about in this video through the lens of psychology. The basic idea there is when we see, so for instance we see our grid of dots here again, right? And some of them are black and some of there are white. Well, Gestalt Psychology tell us that we consider these to be much more grouped together, right than these, and same deal here and here. This is a psychology view on effectively what's going on in this map, right? Okay, there's a lot more to Gestalt psychology, this is the Gestalt principle of similarity if you're interested in looking it up online. A quick review of our color and consistency principles. Color should in general be used to indicate similar items or functions. So, every menu item there in Microsoft Word it's going to have that blue background. When possible, color choices should conform to standards. Green means go, red means stop. We need to minimize the total number of thematic colors. Again, don't worry about icons or pictures, but thematic colors. Imagine for instance PowerPoint or Word with 15. Three was a good number as we went through, and then lastly when you're choosing your colors be sure to make sure that they're colorblind-safe. And with that I will see you in the next video.
