 Hello everyone. So we've spent the last couple videos talking about the human principles behind design and why they are important and Perception and design affordance and all those good things now. Let's turn to something more practical Which are the eight golden rules of interface design? So these are things for you to kind of keep in mind to have printed out pasted Sitting next to your computer no matter what you're making whether it's a web page a mobile app any old program These are all good ideas to have in mind. So These are not my ideas. These are These come from a book by professor Ben Schneiderman. He is currently at the University of Maryland He's a member of the National Academy of Sciences. He is a he is a big wig so to speak and way back in 1987 he published a book called designing the user interface where he explored He's part computer scientist part psychologist He explored what it meant for computers to have and computer programs to have good user interfaces And if you think of the timeline In the 80s there, this is when GUIs were really just kind of emerging as the de facto way of interacting with computers So he's one of the pioneers. He's been with it a long time And these eight golden rules they were first published in 1987, but you can still find them Here's his more most recent book designing the user interface strategies for effective HCI From 2016 they are still relevant today So if again if you're a user interface person a UX person these books belong on your shelf So they're still relevant and that's what's amazing about them So we're going to go through them and we'll show some examples from the mobile world Alright, so rule number one strive for Consistency in your user interface so you should have consistent sequences of action consistent terminology color layout emphasis font, etc. In other words, don't go all Crazy and wild with the different things you can do The idea is that users are going to expect and associate Certain things that they see with the actions they can do in your user interface So color, you know traditionally red is bad green is good Unless your color line, but don't mix those things up. Don't try and get cute and redefine Norms that people are used to And if you do it one way and your splash screen your first screen do it that way on every other screen People are going to look for example for the menu options in the same place on your screen or Search bars search bars should always be in the same place on your screen Even if you're searching like different elements the submit button Where do you expect to find the submit button? Is it like bottom center bottom right make it consistent? That's what he's saying exceptions to the consistency rule Such as requiring someone to confirm. Hey, do you really want to delete that? They should be comprehensible and limited in number. Okay, so a nice clean consistent interface throughout and if you got to break that consistency it needs to be important, okay? Alright, so that rule is probably Kind of intuitive you've probably seen it before and certainly modern apps really strive for this And especially, you know if you are the only person writing your app This is easy to maintain But if you get into like a big system like I don't know I'm thinking Microsoft Windows or a big platform like Google This can be a lot of work to maintain that consistency, but it's what your users expect. Okay, so Don't go against that grain All right, it helps with learnability with memorability those important cons components of usability All right principle number two seek universal Usability so recognize that your app whatever it is is going to have diverse users. Okay design for plasticity Be flexible facilitate transformation of content. So in your Android apps We have learned that you need to use when specifying sizes of things you should specify them in terms of sp Scale independent pixels and Dp density independent pixels let those things grow and shrink According to the preferences of the user the sp in particular We use that for text that is rendered on the screen Some people set their text size in their system settings to be large because they can't see they can't read tiny text, right be accommodating of that requirement if you hard code that like certain things need to be like if you've got Three pictures and then some text if you require those three pictures and then the text Well, what's gonna happen if the user like has things all zoomed in and blown up so they can read because they're they have poor eyesight It's probably gonna ruin things right so that's what he's saying try to design for diverse users Diversity is not only a function of like physical characteristics whether You could have novice or expert differences, too, right? Once you become an expert in something you learn to use it more efficiently All right, whereas if you're a novice, maybe you have no idea how to use this new app And you should have some sort of training, but if you're an expert you want to skip that training, right? You've probably encountered this in apps that you've used Usability universal usability novice to expert age ranges young to old Disabilities are your users blind? Can you support blind users? What does that take that notion of supporting folks who are disabled is called accessibility? international variations is your app targeted for an international audience if so You need to accommodate them. It's all your text hard-coded in English. Hmm. Probably not good if you're writing a tourism app or something like that And technological diversity people are going to be using your app on different devices Some people might have a tiny little old screen little three and a half inch screen other people might have a five and a half inch screen Consider that right how bad is your layout gonna look if suddenly you designed it for a screen this big and now It's being used on the screen this big Okay, what can you do add features for novices such as explanations features for experts such as shortcuts and faster pacing Okay, here's it, but you can go wrong with that too I'm gonna see if this website still works if I click on it here Good question. I wonder if it will load in Firefox, which is my browser. Yeah, okay, so If you open up for example Microsoft Edge, which is Microsoft's new web browser you are encouraged to go to this tips page To learn how to use it, right? And if we look at this tips page now by the way you have No doubt let me zoom in a little here You have no doubt encountered an app that does this that like the very first time you open it It just like shows you how to use it or has a couple of screens for you to flip flute through with some instructions, right? Well, this is that same thing go here and learn how to use it But you know in typical Microsoft fashion, they overdid it, you know, there's a level there are two tips here There's all these many different categories show all 46 tips. Yeah, let me spend time learning all 46 tips Like I'm gonna remember that right so it was a good idea you know show the novice some things they can do but 46 really do I really need progress? Do I am I really gonna feel better if I learn all of Microsoft Edge's tips? I don't know maybe right, but some ideas Bear in mind you're gonna have a variety of users experts Novices young old people who can see people who can't see you want to try and design around their needs Now you're not always gonna be able to do that, right? Plasticity is saying recognize diverse needs of users and facilitate transformation of content Here's an example where that would be pretty tricky, right? Here's the New York Times crossword puzzle app Now imagine that you have a person who cannot see How do you make a crossword puzzle for a user who cannot see I? Don't know the answer to that. That's maybe there is no good solution for that Maybe there is I don't know a good idea would be to ask someone who cannot see How they do crosswords if they do crosswords would they would like to do crosswords that sort of thing, right? So I don't know it's not it it sounds good designed for a variety of people But it's not always going to be the case that you can do that Okay tip number three or golden rule number three offer informative feedback For every single user action, there should be an interface feedback. Okay, so Every user action now this the feedback can be modest, right? Like so if a user taps on a button, you should let them know that they clicked on it You don't have to have a big angry pop-up that says something such-and-such selected But some sort of little feedback you you've probably tapped buttons and apps where the phone vibrates a little bit Or even the button will change color just for a minute just to let the user know that their interaction was received So for example right feedback has many different forms here's some buttons some material buttons, right and they change just subtly Based on what the user is doing So if you hover their background color changes just a little bit if you have selected it But maybe like dragged yourself off of it It gets a different color if you're pressing it you get this kind of bubble that expands, right? So these are like subtle feedback that the user has done something, right? What happens if you don't give them feedback if they don't know that they've done something? Well, they just sit there mashing the button or they get frustrated and they don't know what's going on and Maybe your app is maybe a little slow So if they're sitting there mashing the button, but it takes you a second Like maybe it's downloading something from the internet and you're not letting them know that They're gonna get frustrated and it may screw up things for you internally as well code wise If they do that So this is like very subtle feedback. There's more dramatic feedback. So this is a toast, right? This is a toast in Android a little pop-up message You save you're in the midst of editing an email, but you don't send it just let you know Hey, you backed away from this email. You were writing. I've saved a draft Right pop up and then it kind of fizzles away later Then there's certainly more dramatic feedback like the user sends a text message or the user Uploads a photo to Instagram something like that the whole screen will change and it'll let you know Yeah, I got it up there. The message went out. Okay, so feedback can have many different forms The principle though is always offer feedback to user actions All right Design dialogues to yield closure. Okay, this is kind of a neat one. I'm gonna Take myself away from the video for now Design dialogues to yield closure. So what does that mean? Sequences of actions should be organized into groups with a beginning middle and end so if you have an app that can do something complicated like order something from Amazon or Add a new song to a playlist or something like that Make sure that the dialogues the actions the sequences of things that people do Clearly have an end and that you clearly communicate that end to the user It gives the user a sense of accomplishment a sense of relief the fact that they can drop Contingency plans from their mind. It just kind of relaxes their working memory, right? So So here is the familiar Amazon app Amazon is a good or buying something online. It's pretty good example of what we mean by Designing dialogues to yield closure and there's a clear start middle and end So first, you know, you've all been through this you start out by searching for a thing and then you pick it from a list Now I'm kind of like in the middle. I'm reviewing the thing and I say yeah, this is the thing I want to buy I Add it to my card and get some feedback to that point. Go check it out I Get annoying little pop-up ad. That's okay. I'm used to those by now and finally I go in to place my order Right and I click place my order and I get Something, you know some feedback that that's going on now. I apologize. It's actually cut off the end of this video Where it says yeah, your order was received and now you're done. Okay Imagine that that was there, but you know once you've finished your order, you know that you bought it, okay? So let's look at an example where that's maybe not the case. Whoops. Excuse me. Let's watch this guy Okay, so this is a weather app and what I'm going to do is go through the process of adding a new location So my weather app keeps track of a couple different locations. Let's add a new one Montreal It's gonna be the the city that I add that I want to keep the weather for and Okay so If you were playing paying real close attention, you may have noticed that a couple of things changed One is Montreal is now showing up here and it's in my list But you know, I went through this process of adding a new City to my favorites, but unless you were paying attention The fact that you successfully added that city is probably Not so obvious right and in fact, I didn't notice it when I first did it in this app I was like my was I successful and I tried to add Montreal again Not even noticing that that name had changed up there now Maybe that's just me being unobservant, but some sort of feedback that said Montreal added to favorites would have been nice, right? Especially, you know, if you watch it again, the only thing that changes is The text let's watch it one more time at the top I think maybe the the temperature changes as well, but the background image is the same. Yeah Okay, these things change these text things, but if I wasn't looking at that precise instant I may not know this. Why not a little more feedback than that? Okay? All right, let's go All right next golden rule prevent errors. Okay This seems obvious, but it's not obvious Usually as programmers when we are thinking of errors, we're thinking about our Coding errors and did we get the logic right? Well, even when we're thinking about those kinds of errors as a programmer We're thinking about the sunny-day scenario We're thinking the user is going to use our app to do the things we intend and if I get the logic right, you know That's good for me But the thing is that users are going to try and use your app in ways that you never Intended and you think need to think of the app from their perspective Assume that they will use your app the wrong way. Okay? And try and design the interface to prevent them from using it the wrong way Okay, design the interface so that users can't make serious errors For example gray out menu items that are not appropriate Do not allow alphabetic characters in numeric entry fields, right? Why should I be allowed to type in ABCDEFG for my credit card number? If the user does make an error a lot provide them with simple constructive specific instructions for how to undo that error If the user does make a mistake Try and leave the user interface Unchanged. Okay, let the user recover from it prevent errors people will make mistakes And it's not necessarily that they're even making a mistake. It's that you have assumed They will use your app in a certain way and so that assumption is on you So let's just look at some examples here, right? here here's some errors that you can avoid in a button-centric UI, right? So this has have some yeah, it does have some animation right one of the common things that you hear that you see on websites and in apps is don't hit that button again payment is processing or Submitting your information. Please be patient, right? Here's an example of how to prevent that in the UI this person is paying for their phone bill and Down here. This used to be a Pay button Well, once you hit the pay button the pay button changes to a processing button So there is no chance whatsoever that the user will hit the pay button twice in a row This user interface is preventing them from doing it by simply taking that button away. That's something you could do in an interface Here's an example from the Google Play Store When you install an app You probably need to wait until the installation process finishes before you use the app or before you reinstall it, right? So what happens here? When you click install the install button just completely goes away and you get this download indicator You can cancel the download. That's fine But under no circumstances. Can you try and install this while it is currently already installing that probably would be something that Android operating system wouldn't like right now that it's installed. You can do different things. Okay, so here is the user interface controlling By virtue of the buttons that are being shown what the user can do with the interface So that's pretty cool. It helps the user stop making errors. Don't Install multiple times. Don't uninstall Until you have finished installing. Don't allow the user to try and open the app until it's fully installed Okay, so if you've got these kind of long running Things that have to happen in a mobile app like downloading data or uploading data Make them complete until you allow the user to do something with that data Okay, step six prevent easy reversal of actions Okay This is a big one and this is one that apps Generally do a pretty poor job of implementing Okay, as much as possible Accidents to be reversible This feature relieves anxiety since users know that errors can be undone and encourages exploration of unfamiliar options Okay, easy reversal of actions. Okay, so here's an example a good example of doing this I have here a texting app Okay, and One of the things this app does which is maybe not so good is it makes it very easy to delete entire Conversations say a conversation you're having with your wife. So let's play this out. Okay, so I've accidentally I've accidentally archived or deleted the conversation with my wife Not smart, right? But what does this app do down here a little snack bar pops up and there are great right There is a great big undo button. I have used this right. It was actually too easy in my opinion to delete that message thread But it thankfully lets me undo it very quickly I click the undo button and the conversation is back. All right again easy reversal of actions This is easier said than done to implement it a lot of times actions are concrete And irreversible and if they are reversible It's usually not trivial to undo them if you like say I Uploaded a photo to Instagram and now I want to delete it on the interface side that looks easy But the number of steps that are required in the programmers logic to actually unroll And upload you got to contact the server and say hey this thing I just put up I need you to delete it and then I need to get some confirmation that you deleted it That stuff becomes really non-trivial when you go to program it and you all will get to experience that in your semester Project, okay, but it's really it seemed simple from the user interface perspective. Yeah I should be able to undo stuff that I did But it doesn't always turn out to be the case when you go to code it and That's frankly the reason why it's not coded as much as it should be All right rule number seven wind and down keep users in control Experience users strongly desire the sense that they are in charge of the interface and that the interface responds to their actions Okay, if you have you have all done this you have all used an app where you click something and then something pops up in front of your face or You're scrolling through a website and you're about to click on the thing that's interesting to you and an ad pops up Man, that's annoying. That's taking control away from the user Or users don't want changes in familiar behavior. They are annoyed by having to type in the same thing every time This is a big problem in security land, right? How often are you asked to retype your password people hate doing that? So they make their passwords safe and easy to type or insecure or you just stop using that app Difficulty in obtaining necessary information inability to produce the desired result Basically people hate big changes in Their app interface once you get used to a thing you like it to stay the same I talked about this a little bit last time, but it bears repeating. Here's Windows 7 start screen, right? You've got the task bar down at the bottom. You got the little pop-up the window itself This is very familiar metaphor. This is what users of Windows 3.1 and Way back in 1992 all the way through Windows 7, you know in 1997 no it was later than that the Windows 7 came out right it was like 2007. Yeah, 2007 for 20 years, this was the user interface and then Windows 8 Give me a break. Why you've got people ingrained in that. This is what Windows is look the same for 20 years almost And now you're gonna switch to this Total riot everybody hated it. Okay So Keep users in control If the users get rid of pop-ups forget it pop-ups again should only be for like really exceptional things like are you sure you Want to delete that but ads? Hey, you click here to get access to this new feature games are really bad at that Hey, so so and so if you click this you get six more coins Really bad users want to be in control. They don't like feelings of being out of control And they will abandon your app if you change things and take control away from them All right final thing Reduce short-term memory load. This is directly talking about cognitive load and attention Avoid interfaces where users must remember information from one display and then use that information on another display in Android land this means ask, you know, if you can carry information from one activity to another through an intent You should do it right don't ask users to remember what they selected on a previous screen Give them a little bread crumb at the top of the next screen that says hey you selected Maybe you're ordering a pizza right and the first page is pick the size of your pizza Okay, 14-inch pizza go to the next screen to select toppings Well, the first thing at the top of that topping screen should be you picked a 14-inch pizza Okay, now I remember I don't have to remember how big the pizza is Things like cell phones, you know, we're talking about he's talking about cell phones We're talking about mobile devices smartphones here cell phones should not require re-entry of phone numbers Yeah, you got a contacts list. You got a favorites website location should remain visible. Where am I again? Put the URL at the top right of your page Lengthy form should be compacted to fit in a single display if you got a great big form and you got a scroll through to fill it out People will forget what they were doing or what they entered at the beginning, right? You like to double check your work as well Okay, so these are the eight golden rules and they will serve you well no matter what user interface you are designing Now embedded in these eight simple rules, not they're actually not simple rules. They're the eight golden rules Embedded in them is a lot of implied logic that you the coder will have to think through It's not just how you arrange your user interface. It's what functions appear on each page How do you allow people to undo functions on a page? Making the user interface more intuitive can mean and frequently does that the logic of the program becomes much more complicated Okay, so Particularly for things like error recovery Alright, so that's a quick overview of the eight golden rules. They will serve you well in any application You are designing so I'll just sum up remind you of the importance of design in the user interface We are focused now on usability Usability is a attribute of the user interface. How you build the user interface Determines that usability which is learnability. Can someone pick it up? easily Efficiency can people use your interface to quickly accomplish the task with the minimum number of steps Memorability if somebody puts down your app and comes back six months later. Can they use it? Just like they did before Low error rate. Don't let them screw up guide them on the path of accomplishing the task and satisfaction make it a Joy to use right can have a good design But like make it look nice make it aesthetically pleasing make people feel like they have accomplished something when they complete the task Okay, the goal of designing the user interface is to make it easy to learn and remember Through good design affordance make it efficient and error-free Reduce the cognitive load and keep the user satisfied. All right high level Description of designing the mobile interface, but we will take these lessons and we will apply them to your group Project. That's all for now. Take care and have a good rest of your week