Welcome back. The topic for this video is an introduction to a set of powerful principles for analyzing designs and for creating good designs. And this lecture draws on Donald Norman's book, The Design of Everyday Things. And I'm go to introduce and give examples of four major design principles. Visibility, feedback, mappings, and constraints. Now the idea of visibility, it's pretty straightforward. Make the state and operations of a system visible and clear to users. Don't hide controls. So some of you might remember older systems like VCRs or telephones or even digital watches where a lot of things that you have to do are hidden away and you can only get to them through odd actions like some combination of button presses or so on. And those systems tend to be hard to use. Instead you want to make the status of a system visible by crafting well designed displays, progress bars are good example, and even using other senses like sound output as necessary to give users a good indication of the state and operations of the system. So I'll start by giving an example of a really bad example of visibility. What you see here is a gas tank, a tank for pumping gas, and it's incredibly busy. And one thing you might wonder is how do you actually turn the gas pump on to pump your gas? Well, there's a button somewhere. There's a display somewhere that says here is where you push to start pumping gas. Well, where is it? Well, it's right there. There it is. So we can see it. But you can ask yourself, is that really visible? And in this case the answer is pretty easy. No, it's not. It's hidden amongst lots of other busy displays, so it's not visible. Let me give you a couple examples though of good design, of making the prominent features, the most important features of a design, visible. So here's an example from Gmail. One of the most common things that you want to do when you're in a mail program is compose a new message, is start a new message, and Gmail has a very prominently placed, brightly-colored large button called Compose. Makes it easy for me to see this is how I start a new message. Now another example is something like a tool bar, and I'm showing the tool bar for Microsoft Office here, and there are many things that are visible to me. What this shows me is what are the options? It shows me the most common options, and it even devotes more screen real estate to the ones that are perhaps most common. And as we discuss elsewhere, you can see over on the left side there is a large icon for Paste, which is one of the most common operations in Microsoft Office. So they have made the common actions visible here. Now the next concept we are going to discuss is mappings. Mappings are used to determine relationships, typically between something you want to control and the thing you use to control it, or between an action and the result of that action. These mappings take advantages of physical analogies or physical relationships and cultural standards. So again, I want to give you a few examples of this. Here's another real world example, cup lids. So every once in a while I go into some place like a fast food place or even a gas station and I want to get a soda, I want to get a drink. And after I get the drink I have this problem of figuring out which of the various sizes of lids is the right one for my drink. And if I look at these, at this picture, what you can see is here are three different sizes of lids next to the drink dispenser, where I've chosen cups. Okay, and I've got to figure out which is the right lid for the cup I chose. And it can be a little bit hard. Now I want to show you another one. Let's look at this. Here's another drink dispenser, where, if you can see, there's four different sizes of cup, ordered from top to bottom, from smallest to largest, and right next to them there are four sets of lids. And so I see a direct mapping, a direct correspondence, between each size of cup and the appropriate size of lid. So good mappings. No problem in this case answering the question which lid is the right size for the cup that I selected. Here's another example of trying to control the burners on a stove. And so here's a stove. It has four burners, and if you look on top, there are four switches, four dials to use to control the four burners. And the problem that I have is knowing how am I going to map the different burners to the different switches? Now, if I zoom in in a little more detail to the switches, to the controls, you can see some interesting things. But, you can see that they needed to give me further displays, because without those displays, the mapping would not have been obvious. And so what you can see is it actually says, the display on the left it says it's for the rear, the display on the right is for the front and if you can also see, they have a little image that shows you graphically which of the burners it controls. That's a nice help. But the point is they needed that help because without that they weren't confident that the mapping between the thing you were controlling and the controlling object was going to be clear. Now here's another stove, and in this case the mapping is pretty clear. I think if you look at that it's completely clear to you which switch you would use to control which burner. Now for other reasons you may not like having these switches right next to the burner on the surface of the stove. But at least the mapping is very clear. Let's take another example of mappings. Many people have ceiling fans in their bedrooms, or whatever room in their house, and those ceiling fans also often have lights on them. And if I'm looking at the ceiling fan, I see two strings hanging down. One is sort of this fuzzy yellow one and one is just sort of a normal brown one with a little bobber at the end. And I looked at that and I think, which string turns on the fan, which turns on the light? What is the mapping between those two controllers and the two things I control, the light and the fan? And when I look at that, to me the answer is not so clear. It's not a great example of mappings. So the next design principle I want to talk about is feedback. So feedback. This is an action that the system takes in response to a user action, and remember that people will build models as we've seen in another video, and feedback leads to causal models. If y happens after x, then x caused y. So feedback is a prime mechanism for helping people understand how the system works, and build an appropriate model of the system. This actually is a good time to say I find that with many of the examples that I use for computer interfaces, these concepts of feedback and mappings in visibility are so widely used that we tend almost not to notice them. And by calling your attention to them, I'm hoping you'll understand these concepts better, and then realize their utility and make sure that you include those in the systems that you design. What I'm showing you here now is simply an example of a configuration screen on dell.com. It shows the XPS 13 Laptop, and near the bottom of the screen there's a number of examples for ways that I might configure this system. And so if I choose one of those examples and I start to hover over one of the options, the system changes the display of that option to indicate that would be my current choice if I choose to make it. So it's responding immediately and giving me feedback, showing me the state and helping me understand how the system works. Here's another example on my phone. I had started to key in numbers and toward the top it's actually showing me what is the number that matches, what is the actual phone number that matches the digits I've entered so far. So feedback that helps me understand how the system is interpreting what I'm doing and furthermore, in this case, makes my task easier. Now there's a few other screens I'm going to show you from Google Now. In Google Now, once I tap the microphone or I've said Okay Google, it will actually give me visual feedback. You can see that red circle in the upper right with circles around it. This is showing me that Google is listening to what I'm saying. And then as I continue to speak Google will actually be starting to give me other visual feedback to let me know yes, it's listening. And as I continue to go on it will show me it's interpretation of what I have said. So again, very useful feedback. The next concept I want to talk about is constraints. Constraints are design features that limit the range of possible actions a user can take. Now, constraints, it's sort of a funny word, because you might think of constraints as being bad, but constraints typically are good. They narrow down the set of options users have to consider, and they make their job, they make their task, easier. Now there's a whole bunch of constraints, so you might think of physical constraints. For example, if you remember the old VCR tapes, you could only put a VCR tape in one way. USB cables or chargers that you use for your phone or things you use for your smartphone, some of those cables can only go in one way. So those are physical constraints. There's also logical constraints. There's also simple constraints on action you can design into a system, and I want to give you some examples of these because, again, there's lots of examples in the software we use. And it's nice to be able to sort of notice them and observe them and realize what's going on. So one common example is to gray out or deactivate unavailable menu items. So I've simply showed a menu here from Microsoft Office. And if you look at the top, the top two options in the menu, Cut and Copy are grayed out, meaning they're unavailable. Why are they grayed out? Why are they unavailable? Because I don't have any objects selected, so there's nothing to be cut or copied. Another common example is constraining user imput. So I went to Amazon.com, and you might have noticed this when you choose to order something. One option is to specify how many you can order and I don't get to just type in free text, instead I have to choose a number from a drop down. And this is a way for the system to make sure that the input I provide is sensible input. Here's an example from the Duolingo system, the language learning software. I have it in the mode of, I'm in English and I'm trying to learn Spanish. It's asking me to translate this sentence and it is showing me a set of words at the bottom from which I should choose to come up with my translation. And so the point here is, for the language learner, at this point they're not ready to simply type in free text, instead they're given a set of clues to help constrain their choice. So that they probably have a good probability of giving the right response. And it's also nice, I wanted to show this second screen. After I made a couple choices you see these two grayed out squares down at the bottom between dinner and supper. And this is feedback that actually makes it clear I've supplied two choices already. So this also is another use of one of the design principles in this same interaction that makes it easy for me as the user to tell what's going on. So that was it for our introduction to a set of powerful design principles that we'll be using throughout this course. Visibility, feedback, mappings, and constraints. And that's all until next time.
