 Hello everyone. So we'll continue our discussion about designing the mobile interface today and we'll talk about the concepts and some of the physiology behind perception and a concept that is really important to design called design affordance. Alright so let's get into it. Let's talk about interface design. Alright so what is bad user interface design? Well to paraphrase the Justice Potter Stewart, I know it when I see it, right? So here's Xfinity's old website and my goodness look at how busy this website is. There's so many buttons all over the place. They're up at the top. They're right here. There's a search box. There's a cart. What am I buying here? I guess stuff. These are drop-down menus. There's all this other stuff down here at the bottom. My goodness what a busy user interface. Like if you've ever interacted with the cable companies website or phone companies, I have yet to encounter one that is actually a pleasure to use, right? How do you find the thing that you're looking for? It's usually pretty frustrating, right? So just looking at this, this ain't great, right? This is clearly a case where they have so much functionality, so many different things you can do. They just didn't they just wanted to put it all in one page and it's overwhelming, right? So that's bad. Here is a very old user interface. This is from an IBM AS400, right? So this is like a production machine that would be in like a factory or something like that. Old school stuff. Just, you know, aesthetics aside, you know the interface is all you got to work with menus. It's not terribly clear what everything does. So it's kind of hard to learn and there's no instructions. It's just, you know, okay, is it so bad? I don't know but it's not great, right? Think of this in comparison to like an app that you would download on your phone nowadays. Usually most apps when you open them it's just like, oh well here's what I do. This, not so much. On the other hand, though the user interface here isn't great, this program had actually pretty high UX user experience because people who became expert in using it were very fast with it and they could be very productive with it. So they can make a lot of progress. Even if the user interface wasn't ideal when they started. Some of you may use or have heard of the code editor called VI. VI is like, you know, if you spend enough time on the internet looking for how to code things you'll find people advocating using the VI code editor and if you've ever tried it, you know it is painful to learn but if you've ever seen someone use it who's really good at it they can be immensely productive more so than like anything else you might use like vigilance to your code or pie charm or anything like that. So what's bad here? Here's the Amazon app. It's going to show up a whole lot in these in these slides. Man, it's kind of almost like a microcosm of the cable company web page, right? Like what can you interact with on this page? There's so much going on and the answer is you can interact with like everything in this app. Anywhere you put your finger you're going to be doing something whether you intend to or not. Like what do you do with this camera? What in the world does this mean? This is a shopping cart. What are these three lines? Why is this here? What about this is clickable? All of it. I've got a couple of different lists on here. Very busy, right? So what do I do? Presumably I search but what's all this other stuff? Coming over here I don't know what I have done on this page but I have this very helpful message down here that says beep, boop, beep, okay? What does that mean? It conveys zero information, right? I don't know. I really don't know. So it's lost information, bad UI. Bad user interface is not relegated solely to the domain of mobile apps or computer applications. Here's some light switches. What's wrong with this interface? Well, what are those light switches matched to, right? They're indistinguishable from one another except, you know, they've got different positions. This one's all apparently gotten a little yellowed with age but there's no indicator here. Like if you walk into this room and unfamiliar with it and you want to turn the lights on, what corresponds to what here? Walk into any classroom on our campus and you will see something similar and you'll just be left guessing which button controls which light. Probably you're going to hit all of them and turn them on and hope for the best and then counter-intuitively you will turn them all on and some of the lights will turn off, right? So you can have bad user interface design for non-computer applications. You can also have good user interface design for non-computer applications. Here's kind of like a smart-ish light switch operation thing, right? And it's got the layout of the light switch on it, of the room on it and oh, you want lights on in this area of the room? Well, push this area of the light switch, right? You're a little more intuitive of an improvement. The user interface itself is still very, very, very simple. You just push something but now you have an indicator of what to push. So that's nice. Here's a website that is doing what is called responsive design, probably a term that you have heard. Responsive design means that the user interface is responsive to the size of the screen it is being displayed on, right? So when you're full screen on your big desktop PC, you get the default kind of web layout. You're on a slightly smaller web screen. Kind of looks the same but things are kind of crunched together. But when you switch over to the tablet or even the mobile device, the user interface changes, right? So if you tried to cram this whole thing down into a website on a phone, probably wouldn't look good. But here they've kind of bumped up and promoted. Here are the main things that you might be interested in. Our homepage, about us visiting our shop and contacting us. Don't have to click around in these tiny little buttons up here. I've made them nice and big for you, right? So this is a good responsive user interface design. But again, right? Design is kind of something, if it's got a good design, good user interface, you know it. You know it, the human by interacting with the thing, right? So if we could kind of sum it up though into one concept, what makes good design? What we would say is that good design entails affordance, design affordance, okay? So affordance is a very specific word. Affordance refers to the perceived and actual properties of the thing you're using, primarily those fundamental properties that determine just how the thing could possibly be used. This is a term coined by Don Norman, but way back in 1988, he published a very famous book called the Design of Everyday Things. If you are interested at all in design, or not just the design of computer applications, but anything, you have, you need to have this book. It's very fascinating. And it explains, like, scientifically, psychologically, what makes good design, right? And the main thing is affordance, right? So design affordance means that, like, when you look at a thing that you want to use, whether it's a lawnmower or whether it's a mobile app, it's really apparent, really obvious, how to use the thing to accomplish what you want, right? So how do you look at a thing and know what you can do with it? That's a very simple question. And I mean at the most basic level, when you look at a thing, how do you know what you can do with it, right? And how you, the developer, convey that to a user of your app is really important, right? Because when you're using an app, a mobile interface, you got limited real estate, right? It's small. And you need to think carefully about what you're gonna do with that space to convey to the user how they can use your app. Because the goal, right, one of the big goals for a mobile app and for anything is this affordance thing. When the user picks up your app and they start to use it, it should be really apparent to your user how they use it, right? You don't want to have to train them. You don't want them to make mistakes. You want them to get into your app and be productive. No matter what that app is, is it navigating around the streets of your local town? Is it playing music? It should be super obvious how to use it. And that's what Don Norman means when he's talking about design affordance. How that layout, how that interface is structured, should tell the user what you can do with it, okay? So, but it all comes boils down to perception, right? So let's talk about the psychological roots of perception. So what do we mean by perception? We mean how the user, how a person, how you look at a thing and understand what it is and what it can do. That's perception, okay? So the term perception, right? And the study of perception is actually relatively recent. There were Gestalt psychologists in Germany back in the early 1900s and they were really interested, Gestalt has to do with shape and form. They were really interested in what it means to see something with your eyeballs, right? You see things with your eyeballs and translate that stuff that you see, perceive it, and like grab, gain an understanding of what it is you are seeing, okay? When you look out in the world, you see collections of stimuli, right? You see lines, you see colors, you also hear things, right? Your brain is what is putting them together into a perception, right? Our minds create a hole from collections of attributes, right? So we're getting real fundamental here. If you're looking at your screen right now, looking at a screen on a computer, you see lines that form the frame of the screen and maybe there's some black outline, maybe it's silver, if you're looking at an apple or a mac, then you've got kind of the screen inside it and inside that screen, you see these words on the screen, right? And you see me gesticulating at you frantically, but what your eyeballs see are changes in color, lines, things like that, but your brain figures out, I'm looking at a computer screen and it's got PowerPoint on it and a guy making strange gestures, right? That's your perception. So you see things, you see stimuli or hear stimuli, but your brain has to perceive them, okay? So what we see forms what we perceive, all right. So for example, take a look at this. What do you see? Well, you may be saying, I see a circle, an incomplete circle, and I see a hexagon, it's incomplete. But in fact, you don't see, excuse me, I have a pretty bad edge, okay? You, what you are seeing are three lines. You see this line, it's collection of black, you see this line, this collection of black, and this line, this collection of black. You see lines and color. What you perceived is a circle with a cutout, right? Now, if you could imagine having never seen a hexagon in your life, right? What, how would you even describe this? Could you describe it, right? Or would you just say it's two lines? But your brain, having had experience with this shape, can say, oh, it's a hexagon, it's just missing some parts, right? But all you're seeing are lines. These are the stimuli, but your brain is perceiving something. Okay? Edges, now, when you're designing something for people to look at and try and perceive what it is, edges and silhouettes are important to perception, especially in limited resolutions, like on a phone. So I don't know where you're watching this video, but I encourage you make it full screen right now, right? If you're on a phone, if you're on your laptop, whatever, make sure it's full screen right now and look at the screen. There's something down here. Can you tell what it is? Okay, what do you perceive down here? Well, you see, there are some lines here, but can you figure out what they are? What are they a part of? Does your brain put them together in some way? Now, if you're on a small screen and you're looking at this, you may not even be able to see this right now. Okay? So how big the thing is matters. How about now? What is it? Can you tell? How about if I get bigger? Does this help? Right? So you're definitely seeing different lines, but now have you been able, has your brain been able to put it together? Maybe. Alright, I'm going to make draw it. Here's the full drawing, right? Okay, can you see it? Again, if you're on a little screen looking at this, you might have trouble figuring out what this thing is down here. Okay, but it's a cup, right? And the bigger I get, the easier it becomes to perceive, right? So what is this mean? Right? Well, the simplest thing it means is that the smaller something is, the harder it is to perceive, bigger it is, the easier it is to perceive, whether it's filled in or not. Okay, there's a concept at work here of actual psychological, psychophysical concept called the degree of visual angle. Okay, so the degree of visual angle, right? You have all experienced the limitations of the degree of visual angle and your real life at some point, right? This thing is the degree of visual angle, and there's a format for it, right? I'm looking at this cat kind of far away, and depending on the height of the object I'm looking at, and how far away from it I am, I get a degree of visual angle, right? And this is just a fancy way of determining like how far away something can be before you can't see it, right? And how far away it is, it's also a function of how big the thing is. You can see trees from really far away, but you may not be able to see a bird sitting on the ground under the tree as you've gotten farther away. That's all it is. Now, it absolutely the smaller that visual angle is, the harder it is to perceive detail. We'll consider the implications of that when it comes to having icons on your screen, right? Again, depending on whether you're watching this on your phone or on a laptop, you may not be able to tell what this is, right? This is the icon for Instagram, okay? Now, even if you're looking at this on a big screen, you might have to like lean in a little to tell what it is. But of course, as I make it bigger, it becomes really obvious, right? And if I add color to it, well, if you're familiar with the Instagram brands, you would like now can kind of look at this thing and be like, oh, yeah, it's Instagram. I just know from the color scheme, right? But there's no doubt that the bigger something is the easier it is to perceive. It's also the case that the bigger something is the easier it is to interact with. So there's a little experiment here. I set this degree of visual angle up to be about, I want to say, I don't remember how far I was assuming the audience was, maybe like 10 feet. But if you make the stuff on your screen too small, okay, down around a degree of visual angle of about 0.2 degrees, okay, then it takes people substantially longer to find your icon on the screen, find it and click it. So this was an experiment some researchers did where they had a whole bunch of icons on the screen and they asked people find a particular icon out of that list. Well, and at a certain point when the icons were big, they found it smaller, still found it really fast. Even this small still found it really fast. But once it got down around 0.2 degrees, the time it took to find the icon increased dramatically. Okay, so what does that mean to you? Means icons on the screen should never be less than 0.7 degree of visual angle. Okay, so what does that mean? At a distance of about two feet, right? So two feet would be if like the user is kind of holding the phone, you know, at not at arm's length, but with their elbows bent, you know, kind of normally how you might do it. 0.7 visual angle, that is somewhere between one centimeter and half a centimeter when you're holding your phone out like this. Okay, what's one centimeter? It's usually about the width of your pinky finger, right? So put your pinky finger on your phone and say, yep, I should never have anything much less than that size on my screen. Not if I expect the user to interact with it or find it. Okay, so this is psychological psychosomatic roots for one of the reasons design matters. Okay, all right, edges and boundaries. Edges and boundaries are also important for perception. Here we were talking about size, right? We're talking about size here. Edges and boundaries are important for per saving. So what are these things, right? Again, you're seeing some lines. It's hard to interpret much more than that. But if I kind of mirror them, what does your brain do? Well, whether you like it or not, this group of things is now kind of together. I've got two lines here, but they're kind of together, right? Your brain puts them together to form a bigger shape. Same thing over here. Two lines here, but now your brain has kind of condensed them together. So, and it's associated. So edges and boundaries in your app are also important. I started out with two lines. Now I've got two shapes. Okay, edges and boundaries. Edges form boundaries of both information and function, right? So here's somebody's desk where they are, I mean, I guess they're relatively organized. It's pretty cluttered. But nonetheless, you can see how the edges of things, boundaries of things, like this box here, the paper on the desk, they kind of delineate things. And you can do maybe different things with each of the different boundaries, right? So edges, that's the thing. Edges are important, right? Material design, it's really important. I'm going to take myself off the screen for a little while. In material design, edges and boundaries are very important, right? So we talked about this before. In material design, which is Google's visual design language, the thing that all Google products use, and that is supported in the design support library, the dominant metaphor is that you have paper material kind of like sitting on a desk or sitting on a surface in front of you. Material, according to the designer, the creator of material design, Matthias Duarte, material has physical surfaces and edges. Themes and shadows provide meaning about what you can touch, right? So the edges, the shadows, what can you touch on here, right? And that is what material design is trying to convey to you, right? And I think it's kind of obvious what it is that you can touch on this screen. Consider this. Contours and edges contribute to the perceived function of a thing, right? So here's three things, right? Three classes that we have with their numbers and their description, right? Now let me add contour and edge. Okay. Now what? Same information, exact same information content. But now what? Can you do anything with these? Well, they kind of look like buttons. They kind of look like you could press them, right? The drop shadow gives you the impression you can kind of punch them down. And so if something's punched up, you can punch it down. It's a button that you press, right? Even the rounded edges, right? Think about buttons that you see in real life that you can interact with. Most of them have rounded edges. They're even on keyboards, right? Even keyboards predominantly they have rounded edges there, okay? Helps them not get stuck, right? Rounded edges help the button to not get stuck. Pointy edges do help them get stuck, okay? So just by adding to this contour and edge or contour and shadow. Yeah, I can push these. These are buttons. That's all I did. I changed the aesthetic something, okay? Contrast that here with our friend the Amazon app. What can I click on in this app? Well, if you've used it, maybe you know. But is it obvious? Yeah, I can probably click on the search bar, right? These, yeah, probably. How about this? Can you click on it? Yes, actually. How about this? Can you click on it? Yeah, this? Sure. Each of these? Absolutely. This? Yeah. How about this thing? Oh, yeah, all those things. You can interact with it. You can click on everything in this app, okay? Is it obvious? No, it is not obvious. Is it a good idea to make an app where any touch that you make could open up something else? I don't think so, okay? So, but just compare it to like this. It's a little bit more obvious what you can interact with here. By the way, if you click on anything in here, the only interaction you will get is you'll get a little cursor here if you type tap the search bar, but if you tap anywhere else you are going to be taken to another screen. That's not great, right? You kind of like destroy what the user was doing even by accident. Okay, so we talked about edges and contours. Another thing that's really important for perception. Again, kind of coming back to design affordance. What we're trying to do is perceive what we want to tell the user, what they can do with our app just by looking at it, right? So, edges, contours help tell them what they can interact with. Size matters because if they can't see it or find it easily, they won't interact with it. Context also alters perception of what you can do. So, context can change the meaning of familiar shapes. Context is really important in novel or unfamiliar interfaces. Alright, so looking at this shape, what is it? What do you perceive? What is this thing? Okay, well it's characters, but what do you see? Alright, now what do you see? Now you see that this shape was, now you see it as the number 13. Okay, um, how about now? Huh, okay, now it seems to be corresponding to the letter B. Okay, so even though these shapes, look compare the two, right, they're kind of the same. Maybe it's still kind of sticking in your mind as a 13. That's okay. But certainly the context, 12, 13, 14, A, B, C, D, E, the context tells you what it should be. Okay, so you know how about now maybe everything's a little squirmy and it's hard to say that this thing is a B. But nonetheless, this line is telling you so the order that you look at it in, you know, while looking at it left to right, am I going top down, it's going to also impact how you perceive this thing. Okay, so consider this in the context of like a computer. Here's an X, right, we've all seen X's in user interfaces. Uh, what does this X do? Well, it absolutely depends on where you find it in the user interface. So here's uh, something, you know, this is a PDF form. I see one, two, three separate uses of the X in this user interface. And what the X means is completely dependent on the context that you see it in, right? So here in the form the X means that you have selected something. Here the X means error and error has occurred. You can't interact with it, it's just telling you it's information. And up here the X means close the window, right? So context, does context matter? Yeah, absolutely, 100%. Okay, here's an example directly from a user interface in a mobile app, right? So uh, when we talk about the design support library, one of the things it provides is what is known as the fab or the floating action button. If you're an Android app user, you have definitely seen these things, right, and they're meant to be actions that you can launch that are like really important, kind of like key to your app, and they kind of hover over the user interface, right? So here's two floating action buttons, one's blue, one's yellow. What do they do? Well, they've got a plus sign on them. Uh, plus means add, usually. Uh, but what do they do? You have absolutely no idea, right? Until I show you the context, right? So this is the Google Drive application, okay, so managing files. So probably the plus sign here means make a new file, or upload a new file, something in that domain. Here is a text messaging application. All right, knowing that, what does the plus sign mean here? Probably means let's start a new conversation or send a new text message, okay? So we have two identical, except for color, uh, buttons or interface elements, and it's the context that gives them meaning, okay? So, uh, where, whether this is saying is kind of like where in the interface you put stuff also matters, right? What surrounds it? That's going to convey what you can do with that information. Context can mislead as well, right? Um, here's a exit door. Uh, this is a push. This is a pull, right? And, you know, when you see a handle, when you see a flat thing, well, you have no choice. You've got to push it. When you see a bar, you are probably inclined to pull on it. That's why it is there, right? But, I've definitely encountered doors where you could push on this and open it as well. And then you have these little things, which are flat, but they're actually elevated a little bit from the door surface, so you are meant to reach behind them and pull, but they look like this, okay? So, what are you supposed to do, right? Um, context can be misleading. All right, um, proximity and shape, again, all right? So, we're talking about, um, context. We've talked about edges. We've talked about the size. Proximity and shape to other things also creates relationships and can help you understand what you're supposed to do, right? So, let's look at this stuff on the left, these dots, right? Um, would you say that these dots are grouped by column or by row? Well, I would say they're grouped by row, right? This is a row. This is a row. This is a row. I'm not really looking at these as columns because of this actual physical space and the close proximity of these dots to one another, okay? So, I group these into rows. Over here, um, they're not in any discernible order. However, I would be inclined to kind of look at these things and say that, you know, the hexagons all kind of belong together, as do the triangles. They all are kind of like groups, right? In the way that I have formed these groups in my mind is through their shape or their proximity, okay? So, can look at this in the context of the Instagram app, an old Instagram app, right? Um, let's look primarily at the right-hand side here, right? These are the pictures in this grid on the bottom right. How do I know that these are pictures? Well, they are all exactly the same shape. They are all squares. They're also close to one another, right? Look up above. These are also rectangles, almost squarish, but they're grouped together. They're right next to one another. What's clear to me is they do not belong with this group down here, and it's not really the color that has anything to do with it. It's that they are mashed together up here and they're all the same shape. Similarly, these guys up here are all mashed together. So, I think just by looking at this, these belong together, whatever that means, these buttons belong together, and these buttons belong together, okay? So, what does it mean? Well, if these buttons are interactive, I can be pretty sure that if one button here is interactive, that these other things are also interactive. If, say, up here, these buttons are not interactive, they're just informational, right? They're just showing you data. Then I can be pretty sure that these other things that look exactly like it also are just showing me data, okay? Let's take a look at the Netflix app, right? So, these things, right? Here's where proximity can create relationships, right? These things go together because they're mashed next to one another. This does not go with this. It goes with this. They're closer together. Similarly, these things go together. They're mashed together. They're close. They're the same shape. This does not go with this. There's a space here, right? They are vertically separated, right? Even though they're the same shape, right? So, the proximity of these things, these things are grouped into rows. You wouldn't, in any case, translate them into, like, columns. That this column is related to the these column, this, excuse me, these items in this column are related. No, they're related by row, okay? So, proximity and shape create relationships. Again, what is your goal? Your goal is to get the user to understand how to use your app. That is design affordance. By looking at it, they should be able to tell what they can do, okay? Here's one of my favorite things. So, this is a screenshot of, I want to say this is actually Windows 10. Not that it's terribly important, but if you were a user of, say, Windows 7, okay? Windows 7 was far and away, Microsoft Windows most popular operating system. It was nice and easy to use. It performed well. The menu model that you got from Microsoft Windows and the way that things were organized, people were familiar with it. It had been unchanged for a lot of time. And then came Windows 8. Windows 8 came out and in their genius, Microsoft said our old way of laying out the user interface, we're not going to do that anymore. Here, we're going to make everything look like this. We're going to have a big pop-up menu and we're going to have these gigantic tiles that you can click on, okay? Instead of, you know, a menu like, let me see if I can just pull it up, right? We were used to like a menu-oriented structure like this with a bar down at the bottom in Windows, right? They said, no, we're going to do away with that. Look at these giant tiles. And the reason that Microsoft went this way is because they were envisioning a unified interface across mobile, Xbox, tablet, and Windows. But the PC people, the desktop people, the laptop people were like, no, this is terrible. And so the very first thing that they did was roll back this forced kind of like tile interaction and in Windows 8.1 you could go back to something that looked a little more familiar with a pop-up menu, right? Think about, can you think about the last time a substantial change was introduced to the Macintosh user interface if you're a Mac person? The little launch bar down at the bottom wasn't always there. But that was the last big change they made, but like the bars at the top, Mac UI has been relatively stable. People do not like big changes, okay? So back to proximity and shape. What does the proximity and shape convey here? All right, life at a glance, these guys all belong together. No clue what life at a glance means. Play and explore. All these things go together. I don't even know what I'm looking at in half of these things, right? Look at the different staggered shapes here, like these are one shape. We've got some bigger rectangles. This guy is a bigger rectangle. Like, does it mean anything? I don't know. I think it just means that they're easier to click on. But anyway, it's a confusing muddled mess, right? You can click on all of these things. Do they do anything different? I don't know. Okay, so let me bring myself back here just a second. Oh, I lost my controls. Sorry, sorry, sorry. All right, let me bring myself back because I know you want to see me high. Design affordance in the user interface. So let's wrap up our talk about design affordance. You are designing mobile applications. Your app's user interface consists of many views, many of those different widgets that you put up there. Buttons, lists, texts, spinners, whatever it is, right? The edges, the contours, context, proximity, arrangement, and shape of your views on your user interface all alter how a user perceives the function of your app. Again, your goal is that when a user opens up your app and they see what's on the screen, they should know do this now. I can do this with what I'm looking at. All right, so that's your goal when designing user interface, but how you put stuff on the screen, what it looks like, where it is, really does matter, okay? And we've talked about why in this slide deck. So the design support library that we talked about, it's in chapter 12 of your book, is there to kind of help you do some of these things to make them look nice, to give them edge contour easily. Also arrange them in different ways. The grid layout, for example, is part of the design support library, okay? They can help you work on this problem of design affordance, but they're not a solution in and of themselves, okay? So a lot of concepts. I hope it's interesting to you. I hope you can find it useful. Next video, we will talk about a different element of the user interface, which is cognitive load. And we'll talk about that in the next video.