UX Design Intro : Principles of User Experience

1. Intro to UX principles : Hi guys. In this course you're gonna learn the six principles of UX design. And you're also going to learn about the UX process as well. Now, this course is really good if you want to kick-start your UX career for just starting off. And also, if you're more mature season designer, it's always good to come back and just check the Process, Check the principals to make sure you're kind of all going in the right way. So once you've learned the six principles, you'll be able to come and look at your own work and then say, right, I've applied it here, here and here or missing. This principle is perhaps quite snot working. And then you'll also be able to look at other designers work and say, apply principle number 12 or whatever. And I like having doing that or maybe they're missing something. So if you're critiquing a junior designers work can say, OK, right, you're missing principle number one, you're not really designing for user, you're doing it for yourself. And this is gonna give you a structure that gives you feedback. So we're gonna go step-by-step through the six principles of UX design. And we're gonna talk about the best practices of an English show you how to apply that principle to your own work. Now, once we've done those six principles, we'll then move on to the process of UX design. And this is an overview of the process because obviously if you go deep into every single part of the process, that's gonna ask him to tell him to a lot more than just one cause. I'm James, Kristen. I'm the founder of a bridge Tegea and I have 18 years experience now. I started off my career designing record sleeves and Manchester and also in the dark or bays are designed websites in flash. And then we'll move on to HTML. I then moved to London. I work some big brands like Virgin. And then after eight years of living in London and working there, I moved to South American. I work for some fast-growing tech startups. And that's where it really got my teeth into UX design. And hopefully throughout this course I can bring out some of the insights have learned over those 18 years. And they are given to you. 2. UX process: Okay, so let's talk about the UX process or walking through the process I take when I've gotten of time and resources. And I know that everybody will have their own take on this. And there's lots of different kind of processes floating around the internet. So this is loosely based on design thinking as well. Another thing I want to stress is I won't be going too deep into every section. So the section on user testing, I won't go into too much detail on that because that could be another glass and actually have another glass on that. But I'll just give you an overview of the whole process so then you can go deeper on each section of that. Okay, so first step is to understand the challenge. This is probably the most important part because there's no use going into a project and thinking you already have the answer. And also the clients, sometimes things like that as well. Sometimes a client will come to you and say, I want an app because, and then you're like, whoa, actually this sounds more like an editorial website. Perhaps that's better and maybe nobody will use axis not gonna sticky enough peer work returned to it. So you've got to come in with an open mind and delve deeper and ask the client enough questions to understand kind of what's the best way to resolve this problem? It is a website, is a social media campaign, or is it an apple? Then once you've done that, then you can start plan you planning your projects, and kind of start to think right, Harlem and do my research. How much resources slide dedicated to this project? So in the next step, step two in our process is research. And this is going to help us, again, empathy with our user and then see what's going on in the rest of the world, the rest of them markets. So let's talk about some user interviews. Once you've found out what she spoke to the client, then you find out who the audience is, then you can start talking to them. So if we, let's say talk to five people, then we can start generating. And I've used the persona's, we can start making a list of challenges and problems they have. Obviously, each project you do, you're going to probably want to ask slightly different questions, but I have a few questions that kind of crop up most of the time when I'm doing projects. And the first one is, I always like to ask the user, what are you trying to achieve here in this process? What do you wanna do? Why do you want to do it? So let's take an example. Let's say a ride hailing app. So I will say, I'll ask a question that will be, what are you trying to achieve here? And the first reply will be, I want to cover, okay? Now you go with deepen awesome, more. Why questions? You say to him, Why do you want to cover? And then he say, well, I want to use a cab or hela power because I want to pick my mother up at the airport. And then you can ask again. You can go even deeper. You can say, Why do you want to pick your mother for the airport? And then you can say, well, you know, she's traveling for first time, she has mobility issues and things like that. And then you start into discover gonna love him. Really interesting insights about the user. And then you could possibly help to use it even more with these kind of deeper insights. So if it's something around mobility issues. Perhaps you can build that into the app. Maybe the taxi. You should have an option to have a taxi that can take a wheelchair perhaps. So again, going a bit deeper than I want a taxi. And you can go into that. I wanted to taxi for my mother who's 80 years old and needs a wheelchair. And you then you tailor design much more tier uses. Another common question is, tell me a bit more about how you usually carry out this process. So you would say, Okay, right, you have an app here, Tim, about what app you use and how you go about it. And then you can start to move on to other questions, Such as tell me about the problems you usually have. All kind of friction do you have when you usually use this app to hail a taxi? And then you can start writing all these down and say write these users have these problems. And then you can move on to other things like, what do you particularly enjoy about this? So you can have a kind of positive and negative kind of column of likes and dislikes their. Another question I like to ask is, what do you value in this process or what's important to you? So, for instance, let's say you're user logs onto their bank, on their desktop. You ask them, what do you value in this person? What's important here for you right now? And they might come back and say, well, I really value security obviously. So again, that's a, I can write that down, creates something. Or I value being able to see the latest transactions very quickly, or I valued aim to search their transactions I had a month ago. So then you can really find out what's important for your users. After that, you just want to get to know the user a little bit so awesome if you personal questions about how old they are, what kind of job they have, any hobbies. And then maybe you can ask them questions about what kind of brands do lie. Clothing brands to associate with or whether other apps or websites to use the similar. And this is just kind of give us an idea of the kind of person that uses our services and it helps us build like a mental picture in my head of h2. This is one good thing to do once you've got enough data and enough information on your users is to build a user persona. And this is a, this isn't a real person, is just a profile that's kinda made up for more human tissues. And it helps us empathize the values are. So we can then say, Gianni wants to use a ride hailing so his mother can come visit him. So something like that. So rather than say user one, blah, blah, blah, it's now Donny and we know who John ears and I had. One floor with directly asking users questions is. Sometimes they will always tell you the truth and then sneakily uses lying to you. But obviously if you ask them about their job, they might say that dogs actually are. They might not always give you the truth because they feel uncomfortable. So another good idea is to kinda go online, look at some forums where these user hangout and look at the kind of things they're saying. Look at what kind of problems they have. Where they're not too embarrassed to admit it to somebody in person. And then you can gain some kind of deeper insights there. So once you've spoken to your users, and now we can look at the market and we can start to look at similar products. And one thing I like to do is I like to have a document where I have white. These will look pretty good things, the best practices. And we can maybe take some of these or do our own version of it. And then here are the opportunities or the things that other apps or websites or missing. And then that can help us build out a kind of functionality document. And it's also good to do some research into kind of the market, the styles, kind of colors, typography, and build up a kind of a reference document for when you're doing your visual designs. So there's lots of research you can do, but those are the main ones I would do. You can go deeper into other types of questionnaires. You can take data online, you can see how all the users that use a ride hailing out, when do they take it? So again, that might be quantitative data you can find online. But yeah, you can use a lot of different influences in your research. I'm not gonna go into all I'm here because it's just trying to give you an overview. Ok, so next up is step three, which is ideation, idea making. That kind of fun parts. So here we've got all our background. We know who our users are, know problems are, know what the time to achieve. We've spoken to a client, we know what the restrictions on our project. And now it's just a case, a sitting down and just scribbling away on paper, just kidding lows and Mozilla ideas down. One thing in this process I find really useful is, is to create ideas without judgment. So just kind of bandana ideas, bom, bom, bom, bom. And then once you've got, once you've exhausted all the ideas, then just take all your scraps of paper, then start filtering. Because I find that if I'm trying to come up with ideas and I'm judging them the same time. I feel very limited. So it's it's best if crate kind of without fear and then just filter them later. Because you might come up some crazy idea that's actually really, really good and you can always test that later. Okay, step four, prototypes. So we've now chosen our favorite idea. If you've got enough resources, you can even 2s2. But let's say you just chosen one idea and you'll make a prototype. And now a prototype is just a kind of a version of the product that has limited functionality that you can test. So you can use software such as fig, my sketch or XD to mock something up to a sufficient level that kinda looks real. And you can start testing that they're basically So yes, just a quick prototype. Okay, step five, 5-4. Step five testing. Now this is another part I really, really like because there's been so many times when I've designed an app or website, I thought this is amazing. I don't need to test this. And then you put it in front of the user. Oh my god, I can't believe I didn't see that. And then the users dislike. How does this work? I don't understand. And you like, that's really clear now. But when you're designing your so close to the design, you can actually kind of see those arrows. So when you're testing, it's really a good idea to write down. Five is six kind of main functionalities you wanna test. And then you can create some kind of user stories. So when you're writing user stories, you wanna give them a little bit of background to why the carrying out the task. So let's see an example. We're going to use like a ride, ride hailing OR ride-sharing up, let's say as an example. So what you'd say is background. Your mother's arriving at the airport at 1pm. And then the task will be task and send the taxi to the airport for 01:00 PM. And then you can then watch your user go through the task. And it's really important that you don't guide them here and you just observe them. And then you can see when there's a bit of friction or when they don't understand anything. You're going to ask them to speak out loud, say well to thinking. But sometimes they're just pause and a bit, a bit of silence. And then it's really important to see what the user does and not what they're saying. And that's why a lot of time we record it and we can go back and look at the notes and look at the videos and see bright the users having a problem there that the thumb was hovering over that button and then they went to this one. And then you can use that to amend your work. Ok, so next up is making amends to your work. So you've done your user testing. You'll probably have a document of the kind of failed and past tasks. And then you'll have loads of comments down the bottom saying user one, confine the send button or user to found the checkout current, but it just took them a little bit too long. And you might even have some suggestions in there saying, move the button up, make it a different color, whatever. So then you can start to kind of put all those changes into your product before it gets coded. Because if you start to develop your products and it has these areas and it's gonna take a lot more time than you originally spent testing it than to recode that and redo it. Or it could actually go out into the market with all these errors and that really hurt your brand as well. So again, few minutes doing user testing or some guerrilla testing, some friends will save you a hell of a lot of time. So that's a quick overview of a user experience process. There's other processes. There is, well, this design sprint, which is pretty different way you can go through a process in five days and make a prototype very, very quickly. And then there's something known as Lean UX, where you basically come up with an idea, make it, and then just test it. And you can test it out in the market. So some people have this idea of, right, I'm gonna make an app and I can get out to Mark and I can do some analytics and I can learn quicker than doing the research, doing user testing and going through it that way. And it all depends on your clients, your preferences. I tend to mix a few of these, so I've seen how useful it is to actually get them to market really, really quickly. And you look at the data coming back and saying right, okay, this page isn't working and he quickly do an iteration, get up. And CFF works or not. And sometimes that's a lot better than going for a long drawn out process. You can do is I send called AB testing. So when you have a product that's quite mature, you can start to do different versions of it. So let's say you have two versions were checkout page, let's say one with a red button, the blue button. And then you send those two designs to 50% of clients or customers will have the red button, 50% other blue. And then you can see which one converts better. And the more testing you do, the more optimize your website will be. As well as I will just like to add that when you do use a testing, it doesn't have to be a long drawn out process. You can Just two quick gorilla testing with friends or take a prototype, go down to a cafe and just say, Hey, can you just have a quick trial of this app when I look over and those few minutes, you spend testing something can really, really, really helped you iron out the problems in your product very, very quickly. So last of all, I just wanted to kind of iterate the UX process. It's not set in concrete. You know, it's there's no such thing as one UX process. Everybody has their own way of doing it. Every company has their way of doing it. And there's no right way, basically. So if you work for a small, fast-moving startup, it's sometimes it's best to kinda get your ideas down, making it and test it and just go, go, go, go. But let's say you're working for a big multinational that has lots of resources. You can have teams working in parallel. So you can have a team dedicated to user testing and analytics team, UX research teams. So you can kind of all going to go for it together. Whereas if you're just a team of like one or two people, take you quite a long time to kind of go through those steps. So you just adapt it and use common sense and Hamlet day adapted to your needs. And then yeah, you can change it at thing and your own ideas. And but this is kind of the process I would take. And please feel free to take it and just as he like. So it was quite a lot of station. So I've produced this graphic to help you kind of keep in your head basically. So step one is to understand the problem. Then you research. So the research the users, the market. And you go on to creating ideas, create a prototype, and then you test it. And then once you've IMAP, ironed out any other kind of problems, you can either do another animal ideation, you can prototype it, then you can launch it. So that's the kind of basic UX process. But once you've launched, she don't want to go through that all again. So when you've launched it, it would be more like this or B, launch. And then you can analyze. Then I get some data on what you've got and then iterate and then go back to launch. And he's doing this kind of quick cycle, going round around optimizing your product. 3. 01a Design for your user: number one is designed for users and not yourself. Now this is a bit of a mind shift for some designers. I know. When I was studying at university, I really wantedto create things myself. And I was thought I really love this new style. I want to try this new aesthetic, and I really look this kind of, uh, Styler design. So I would just produce work for myself, and it took me a long time. What's going to the industry to get my head around this and can detach myself from my own likes on start producing work that's tailored towards the needs of the user and not yourself? You need to put the user at the center of your design on designed for their needs. Now what we have to do, you have to get to know I user to get to know what they're trying to achieve, what the problems are, where the friction areas are. So one of the best ways to do this is to do some interviews with them. Some of the questions we might ask car uses our ability, background who they are that age. A bit of the day to day life on. Then we can go a little bit deeper and say OK, water your frustrations using this particular type of product. What are you trying to achieve? Why using this? We can ask them why a few times, maybe 25 times. And then what this does? This goes deeper and uncovers bigger truce around. Why they're trying to do something. One thing not to ask is, what do you want? It's your job to resolve their problems. So you really gotta understand what the problem is, and then it's your job to solve it. So this goes back to the Henry Ford quote off. If I ask them what they wanted, they would have told me a faster horse. When we start asking why a few times a bit like a naive child, it uncover summer. Quite strange, bigger truths behind the problem. So here's with examples here. This'll year we were designing a money transfer up for Africa. We decided to ask some of my users Why five times So the first question Waas, what are you trying to do on? They replied, Transfer money. So then we asked, Why do you want to transfer money? Um So when they said show my family in Ghana can have money, then we asked, Why do you want to send your family and Ghana money on? Then they replied, so they could be independent. And then we asked wide to They want to be an independent or why they want to spend money independently. And then they reply to buy a laptop for my little brother on. Then we asked, Why would you like to buy a laptop for him on? Then? They replied, so he can learn. But college economic have influence from outside on. Then we ask, Why again? And then they said, Well, this is toe improve his life so we can see how you got quite be quite quickly there. Now we've got quite deep down. We uncovered some big problems that we probably can't resolve the money transfer at. But we did find out some really interesting things, so we found that they wanted to buy a laptop on. Maybe money transfer isn't the best way to do that. So we thought we get out of functionality work, have a virtual carton. They can use that virtual card to buy goods. Another thing we could also do is we could put a charity that helps with education Africa. So we're not directly helping their end goal the user. But we're supporting it in our way. Now we've got to, you know, I user, we can do a little bit of other research as well to support us. We can ask them what kind of TV shows, what websites they like, and then we can what's thes and then gaining, understanding a bit more about their culture. So once we got all the information, we can create what's known as a use of asana. This is a fictional character that we used to help his empathize with the user. Now this is based on somebody would typically use off product on. We talk about things like a bit of other background. Well, the story is the age location job on. Then we go into things about the frustrations and problems maybe some challenges in their life and then problems around using the service we want to provide with them. Then we also speak about the objective. So this is why they want to do this. Why they want to use our proverbs. What the child to achieve and then to give us an over idea off the style, we can put some of the kind of brands they last. Well, we're gonna give this person a name. Let's call him Joe on the type of user they are. So where this is going to be creative professional users? This is a really clean, well, nice designed user profile, but you'll just have to be as nice as this. You can do it quite quick on 30 and stood up the same results. This is designed like this because sometimes we like to show the client, so we need to sell in the process when we're producing our designs. If we have a user persona, let's say, is called Joe. We can ask ourselves questions like, Do you think Joel understand the logging process? Or is this useful for Joel on? It just helps us empathize with our user 4. Feedback: How's feedback shown? One way is very simple is like a haptik, but and that's a real bottom, so you can feel it when you press it on. But that means, you know, you press a button and it's warm. Problem Touchscreens House. When you touch a touch screen, you don't always know whether that's working. You have to visually see whether you're touching a button on. The good thing about the classic button is you don't have toe see the interface to know you touched that you can feel that one area where haptic feedback for touch feedback is really useful is when you're driving. So I imagine you're driving along. Obviously want to concentrate on the road, but touch of a button. Maybe it's sound control, or it could be from Bab. You really don't want to be touching touch screen. You'll have no feedback whether you've actually touched the bottle, not you have to physically look at the interface and see whether it's reacting. You know, where's if it's a real But you can kind of feel around world concentrating now when you're talking about and you should really change the color or even a website when you roll over it, you should have a hover mode there on that lets the user know that when the mouse is hovering over that, if you press sitting, that will do it when you press it, you should also have another color as well. Toe. Let them use know that they're actually pressed it, and I haven't click. Just off it out of the way to send feedback is to give the user message. So some micro copy up to sending a message, just something like your message has been sent. Or you can add a little bit of personality to that as well. If your brand is aligned that way, once you click on the page and it's loading, you can't little the informational that content, right, that kind of at the same time. So you might have to display some kind of freeloaders, or what content my look like on this will just give their user feedback to let me know that content will be loaded here. But where it's coming soon, No way to get feedback is sound. So on the Mac when you delete your your been your papers country nice, and that lets the user know that that file has been deleted. Pick back in UX design is really important. It lets the user know what's going on on. Stops him from getting frustrated. Just imagine the shore tapping a budding like this. And it's like, I don't know that the bottle hasn't changed color. I haven't got a sent message. What is going on on? You could have just sent that message 20 times to your boss. 5. Digestibility: theme is Digestibility. Now your brain should have to expend a load of energy, kind of figure out out what it's looking at because most people can only remember right about seven things in our working memory, plus or minus to so minds, probably to like never about everything that I'm looking at. Don't make them sit there all day trying to figure out what's on the page. There's nothing worse than going toe. A webpage on up has a wall of text. You're just not going to read it. So if you do need to have a lot of text on the page, you can break this up with So Petters or icons, you really do need a good hierarchy in the design here. If you have a really long form, what you might want to do is to break it up into a number of steps. So when the user comes to it, it broken into little chunk sizes that seizures of digest. So just imagine seeing a massive barbecue. Things are gonna get all that. Okay, that's great, but it's a lot easier to eat that it's broken down into little parts. Good design should be scannable he should be up to see what the pages about, what you have to do just from glancing in it on. If you ever watch the users go through websites that work spend a very long one there. Sometimes they can spend a little is a couple of seconds on that speed their schools Incredibles. Just look down. Look of information they want to read on. That's it. If you use, it does come for pated looks information on. The likelihood is they'll bounce straight off. Let's have a look. An example again. So this is a website for a box that you can rent that? Could you, uh, WiFi while you're traveling in different countries here, So the process is actually quite long to rent so on. You can see when you come to the form. There's a lot to look at here on. There's a danger they usually get here and think, Well, that's Ah, it's a lot to fill out. I got time now. Maybe I'll come back to it on never come back to all that. So one thing we can do is break this down. It's different steps is one example of how we could do it. So we start off by putting numbers on here so we know it's steps on. We can break it down into the different sections already. This feels more digestible. Well, don't weaken. Just show the use of what they need to know what specific time on break it down to these steps and then scroll the screen when they're ready to see the next part. Therefore, we break it down into bite sized chunks. So let's start date automatically opens. Makes it quicker, but the next step, Okay, until his where you'd like to pickle pick up, jump off the device. Same pick up and drop off point. And I want to go to the shop. Okay? The image it next step. And then we school down here and we feel in our details on that's it. So it doesn't feel like such a big form now. Some other things that could improve the design. We could put a progress bar at the top and show the user hamli steps There are on each point. So when filling the form out there now, how much more they got to fill out another example of breaking information down to small sciences is the envision website. So they're start off with a clear hierarchy for main title. They hate one here really large, then a bit of introductory text, but full traction. So the partners working with on the air of a illustration type full here and you noticed this more more than, like, three or four lines entire page here and then the pace changed a little bit. So we've got a dark background, these brilliant big, attention grabbing headlines. Some facts and numbers here scroll down way, have some more information here, and then the background image changes, so it constantly keeps us interested. And there's never too much information to digest at any one time. Yeah, so you can flip down the page. You can scan for it, get information that you need will be tones when you want to use longer texts like in a medium article. This is one we wrote last year about how walking canon cruise your creativity. So obviously you don't want to break with text too much because it in article. But you do want a hierarchy, so we'll have our main headline video that helps explain the article and then we'll have. The subtitles will break it down into short paragraphs. And then we can con trait the design with these poor quotes list other subtitles. Slacking smaller subtitles. Different size images, more videos, poor quotes on then this helps says that stay interested while we're reading large Scott and it doesn't get too monotonous. Or if you're not sure if you want to read them tired, you could just read the headline and scan down smother Subtitle. So read that your brains look OK. That sounds interesting. So I'm going to read this and then maybe I want Teoh skip down. I can see all these tips for creating parable because it's interesting, and then maybe we re how walking helps creativity. So OK, they were not interesting. That and then we can skip down to another headline here and decide what to read. 6. Clarity: next up is clarity. Now, when you come to a webpage, it should be clear exactly what you're supposed to do on what happens when a particular action is taken. So, for example, one thing it really frustrates me is when I signed up for a free trial. But I still have to get my credit card details, so this feels a little bit dishonest and it feels like they're gonna trick me. We'll stop taking money from my credit card without letting me know on. It's pretty obvious. That idea is to get you to sign up. But if they're not completely open about this, a lot of users just won't sign up. So one tip would be to say, we'll never take money from your credit card without letting you know or were send you an email 10 days before we will charge you, and you cannot start at any time. So this just makes the user feel a lot more comfortable, and there's no tricks involved here. Also make sure your site to use is clear language. So one example. Waas. A few years ago, Facebook hards a pop up that said council upload, and then you had two buttons, one said, confirming once it council. So it was like my counseling, but cancel on my confirming the council that got a little bit confusing to make it clear what you want use it to on what will happen after they've carried out a particular action. Landing page is a really good example of clarity. They normally have one purpose, and that purpose is usually something like sign up or by this picture product. And they don't really do anything else apart from that one action. So in this example here, this looks really, really clear. We have ah main title get are able to learn how to be a good leader, and then you have a picture of the book on the left. We have our email on download your free guide. So it's pretty clear what we need to do here. Underneath that we have what you learnt. If you need more information, so you might not trust them right at the beginning. But you might need toe delve deeper to be reassured. The only thing I think could be improved on this website. Here is the text underneath the court elections in the bottom here, it says, by clicking You consent to receive culture on engagement communications from our That's fine. Now, when you're feeling the email and you click it, you might not see this tax on. It's also the low before direction. So the normal way Phyllis Out is your email. Click the button. Oh, I've just signed up for something I didn't really want on. There's no popped out. So here we see an example of how sometimes the business can conflict a little bit with interests off the user. 7. Familiarity: on expensive is familiarity. Now, when we're designing things designers love to create new things on, be innovative. But when you see something new for the first time, it takes a little world to understand what it is you're looking at here. So something like a button on a website, you don't really need to reinvent it all the time. You'll see things on dribble with his crazy animations, and they look beautiful, but they don't really get the job done any better. And normal button is Andi also. So when we're going through a website or an app on into face, it'll just tire is out. If we just have to keep on deciding, what is this new thing here? What is that? Is that a form? Or is this kind of some new crazy animation? There's things like material design that's Bean designed for a reason. So this is to standardize all of our Google's interfaces so you don't take any more kind of brain power up when you're going through their interfaces. He's like conventions, so just has when you're driving, a green light means go on. Our website at Hamburger on the strict three stripes will mean, this is a menu on. People have learned knees, so there's no need to reinvent the wheel here. This also makes it easer as a design as well. So when you're building an app or website, you have a kit, and you can just apply that kit to your design and you can concentrate on the really important things, which is the functionality. So it's better to be good than original somebody on the Internet, and I hope up sounds great, doesn't it? So let's take a look at this Australian magazine now where we come here. This all looks pretty easy to understand. Clear. I know that this is a menu here. Even though hamburger menus they've caused a controversy in UX design, some say that you don't need to hide all that information away on some say it cleans up very nicely to better understand what it is. But I think people have had time to understand that this is a menu now, so you can see how changing something into certainly a simple hamburger menu because contributions. So I click on here and we'll see the menu. Okay, great. Yeah, and you know, it happened and then X topsy means to close magnifying glass. That subsidy search something. Search here. And then the next hour here, I'm guessing that's from a scroll image along. Yeah, so everything's really clear and easy to understand here, Andi, we're sticking to conventions, even know this is a really beautiful website. Quite creative. It's still sticking to conventions. We know when that rolls over, okay, lets us know that's clickable. Scroll down to the bottom. Here, there's a form. So here's the form looks a little bit different from, ah, normal form. So maybe that just take me color milliseconds more to understand that this is a form when I've got here. That might not sound like much, but when you're being browsing the Web all day, or if you really want it to happen quickly, these are little kind of differences and forms gonna make a difference. So on. Then their text is aligned in the center, which is a bit different. So that's an extra load on my brain again. Milliseconds here. So let's fill in my name. That's nice. There's an auto fill, their a mom scanning around the bottom so the subscribe button hasn't got fine outline like swarms of top, so that gets kind of it. Lost their again. Nothing too bad there. But you can see when you stop breaking conventions, it just takes the user a little bit longer to figure out what's going on. So we have a little look at some animations on designs on Dribble, and I don't wanna decides to designers. I think the design it's fantastic, really slick on a lot of time. Or if it's going to these, but perhaps from a user ability quantities, perhaps they're not quite the right thing to do. So looking this one here when you press the button Teoh screen does take like, a fraction of a second too long, and you're bombarded with a lot going on. So imagine going to this app and using this app for a long time, and every time you click a button you have always animations going on. That's going to get really frustrating and tiring to use. This is an example of a really slick animation here on. I love the way all comes together. This really course was a lot going to this, but again, So just imagine that every time you click on a button. It just takes a second to load. And second doesn't sound like a long time, but when you're using an app, it really is on. It's gonna get very frustrating to the users clicking about it just takes a couple of seconds for these animations to look on. They don't really add much to the usability of our apart from making it just really cool. So there's always a balance to be made between having that little bit of extra personality to a design on going totally blown and annoying the user. Andi, this tiny but our nation is a nice example of similar dysfunctional tells the use of that, the systems thinking it's waiting on. Then it also gives you feedback and let you know when the job has been done on its activated. So it's not overbearing. It's not kind of trying to hard, and it's very functional, quite beautiful. 8. Delight: last principle is to light Group really is in the heart. Okay, so there's a reason why I'm a designer and not a comedian on you believe even get that reference. So when we're talking about the light, we're talking about icing on the cake on. You really don't want your pick to be all icing unless your meat when you're five years old . So let's talk about the icing on our interfaces now. These could be things that just make us think. Wow, they've gone the extra mile Look at the detail they put into this interface or well, that's just a tiny bit different, and it just sticks in your head on. It makes the whole experience really, really pleasurable to use now, making something pleasure to to use come just be essentially simple and straightforward and really intuitive. Or we can add some or quirky personality on. We can bring this in in a few different ways so we can bring this in in a small bit of animation that just does certainly time with different or another way will be introducing a bit of micro copy. That just is a little bit humorous. Andi makes us smile Another way could be using some really nice illustration. That certainly is a little bit different. What's going on a moment and just makes us think well, this site is really, really different. So when adding delight to your design, it should never get in the way of your design. On one thing I heard WAAS. It's a bit like a adding lipstick, so you will never add lipstick all over your face. You just had a tiny bit. That's what I would do anyway if I wore lipstick. 9. Summary: Principles of UX: so we're just about done now let's recap some of the things we just learned. So the first thing on full of the most important is that you should be designing for your users on about yourself. It's a little bit of, ah, mind change mind shift for younger designers because designs we want to do themselves what was cool. But you really have toe. Investigate your users needs and legs before you start designing. Now the 2nd 1 is a feedback. So what does this mean? So feed that means is your interface is going to react if you feedback when one of you indirectly it. So if you press the button, the color or maybe it could be older freed by. Or maybe it's just a bit of a couple now preferred one is I digestibility. So think of this as if you come to an interface. There's not too much just overwhelmed with choices, so there's a clear Iraqi and you know what you should be doing. That kind of leaves on clarity, So clarity is knowing exactly what you have to do with interface. What's the promise? Golden, Then the fifth is familiar reality. So again so the buttons should look like buttons form Cilla Black forms on manual about menus on There's no point trying to reinvent the wheel here on. We've got standards for a reason. You can still be creative without foot. Please keep in mind that don't we used to be thinking. What is that is at the bottom is are they just get border? Thanks. Now the last part is our delight. So this is just adding a little extra touch, a little magic that makes the use of smile and go the extra mile. So this could be a tiny bit of humor. Or it could be just something a simplest, their interface, app or website just work seamlessly. It's so perfect. So somebody use and therefore it's a joy to use all the time. Or it could be a little bit of humor when you send a message. I know mail chimp to a very good job This on. It can just be really nice illustration, So thes air six foundations off you eggs will help guide you through your work. Whether you're your news industry or your season of pro, it's always going to come back. Just reassess your work a little bit. So I really hope these will help your look in your work and help you to develop and have you. 10. Project: Principles of UX: so that's the boss and always left to do is to upload your product on your product. Will be It's really simple. Just upload some of your work on, then talk about how you reply with one arm or off principles of UX design. You might want to talk a little bit about how this helps there and user on the overall goal off your work. And also, please let me know if you want feedback, try and get back to you as quickly as possible. It's also a Pdf summary included, as well as an e book that covers the course and goes into a bit more debt. 11. Case Study: Okay, So we're gonna look a case of the here on. We'll look for our principles or used experience. I'm to see how they've applied. So you look at the mail, Tim website and maybe branded not to longer and changed them. Let's go back, Teoh Principal. So we go through the site one by one on Let's start with a design for you and yourself. So here, let's not right, you know, background. The main headline is all of your marketing tools in one place. So I guess the talk on democracy people grow your order's Fred campaigns Build your brand with Mel Change only one marketing platform. So they've done research into who they're talking to on. I guess they're speaking to marketing. I know they speak to a lot of before, but this is well, I can see straight off way. Gonna have what you can do it male chin. So double our features here. But your audience first, bring your friends for life. Okay. Rounding here created integrated campaigns dating. Okay. And then let's go down a marketing platform for your business. OK, so we're talking Teoh again marketers on and maybe business owners as well they say your business, that sounds, that could be a small business. And then we have e commerce. Mobile weather ups start Maybe some of the audiences start ups. Then whose fault? Down on we have have a quote from one of the users here. So photo on. Then, she says, with male chimps help. We've scaled our business mashing with one million members and counting on that's the owner off. So they've gone in and done research to find out who the user is, and they've taken coach them more auctions, new features against, like Low, the company said. These other companies that use them again, another really good example if they know exactly where users are right at the bottom. Cool direction. So that looks like it's really aimed at small companies. Start up perhaps the co founder here. So they're working directly with um so it looks like from Michaela gets smaller companies here your company's, but I do know of a big from this Web page. That's the impression I get. So that's cool. Next feat. Let's see. With this, you just speak back, so that's quite nice. If I roll over their head, the navigation it turns whites on these buttons as well. They change colors that lets me know is clickable. Lion appears here, and this is quite knows his well, for this expands for changes. Color on it also goes into old. It's look what happens in my search. So, you know, click. It's doing second results. Okay? And it's also highlighted the word email. So it's going to show me what I'm looking for. A highlight in the header and also the body takes was really useful. That's a good example off feedback there. And they've also left my surgery tops of money to search again. It's going really, really easy. Let's go back to the home page. That's nice. See? Okay. What comes out in the last topic on down. Okay, so there's a roll over there. There is. Well, okay, so what? This? That's interesting. So when I roll over a logo here, the rest fade out. So lets me know that I have chosen usually what they do that kind of highlight the one you rolling over. So this kind of feedback, it can't personally, it distracts me a little bit when I roll over, my eyes are on wear one click and I can see on film my field of vision. That's something else happening, which is a little bit strange. So, personally, I would prefer the highlights when I'm rolling over rather than fade back when I'm not distracted. At least I know that something's happening. Down gets clickable. Okay, there's not too much more to feedback on the X, really. Just a nice roll over estates on the search here. I think these rollers proved okay really quickly. Now let's look digestibility. So we get here on. Do we have a headline above explanation? A call to action Second Recall direction, which is not about it, just looks like a text link. So it's waken See the clear hierarchy they want you to click on Plan on, then a nice administration here. So this looks like it's really easy to understand this. There's not much that if you do want to learn more, it's his Normal is no explained. Alert one. So again, very short headline here your business is growing now want and then explanation down. We've got these nice chunks. Yeah, we got this animated GIF they helps explain again. It goes off into other segments to explain with details is nice for the feedback here. This animation direction, then this is really nice to see. This is there's nothing more than one paragraph on the page. Videos is changing the face. Something different case that this soul seems really nicely broken up. And then they change rhythm right and bottom. So it was wiped and then right at the bottom, they changed the yellow. Just to say that this is difficulty page on again, they could come back to the main messages on Sign Up. Let's see if there's any other parts of you that have love liteks. So I imagine our story company that texts that explain right that simple Our story had a blue that changed sections was different. Yeah, and so here we have a couple of paragraphs with this nice editorial tucked with job captain and a headline to power Grabs Image four paragraphs, title image. So even though this is ah longer than that article, it's really nice to, because everything program tonight. Short paragraphs tonight fight site size chunks here, so this feels really there's nothing that feels indigestible. Most digital feels like it's a nice size I want to read it the next. Let's see. Okay, Digestibility and then clarity. Okay, so we get here on is it clear what we have to do or what the sites all about? So the names, But male chimps. So obviously that has to do with email. And then we have a nice headline here. So it's pretty clear all of your marquees in one place grow your audience, create campaigns, build your brand Melchers only one marketing platform. So I guess it's a vibrating. I've always known Male chimp just sitting up e mails, Teoh lists of people. Um, how all this is that if you never heard of, So OK, so this is then they make it clear it's the start up of the kind of global benefits what they want to have this image of people. So I guess the people friendly company, and then they go direct into what you could do all the benefits here. These kind of broken down items way explain a bit more for what kind of business you're on . Okay, so this feels kind of pretty clear. Other top we've got. Why? Mel Chin, marketing platform overview. It feels, feels pretty straightforward. So if I have never, ever heard of a melting before, I think I guess what this is about pretty pretty easily. And then I know I can either sign up here. Logan Informant produces certainly picked a plan, but bigger plan is clearly what they want. Todo and it's nice how have highlighted this is their most recommended price, so you can see creamy in standard essential free that starts off the most expensive. So think where they've done that is, um, this'll makes the recommended the standard one look really, really cheap. Next the premium one. So if you really, really expensive one first, everything off that's gonna feel really cheap and honestly freeze the last one you get to. So they obviously want to push the paid once. Is it clear what you get? So introduction. We have our features, its table. It's quite a lot of this table have broken up down chunks. It makes it a little bit. And then this is a nice When you get back it after scroll all the way to the top of God, that feels good. It feels pretty clear, and then to make even clearly from 50 yards questions. So that was really good. OK, next. So familiar reality say, Let's go back home. Yes. So this is a bottle. This looks like a button. This looks like a link. This is a drop down. Has a narrow on If search. Obviously it's kind of a loop. Magnifying glass. Um, everything. It's pretty standard stuff. It's, um it's a really nice website, and it's brought to life with illustrations, but everything it's like, really familiar. So if you've ever used the Internet before, I think you have to use this website. Says Look. What? Sign up. Way go in you Manager Sin user Name Password. Um Yep. I needed people things. Password. It started. Okay, that's that's really standard form. Really easy on. There's not too much there won t notice here. They've taken out the logo or any other navigation to keep you focused on there. They don't want you going back. So which I will get back. OK, now that so Last one delight. So this is just the icing on a cake. What special things have they done? So I rolled over logo on. That's a lovely little indirection that that simple so monkey. Just start not. And then weeks. That's so that's gonna be a little smile to face, and it's not getting the way of anything. It's not distracted. Um, other ways. This brings the line simple. Doesn't look like too much administration. Still really nice, Really hand drawn. Really? Ganic Really human. So this doesn't look like a stock restriction. This looks think they definitely have this commission just for them again. These these illustrations are beautiful, but working very people orientated fun feels very different. That was very human. Vote Nice rounded. Sarah's lots of bracketing was really natural ministrations for breaks they've got next a mile. There's all the details in that, like tiny things like when you scroll down the logo stage. But the navigation goes. But then when you scroll back up, it comes on again for down for those interactions Really nice. It's a fade so it doesn't just cut out with roll over, and that fades in and out as well. That's not just a cup. That's not just going straight dark green. That's a fade. That said, these illustrations change. Yeah, so this has a nice amount delight in there. So does it feels like it's not just a template. There's a bit of love and care going to that. So hopefully this will be a really good example for you guys to see. And then maybe you could use some of these techniques in your works or whether that be having some customer illustration there writing some really concise copy there. There's another nice little thing. They do the Rollo. So when you highlight Texaco's and think just a genetically really straightforward that broken down to nice and chunks on, nothing's too different or crazy. No, that's about and you know that's down, but they still managed. So next job is how can you bring these things into your okay? Great. Thanks a lot.