Lessons

Lesson Info

Help the User Understand What's Going On

The next rule is help the user understand what's going on, (Jamal laughs) and you do that by giving them freedom, flexibility, and recognition over recall. The first one is freedom and control, and basically the questions that you're answering here are: Person comes to your product, looks around. Is what they can do here clear? Can they do what they want to do? Can they accomplish their goals? Do they know how to get from that point A to point B? And if the want to change something, how they do it. This last one is really important, what to do if you want to change something, because a lot of times when you're playing around with interfaces, you'll end up doing something that you really didn't want to do. I love how Google does it with... If you delete something, it doesn't ask you, "Hey, are you sure you want to delete this?" It just deletes it, but then, when you're like, "Ah! I deleted it!" You have that sweet relief of knowing that you can just undo that action. But it also avoids ...

having that step every time of asking you something, because even though interaction design is at its core a conversation, that doesn't mean that every single step is something that where the UI is talking back to you and trying to confirm something. Instead, it's more like a tool, like an effective tool. If you're smashing a nail into a wall with a hammer, and the nail bends, it would be kind of weird if the nail gave you feedback saying, if the hammer was like, "Hey, you hit the nail wrong." Right? (audience laughs) Instead you get the feedback immediately, right? Oh, I saw something the other day. I was playing the new Zelda game and if you don't have a weapon equipped, and you press the Pull Out Weapon button, instead of having a (Jamal mimics beeps) noise or something like that, that suggests that you did something wrong, the character grabs for something, and is like, "Oh, I don't have any weapon." So it's like this feedback that comes without telling people that they're wrong. Another cool example of giving people control is... Like here, a lot of times you'll go to a website and there'll be a problem with the security certificate, but you have the control. If you know what's going on here, you can just add an exception and go to the site anyway. But you know what you're getting yourself into because there are some security suggestions before that. Another great example of undo/redo is in Photoshop where you see an entire history of everything that you've done, which gives you great control and great freedom to go back and forth between some choices that you've made. This is on Facebook. If I start writing a post, and then decide to hit Cancel, it gives me the option to either throw away the post or keep it as a draft. So the point is, you always want to give people the feeling that they're in control, right? Control and autonomy is really important to people, and sometimes freedom means removing options, right? For example, if a user is a total newb and doesn't really understand this task that they're trying to accomplish, you want to restrain things more. Even if you're an expert user, it makes sense to leave the door wide open, right? Because they know what they're doing. A great example of this is in Apple's Logic software, their music production software, Logic, where in the preferences, there is an option to Show Advanced Tools, and when you do that, the UI opens up into way more options than you have as the beginner. But if you're just a beginner and you see all those options, you might get overwhelmed. So this is a great way of doing that. Shopping carts are an interesting example of this. E-commerce in general, of this balance between freedom and constraints, because as you're in the shopping cart, when you start, here you still have all of the options of the entire site, but once you click Proceed to checkout, and you actually start checking out, the options start narrowing down. But you can still do certain things. You can still delete items from your shopping cart. But it strikes an interesting balance of just this freedom and constraint, because if you have it too focused, people will just quit, right? 'Cause like, "Oh, I didn't want to do this." But if it's too open-ended, they might wander off and forget that they wanted to buy something in the first place. Distractions are abundant on the internet. Here's another great example of freedom and control from Google Flights. What I really like about this one is that there's a number of... I like a lot of things about this, but I like that under each date, it shows me the price of the ticket for that day. What I also like is that you can browse, you can switch between different options, right? So if you click on Flexible dates, it shows you this table. It'll show me, okay, on one day, the ticket costs this much but if I'm flexible on my dates, and I travel one day later or one day earlier, and the ticket's half-priced, that's great information to have, right? It give you another view, where they show you graphs over time of how expensive the prices are. So they're hitting every person's mental model here of how they might want to think about shopping for plane tickets. The next thing is flexibility. So good design provides flexible shortcuts for experts. The classic example of this are keyboard shortcuts, right? If I'm a beginner and I want to find something, I might go to Edit, Find, and try to click through it. If I'm an expert, I just hit Command + F. So you're serving both user groups here, right, but novices have a way to get to something that's spelled out in multiple steps, while the experts can just get there much more quickly. Or in this one, in order to not confuse people with their interface, the advanced settings here are hidden behind this link, right? 'Cause they know that most people when they go to adjust the setting of their PC displays, they're just trying to adjust the resolution and maybe the position of the screens, but for those people that really want to mess around with their graphics adaptor, they have that option. It's not super hidden or anything. It's there, but it's not cluttering from that most common case that people have. Another great way of offering flexibility to novices and expert users is the Google Image search. So if I search for images, I get a bunch of images. What if I want to refine those images based on size, based on date, based on color? Some people might want to do that. Most people probably don't want to do that. But if they do want to do that, they just got to Tools, and once they hit that, they get a whole 'nother row of options to further drill down their photos. Simplicity doesn't necessarily mean taking things completely away. It just means arranging it in a way that the people that need it can get to it without hindering the people that, in most cases, don't need it. So the next one is Smart defaults. What this means is that if you know based on the context and based on what you know about the users what they will most likely want to do next, you either do that option automatically, remove the step completely of them having to do it, or you emphasize that next step for them. Classic example, if you want to save a file. All right. In these dialogues, the Save button and the Yes is already emphasized as the default choice. Of course, in the more recent versions of OSX, they've taken out that Save function completely and just made the assumption that people do want their saves changed. That's an example of do want their changes saved, and that's an example of taking out a step, right? Or you see it online all the time too, right? If someone wants to delete something, the Delete button. If they know that the most likely next action is to delete something, they emphasize it, while still giving the option to not do it, but not emphasizing it as heavily. Last concept is Recognition over recall, which basically just means what you need to do is clear based on what you're seeing, right? So you never have to wonder, "Hey, what was that thing again? "How do I do that?" The Command line interface is the opposite of recognition over recall. You have to remember every term, right? In order to use the Command line interface, you need another piece of paper next to your computer with all of the commands, right? And then you can use it. So the interface does not help you with recognition, instead you have to recall with this piece of paper on your desk. Some better examples of recognition over recall are if you search for something on Quora, you put in good books, and automatically shows you some suggestions for some of the questions you might be looking for. Or on Foursquare, if I'm signing up for a new account, Foursqaure needs to know what I'm into so that it can give me good recommendations, but they don't just ask me to come up with ideas, right? (Jamal laughs) It's not like a blank screen saying, "Hey, what are you into?" Right? And then you need to type it in. Instead, they suggest a bunch of popular things and then I just click on those. Another example of recognition over recall is Amazon and a lot of E-commerce sites. They show lists of items that people have recently looked at. So that promotes recognition because maybe you shopped for a book four days ago, and then you see it in here, and then you're like, "Oh yeah, I did want that book, didn't I?" And then you click on it again and it reminds you that you should check out and get that book. A not so good example of recognition over recall is... You see this a lot actually in modern design. Designers are going overboard with this idea of taking things away. They're taking too much away now. This is an email app for iPad, and these icons at the top, I mean, I guess you can figure out what some of them mean, but you definitely can't understand what these three icons over on the left mean. The check mark and that... I don't even know what that is, it could be a metronome. (audience member laughs) It could be a drawer. It could be a part of a pyramid. So this is the case where, I mean, we've known for 30 years now that a label with an image, with an icon and text, is more understandable than just text or just an icon. We know this, but right now, people are just going crazy in the industry, taking too much away. So it's always a challenge to find that balance between good usability and a clean, minimal interface, and sometimes people don't strike the right balance.