 Hi folks. So we'll continue our discussion about designing the mobile interface by talking about cognitive load and attention. So we're still focused on the user here, the human brain. Last time, last video, we talked about perception and design affordance. So when you look at a user interface, you perceive the form and the function of objects through edges, contours, silhouettes, proximity, shape, color and context. All those things matter. The combined objects in the UI, the things you see, create its design affordance which suggests what the user can do with the UI. So usability, let's come back to our definition of usability for a minute. Usability is a multi-dimensional quality attribute of the UI that includes learnability, efficiency, memorability, low error rate and satisfaction. So all these things just help an interface be usable. Part of the UI's usability is its design affordance. How obvious is it to use the app? So how does design affordance impact these things? Certainly design affordance impacts learnability. Is it obvious to use? Efficiency, also important. We talked about the size of icons and the user interface has to be, the elements have to be big enough to interact with. Memorability, well we'll talk about that low error rate. You don't want people making mistakes in your app. So is it obvious what every button does in the app? Part of design affordance and also satisfaction. So all of those quality attributes certainly are contributed to by design affordance. But an interface can have good design affordance but still have poor usability. A common culprit for that is when the app has a high cognitive load. So what does that mean? You can have a very pretty interface, really great interface, but if the app does certain things a certain way it can hurt you. So or hurt your user. So cognitive load. What do I mean by cognitive load? A cognitive load is the amount of effort used in working memory, in your short term memory. So no matter what you are doing, whether you are solving math problems on a piece of paper, doing a crossword puzzle, or cleaning your room, or interacting with an app to send an email, to solve a Sudoku puzzle, to watch a YouTube video on design. All of these things impose some cognitive load upon you. And what that means is stuff is in your working memory, your short term memory, right? You're trying, as you're listening to me right now, you're trying to understand the words I'm saying. And you're trying to relate them to other words you've heard in the past. Like why is he talking about cognitive load? What is memory? What do I know about memory? These things are all happening in your brain right now. And you're also maybe looking at the screen too, right? So you see me gesticulating wildly. You see some words on the screen. Maybe you're trying to listen to me and read the words. As you're doing these things, we know psychologists know that you're kind of like pulling information into your working memory. And then as it's in there doing something with that information to help you understand to perceive to create longer term memories, right? So but some things impose a greater cognitive load than other things. For example, doing differential calculus, high cognitive load, chewing gum, not so much, right? There are different types of cognitive load, though. And certainly what you as a user interface designer can do, you do have some impact over the cognitive load that you impose upon your user. And it's useful to differentiate the different kinds of cognitive load that come into play when the user is doing something. And again, it's not just using an app where this happens, it's performing any task in your life. So what are the different types? And then I'll give an example. First, we've got extraneous cognitive load. And this is the bad one. This one is imposed this cognitive load. And the thing here is that humans have an upper limit to how much cognitive load they can tolerate, right? Once something is too hard to do, you just can't do it mentally or physically. We're talking mentally here, right? If I'm telling you, let's say you speak Japanese, or you're learning Japanese, if I'm telling you in Japanese, telling you a story, and you have to do a math problem, and you have to ride a bicycle all at once, you just can't do it, right? There's it's too much mental work. That's what we're talking about here. Okay. All right, extraneous cognitive load imposed by the manner in which information is presented. Okay, this is the thing that you as a UI designer have the most control over, and we'll show you in a minute. Intrinsic cognitive load is imposed by the complexity of the task itself. Some things are just harder to do than others. It's easy to walk into gum. It's hard to do differential equations. Okay. Germane cognitive load is the processing power that you, an individual, have to devote to solving a problem, right? So maybe let's illustrate what these things are through example. Okay, so cognitive load of an arithmetic task. Multiply 24 by 6. Okay, so the extraneous cognitive load here is quite low because it's very, very obvious. I want you to multiply 24 by 6, right? You don't have to piece together what I'm asking you to do. You can just do it. Intrinsic cognitive load. Is it hard for you to do this? I don't know. Hopefully not, especially if you have pen and paper on hand, you can do this pretty easily, right? You do six times four, 24 carry the two, six times two is 12 add two to it 144 is the answer, right? So is this hard to do multiplying this? No, not not too hard to do. So the germane cognitive load then becomes high. And that's a good thing, right? What that means is that your memory, your working memory, your brain power that you're devoting to this task, it is spent entirely on solving the problem on completing the task. That's good, right? Because if the extraneous cognitive load and the intrinsic cognitive load are low, you can just devote all your mental energy to solving the problem quickly, right? And you'll probably be able to do it quickly. You'll be able to be error free. You can just do the task and that is your focus. Okay. All right, let's flip this around. Here I'm giving you the same thing. Multiple kand equals xxiv multiplier equals vi product equals this. Okay. Now, I am asking you to do the same thing, which is multiply 24 by six. But I've asked it in a very silly way, right? Like this you understand this is stupid, right? Like this is awful. So the extraneous cognitive load here has been raised artificially and needlessly high, right? It takes you more to understand what I'm asking you to do than it does for you to do it, right? So the intrinsic complexity of multiplying 24 by six is the same, but you have to devote more effort to understanding the problem. And so this effort you devoted to understanding what in the world I was asking of you reduces the amount of effort you can actually spend in solving the problem. Okay. How about a Sudoku puzzle, right? So even if you don't know, so Sudoku, if you're not familiar with it, you've got to fill in each, the numbers from 123456789 can appear only once in each row, in each column, and in each three by three square here. Okay. So Sudoku, if you know how to play it already, has a very low extraneous cognitive load, like you know how to do it, you know what you're supposed to do, if you already know how to play Sudoku, there are no instructions here. But if you look at this as a Sudoku player, I know what to do. Is Sudoku complicated? Yeah, it can be, right? Depends. There are hard puzzles, there are easy puzzles. If I fill in all these numbers, except for two, you can do it very easily. If I take out half these numbers, it's going to become really hard. It can be very challenging. The germane cognitive load, how much effort mental effort does it take to solve a Sudoku puzzle? Again, it depends on how complex the task is. Okay. So your goal, your goal when you're designing the user interface is you got to keep the extraneous cognitive load low. That is your goal. How complicated it is to do a thing? Well, that's going to depend on what the user you're asking the user to do. Okay, if you're designing an app that sends text messages, that should be pretty easy for a person to do. If you're designing an app that say is a astronomical star map, and you're asking the user to like orient their phone a certain way, up and down, tilted and then face a certain way, that becomes a little more intrinsically complex to do, especially if you've ever used one of these apps, right? So, but the goal then is, you know, it keeps extraneous cognitive load low. Intrinsic cognitive load is kind of out of your hands. In the germane, you want that to be as high as possible. You want the user to spend as much as needed in terms of processing brainpower to solving the problem. Okay, the more they can devote, the quicker they can do it. Alright, consider the task of sending a text message. Let's look at this on the left. This is the Cortana app from Microsoft. And you just talk to it, right? It's like the Hey Siri or okay Google of Microsoft world. And you want to send a text. How do you do it? Well, Cortana actually tells you it says, try just asking me like this, text Andrew, okay, text Andrew, and your phone does it. Cool. That's really low, right? Extraneous cognitive load low, intrinsic low germane, probably not very high either, because it's pretty easy to just say text Andrew. Consider this user interface, send a text message. Okay, where in this interface do you think you go to send a text message? Probably down here is my guess. It's this little icon. I don't know for sure. Okay. High extraneous cognitive load, useless here, right? Like the actual difficulty of sending a text message, composing the message and telling it to send, that's still easy and low. But because of the nature of the interface, just finding where to do it has made this unnecessarily difficult, right? Suddenly sending a text becomes a much more complicated proposition, especially if you're under like a time limit kind of thing. Alright, so we humans have these cognitive resource limits, and you may have heard this statistic before, or quantity before, that human working memory or short term memory can hold seven plus or minus two items at any one time. Okay, so examples of items, words or concepts you hear, activities or menus you clicked on to get where you wanted to be. How did I get here exactly? debugging steps that you have tried already, you all are programmers. And you're trying to get that nasty bug out of your code. And you've tried a few things and you've got in your head like how you got to this point in the code and what had to happen for you to get here. This is why debugging is so hard, you can only keep so much in your brain at once, right? The items on the screen that may be related to what you want to accomplish. Okay, so you're presented with a busy interface. Where do I need to go? And what did I try before? I clicked on this thing. That wasn't the icon for sending text. That was the icon for sending email. Let me go back and but wait a minute, here's this other thing up here that looks like a message app. Did I click that already? Is that the text message? Right? So items, you can keep a certain fixed number of them in your working memory. Okay, a poor user interface will incur extra extraneous cognitive load to figure out how to use it. Okay, that's bad. Present the information in a good way. Expertise, let's just briefly mention what expertise because cognitive this cognitive discussion gives us a way of framing what it means to be an expert in something, right? So expertise is when you abstract these individual items into schemas for accomplishing a task, thus using working memory more efficiently. Okay, think about if you have ever played chess, have you ever tried to play chess? Right? If you start out and you're learning it, chess is very hard. And if you hear or have read anything about chess, people will tell you that expert chess players, they don't see individual pieces, they see the board, and they see arrangement of pieces on the board. And so that arrangement of pieces, they can kind of look ahead into different arrangements. And that's what separates novices from experts in that world. In the programming world, think about when you first started with your programming language, right? If you started out with Python, and you were just fighting to understand what in the world a for loop was. Okay, and to get it to print out the things you wanted it to print out or do the computation you wanted to print out, part of that battle was just understanding what in the heck a for loop can do. Well, now that you've been programming for a while, you know what a for loop can do, right? And when you're presented with a problem that does says like, hey, add 500 to everybody's checking account. You can say, well, clearly, I need to use a loop of some sort for that because I'm going to have a collection of items, these bank accounts, and I need to do something to each one of them. That calls for a loop, right? So that's what being an expert is. Whenever you can kind of take individual items that you perceive, and form them into a pattern that you've seen before, and we call those patterns schemas. Okay, so is cognitive load important? You bet. Here's the cockpit for the flight deck, excuse me, of some aircraft. I don't remember which one this is. But you know, you may have heard of the movies where the pilot is incapacitated and the the passenger needs to come in and fly the airplane and land and save everybody. Yeah, forget it. Right. Look at this thing. You have no chance of figuring out as a complete novice what all this stuff does. That's why pilots have hundreds of hours of training. However, if you are a pilot a seasoned pilot and you come into this flight deck, you just know what to look for. Kind of like driving a car, right? When you learn how to drive a car, you kind of sat down behind the steering wheel and there's switches on one side switches on the other, there's dials on the dashboards, there's buttons to press a little overwhelming. Your dad says, Hey, turn light, put on turn right here. Okay, if I say turn right and you are a seasoned driver, you know, you should put on your blinker, you should check your mirror, make sure there's nobody coming up on your right hand side. You should then turn the wheel probably slow down as well to make your turn. As a complete novice, you probably had to be instructed to do each of those things, right? So if a task is really important, or you overburden someone's cognitive capabilities to process what they need to do, they are likely to make a mistake, right? This flight deck is not a place you want to be making mistakes, right? Same thing in your interface. If your interface is too complicated to use, you don't want people making mistakes. If they make mistakes, that leads to poor usability, right? You want people to be able to work in your app efficiently, right? So burdening them with cognitive load can lower their efficiency, cause them to make mistakes. Here's an example. Again, this is not a mobile application. Can you tell what this is just by looking at the screen? Well, this is a patient record management system for like a hospital. Okay, a little complicated, right? There is a lot of garbage on this screen. Now do you think that a nurse or physician assistant or a doctor who is using the system needs all this stuff? Answer is no. They absolutely do not need all of this stuff. And in fact, Ben Schneiderman, a guy who we'll talk about next time, kind of one of the real pioneers of user interface design for computing applications. He spends a lot of his days nowadays working in health systems and health record systems because people die because medical records are wrong. Why are medical records wrong? Well, their interfaces tend to stink like this one. They're hard to use so people don't put in the information they should. And they have a hard time getting information out. People looking at this information may be looking at it in an emergency. So they need to see what they need to see quickly. So why is this user interface so bad? Well, most medical record systems are not designed for doctors or nurses. They're designed for accountants and people who bill based on the services rendered. Okay, so cross purposes here. Alright, so cognitive load can be a big deal. You know, we're talking about errors here and inefficiencies here that could that are safety critical. Your app is probably never going to be safety critical. But nonetheless, if people are inefficient or make mistakes when using it, that impacts the usability, bad usability impacts user experience, people are going to stop using your app. Let me talk for just a minute about attention, because it's related to cognitive load. Okay, what did I just say? Let's talk about attention because it's related to cognitive load. Hard to pay attention when you got a bunch of crap flowing around on your screen, right? You have as a human being different input channels, sight, hearing, smell, touch, taste, right? Perceiving the input on these channels, whether it's listening to me, reading the words on the screen, looking at the picture or being distracted by animation, imposes some burden on your memory to deal with the information, right? It's a whole psychological phenomenon. So if you are trying to accomplish a task, like you're trying to learn about cognitive load, and a horrible snake enters the room, because your roommate had bad chili last night, you're going to get distracted from learning, or maybe you're sitting in the library and the person making the coffee at the coffee bar drops the ice, you're going to be distracted, right? So input channels that are unrelated to the task at hand can destroy the contents of working memory. So on mobile devices, the primary channel that your users are working with are sight, right? Mostly they're focused on completing the task by looking at what's going on. But there could be hearing involved, they could be doing something like Duolingo that's teaching you a language. And certainly applications, mobile apps can like vibrate the device to give you feedback or to like, you're playing a game to indicate you like crashed a car or something like that, right? So, you know, you have to be careful, you have to think about it, you cannot overload your user. And in particular, you know, where does this come into play on a user interface for mobile application? Animation. Animation is bad, unless it's very specifically related to the task at hand, okay? So attention, cognitive load, these are all things that are important for you to bear in mind about how your user interface can impact a user, right? So I'm going to wrap up this video with a redefinition of usability now that we kind of understand a little bit better the human mechanisms that impact usability. Alright, so usability again is a multi dimensional quality attribute quality attributes means like an adjective of the UI that includes learnability. Can I look at the app and understand what I can do with it? Can I pick it up quickly? Efficiency? Can I accomplish that task quickly? Memorability? If I put it down and come back six months later, is it the same? And low error rate? Can I accomplish my task without making a mistake? And then just general satisfaction? Did I feel good using the app? Did I do what I want to do? And did that make me happy? Right? These are usability. Okay, designing the user interface when you are building your user interface, you need to make it easy to learn. And remember, that's design affordance. You need to make it efficient and error free. That involves considering the user's cognitive load and accomplishing the various tasks you give them. And then finally, you need to satisfy the user that's UX user experience how you do things. Okay, so that's kind of the end of talking about design affordance, perception, cognitive load, kind of human aspects of usability. Next video, final video for this week, we will talk about the eight golden rules of user interface design.