 Hello everyone, Dr. Lehman here. So, this next series of videos, we are going to focus on designing the mobile interface. So, now that we've got the tools to make our apps look the way we want, let's talk a little bit about how to use those things for good, how to put them together in a useful way. And we will also talk about the science behind principles of good user interface design. So, in this first video, let's talk about some terms that you have no doubt heard and I will use the rest of, you know, in the rest of this series of videos on designing mobile interface. Let's define them and make sure that we can distinguish between them. And those terms are UI, UX and usability. So, no doubt if you've seen any, you've probably seen advertisements for positions that are like UI, UX, engineer, which is a pretty cool and interesting job in my opinion. But what do those things mean? So, let's define these. Now, our discussion is going to be about what is design or designing the mobile interface. And design is a term that is kind of thrown around a lot. But it means something very specific. And in fact, design science and design engineering is an entire discipline, a very important one. But usually, when we mention the word design, or if you hear the word designer, it kind of goes to fashion, right? Fashion designers, of course, you know, the dominant use of that word. And so, people often equate the design of something with how that thing looks, right? So, here's a webpage that looks as if it sells, I believe, bridal apparel, right? And so, this is very fancy, highfalutin, very posh, very refined. Look to it. So, it looks nice. And you can kind of glance at it and I think maybe tell what they're doing, what this website is about. It sells dresses, wedding dresses. But I would argue that the actual design of this page is leave something to be desired, right? Because everything's kind of this almost monochromatic kind of taupe color, right? To match with the bridal dress that this girl is wearing. But, you know, like there are words here, and it says soon in our flagship in Milan and all the best stores in the world, right? This is, you know, kind of hard to read, right? Down here, you have to squint a little to see it. Even the name of this thing doesn't really stand out against this kind of taupe background. Little easier to see up here, but even the, you know, like the font and the kerning make it kind of hard to read a little bit, right? So, it looks nice, but it's design, which has to do with perception and how people can interact and use your website. Maybe leaves a little bit to be desired. But if we're just sticking to look, consider this. You know, of course, this is a poster for the Mad Men TV show. And wow, it just kind of hits you right in the face, right? There is no doubt that when you take a quick look at this, this is about Mad Men, right? The show. You may not know what that show is. You may not know what Mad Men is, but there's no doubt that whatever in the heck Mad Men is, this poster is about it, right? Sharp contrast, there's a man, there's a woman, they look like they're dressed in styles maybe from the 50s, whatever, it's about Mad Men. What is Mad Men? Don't know. This first glance, what is it? It's apparently about fashion, I think, right? You actually have to kind of glance it. Like, if you didn't know what this brand is, you would have to really maybe spend a minute to figure out what Nicole is. Isn't Nicole this person? Like, is she a designer? Like, what's going on here, right? So, and obviously between the two, the look of this design is quite striking, right? This is very subtle, gentle, soft. This is bang, hard in your face, hard lines, sharp contrasts. So very different design looks. Now, switching over to talk about applications, right? You all are consumers of mobile applications and when we talk about designing a user interface for a mobile application, we're talking about how the layout and the function of your app influences how people interact with your app. Okay, so let me say that again. When we're talking about design of a mobile application, we are talking about how the layout of the user interface and the function of that user interface elements influences how people use your app, right? And you have encountered a lot of different user interface designs when you've used mobile apps. And it's not necessarily that there's a style that wins, but there are principles we can follow. So here's just some examples of different designs that you have encountered in user interfaces the Amazon purchasing app, right, on the phone. There's a lot of things to interact with in this design. We'll talk about Amazon app a little bit later, but there's a lot of different ways to interact here, right? There's a search bar. This is Alexa, you can talk to this app. You can tap on a variety of things. So there's a lot of different interface elements to this. Here's Candy Crush, much simpler, right? The design, the look of the screen is actually rather busy, right, let me pull up my laser pointer here. The design of the screen is actually rather busy looking, right, lots of colors, very noisy, very loud, very eye catching color theory you're having an aneurysm right now. But the interface is simple, right? You just tap things, right? You tap these buttons, you tap the candies and you crush them and that's like it, pretty simple. Here's the Cortana app, it's like Siri, but from Microsoft of course. You just talk to it, it tells you it's listening, right? So there's not really any interaction here other than you opening the app and then talking to it, right? So these are all elements of the user interface design. And again, the design of the user interface dictates and determines how humans, how people are gonna interact with your app. All right, so let's talk about our terms and define them in particular. So the first one is UX, UX is user experience. The user experience is all aspects of the end user's interaction with the company, its services and its products. So UX is a big concept, we'll talk about it again in a second. Kind of UX is, if I say Microsoft, how does that make you feel? If I say Apple, how does that make you feel? If I say Candy Crush Saga, how does that make you feel, right? So user experience, like what do you get out of the thing, right? What does it do to you? Do you like it? Do you not like it? Again, at a very high level. Usability is specific to a user interface, right? So one of these things, usability specifically is a multi-dimensional quality attribute of the user interface, the UI, that includes specific things. How easy is it to learn the user interface? How efficient can you be in working with that user interface? Is the user interface memorable? Can you come back to it later and just kind of like dive right in? Do you avoid errors while you are using the user interface or does it let you screw up? And satisfaction, do you just like it? Do you like to use it? Do you feel a sense of accomplishment while you're using it? But what's important about usability and what distinguishes it from UX is usability is an attribute of the user interface. You, the developer, you, the programmer, you control the user interface and so usability falls to you, okay? All right, the final term is user interface. So the UI of your app is the set of mechanisms through which the user interacts with a system. So on the mobile device, usually this is touch and tapping with your finger. But as we saw with Cortana and a whole bunch of other games and apps, you can also use voice to interact with apps. Sometimes you, apps react to you like shaking, like if you're playing a game or like if you're in a music app, sometimes shaking your phone will shuffle the music. All of those are part of the user interface, how a person interacts with your app. So while, yes, it's true, whatever is on the screen kind of dominates the user interface, it's not necessarily the only thing. If your app has music or plays sounds, that's also part of the user interface, okay? So know these terms and be able to distinguish between them. UX, usability and UI. So let's talk just a little bit more about user experience versus usability, okay? Again, usability deals specifically with the user interface. Now usability is a component of the user experience. If your app has terrible usability, it's hard to use, it's just ugly, that sort of thing, UX will also be poor. Nobody wants to use an app that's painful to use. And it's absolutely possible as well that an app, a user interface can be great, but the user experience is terrible, right? You can have a perfectly designed user interface, but just hate using the product, right? Like a vacuum cleaner. Do you really like using a vacuum cleaner? A chainsaw, a rotor-rotor that cleans out clogs in your sewer pipes? No, nobody likes using those things, but they could have good usability. And that kind of raises another point. When we talk about design and usability, we're not just talking about apps. We are talking about anything, right? Your computer keyboard has a user interface, your microwave, your washing machine, your pen for God's sake. Everything has a user interface. That interface is how you the human interacts with it, okay? Things that hurt UX, but not necessarily usability or the UI, right? Poor usability will hurt user experience, but also things like frustration, irritation, loss of progress, the blue screen of death in Windows. You're just sitting there happily doing whatever you're doing and bang, the blue screen comes up and you've lost it, you're done, right? There's nothing particularly wrong with the blue screen from a usability or user interface standpoint, but if your operating system crashes when you're in the middle of something, you're gonna have a bad day, loss of progress, right? That hurts your user experience, right? Microsoft has a bad problem with user experience, even if there's nothing particularly wrong with the user interfaces that they produce, okay? Here's another example. Activate Norton Online Backup, okay? So this is a VIO brand of computer. VIO used to be anyway, a big brand of laptops and it comes preloaded with Norton Online Backup. And so this is saying, all right, your VIO comes preloaded with a 60-day free trial of Norton Online Backup. Great, I've got this bloatware on my computer, I'm already irritated. Let me go down to these buttons here. Do you wanna activate it? Remind me later, or activate trial. Where's the button that says, don't bother me again, right? You have all encountered this kind of user interface and it is irritating, right? You just want it gone. Stop bugging me, I never asked for you anyway. Get out of here, bad UX. Things like Norton, Symantec, these antivirus programs, man, they are notorious for bad UX, right? But there's actually, from a usability or user interface standpoint, there's nothing wrong with this screen. It's real obvious how to use it. I read the text and I pick a button, right? The button I want isn't there. The button says, don't bother me again. But usability, yeah, I know how to use this interface. No problem there, okay? You can also help UX with more than just having a nice, pretty, clean interface. We're gonna spend a lot of time in the coming videos talking about how to make that user interface nice and clean and pretty and what that means. Right now, we're big, high level UX. Things that can help UX. UX isn't just don't screw up and make the user mad. You can do things to elevate people's UX. Enjoyment, do people just like using your app? Games, is your game fun? Sure, that's why people play it. Enjoyment, achievement. Here's a screenshot from the Duolingo app where you can learn new languages. Yeah, whenever you complete things, you get nice golden eggs that say, great, great job. You've done it, so you're kind of encouraged to keep doing it, right? That's the user experience being promoted. Beneficence, that is a 10 cent word that means you helped something. You get pleasure from helping other people, right? So here's like, this isn't a mobile app. This is from, I think it's UNICEF's webpage. After you make a donation, you get this picture of smiling children. Thank you, thank you for helping. Don't you feel better about yourself now? And imagine, imagine if you just had thank you for your donation versus thank you for your donation and look at these smiling children, right? That's, all that is, is a little user interface tweak, but it improves the UX, right? Of course, if you wanna make people feel guilty, you could show sad children. You didn't donate enough, right? But it's an aspect of the user interface that promotes user experience. It has nothing to do with the usability of this page or how it's, how the user interacts with it. And finally, aesthetic pleasure. If you're like playing a video game, man, this just looks cool. Or I really like the music on this stage or level, something like that. I just like using it, man. That can definitely improve the user experience. Okay, so usability, which we are gonna talk about a lot more in the coming videos, and user experience really are influenced. They depend on the design of the user interface. How do people interact with your application? Okay, so you, the programmer, you have total control over the user interface. How that thing looks, how it behaves, that's entirely up to you. So, what we're gonna talk about this remainder this week and the remainder of these videos is why design matters and some tips for doing it the right way, okay? So, first we're gonna talk about in the next video, perception, how people see things and a concept called design affordance. Then we'll talk about cognitive load and attention, right? So, when people are using your app, what effects, you know, how well they can use it. And then finally, we'll talk about eight rules for effective user interface design that address issues of perception, design affordance, cognitive load and attention, all right? So, that's our introduction to UI, usability and UX. In the next videos, we're gonna kind of dig into some of those concepts. See you then.