UX for Beginners: Craft delightful experiences by mastering the basics

1. Introduction to the Course: Welcome to my course about UX design for beginners. Why did I create this course? I have seen a lot of designers, developers, even product managers making and repeating the same design, and usability and interaction design, mistakes. Why they were unable to fix those mistakes is that they don't have the understanding of usability, user experience, or interaction design principles. Now, these principles are these root ideas. They are going to govern the user experience of all the products, whether they are physical or digital products. So in this course, you are going to master these basic principles with tons of real-world examples like Amazon, Walmart and G-mail and Google, different products from Google. So after taking this course, you will be able to pinpoint problems in your own e-commerce website or your own app, and you can easily improve them. You can see where the problem is and how to fix it. Hi, I am Muhammad Ahsan, and I am designing UIs from past eight years and improving their usability and user experience from past three years. Now, let's get started and start improving user experience of digital products. 2. What Is UX And UI Design?: The first question is what is user experience? There are many definitions online or even in books that are very difficult to understand so I'm going to simplify it for you. The joy, satisfaction or frustration your user is going to feel after using your efficient or very slow, usable and delightful product. In terms of product, it could be a mobile app, web app, smartphone, or any package, or a laptop or something else. In simple terms, journey of your user with your product is basically a user experience. Let's explain the user experience in terms of a mobile app. You might have used many mobile apps and you don't know how the whole user experience affects you. For a user, finding the app or installation of the app is the first step. You might find it on Facebook or maybe from hearing from a friend that "This app is really cool man. You need to install it. You can make different funny faces with it or whatever.'' So the first step is finding the or and installing the app. Then the next step is onboarding experience, signing up. There could be a lot of problems. Even I have seen a lot of apps that really sucks at signing up. Most of the users, they're going to leave at this stage. The third stage is getting to learn the app. The first impressions, how the app is flowing different with different screens, and different interactions, and how you are learning the app. Then the fourth stage is performing important task efficiently and easily. This is the effectiveness; how functional is your product, how you can effectively and easily complete your major tasks with this product. Then emotional impact, in the end you will be frustrated or you might be happy on using that app and you might be overall satisfied with this application. There is one more thing. This might also involve contacting your support team via phone or e-mail. A lot of websites and apps, they are really good and they perform everything but then their support team or their support delays are for three days. Your user are going to give you very bad reviews. I have seen very good products having very bad reviews just because of their support team. So make sure this is also another very important step in user experience. Now we are going to discuss what are the end product of user experience design and who will be involved in user experience design process. The product of any user experience design will be detailed wireframes along with detailed specifications of that product. Detailed specification mean what are the features, and what the app will do, or what this website is going to cover, how much area on how much features and functions. UX process involves CEOs because they know about the product a lot, then product managers, then customer service, then your designers and developers, and as well as other users, your primary users, and also the SEO people or the marketing people. All these persons are going to be involved in the UX process. Let's define the user interface design. We have a lot of confusion about user experience design and user interface design. The user interface design means the look and the feel of your app. User interface is the point where your user and your product is going to meet. The user is going to interact with your buttons, the user is going to press on different things on your screen, but what he's viewing onscreen is basically the user interface design. It includes colors, typography, or how different buttons are spaced out, how the text should be aligned. So this is all about aesthetics and how your user is going to interact with your app. One more thing, this is the first impression your user is going to get from your products, so make sure this interface really looks great and also works well. A lot of users these days, even if you look at Apple products, they have a specific aesthetic quality or they are very good looking. The first impression user is going to get from your product is how it looks and feels, so this is very important. The end product of any user interface design or UI design will be high-fidelity mockups along with style guides. Mockups are basically the final look and feel of your product. These are basically images and those of you who have taken my other UI design courses, they know about style guides and mockups. Style guides are basically how your colors, typefaces, and different sizes of buttons and every other object you are using, design element you are using, they are going to come together and other different design specifications you are using. These mockups and style guides are handed over to developers to actually implement them in form of an actual product or actual code. In the end, I'm going to sum up this lecture with saying one thing; that UI design is basically one process of a UX design. UX design is a very broad field. UI design is a part of UX design. Keep in mind all these things and if you have any questions, ask me. There will be coming a lot of more things about UX and UI design, so let's move on to the next lesson. 3. Can I be a UX Designer: Now the question is, who can be a UX Designer? Simplest answer is, anyone can be a UX Designer, just need to study something about human psychology and a few things about how humans interact and behave around digital products or any other products. You have seen that I have shown everything about humans, so this is all about humans. That is why it is called human-centered design. Let's talk about the different jobs of UX Designer. There are different kinds of UX Designers. They do different jobs. There are a lot of different specific job titles for different UX Designers. The first one is User Interviewer or User Investigation. I call him a User Investigator or something like that. He interviews different users and gets some information from them. Then we have the Planners are the ones who plan information or information architecture. These are called Information Architect. Then we have Designers. They are going to wireframe and prototype. Then we have Interaction Designers that are going to design the flows and the diagrams and interactions, planning all the interactions of your app, maybe some animations how this screen is going to flow to another screen, something like that. Then we have Usability Testers or Usability Gurus who are going to observe actual users of your product with your users and going to assess different UX problems with it. Now User Interviewers are also going to involve interviewing stakeholders and CEOs of that company or product because they know about the product a lot. Now if you were a UI Designer, you can easily become a UX Designer because you already know a few things about design. What you need to learn is human psychology and human behavior using digital products. You already know half of UX Design, but because you already know that how these layouts or typography or pillars are going to grab user attention or whether the users can click this button or not, how big this button should be or something like that. If you are a UI designer, you already know the psychology behind designs and visual information. You know how to layout information. You know how to present information. Now how you are going to shift from a developer to a UX Designer, if you are a programmer or you are a coder, then you know how things are implemented. You know the backbone of everything. UX team might call you an engineer or software developer or something like that. You can easily understand why watching the usability tests or users or maybe user interviews or when the UX Designers are planning for something, you know how we can achieve this, how we can make our product load fast or maybe some valuable things like that. You already know how to implement things. You need to know the user's psychology and how different things affect user behavior. If you master those things or the essentials of user experience concepts, you can easily become a UX Designer. Whenever user investigators or user interviews take the team to interview users, they always take an engineer or a programmer with them because programmers can see the panes behind the user interface. They can see why this problem is occurring. Maybe it is a database connection error or maybe the error is not viewable or maybe that fault is very small when rendered from the server or something like that. They can come up with a lot of practical solutions. That is all about becoming a UX Designer from a designer background or a developer background. If you have any more questions, you can ask me. The same applies to SEO engineers and other people who have development or a computer background. If you have any questions, do you ask me. I will wait for your questions. Now let's move on to the next lesson. 4. Different Roles Of UX Designers: You might have heard that there are many kind of engineers, like electrical engineers, mechanical engineers, civil engineers. Similarly like that, there are different roles in user experience design, there are people who do user research, there are people who do information architecture or define the information architecture, then there are people who are going to do the interaction design for the product, then there are content strategists, then there are usability experts. I am basically an interaction designer because I normally work with wire frames, mockups, and prototype most of the time, I normally also do some of the user research and usability tests. Let's see all these rules. Now, the user researcher is someone who is going to conduct user interviews and going to investigate user and going to ask user a few questions about the product. The main purpose of user research is to gather information about how, when and why users use certain products and what features they need in any product. You can do on-site user research or off-site user research or online user research, there are different websites. On-site means that you are going to do user research in the office of the user, where the user actually uses the products. The offsite means that you are going to call your user in your office and you have set up, you are going to record his all user interview inside your lab. An online user research is that you are going to post some questions online and different users that meet your criteria, they are going to answer the questions. These are different types of user research. Now, we're going to talk about interaction designer. Interaction designers will work on the flow of your app, how someone is going to click or tap and where the screen is going to flow and going to take the user to another screen, should user be asked a few questions before moving to the screen or something like that. You might have seen checkout process flow on different websites, they are totally different with different websites. If you go to Amazon, they are like five, six steps in the checkout process, and if you use Walmart, they are going to be just two or three checkout steps. This is how the interaction designer is going to solve this problem. Also, interaction designer is going to tell you the interactions or any missions that are going to happen when you open or launch your app, you might have seen iPhone when you tap on any icon or you try to close any app, there is an animation of closing and opening an app, so this is going to be the part of interaction designer. Now, information architect is going to plan the whole information of any app or website and how it is going to be displayed, how the user is going to reach or find this information, whether the information should be in video format, audio format, or it should be just the text with headings, or it should be image, images or something like that. Now, you can see on Facebook there are different kinds of posts, like photos, and then we have video post with texts, then we have different links or embedded type of posts. There are different kind of information blocks. This is the job of information architect to plan all this information and how it will be displayed and how the user is going to find them. Now, the content strategist is going to answer the question of how your company or brand or your business message is going to be delivered to your end users, what language should you use? What voice and tone of the product should be? In short, it is going to frame the whole story of your product. Now, how you are going to tell the whole story of your product, you are going to use less text and more images, or you are going to use detailed text or less images, or whether you are going to use an introductory video about it and the whole script of that video and everything is going to be the content strategists job. Now, it also involves all the content writing, compiling it, how to produce content that user really need. Whether this content is needed by the users, whether the users are really looking for this content, whether they really need to download this PDF file, so these are the decisions that content strategist is going to make. Now, the usability experts, I really loved this job. Usability experts are going to get user feedback after viewing them using the product. They will give the user a chance to use the product or perform different tasks, and then they are going to watch the user doing different tasks and get all the problems and note them and write them down. This is how they are going to get to the user's pin point and how we can improve the product. They are going to prepare a usability report in the end. These are all the different roles of user experience designers. If you like any of them, you can penetrate that field. If you have any questions, ask me. Let's move on to the next lesson. 5. Major Parts Of UX Design: You know about the UX, what is UX? But we are going to see what are different major parts of UX process. I'm going to simplify everything. We are going to start with what's the problem. Getting insight into a problem. What actually is the problem? This is the first step. Then who have the problem or who has the problem? These are basically our users. Then we have how it will be used? This is the context. How our users are going to use our camera. Are they going to use it in the rain or something like that? How users will use the solution, how they are going to interact with it. This is basically the interaction, whether they are going to use their voice command or whether they're going to personally input by using their fingers, or whether they are going to vibrate it with your hands or something like that. This is the interaction. Then in the end, how we are going to test and improve it. This is usability tests and seeing your users using your products. If you don't have your product right now, then you can give them similar products or similar websites, or your competitors website and see what are the shortfalls and problems that your users are facing. This can give you a lot of insight into what is the problem and how you can fix it. Now this is a buzz word. You might have heard a lot human-centered design. Now, human-centered design is basically an approach that was adopted by the design team at IDEO. Actually what they did is they put the human needs and capabilities and human behavior first and then designed everything according to that. Basically they designed everything around human needs and capabilities and behaviors. There is one more tip I'm going to give you is, even if you are designing for humans, don't forget that there are stake holders and other CEOs, they have their own goals and they have their own aims in their mind. You also need to cater for them also. Now let's talk about User Context. This is very important. It can change the whole process of your product or it can add a lot of necessary features into your product. Just think that user context means that conditions and atmosphere or the room or the office where your product is going to be used. Take an example of a camera. It's maybe DSLR camera and I am a landscape shooter and I shoot mostly outside. Maybe I showed most of the landscapes in the rain, then this camera needs a whether shield. These days, a lot of people they shoot in every atmosphere. They shoot in the sun, in the rain, in the sunlight, they might shoot while swimming or something like that. These things are going to change the context of use. Let's take another example of a train booking app. You might be in a hurry and you're booking your train while you are traveling, so there might be noise around you and there might be low signals, Wi-Fi signals, or maybe a few more constraints and user context is totally different. There might be people around you, there might be a lot of noise, there might be a lot of gathering and you're booking your seats. You need to take care of all these things. You might be in the sun, so your screen is not that bright or you're having problems clicking or tapping on different buttons. This is called User Context. Now what are the features of a very good or great user experience design. The only thing about user-experience design or great user experience design is our interaction with technology. We as humans make a lot of mistakes. Good design requires communication, especially from machine to person or person to machine, indicating what actions are possible or what is happening right now, what is happening with my app? I have clicked the button, does this submit my form or is it working in the background? What is going to happen next? Is it going to charge me right now or is it going to shot charge me at the end of the month or something like that. These are the things you need to keep in mind that communication between machine and person or your product and the user is really important in create UX design. If you have any questions about user-experience design or if you don't understand anything from this lecture, do ask me and I will be able to answer any question regarding user-experience design. Let's move on to the next lesson. 6. Human Centered Design: Let's talk about the first approach for UX which is human-centered design. Now in this approach, what actually we do is we focus only on our users, okay? Each user have different needs and different memory limits or maybe physical limits, so we are going to take care of all these limits and we're going to create an effective and efficient product that can satisfy our user and it can increase overall effectiveness or major task user going to do with your product and they can easily do that task. Now, HCD was basically used in industrial plants and production plants where users need to check a hundreds and thousands of items and they were getting tired and sick, so what they did is they started research that how we can create our workflow so the users or our employees, they can be more effective and it is more easier on their physical limits. This is all about human-centered design. We are going to focus on our primary users and their needs and their limits, whether they're physical or mental limits. IDEO is a design agency and they are working on human-centered design and they are well-known for this approach, so I am going to show you their definition of human-centered design. IDEO definition for human-centered design is that you are going to build a deep empathy with your people or with the primary users you are designing for then you are going to generate tons of ideas with sketches, with different wireframes, then you are going to build upon these ideas and you're going to create working prototypes. Now, all these steps are almost similar in any user experience process and in the end, what we're going to do is we're going to share our prototypes with the users and we're going to test them and eventually in the end we're going to show our refined product to the world. These are the four steps that are involved in human-centered design. First, you are going to absorb and research about what the user needs are. User needs and their limit is our first focus, then we're going to move on to idea generation and exploring different solutions, this can be tens or hundreds of solutions. Then we are going to refine and choose few of the solutions and we are going to build prototypes or working dummy prototypes of those ideas. Then we are going to test with real users to see how well our ideas are perceived by our users and how well this product will work in the real world. This is all about human-centered design. Now in the end, I am going to share with you human-centered design toolkit, which is free from IDEO. You can download it and you can use it. This is a field guide. It's a PDF document over here. You can see over here the field guide to human-centered design. You can download it and you can use it and you can read it. If you have any questions, ask me, I will be waiting for your questions. Let's move on to the next lesson. 7. Double Diamond Model of Design by Don Norman: You need to follow some basic models or some basic approaches of user experience design. One of them is double diamond model of design. This was from Don Norman and he's one of the pioneers of user experience design and in his book, "The Design of Everyday Things", he thought about this double diamond model, and what this model is, it has basically two diamonds. One is finding the right problem, and the second one is finding the right solution. Now let's look at the diagram. Now this is the diagram of double diamond model from Don Norman, and you can see on the left side we have diamond which is going to be finding the right problem and on the right side, we have finding the right solution. We going from left to right. Now when we are going to start on this left yellow point, we are going to explore and probe into our real problem. What the real problem is. Do our users really need this solution? What the users are saying is what they really need. Most of the time the users what the need is, not what they say. These things are going to contradict with each other. Our users are going to tell us a lot of things, but it is our job to find the real problem. Now, in the middle of this diagram, you can see on the left we have a dotted line. At this stage, what we are doing is we are probing into a lot of different problems. Divergence means that we are going to diverge and create a lot of different options for the problem. This could be a problem or this could be a problem, or this might be the right problem. Then we are going to focus and converge on one problem which is the real root of everything. At this point, we are going to start looking for solutions. We are going to sketch different ideas, different solutions. These can be tens or thousands of solutions or maybe a hundreds of solutions and at this point, at the middle, we have explored a lot of alternatives. You can see on this side, this arrow means that in this section in vertical direction, we are basically expanding our alternatives. These could be alternative solutions or these could be alternative problems. After finding these alternatives, we are going to again converge on the real solution. Actually, we are going to test different prototypes with our users, and in the end, we are going to produce the real solution. Now let's talk about why do we need to find the right problem? Most of the time, what people are going to tell you is not what they really need. They are going to say a lot of things. I have this problem, I have this problem, but the real problem is for you to find. Start questioning your users and probe into their problems and expand the scope of that problems. There could be many issues behind that problem or related to that problem, and then it is the time to converge on the real problem in the end. Once we have found the real problem, then we are going towards the solution. Before that, we should never try to explore solutions or try to find any solution. Now exploring possible solutions means we are going to create a lot of sketches, a lot of dummy prototypes, and show them to our users which one really works or which is their real problems and in the end, we're going to converge to the right solution. The best and only solution that is working well when testing with real users. The essence of user experience is that we are designing a solution to a problem our users are having right now. Let's see an example to illustrate double diamond model. User comes to me and says that I have a problem, my car won't start and I don't know what's the problem. Now, your starting idea is solve the user problem and show the car status or problems status on car screen or on his mobile app or something. Now we're going to expand that problem. What could be the reason behind that problem? Why the car is not showing any problems? What errors or problems could be related to car ignition problems? Is the batteries low or the fuel is low? How many reasons could be behind car ignition problems? Once you are going to find the real problem, and in the end, you found out that the battery was low. Now you are going to expand, move towards the solutions. Do we really need an app for that, or is there any way to show all these problems or the battery low indicator or is there any icon which user is unable to recognize? Do we just need to change one icon? Maybe we need some battery with red highlight or maybe with some sound to show the user that this is the problem or maybe we need some indicator with the battery that is low, then you can converge to the right solution. Maybe changing just one icon or maybe the feedback to that icon that what is happening to your car can be the right solution. This is all about double diamond model. I hope you have enjoyed it if you have any problems, let me know. Let's move on to the next lesson. 8. Root Cause Analysis Skill: There is one more technique I would like to discuss, which is Root Cause Analysis. This technique is really essential for any user experience designer. If you want to be a user experience designer, you need to master it. It is very easy and simple to learn. Now, finding the root cause problem is essential in any user experience design process because we are going to find the real problem behind what user is trying to say. It is called five Why's. This process was developed by Sakichi Toyoda that is being used in Toyota Production Plant. What you are going to do is just keep asking Why is till the time you reach the real or root cause of that problem. Let see this root cause analysis with some example. Now the problem is that user was unable to login. The first question is, why didn't the user fail to login? The answer is she typed the wrong password. Why did she type the wrong password? Because she forgot it. Why did she forget the password? Because we had a constraint of making strong passwords. Why didn't she use the forget password? She tried to use it, but didn't get the email within 30 seconds. Why delay happenned with the reset password? Because we are using some third party plug-in. Now the real problem was that the user tried to use the forget password feature, but she was unable to receive the password because of delays the. The real problem behind her failed login was not the wrong password, but the password reset delays. This is how you are going to find the real problem behind anything. You can apply this technique to any situation in your life or in user experience design, or while you are designing something or you are questioning users. This is all about root cause analysis. I hope you have enjoyed this lesson. If you have any questions, do ask me, let's move on to the next lesson. 9. What are Seven Stages Of Actions?: Whenever we use a product or a website, or an app in our minds, we try to create a set of actions. First I'm going to do this, then I am going to do this and all these actions are based on our perception, what we are perceiving, how we're perceiving that app or a result of our actions. So all of our actions, they are going to be based on perception, which is also called mental models and our goals, what we want to accomplish in the end. We will talk about mental models later. Let's see what are those seven stages of actions. These seven stages of actions were also proposed by Don Norman. Let's see, what are those seven steps. Number 1 is, what and why do I want to accomplish? First is our goals and triggers. What is triggering to accomplish this goal? Second one is what are the alternative action sequences? Can we achieved the same goal that doing something else or with another sequence of actions by pressing this button and going to this URL and maybe copying and pasting everything. Can I create a Google document like that? So this is the sequence of actions. Every user have different sequence of actions. They might use some other sequence to accomplish the same goal. Then you will think that what actions can I do now? Can I press this button? Is it activated or is it disabled? Then the next step is, how do I do it? How I am going to click on this button using my keyboard or using my mouse or tapping on it. Then the next step is feedback. What happened? The app is a need to tell you what happened when you clicked or when you did this action. Then the next step is you're going to perceive that feedback from what happened. For example, you are using a microwave oven and when you pressed "Start", it doesn't start and it gave some error. You need to understand what that error means. What does it mean, what happened? Then in the end, is it okay? Have I accomplished my goal? In the end, you are going to see whether you have created a Google document, new document successfully, or you have heated your milk in the microwave oven. So these are seven stages of actions. If you can master these, you can apply them on any app, any website, any product. Let's elaborate the seven stages of actions with a screen of Gmail. This is my screenshot of my iPhone Gmail app. Now you can see my trigger and goal is to delete emails. My trigger was, get rid of unnecessary email. That was my main urge to delete emails. I don't want unnecessary emails. So my goal was I want to delete emails. Now I am on the screen and you can see how many possible alternative seek action sequences are. I can long press on one email to select it. Or I can alternatively press on the left circle side, okay, and select multiple emails. Maybe I can select just one email. There are two possible ways to select the emails. Either I can tap in the circle or I can long press on the email. Next was, can I press "Delete"? What actions can I do know? Is the delete icon enabled or disabled, right? No, I cannot tell that this is enabled or disabled because most of my emails, they are highlighted in black color. So highlighted or enabled are basically in black color, but the top icons are in gray. Now the next is, I took the action, I pressed the "Delete" button, which is how to do it. I am going to press the "Delete" button. Then the next message I am going to see on the screen will be a yellow notification bar that, "Do you want to undo the messages has been deleted". This is what happened. I need to perceive it I need are translate it whether I am able to understand the message, this is the next step, what this notification means. So I just comprehend that I have successfully completed. Notification was you have deleted the emails and do you want to recover them? Do you want to undo your action? In the end, my goal was accomplished. I have deleted all my emails I want to. So this seven stages of actions, you can apply it on any mobile screen, any app, any product, any thing you are designing or developing. I hope you have understood the seven stages of actions. Let's move on to the next lesson. 10. What are Affordances And Signifiers?: Affordances and signifiers is one of the major concepts in user experience design or one of the basic concepts of UX. Now, what affordances means is just how you can use any object or what can be done with it. For example, smartphone affordance is that it can be turned on, it can be turned off. We normally see a screen attached to it, so we can touch the screen, we can tap on the screen. You can also insert it into your pockets because of its small size. These are few of the affordances of smartphones. Similarly, doors, they can be opened, they can be locked, you can hide behind a door, this is also an affordance. Now, let's see what are anti-affordances. Anti-affordance is the opposite of affordance. It shows what you cannot do with that item or object. For example, we can't use smartphones as a hammer because we can see there is a glass screen on it. We know that it's sensitive, and it can break if I try to hit something with it. Similarly, if you have used Photoshop or any design software, you know that there is always a canvas present, and there is a bounding box around the canvas. That bounding box or that widescreen or that document boundaries in Microsoft Word or Google Docs that shows that this is the boundary of that document. You cannot go outside of this boundary, or you cannot perform this action with it, so this is anti affordance. There are few features built-in any product. You can look at it and you can see it has sharp corners so I should avoid it. I cannot put it in my pocket. They might stick into my skin. These affordances in anti-affordances, they are again related to your perception. If you can't perceive that it's a door, you will never try to lock it, or you will never try to open it. For that, we will need signifiers. Affordances are all about what actions are possible with this object. Now signifies basically tell us that this is the sign, or this is the button you need to press to do this action. Signifiers communicate where you can perform the action like you can see the handles on the door. You know that this handle can be moved down or up or you can open it or you can rotate it to open the door. This door handle or knob is basically a signifier. In interface design, signifiers are in different shapes. You can see the search field, the buttons on the search field, so you know that you can click in the search field to type something. This is a signifier. You can also see the buttons on an interface. They are a bit elevated, or they have shadows under it. That is a signifier. It is a sign that this action is possible with this element. You can press this button. Now, moving on to how we are going to use these affordances and signifiers. To create a delightful user experience, you need to have affordances and anti-affordances perceivable. What does that means is you are going to use very strong signifiers to show what actions are possible and where the user needs to press or do the action. That's why we have very big search bars and big buttons on major e-commerce stores like Amazon and Walmart. It specifies that this primary action is possible in this website, and you need to perform it. Now, having a very big or very significant signifier helps a lot. User can instantly see that this is an e-commerce store, I need to find or search over here. Most of the users are going to use search bars. This is all about signifiers, affordances, and anti-affordances, but I'm going to show some examples. Now, if we look at this website, Amazon.com, you can see there is a very big search bar over here with a search icon, and If I hold on it, you can see it signifies that this is touchable or pressable. I can use this one to search any product I want. Then you can see we have these arrows over here, my customer record, and there are few more button. If I hover on these areas, you can see they're turning into buttons, and it is going to show me a list. I can see that all these are signifiers, these buttons, these hover states, the stark color of this area. You can see over here, this is a signifier that this area is important, you can perform actions over here. Now, if we take the example of Walmart.com, you can see over here, again, the same pattern is repeated over here. We have a very big blue bar over here. Most of the action is taking place in this area. This is a signifier. Then we have this very big yellow button, powerful color, and again a big bar to search over here. This is again a signifier. You can see these are hover states. These are signifiers that these actions are possible. You can use these areas to do these actions, so I can click on this one. Also, you can see on my hover, you can see a small hand icon. It means that this is pressable, or I can click on it. These are all the signifiers used to elaborate the action, what actions are possible, and how you are going to complete it, where you need to click "Okay". This is all about signifiers and affordances, anti-affordances. Let's move on to the next lesson. 11. Affordances & Signifiers explained → Headshot: Let me explain more about affordances and signifiers. Now you all have seen this iPhone. So on iPhone, the affordances are that I can hold it in my hand and it affords putting it in the pocket, and also it is going to afford to turn on and off. This is the property of all mobile phones. I know that this screen is dark, so I need to turn it on, but where I am going to turn it on or which button I am going to press is going to be signify by using signifier. So I'm going to show you the buttons over here. Here we have one button at the top and if you see it closely, then we have three buttons on this side, you can see over here. You can see that they have plus, let me show you a bit zoom in. It's not zooming in, but there is a plus symbol on one button and minus symbol, which signifies that it is going to increase or decrease the volume of this mobile phone, and the mute button. For the first time, I didn't know what is going to do in this button, whether it's going to mute or it is going to dim my screen colors or whatever, but after using it once I knew that this is going to mute it. If they had put some icon over here that is going to mute, then that would be more helpful. Always there will be some trade off between design and signifiers. You can see over here that they can make this button, this turn on but at the top you can see over here. So this is not focusing anyhow. The button at the top, if it's a bit different color like red or maybe green, I know that I am going to press this to turn it on. Right now when I use this for the first time, I'm not going to be sure which button is going to turn on this device. Similarly, if you see my iMac at the back, you can see over here, this is my iMac and when I first showed my iMac to one of my friends, you can see that there is an Apple logo over here and what he did is he tried to tap over here like that and they're tapping it three or four times. He wasn't sure that this is going to turn it on. So then he tried to search around this device that where is the turn on button? This is a design trade-off. They made the button at the back and it is barely visible. It is all silver so you need to find the button. Even right now I am using it from six months still I have difficulty reaching out by putting my hand over here and try to find the button where it is. So this is a bit story about signifiers and affordances. Similarly, if I show you this bottle, this is a bottle of medicine medicine that I'm taking. You can see we have lid over here at the top. Now the affordances are that I can hold it in the hand. It can be balanced on a table like that and one more affordance is, I can see that it is a bottle, so I need to open it. So it can be open and closed. Now where it can be opened and which portion of it is going to be the lid? It is the signifier. So they have, let me show you that they have made this lid is a bit separate from this bottle. So you can see that this is going to signify that I can open it from here or I have to turn it like that. Okay, so this is all about signifiers and affordances. I will see you soon in another lesson. 12. Examples of Affordances & Signifiers: Now let me show you few more examples of affordances and signifiers to elaborate more about it. Now and you can see this is Photoshop I have opened a document. You can see these are the bounding boundary of this document, which is in white and everything else is black. It is an affordance that you cannot type or do anything in this area. Whatever you need you are going to create, you need to be doing it in this area. So this is an anti affordance that Photoshop has bounded this document with a boundary. Same is in Microsoft Word. If I open up any document in Microsoft Word, now, same is the situation in Microsoft Word. You can see there is an anti affordance that you cannot go beyond this area. So if I keep on typing, it is going to be on the next line. So it shows that you cannot go outside this margin are outside this document, this document boundary, this is anti affordance. It helps the user understand what he or she cannot do with this software. Now if we talk about the affordances, you can see I have opened up this document or this software. I know that I can type something over here. So if I have an empty document like this, you can see this is the cursor. I can see that I can type something over here. I can copy or paste something over here. These are the affordances. If we talk about signifiers, then you can see these are the signifiers, This is highlighted. So if I switch to this one or this one or this one, these are different styles. You can see now this cursor has been changed to the larger text. So these are signifiers. These are all the buttons you can see over here. This is clickable, drop-down, and a lot of other different groupings of buttons. These buttons all are signifiers that these actions are possible with this nice soft software or object. Same is the situation here in Photoshop. You can see over here, there are few controls highlighted and few are disabled. So this is the way a signifiers are going to help me understand that these actions are right now not possible with this document. You can see over here you can show up these transform controls and everything and a few actions or few buttons. These are possible with it. Others are not possible. So this is about softwares. Now I'm going to switch to hardware or different products. You can see this is one of the example. Now from looking at it for the first time, I think that it is some kind of kettle and I have to put it on my stove or oven to heat it up. But I think these are speakers. If we look closely, you can see here's the signifier that these small holes in it, these are showing that this is basically a speaker. Now if you look at the buttons around this, you can see over here, here we have the buttons on this side. These are to activate it or turn it on, turn it off or something like that. Now, if we look at this device, very new products that come into the market and, and that are really new or innovative product. They are going to have this problem a lot. Which is we cannot tell how to turn it on, the signifiers and affordances. Maybe I think that it has talk so maybe it is a telephone or maybe it is microphone or something. But actually, I'm going to tell you and you will be amazed that it's an hill umbrella. It creates an aircrane to stop water drops coming from the top so you can hold it in your hand and you can be out of the rain. So this is very innovative product and from looking on it, I cannot see most of the controls. I don't know how to turn it on or off. So affordances are basically related to your perception. So if I can't perceive what this thing is, then I am not going to get the affordances and I might be able to see some of the signifiers, but I don't know what they are going to do. Here's another example. This is a fan. It is very, very innovative fan, but from looking on it, I cannot tell what this device is going to do or what are the affordances, whether I'm going to get air from it and all, I'm going to see my face in it or a hologram in it. I don't know. Now if we look at the bottom of it over here, and if I zoom in, you can see here at the bottom, you can see there are different knobs and buttons to turn it off or turn it on, or maybe speed it up. There is a volume knob over here to turn it around. So these are the affordances. These are the signifiers that shows that this device can be turned on and off. Also there must be something to increase or decrease. It might be its speed or it might be something else. So this is about affordances and signifiers. I'm going to share another video where I'm going to show you shampoo bottle to show you the affordances. So let's move on to the next lesson. 13. Natural Mapping: Mapping is the relationship between two sets of things. Suppose there are many lights in a classroom and a row of light switches is on the wall. Now, can you guess which one is related to which one? This is the biggest question. A lot of people, they have numbered their buttons and switches by writing F or light one, L_1, L_2, something like that on the switches. This is really important concept. Another concept is Natural mapping. Natural mapping is that when you have two sets, and their mapping matches with each other in a natural manner. The first button is the first light, and the second button is a second light on the ceiling and the third button. For example, if I have three lights in a row, in a column and I press first button then it lights up the first light, then this is basically natural mapping. Every time, if I want to turn on any light I desire, I can naturally map it to the button I need to press. Few examples of mappings in software design or hardware design is when you have used your X-box controller keys, and you also see that there are different shortcut keys in different software's and apps, even Photoshop or any text editor. There are similar controls, like control S or command S, for saving the file. It is common in all different operating systems or in all different software's. So user can easily memorize them. They are natural save. S is for Save, so it is easier to remember it. It is our natural mapping that if I press control S or command S, It is going to save the document. Let's see some of the examples of mapping and how different mappings are good or bad, and how you can use these principles to make your software's or websites or games or apps better. Now you can see over here, this woman is, what she's doing is she's labeling the main idea at the top or the main category or the main area at the top and the bottom, she's labeling what these buttons are going to lit. What they're going to, which light they're going to turn on. These are different buttons, she's using different labels in whole of her house like that. So this is her solution. Now, there is one more article from Don Norman, Designing For People. You can see I talk about him a lot. Now in his book, he tried to propose a solution, something like that. This is the floor plan of a house and he says that, "Place the buttons on the places where the lights are actually there." So if the light is on this wall, you need to place the button on the floor plan over here. So if I turn this on, it is going to turn the light just over here. This is his plan. Now, a designer called Hwang, I think is a civil engineer and from Korea, he tried to solve this problem. I think he has solved half of the problem, and you can see there is a whole panel with all the floor planning of the house. You can tap on any ADR light, if I want to lit my bedroom, I am going to tap on this ADR, It is going to lit, turn on and turn off the whole lights. This is his design. It is called floor plan light switch. Now let's see some of the more confusing designs like this one. This is the panel inside a truck and you cannot tell what these buttons are going to do or where they are actually linked. This is really confusing. I am going to show you a few more examples from this stove or oven. If we zoom into it, you can see there are, one, two, three, four, five stoves and there are, one, two, three, four, five, six buttons over here. This is a bit confusing. If I am going to zoom in, you can see over here that this button on the left, which I thought that it should lit this one up, it is for the rear. So it is going to lit this burner over here and not this one. I think they have mentioned this plan because it is not Natural mapping. You can see over here, in my mind, I was thinking that this should be related to this one and this should be for this one, or maybe someone else is thinking that this is for the rear one and this is for the front one, but from my perspective I think this should be turning on this burner. This is for the center one which is over here, and I think it should be over here somewhere. So more Natural mapping in this area, but I think they reserve this area for this oven controls. If we go on the right side, you can see over here this button is for the oven at the bottom. This is again, front and the rear. Now you can see this position is totally different from this one. Here the rear button is at the first, and here the rear is at the last, which is very confusing for me. This is all about this confusing mapping of this device. Now let's see some of the more example. Now you have seen this remotes in a lot of toys. Remote controlled or radio controlled toys. You can see this is a bit confusing because one of the panel and this control is for forward and backward and one is for turning. So sometime a new kid they are really confused how to turn this or use this. But instead, if you go to this one, these are a bit new. You can see these are really natural. If you turned this driver wheel, at the right or left, it is going to turn right or left. It is very easier for the kids. It is more natural because it is linked to our cars, who drive cars with these wheels. Now let me show you some of the examples of gaming and how controls are mapped on a keyboard. You have played a lot of games, you can see most of them uses the same controls like W, S, A, and D for a moment. One is one, mouse-click is for fighting, and second is for loading, something like that. So most of these controls will be similar in a lot of games. You can see over here, this is another game ZMR. It has also almost the same controls. You can see this is "Attack" this "Aim", these are called mapping and they are basically why they are using the same pattern because our minds are wired with buttons. If I have played like two or three games before, I will be adopted to this game easily. I can easily start playing this game because I am already accustomed and I have already seen those mapping patterns. Like you can see W. It is very natural indeed because W is at the top. So if I press this, it is going to be movement in the forward direction, and S is for backward, E is for left and right. So whatever the position of these buttons, it is going to move my gaming character in the same direction. This is called mapping concept of user experience, and how we can use them in our software's or in our hardware's, or in our devices, or in our electronic devices to make the user experience better. Now in the end, I'm going to show you the mapping of cars and vehicle. This is from Mercedes-Benz 2014 Model S 550. It is seat adjustment mapping. A few years back, they were not using something like that. They had few buttons over here to press and manage this. Now if you try to press this button, this head seat, and if you drag it at the top, or try to press it at the top, or the bottom, it is going to move in the same direction. Now what you need to do is just, you need to press this button on this and this area is linked to your seat. It is very easier to map with what I am trying to adjust. So if I am trying to adjust my backseat, this portion I am going to press this one or I'm going to push this one from the back or from here and I can easily adjust to it. This is my rest seat or whatever. I don't know what you call it. This is the bottom. So all these controls are really naturally mapped. Anyone can easily adjust the seats in Mercedes-Benz. This will be my last example. I hope you have enjoyed this lesson, now, let's move on to the next lesson. 14. Conceptual and Mental Models to improve UX: You might have read a lot of manuals when you buy a new thing or new product, new camera, a new microwave oven, and you might have read a lot of technical manuals and how to use it. Now, conceptual model and mental models, they are really necessary in understanding the user experience of any product, or if you want to improve the user experience of any digital product. Conceptual model is basically an explanation in very simplified terms, how this thing, this app, this product, is going to work. Ideally, your users should be able to start using your product, or app, without reading any manuals, or any conceptual model documents, or something like that. Now, let's talk about mental models. Mental models are basically conceptual models, but they are going to be in the head of your user. Your user is going to see and build up his own model in his mind after seeing your product that it is going to work from this button, or I have to do something like that to turn this on, or maybe use this product, or use this microwave oven, or use this app. This is the understanding of yours user in their mind, how your product is going to work. Different people may have different mental models of the same item because it is relative to your perception. If I have different knowledge, or I have interacted with the different type of products, or cars, then I might not be able to drive the automatic luxury car on the first time. I might be confused, getting in it. My mental model might not match with the conceptual model of that product. Now, what are the things that are going to create a mental model? These are going to be affordances, constraints, mapping and signifiers. These are all the things that are going to show or tell your user that this is possible with this device. You can press this button from here, you cannot use it without plugging it into the socket first, this is a constraint, and mapping is that this button is going to control this things. As a designer or user experience designers, your job is to align your user's mental model with the conceptual model of your product, your app. You are going to use signifiers, and you are going to use affordances, and you are going to guide your user into using your product. You might have seen apps. Almost all apps these days, they are going to show you some usage guide, or some intro guide whenever you start an app for the first time. This is for closing the gap between a mental model and conceptual model. This is how we are going train our user and tell them that you are going to use this product, this app in this way. A single person might have different or multiple mental models of the same item. For example, if I'm using microwave oven, I might think that to heat up the liquids, I need to use these buttons, and to heat up meat, or some other thing, I need to use these buttons or this sequence. Also, there is one more thing you need to cater for expert users and novice users. If you are developing an app, you might need to know that there might be some expert users that are going to use the app in totally different way, and they have totally different mental model than you're novice users. So you need to take care of both of these mental models, or both of these users. Now, let us see some of the examples of mental models. Here is how you are going to clear that gap between a mental model and a conceptual model. You are going to show different walk-through screens in the start of your app. You can see over here, one example is here. Another example is this onboarding screens, you can see over here. These are three screens and they're highlighting each feature of your app. There is one more. This is better because you can see it is gradually taking you to the first step. It is guiding you towards the first step, which is this login with Facebook. This is really nice. This is what your apps, your products should be doing. They should guide the user on their first use, how to use your app, rather than opening your manual and reading through different pages and browsing what I need to do before using this app. Now, here are a few images from dream times, and this one is also from dream times. These are the old microwave ovens. You might have used them. They have buttons like this. These are different heat levels, and this is the timer. This is very simple to use. Just you need to select the timer and capacity at what it is going to work. This is very easy. You just need to turn the knob. For many years, we tend to use something like this, so our mental model was built upon it. Whenever we see some designs like this, it is from Samsung. If I try to start using this, after using these, I'm going to really have hard time using it because I don't know where to start. Should I press the Start button, and it is going to guide me? Or should I start typing on these buttons? There is no guidance over here. Now, if you look at these model, these I think the latest models coming now, you can see they have combined the old concepts, or old mental models with the new one. You can see what we have here, we have the knob, and here we have different buttons that are very edgy, and they have build effect, so like old buttons. Here you can see this is basically a touch panel, and these are buttons. You can see, it is I think a bit more easier to start with, have less controls, you just need to select anyone and just turn this knob and start. This is my mental model. This is all about mental models and conceptual models. I hope you have enjoyed this lesson. If you have any questions, ask me. Let's move on to the next lesson. 15. Working Memory and attention Span: One of the biggest limitation of human mind is working memory. Working memory is our short-term focus of attention, and it has very limited time span. It is the most limited resource we humans possess. It is basically our attention and this attention is highly focused and very selective. You are sitting in a restaurant and you are talking to your friend, dining out and you are not aware of most of the people around you that are sitting in the same restaurant. But you weren't aware of just a few things in front you and a few things your friend is saying. So this is how our working memory is limited. Similar concept applies to you. You are right now conscious of the last few words or ideas you have heard from me. But probably you don't know what is the color of the wall behind you. So these are the limitations of human minds, the working memory or attention, our short-term memory, it is also called short-term memory, is very limited. Now, let's talk about the actual limitation or capacity in seconds or in numbers of working memory. The average capacity of working memory was four plus or minus one items. Before that, there was an old research saying that it has something with the seven plus two or minus two. But the new research is that it is four plus or minus one. It also depends on the item, what item you are trying to store, whether it's just a big number or it is different names of different fruits. It also depends on that, but the average range is four plus or minus one, so it is from three to five. Now how long the information is going to stay in your brilliant mind and duration is from 10-15 seconds by Goldstein. I think the research done by Goldstein, there is one more term that is related to working memory, which is cognitive load. It is shown and talked about a lot in user experience design that this thing is going to increase the cognitive load. It refers to the load placed on your working memory or your processing power of your mind. It could be any calculation, hard calculation, or it could be memorizing things. So keep in mind that this cognitive load means the load placed on your short-term memory and how you are going to process that information. Now the main problem with working memory is that it is highly volatile. If you are working on something and someone just interrupt you, you are going to lose everything which was in your working memory. Now, this volatility also applies to goals and to details of objects. Maybe you are trying to remember the list of items and you went outside of your home to grab a few things from grocery store and you met a friend and he asks you how are you man, what's up? This and that and suddenly you forgot all the list of items you are trying to buy from the grocery store. It is very volatile you are not going to keep it for longer durations in your mind. If you lose any item, you are also going to lose the track of the thing you are trying to do or you're goal. Maybe I was trying to go in the kitchen to get some milk from the refrigerator. But when I just arrived in the kitchen, I forgot what I was doing here, I don't remember. Maybe I was here to get a glass of water. So this is how our working memory works and this is the biggest limitation it has. The information in the working memory is going to disappear swiftly. I'm going to share with you a lot of examples of working memory and then its application in user interface design or user experience design or mobile apps. But right now I'm going to show just the one application which is headline length. Now, according to the research published by one of the social media sharing platform company that is called Buffer and they actually researched that what is the ideal length of any headline. They found out that six words is the ideal length because six words are within our working memory limit. It is very close also, Jakob Nielsen, he's one of the pioneers in user experience design. His study also shows that headlines with the length of 5-6 words work very effectively. Actually this is all related to our working memory capacity. We have a capacity of three to five words, or maybe three to five items. It is easier for our mind to process these many chunks of data. If we have like a 10 words headline length, our eyes and mind are going to skip some of the verbs too easily or quickly, grab the idea or perceive the idea what this headline is actually saying. Keep this in mind while you are designing mobile apps, or you are designing forms or all these products. Keep in mind that you are not going to put your user into a situation where he or she has to remember a lot of things, or they have to remember it for longer durations. Let's move on to the next lesson. 16. Examples of Working memory: Let's see some of the examples of working memory and how different objects or design elements they can lift the load on your working memory. Now this first example is Google Maps, and you can see this IM here map locator is going to help me memorize that I am over here. Also, you can see all the symbols around me like this mosque and this E-salhulat Center. This is a school. Then we have this food club or food area. Then we have this bank over here. So all these things are helping me. My working memory that here's something is located. So I can easily pin point that I want to go over here or I want to go over here. I have to take the turn. These maps and the apps that use, uses maps to locate the customers or users current location. This is really helpful. Another example is that if you want your user to have less working memory or processing, then you can use something like this. You can see over here at the top card shipping payment. Right now I'm over here. This is also another implementation that I am right now over here. I just need one more step like this one, review and confirm it. I want to enter the card. This can easily tell me that how many steps I have done and how much I need to go further. One more example is modes. Modes mean that right now I am in Incognito mode or hidden mode in my Chrome browser. You can see as I switch to this Incognito, you can see over here you can go on this over here, a new incognito window. Everything just changed. I am in right now in another window and that whole themes turns to black. There is a sign or symbol over here. This is telling me every time, every minute, every second that right now I am using this mode of this software, so I am shifted to another mode if they remove this, all this, and I might be thinking that I'm using my normal browser via this browser is asking me to login again on this site. This is another way. Using modes, you might have seen different video games. If you're switching to another mode and it can change the whole interface or some indication that you are right now in this mode, you are playing in this mode, network mode or team player mode or something like that. One thing that can also help in elevating your working memory load is this, you can see on this corner, this is called breadcrumbs. This is the path, again that I am right now over here. Also you can see the selections. If I have clicked, selected this one, this is telling me that right now I am on this selection. It is highlighted all these indications and signifies. They are telling me that right now I'm over here and I'm right now in this state. Let's take another example of walmart.com. You can see again, they have very nice bird comes and they are really visible. In this example, you can see this is not very visible also, it is very packed. Here we have very visible breadcrumbs. Then again we have whole trail and one more button, edit over here back to previous page. So if someone wants to go back and do another page, this is very handy. Now another example is history. You can see if you go to YouTube, all the videos you have watched, it keeps the history of all those videos so I can search inside my history like you can see over here. I can see what I searched for. Then this is my watch history, and this is my command history. I might have forgotten that the last night, which video I was watching for example, like MacBook Pro, power button, fix. I can grab those from here. Also, if you go to this browser history, all these browsers, they keep the history of which pages or websites you have visited at what time. This is helping our working memory because we cannot keep all this information in our working memory. Similarly, if we look at different new softwares like Photoshop or even this Microsoft OneNote, you can see now they have enabled autosave. If I try to change something, you can see over here, it shows the name of the person who changes on this document, write notes in Cloud. It syncs across my iMac and Windows PC. I'm using just this document and it is automatically saved and uploaded to my Cloud or the sync across different devices. This is really neat feature, autosave, a lot of apps, they are using autosave. Let me go back to the cards over here. This is another example of autosave. You can see over here this is the items I left in my card and when I went back, it is showing me the same items over here. It means it is keeping record of my items over here and all my orders, all orders. These are also good for my working memory. Another example of working memory is that you have seen these recent files in a lot of apps and software. This is just to memorize that last time I open all these files or this file or this file or this file. It saves me time locating all these files. You can see over here in I am right now in Photoshop or it is displaying, I think almost 10-12 last open files and it is sorting them by this last opened okay. My most recent is over here. This is really logical and it is matching my mental model that this is the first one, the last one I used then this one then this one. These are all the files. This is another example, recent files. This can help a lot making less load on working memory. This is all about working memory and examples and how we can implement it to elevate working memory. We don't need our users to think everything and keep them in their memory. That's it. If you have any questions ask me. Let's move on to the next lesson. 17. Recognition and recall: If you see any of your friend coming from like 500 meters or even 200 meters, you can easily recognize him, even looking at the whole body or movement that this is that person or this is John or this is Sara. Our brains are wired to recognize things at a great speed. You can easily recognize a face you have seen 20 years ago. Similarly, the patterns or familiar faces, or the familiar icons you have seen in already few apps, your mind is going to process them very fast and they are going to be recognized very fast. It will take very less time to recognize them. Rather than recalling them or getting them from your long-term memory and thinking that, "where did I see this person? I don't remember him." But if you see one of your friends, you are quickly going to remember him. You don't need to recall anything, you just recognize him, you just know who he is. You can apply the same principle. This recognition is easier than recall. Recall means that you are going to bring that information from your memory, drag it out. But recognition, it works just like snap. You are going to know that what this actually means. So the user should not remember information from one part of the screen to the other one, they don't need to recall the information they just saw. Also, don't try to use any new kind of icons or patterns that user is not familiar with. Similarly, if we show a user unveiling new pattern or very new behavior of an app which he haven't seen before, it is going to be very difficult for him or her to use that product or even sign up or sign in. So avoid recalling and try to implement recognition, try to use similar patterns. We are going to have another full lecture on patterns in the next section. Let's elaborate this recognition by using some example. You have filled a lot of online forms or login forms, you have seen that there are lock icons in the password field. If you have seen it several times before, you are instantly going to recognize that without any labor or without any help that you need to put password in this field. By using familiar icons and patterns in your website or mobile apps or software, you are actually reducing the cognitive load from your user. So keep in mind that you are going to use similar or familiar patterns and icons. Don't try to create a new type of letter or field that a user is unable to recognize. Now there is another concept that is related to this recognition, which is user expectations or user anticipation. Always try to meet your user expectations or anticipation. What this concept means is that if our brain is wired to see a similar pattern again and again, it will follow it. So if you are trying to create a new kind of tab bar that is floating inside or middle of your app, then user is not going to recognize it. User is not expecting the tab bar to be floating inside the app in the middle of it. Also, if you try to look at the cart icon or wishlist icons, they are on the top right side of any e-commerce website. So if you are trying to place the cart icon on the left or in the middle, user is not expecting that pattern. They are going to miss it, they're not going to recognize it, and it will take a lot of time for them to find this and make the user experience worse. So don't try to create a new pattern, a new icon to confuse your users. In the next lesson, we're going to see a lot of examples on pattern recognition or recognition and user expectations. If you have any questions, ask me, let's move on to the next lesson. 18. Examples of Recognition rather than recall: Let's see some of the examples of recognition rather than recall. It is a very basic principle and I have seen a lot of designers using it in a very wrong way. So this is our first example. Now you can see over here there are a few icons which we recognize instantly like this "Back" icon and the "Phone" icon, and also the "Chat" icon maybe. But for these three dots, maybe this is "More", but most of the users, I think they are not going to recognize it, new users. Then at the bottom you can see this is our main tab bar, and this is our main navigation bar of this app. You can see two users and one user, then this is, I don't know what is this sign and this is for Setting. This is very common, and this is not very common. This might become and like maybe it's my profile or account, and this is also not very clear. You might get into some ambiguity that I don't know whether it's my network of users or whether this are my followers or whatever. So make sure if you are using or introducing such icons, they should be recognizable easily by the users. So try to use standard icons over here. If you can't find standard icons, then put some labels under them like this is maybe my matches or this is my profile, and this is my followers, and these are my settings. If you can write something in your user interface, it is the best thing you can explain just by one word or two words, that this item is going to do the things. Once the users are familiar with these icons by looking at them and reading their titles, you can remove titles later on or the labels with these icons because users are already trained. For new users, this will always be a problem. Now let's see another example. You can see over here this is a Login screen designed by this Vitaly Rubtsov I think it's a dribble shot. Now you can see this is pretty standard, but there are few things which might be confusing that this is going to be always e-mail. So this is basically an "E-mail" icon. So anyone using this screen will always assume to put their e-mail over here and this is for password, but maybe few users or maybe old users that are just starting out on mobiles or smart apps they might not be able to login using this. But still I think this is good example because they're using almost the standard icons over here. Another example, this one Login and Sign up you can see over here. Here we again have this "User" icon. Now, what do you think? Should you use your username over here or should you use your e-mail over here? This is pretty standard for password, but this is a bit ambiguous. It might confuse your user. So these are few things you need to keep in mind that recognition rather than recall. You can use an "E-mail" icon over here, or you can just use something like this. This is the best example of Sign up and Sign in I have ever seen. Always try to use the labels at the top. So when user is typing, he knows or she knows that this is what they are typing over here or this is the information required. If you're using something like this inside labels, these are not very good if you have a form like four or five fields. Never try to use it. But if you have just two fields, maybe user can remember this. This is in the limit of working memory. Please try to remember I showed you that it is almost like three to five items. So best example I would say is this one. Every label is clear then they have text field over here; password, confirm password, invitation code. This is clear cut. Why? Because it is using text to explain that this information is required. Also, you can see a funny way to say that crap, I forgot the password. But if they put underline around it, then maybe it's easier to click. Then we have this Login and Create accounts. So these are also very good indicators that we need Login over here, this is Login screen, this is a Create Account screen. This is pretty standard if you are using any symbols, any icons, try to use standard ones. If you are using a new icon, try to use a label with it, like username or put your e-mail over here, something like that to help the user to solve the confusion that what this icon means. Now, let's look at this screen. This is pretty standard. This is an old screen of Facebook. In the start, they showed some labels around these icons if you remember, maybe some of you might remember. Then once the users were familiarized and get familiar with these icons, then they can easily know that this icon is for my requests or network. This is for my messages. This is all the latest updates and these are my feeds and these are the extras. So although they are using something like this, but still it is better that you put some labels around it and make it more usable. Okay one more example from Google YouTube, and you can see over here, there are a few icons at the bottom of this video, like, Like and Dislike it. Whenever I hover on it, it shows a popup. It is another way to show the user that this icon is going to do this. So first three icons are pretty familiar to me and I know what these two and they recently added this one over here, which is a bit new for me. So if I hovered over it, it says "Add to". I have to click on it to see what options are available. You can see over here I can add to my list, playlist. This is a bit confusing for me. I think they recently changed it and these things can create confusions. I think before that it was I think here in this area and they recently moved it over here. This is good idea to show the texts on hover. But I think it is only possible on web. So on mobile apps, you cannot show something like that. So make sure that you are catering for all these problems or all these confusions users can get from your interface. So this is all about usability and user experience design and what you need to keep in mind while you are designing your screens, login screens or developing or designing. If you have any questions, ask me. Let's move on to the next lesson. 19. User Expectations in UX: Let's talk a bit more about user expectations. Now, user expectation happen in two steps. First, we are going to recognize the object, what this object is, is this a search bar, is this a button, is this a drop-down navigation bar or a close icon. Then in the next step we are going to see how it is going to behave and work. What we need to do in a better user experience is we are going to minimize the gap between what the user expects and what they are experiencing or how this thing is behaving. Everything you're designing, it should behave in the manner the user expects it to be. Now, the question is how these expectations are formed. What we expect is all in our hand. It is about the knowledge we have gained from outside world or from similar experiences that is gathered in our head. It is called knowledge in head. It is the term defined by Don Norman in his book, The Design of Everyday Things and what it means is that if we have experienced or used similar products then they are going to form our expectations. The first time I saw the pop-up bubble from Facebook chat, I was unable to remove it from my screen for like 30 minutes. Now, designers and developers, they have created a design pattern or design pattern library. Now these design libraries, they help us to cope with user expectations and familiar behaviors so user can instantly recognize that this is a drop-down navigation or this is a nav bar, or this is a drop-down navigation bar of any website. There is a whole lecture on this design pattern then I will show you these design patterns and its websites in the next section. Right now you just need to know that these are designed pattern libraries that are built on familiar experiences and familiar items that users can instantly recognize. We as designers and developers, we should first look for those patterns and use them in our digital products rather than inventing or creating a new pattern or a pattern of our own. So keep all these things in user expectations. Let's see just one example. I'm going to show you more examples in the next lecture just to give you some hint of user expectations. This is the screen of Microsoft Edge which is with Windows 10 and you can see that there is no search bar at the top. You can see it should be in that place over here. What they did is I don't know, they tried to maybe modernize it or whatever. They put it over here like Google. I was expecting the search bar at the top and for like five minutes, I keep on pressing over here in this area. I was not expecting that the search bar is moved down here or this is the first page where I need to search over here or enter my web address over here. So for like 5-10 minutes, I just keep on tapping over, clicking over here in this area and saying where I have to type the URL of the website. What is happening with this browser? I don't know but now I think they have fixed this problem with these new updates but this is the screenshot I took of the problem I was having. Also you can see in the bottom of this website, it feels like it is a webpage. So on a webpage if there's a search bar, it means that it is going to search inside this website. This was a very unfamiliar pattern and very new pattern, now I think they have fixed it but this is very confusing for any user. This is all about user expectations, design patterns and how they are formed. If you have any questions ask me. Let's move on to the next lesson. 20. User Expectations explained → Headshot Video: Now I'm going to explain the concept of user expectations and how they are formed by using the same two phones I showed you before. This one is a toy and this one is iPhone. You can see that this has a some screen area over here. What happened is my kid, he's two years old, most of the time he uses this phone. So he watches YouTube videos by tapping on different areas on the screen. He had built up expectations that every phone is going to be functional. You can use it by tapping on the screen. When I gave this phone to him for the first time, he tried to use this screen. He tried to tap over here to activate it, but it was not activating. For like 15 minutes, he was not getting the idea that he needed to push these buttons like that. This is the major problem. This is how user expectations are formed. They are formed by the knowledge in your head and what you have learned before or what you have experienced before in the similar way. If you have similar devices like these, you are going to use them in the similar way if you see a new one. This is how user expectations are. I love to see kids when they try to show me some user experience problem. I love to see them. They are the best example of user confusions and user problems. When they are going to see a new product, they are going to react and try to use it. This is the time you need to see where they are going to put their hands, whether they are going to pull it up, whether they are going to fix it. This is all about user expectations and see you in another lesson. 21. Examples of User Expectations: Now, let's begin with some of examples of user expectations and how they are formed and what we are expecting, and how most of the designers and developers are making the same mistakes. Now, if I show you this website, this is almost a pretty standard e-commerce website, I'm looking for a very big such model here, then I'm looking for support email. Also, I am looking for mostly in the right side, right corner, the shopping cart. So also I have checkout sign-in, so all these are over here. Now, one thing which I was not expecting is that, these settings are on the left, but still I think these doesn't matter, these are not very big settings or very big problems. This is almost pretty standard, like I mostly need the categories over here, this is pretty standard and everything else. Now you can see over here add to Cart button is very prominent, this is what I was expecting. Now, let me show you some of the problems and examples where a lot of designers and developers have done it really wrong. Very poor User Experience and usability. So let me show you one example. So in this example, the theme is very minimalistic, but the problem with it is, it's search bar. You can see over here I have to click over it, and once I click my eyes are going to be locked on this area. I'm going to show you this problem, which is peripheral vision, it is in the coming lecture I guess, and you can see the search bar and icon is on the left over here. So once I click on it, I don't know what is happening, so I just kept looking over here, and then I looked on this side and found this. This is too far away, maybe if they want to use this pattern, they can just use this area over here. Still this pattern is not very recognizable and users are not expecting this behavior. So this is pretty standard and by looking at it, it doesn't tell me that this is zero items or zero for the number of $ or the cost, so this is also a bit ambiguous and this is not what I was expecting. This search Bar is all, although it is very unique and modern, but still I think it's a very big problem with e-commerce websites. Now if we go to this store, very nice design, very good team, very lovely everything, but if you look for search bar over here or in the middle, you cannot find it, because they have moved it on the left. So this is really, of what I should say, it is really unexpected that this search bar can be found on the left side where the logo should be. So they should switch these places, so logo should be over here, and search bars should be in the middle. Now, if I go to this website, there are a lot of user expectations, they have really messed up. You can see settings and card is in the middle left, it should be over here and prominent, then the search bar is very strange. They have two search bars over here, one this one and another one over here, which is, I would say really not a very common and familiar pattern. You can see the logo and just sitting in the middle. This is very funny. I would say this is really unusable website usability sucks and user experience too. Everything else is okay, but these things are really going to hurt a lot, even if you have designed this very nicely and everything is created, but still, these few things are going to confuse your user. Let me show you more examples, this is the same theme, same problems. Then we have this area and you can see over here, card is over here, search bar over here, that's good enough. Where is my login and where is my settings on account? They shifted it on the left side. This is really messed up user experience and usability. I am showing you these themes from invent on market, and these are developed by different developers and designers. They should look on these elements. Then this is also really messed up, this is not what user is expecting, searches over here, and no icon for shopping carts, so I have to search all these texts, read all these text to go to the shopping cart, this is also violating the rule of recognition rather than recall. This is also going to give your users a lot of problems. Then you can see there is no information for all these products, you can see, I don't know what is the price of these products. This is really bad example of an e-commerce website or theme. This is really nicely designed, everything looks cool, but this heart icon, I don't know whether it's my liked items or wish list. Maybe I think a little bit of text over here like wish list is really helpful, although they have some vertex like this, so it shows that this is a wish list. Again, they have violated the rule, they have used the search bar on the left, and this is a very strange pattern, it should not be like this. Again, over here you can see the search bar is on the left. So you can see there are tons of these themes that needs a lot of fixing. I have even seen a lot of e-commerce websites that are using or doing it very differently, and they are surprising their users with the expectations and confusing them, so make sure you are not making these mistakes. This is the last one. Everything seems pretty fine in this one, but I'm going to show you a very strange behavior which I have found over here. I'm not expecting, so I am not seeing any "Add to Cart" button on this product. So once I hover, I see this options or something like that, and I'm not sure what is this, so if I hover on this plus button, and I really don't know what it is going to do, so if I press on it, you can see it has added this item to my cart. So try to avoid these new patterns or the expectations which users are really not expecting, and they are not going to recognize these objects, and they are not going to use them. They will be in confusion, and most of the time they are not going to use this feature. So these are all examples of really bad user experience, usability principles and violating most of the basic principles of user expectations. I hope you have enjoyed this lesson. Let's move on to the next lesson. 22. Peripheral Vision Limitations: Another really awesome concept is how our vision works or our eye works. We are limited in viewing so this concept is called peripheral vision. What you see directly in front or in the middle of your eyes is called your central vision which is very clear. What you see off to the sides or on the sides of your main vision is peripheral vision. The basic limit of peripheral vision is that you can't see clearly in your peripheral vision, it is all blurred. A simple exercise to see how our peripheral vision works. If you try to focus on this screen, or slide, or the heading of this screen, and if you try to read the text below it, you will fail, it will be a bit blurred you cannot see it clearly. If you are focusing on some area, the area around it is all blurred you cannot see what's happening there or what is written there. Let's see how our eyes works with this diagram and how this peripheral and central vision affects our user experience or how we see and interpret things. Now as you can see in the middle our center of gaze is most clear, it is four details, in the middle we can see very clearly, it is just some focus area. I'm going to show you how much it is, on the right side on the sides the first area is near peripheral vision we have some blurry area, over here we don't have too much blur, then in the mid peripheral area we have more blur. Now on the far left far peripheral vision we cannot see anything clearly, it is all very blurred. Now let's talk about the limit of peripheral vision, your peripheral vision is very weak on the right and the left, or on the edges, and it is very clearest in the center. Central vision is used for seeing details while peripheral vision is more experienced on seeing motion, so if someone just move on the right side of your shoulder and he tries to hit you, you are going to duck instantly. Why? Because your nature has implemented this peripheral vision that we can respond to the motion very clearly. If some animal, or some dangerous thing, or some car, or some cycle is coming from the right, it is blurry in that region, and if something moves very quickly you are going to guess it or our mind is going to interpret it. This is how peripheral vision works, it is better at detecting motion. Let's talk about how much the visual field is for peripheral vision and the central vision. Our visual field is almost 170 degree around us and 100 degree comprising of the peripheral vision. Most of it is peripheral vision, we cannot see most of the things around us clearly. Let's try to see how this peripheral vision is important in designing digital interfaces. When you are designing some messages or notifications, you need to keep them in the central vision, and if you cannot keep it in the central vision or very close to where the user is looking, then you need to move it, you need to use some motion to show the user that something happened or some error happened. What designers do is they try to use the motion called pop effect or pop-up effect to focus the attention of users so user can instantly see that something is going on the right or the bottom of the screen, and it will allow user to find the information easily. Another way to cater this peripheral vision is sound. You can move things and you can also give some sound like you have seen help bubbles coming on. In different websites, they come up with some sound and animation, so you can easily get to the attention that something is happening in this area. Central vision is very limited, everything on the screen that is not in the one or two centimeters of your click location then it is going to fall in the peripheral vision where resolution is very low, everything is blurred. If you are using some form or button and the user is going to click it, then your error message or success message should be very close to that button he just clicked, so if user is viewing on any object or he's focusing on anything on your screen, the error message or anything you want to give feedback to the user about what he's doing, it needs to be very close to the user's central vision, so this is how peripheral vision and central vision works. I will show you some examples in the next lesson so let's move on to the next lesson. 23. Examples of Peripheral Vision limits: Let me show you some of the examples of peripheral vision and how we can enhance our designs and products by implementing this peripheral vision limitations. You already know that our eyes are limited. Now let me show you some of the examples of peripheral vision and how we can avoid the limitations of peripheral vision value while designing for web and mobile apps. That most common problems we see are when the users are using something. For example, I am using this coupon code creation setup on this Udemy platform. If I try to click over here, and I create a coupon, for example, free sample or something like that. The discounted price is $50 and you can see now over here I am focused in this area. If something or some error happens and it shows over here in this area, I'm not going to review it. I'm going to create ten coupons and deadlines will be next day. Once I click on this, you can see I didn't get any message for two seconds. Okay, this is the moment. Once something moved, I was looking in this area, over here, you can see I was focused in this area. But once my peripheral vision saw some movement at the top, I was directed to the message. If this message doesn't show up for four or five seconds or it is delayed by more than one or two seconds, then I am going to be confused, my coupon was unsuccessful. This is one way of using peripheral vision and how to avoid the limitations of peripheral vision. By showing this ideally, this should be appeared in this area. As a message and with some blurred that this thing has been created. Let me show you one more example. Right now I am on Amazon dot com and this is my wish list or wish-list of products for calligraphy. I'm really interested in this subject. Okay. I have this brushes and if I try to delete this, you can see over here where the message will be appearing. Let's delete this and as soon as I deleted, you can see the message been deleted on the left side. It is in the same area where I was looking. I was looking over here and it was over here. As soon as I saw the shifting, I saw this message but ideally I think it should be in this area, in the middle or maybe at this at this side. I'm going to undo it and I'm going to show you something else. Let's delete something from the middle, like this one. The only thing is what they did is they are using some blurred effect, if you might have seen it. They are using some blurring effect of the text to show me that I have deleted this message just to attract my attention to the message. This is another way. Let me show you one more example. This is another example and this is really bad implementation of this peripheral vision and form errors display. What I did is that I was creating a form on this store and that was TeeChip store. I was filling all the form fields and when I press the Save button at the end, this error was appearing. You might have known that a lot of your users, web users, they are not using their browsers in full screen. What was happening? This error message part was hidden behind and I was not able to see it. It was below the fold. Fold means that I was not able to see it, my browser was not maximized. For five to ten minutes, I kept on filling this and clicking this. But then I saw this error message. I was not able to relate it to any of these fields. What I did is I was changing the description field rather than title field. You can see over here it says that title field must contain these many letters. What I was doing is I thought that it is showing the error related to this description because you can see if we move this error below this title field or above this title field, then it is going to make more sense and it is in our peripheral vision. Also, our minds are plugged with grouping, which is our psychological. You can say visual psychology, that if something is grouped, we consider it to be related. If this error is grouped with this title, then it would make more sense. Never make these mistakes or if the error is outside of the peripheral vision. For example, if I had the button over here and the error message below it over here, then I might be looking at the button and I might miss the error. These are the examples you need to keep in mind that the error messages or any information or notification you are showing to your users, they must be in the peripheral vision. Let me show you another example of peripheral vision and how this website is not using it properly. This is Shophive and one of the biggest e-commerce websites in Pakistan. If I try to login, let's show you the login page. Now, if I try to login, you can see over here there is no login button. I fill this one, then I fill this one. When I went to press my button over here, there is no button. Why? Because my peripheral vision is limited to this. For a few seconds I was trying to find the button and then suddenly I find it over here. This is really odd. This is not user, what user is expecting first thing. Then the second thing is it is outside of my peripheral vision, I was focusing on this. This is really confused. Make sure if the user is viewing and filling the form like this, in this line, in this angle his eyes are sliding from top to bottom, then he should find the buttons over here in this line. Not over here. I hope you have enjoyed this lesson. If I come up with another example, I will really share it with you guys. I think you have understood the problems with our peripheral vision and how it is limited. Let's move on to the next lesson. 24. What is Context Of Use?: To be a better user experience designer, one of the thing is that you study human behavior or psychology. The second one is that you are going to look for users' environment or the context of the usage. If you know that what your app is going to be used and how it is going to be used and where the user is going to use it mostly and in which situations, then you can design it better. For example, if you design an app, for example, the app for tracking an address or something and you know that the user is going to use it mostly in the sunlight, then you know that you are going to design a bright color scheme for it or maybe darker color scheme for it if he is going to use it in the night. You are going to make sure that the contrast is high and he can view or he or she can view the whole app screen while holding it in the sun. Similarly, if I'm a landscape photographer and I take photos during rain and near lakes and rivers, then I need a camera with some weather shield built into it. A lot of new cameras coming up, they have weather shield in it and a lot of photographers are inclined to buy those cameras. If you know the contexts, it is going to change the whole direction of your product design. Let's see another example of the context of use. Context can also tell us about the limitations of our software or usage, for example, if I'm developing a software or an app for banks, then I might need to see their workstation setup. I need to see what the operating system they are using or what browser they are using or what version of operating system they have. It can also tell me how much the distractions they have, for example, they have a lot of crowds in the bank or there is a lot of noise in the bank, fan noises or how their office is set up, how their rooms and their chairs are setup. Also, what is the screen brightness, or what monitors they are using? So 95 percent of the time, banks have a lot of outdated browsers and operating systems installed. It happened with me once that I was correcting and designing a website for a very big bank in Australia and the client keeps on asking me to fix the banks for Internet Explorer 8 and at that time, I think there was Internet Explorer 10 released and a lot of users were using Chrome and Firefox. I always complained him, why do you need me to fix for Internet Explorer 8? What I learned was that all the banks, they had Windows operating system, Windows 7 installed and they had Internet Explorer 8 and there was no option to download Internet Explorer 9 or upgrade because they were fixed. You see that the contexts of use and how your product is going to be used is very important. Now, how you are going to indulge into the contexts that how you are going to explore the context of use. You are going to take pictures of user environment. You need to go out where actually using the product. You can go ahead and you can go to their offices, their homes, spend few hours with them, spend few hours while they're using your product to see in which situations they are going to use it. Some user researches, they spend days or even months figuring out the context how the product is going to be used, for example, if we have baby alarming or baby monitor, we need to spend a whole day figuring out how the sleep patterns of babies are and what the babies are going to do with the monitor. Maybe they are going to grab it and put it in their mouth or they're going to throw it away. Is it too bright in the room or is it too dark in the room of the baby and your monitor cannot work, your camera cannot work in the dark atmosphere? These are all the things you need to keep in mind while you are designing a product or building a product or an app or a website. I hope you have enjoyed this lesson about contexts of use and how this user context plays important role in user experience. Let's move on to the next lesson. 25. Context of use → Headshot video: Today I'm going to explain the context of use by showing you these two mobiles. Now, this is a dry mobile and this is iPhone. Now the major difference is that this is meant for kids. The context of use is totally different for these two devices. This one is for kids, they're going to throw it on the floor. They are going to bang it in the wall. But on the other hand, this phone is not meant for banging in the wall. So this is going to be put in the pocket so you can see the slim shape. You can easily put it in the pocket. You can easily hold it in your hand. On the other hand, this one is not meant for putting it in the pocket so it is very huge, you can see over here. If you see it closely, it is a bit fat, so it is meant for kids so they can easily hold it. The body is something like that. You can see that these two products are totally different because their contexts of use is different. Similarly, when you use some cameras, they are different because their context of use is different. Some of them are just point and shoot. They are very small in size and some of them are for professional use. They are very heavy and they have a very good grip. You can easily grip them. This is more about contexts of use and I was saving this toy from like six months in my drawer. Just to show you this one. Let's see you in another video. Take care and see you soon. 26. Why stakeholders are important in UX?: We have already learned that users are really important in any user experience design process or in any product you are designing. Now, the other side of the coin or the other side which is really important, just like users, are stakeholders. They might have the most knowledgeable persons and people about their product. They know the ins and outs of their products, their features, which are different from other products. These stakeholders, they include CEOs or the product managers, or the marketers, or even the investors, which are third party. They are interested in a certain feature of that product. For example, you might have used colored printers. Now, in the colored printers, you know that the color cartridges or extra cartridges when you end up your colors on one cartridge are really expensive. So maybe investors are looking for the printers that have cartridges that are expensive so people buying their product might need them or might increase their sales. Now, investors might be interested in the overall sales of your product. They might be looking for different markets like Europe or maybe Asia. They are targeting the specific market and they need the product to be in a specific language to be hit. For example, if they want to hit the Arab countries, or United Arab Emirates, or people from the Arab countries, they need to have their product translated into Arabic or have a support of Arabic language. Why do these stakeholders really matter? Why do we need to take their interviews or we need to see what goals they have? What are their aims? Because they might not be looking for revenue, profit, or maybe some stakeholders might be looking for the overall sales, and some might have interest in a specific feature of that product. So if you are trying to skip that feature which requires the user to sign up for $5 per month or something like that, you are cutting up the real profit or benefit of stakeholders. So you need to balance between both of them. You need to balance between the users and the stakeholders interests. From my point of view, if you are designing or developing any product, the right balance between stakeholders, interests and goals, and the users goals and interests is the real great user experience product. You might need to take off some of the features, or you might need to add a few features in your app or your website or your e-commerce site, keeping in mind that goals of your stakeholders. All the decisions made in any organization are made mostly by their CEOs, so they are the most powerful stakeholders. Most of the startups you see, they have CEOs that are really involved in the product and they are the makers of thought that product. So they might be looking for more sign-ups, or more market penetration, or more users flowing into their product rather than the revenue in the start. Once that user concentration is reached, they might be looking for the revenue. The same thing Microsoft did with Windows 10 upgrade. You might have had it free for the first time, then you need to pay to upgrade to the recent updates. This is how some of the stakeholders try to enter the market or they are looking for more users. These are different goals. You need to take care all of them. While designing your product, you need to see what goals the stakeholders are looking for. This is all about stakeholders and their goals, and their aims, and their interviews. You need to take one or two or even all of the stakeholders interviews to get their point of views and ideas about the product. You need to keep all these in mind while you are designing or developing your product. Now, let's move on to the next lesson. 27. Humans Behavior, decision Paralysis and Scanning Patterns: All humans are lazy, we are lazy, I am lazy, you are lazy. Why? Because it's in our nature. If you give any human a task where there is too many obstacles to achieve it, then they are going to give up. Same thing happens in our gaming industry. If the game is too difficult, you cannot even cross the first level, you are going to quit, you are going to uninstall that game. Similarly, in web design or mobile app design, lengthier forms they are not going to convert better. So try to avoid your very lengthy forms or don't let users fill hundreds of input fields before trying to use the app. Same thing happens with e-commerce industry. Cart abandonment rate is 69 percent. The second major reason for this abandonment is account creation. When it comes to creating a new account or sign up on any e-commerce website, 70 percent of the people are going to quit. You can see how this is going to apply to our nature that we are lazy if we see a lot of obstacles and if we see that this thing is very difficult to achieve, we are going to give up. Another user behavior is decision paralysis. I have seen it hundreds of times with my wife. Now, what you need to do is if you try to overwhelm your user with too many choices or too many things to select from, she's going to get into a decision paralysis state. Human mind gives up and they cannot make any decision. There was a research on decision paralysis, how it happened is a researcher, he puts like seven or eight different flavors of jams on a shelf and let the users make the decision. So users were taking most time and they were not trying to buy one of them because they were unable to decide. Then what he did is, he just put two or three flavors of the same jam on that shelf and the users start purchasing one of them. This is called decision paralysis. You might have seen on a lot of websites that pricing packages or pricing models of any website or any web app is no more than full pricing models or full pricing packages. Why is that? Because they don't want you to get into a decision paralysis. Now, to avoid this decision paralysis, you need to give users few options to choose from. There is one more behavior I want to share with you, which is mostly people do is they don't read the scan. This happens on any digital device, any website, any e-commerce site, our eyes and minds are wired to scan for the goal we're looking for. So if we're looking for something, we are going to scan, we're not going to read. There are two scanning patterns. One is Z-pattern and one is F-pattern. I'm going to show you both of the example images in the next lesson. Right now, just keep in mind that there are two patterns for scanning information. Z, it moves our eyes in Z pattern, and F is that we normally see the websites or patterns in F shape. Every human being makes mistake. Even if your apps score is 100 percent on usability scale, that it is perfectly usable, there is no problem whether they're still users will make mistakes. If you think that your app is very easy, very intuitive, still the users are going to make a lot of mistakes. There are two way's to limit it. First is that, don't let them happen in the first place. Use some affordances, signifies, or constraints to limit happening that mistake. Second is that you need to guide the user to fix the mistakes easily. You have seen that when you delete some emails from G-mail, it gives you the option to undo. You can easily revert back to the emails, you can easily get back the emails you have deleted. Another problem with humans and human brain is attention and distraction. We have very minimal attention and if someone distracts us, we are going to lose our focus. So you need to always put the burden away from the user's brain, or it is called, you need to lower the cognitive load from the user. You can see the example is Google search term prediction. When you start typing something, Google is going to give you some suggestions. So it is easier for you that you don't need to type the whole line, you just need to click on the suggestion and it is going to search for you. I will show you some examples of this human behavior in the next lesson. Now, let's move on to the next lesson. 28. How Old & New Brain make decisions: Let's talk about how the human mind works and how we make decisions. We have two type of minds. One is called the old brain and one is called new brain. Now, most of the time the old brain is making most of the decisions, and most of the decisions you make daily are made by your unconscious mind, that is also called old Brain, and most mental processing is done unconsciously. So if you think that you are thinking and making, and buying decisions, mostly with your intellectual mind, or with your decision-making mind, Then you are wrong. You are mostly using your unconscious mind or old brain that is making decisions for you. Some of the decisions where we have to compare a lot of products, it is by our new brain. Our old brain is very fast and most of the time it is going to take just 0.05 seconds to make an opinion about a website, about a product, about an Apple iPhone, or a new model of a camera. So all the customer need to decide is just less than a second. So this is very important. You need to learn about this old brain. You need to tackle this old brain when you are designing your products, they must look very cool, and very attractive, and very solid and reliable. There's a saying that first impression is the last impression, although it is not very true, but in user experience, it is almost 80-90 percent true. Why? Because 75 percent of the users, they admit that when they see for the first time any website design of a company, they are going to guess the credibility or the trust of that company based on the first look of their website. So this is very important. This is your old brain playing here. So people are most likely to purchase products if they perceive that this is a high-quality product or they have a great trust on their website. Now, if you look at any website and it looks very unprofessional, and very messy, or it is not designed very well, you are unlikely to buy from that e-commerce store or that website. All this is influenced by the overall user experience and perceived quality of product. So we are perceiving in the first impression that this thing is going to work or this is a trustable company, and this product is reliable. Now, most of the calculated decisions where you need to compare things with one another, or you need to compare the features of two smartphones, that which one I need to buy, your new brain is going to kick in. You need to compare things, you need to make calculations. This PC has more processing power or something like that. So when you try to compare or use the comparison mode of any product you are trying to buy, and see their differences and features, then this is your new brain helping you make decisions. So this is all about new brain and old brain, and first impressions, and trust and credibility of any product or app. I hope you have enjoyed this lesson. If you have any questions, ask me, let's move on to the next lesson. 29. Humans hate Change: Another human behavior and human psychology is that we hate change. Most of the humans, they are going to resist the change. Whenever an app or a website they make over, or the redesign their website or app, most of the users are not going to like it. They will start complaining about it," That we don't like the design. What is the background? Where is my stuff," something like that. The solution is to create a progressive change, and also consistency is If you are trying to design a new version of Facebook, you don't need to change the whole colors or the whole layout of the post. Maybe you can use a bit of different icons, one or two maybe, just a bit different, not totally different. Just an example, if you are using Facebook and they tried to move their Like button at the top and move it to the top of the post. What do you think will happen? Most of the users, they are going to get confused as they are going to start complaining why did you change these things? Similarly, you can see in websites, this happens and I think it happened with eBay years ago. They introduced a gray background from white and they suddenly see that most of the users start complaining about it and they wrote an algorithm, to change the background from white to yellow, I guess it was very slowly within years. Each day the value of the color was shifted to another shade of yellow and which was very close to white. The users don't expect that something is changing, they just introduced the change gradually. Whenever you want to change something in your website, your web app, you need to use some progressive change, introduce the change gradually, not instantly. Now most of us, I have seen a lot of clients, they want to redesign their websites. Now, the problem is that do we really need a new solution or do we really need a redesign of our website? Before making any changes to your websites, you need to make sure that users really need a makeover or redesign of the website, or you just need to change few things to create a better user experience. There is a very big example of Yahoo and Digg, they are both very big giants in the field. When they introduced new redesigned website, it was Yahoo mail, and I think they failed and Digg's traffic dropped by more than 25 percent in the USA and UK. I will show you the example images in the next lesson, so let's move on to the next lesson. 30. Our Goals and Change Blindness: Whatever we do all day long, our all actions are goal-oriented. We perform, or do things, or tasks based on our goals. Make sure that you know what are the goals and motivations of your users that is why in user interviews, we record different goals and motivations of others uses. For example, if I'm searching Google for a painkiller medicine, this is my goal. I am searching for a medicine. Similarly, some other person he might be looking for a video. There are different goals related to the same tool. Same product can be used in multiple ways when the goals are different. If you are designing a product or you are designing a screen, you need know what user is going to do on the screen or this app screen. Now, the goal might be different, for example, if you are using a login screen, you need to know that user is going to use a login. But what are the [inaudible] is he might forget his password or he might need to sign up rather than login. Is there any way that he can switch to that mode or he can switch to that goal and use the same screen for another goal. Keep all these things in mind. Another concept that is similar or related to goals is change blindness. Change blindness is that when you are blind to things that you are not looking for. For example, if your goal is to find a link to a PDF file on a website, then your eyes will be scanning for the link or any button saying PDF. Your eyes will skip any information or any other thing that is not related to what your goal is. Our eyes and our minds are blind to changes that we are not interested in. For example, if I am looking on an article or a video on Google, and if I search about a video, for example, h o to create a better user experience or something like that, whenever the search results are coming out, my eyes will be looking for only the video thumbnails. I will skip any other heading or articles, I will just look for videos. Here we are using our human behavior called scanning. We are skipping information, we're looking for our goal and the only information we really need. Keep all these things in mind while you are designing a product or a website or an app. 31. Examples Human behavior decision Paralysis hate change: Let me show you some of the examples for human behavior and how we make the decision with digital devices, and how human mind works while we are deciding, and what things you are going to cut out to make this decision-making and human behavior easier. You need less load on human cognition and human minds to make this decision-making process easier for them. I am going to start with this Amazon checkout process. You can see over here, right now I am checking out, and as soon as selected my address where I need to ship, you can see on this page I am only seeing Amazon.com logo and nothing else. Just I can go and click on this continue button, no other decisions, no other options. I just have three options for the shipping, nothing else. One task at a time and one decision at a time. If you give your user to decide multiple things at the same time, it is going to give him or her some headaches. Now if I try to click on Continue, you can see that I cannot even go back to my cart or the main website. The Amazon logo is not clickable. What I can do is I can just go in the one direction. If I click on continue, you can see over here it is asking me for the address and everything and giving me the total for the order. You can see now I must add this place, order stage, and there is just one primary action I can do. This is place your order. On the other thing I can choose is this delivery option on the delivery date. I am very limited with these options. Whenever you are using an e-commerce website or designing for it, or e-commerce app, or where you want the user to spend something, or make the decision, try to avoid all the distraction, take all the distractions away from him. This is the main rule. Now, let's talk about the human laziness. Humans are lazy and that is why we created all these remote controls. You can see this is the latest one. This remote control can be transformed into a lot of things that it performs a lot of functions, and you can see it also have the same design as the old ones. Let me show you the old ones. Here you can see the old ones. They are not that old, but they are also latest versions and they are also similar in shape and buttons like the old ones. Let me show you the old ones. These are the old TV remote controls, and it shows that humans are lazy, we want everything right now and here were we are sitting. Similarly, if I want some information or I want some video, I want it right now. If you try to create a lot of hurdles in my path to get that information, if I want some information, you should avoid as many of circles and it tried to remove them from my port. If I'm looking for a PDF file to download, it should be instantly downloaded. I should just click on the download button and I get the PDF. If you are going to create a lot of other ways that try to install this software before, I'm going to give you this download, I am going to quit. Keep all these things in mind, we are lazy, we want the information and everything right now. Let's see some of the examples of decision paralysis. You can see over here, and this is proto.io tool, prototyping tool for designers. You can see there are four options to choose from. This is corporate, agency, startup, and freelancers. Now you can see they have just given four plans. This is how we are going to limit the decisions of the user to three or four maximum options. Don't give them too many options, it is going to make them more confused. Few more websites, you can see this is the UX spin pricing models. You can see here we have 1 and 2 or 3 options and the pricing is attached to only two. I can either choose this one or this one. If I am a very big enterprise or very big corporation, I might need to call them. Only two options. So you can see these UX spin, it is a very prominent and imaging tool in user interface design and user experience design. You can design wire-frames and a lot of things. One more example from avocode, you can see over here they also have three plans and only two options to select from. You can see this is not going to be selected most of the time, and mostly the user is going to switch from this one or this one. They are either going to select this one or this one. Only two options and it is very easier to make decision. You can see they have just three dollars difference between these two packages. Most of the people are going for this one because they have a lot of team members and a lot of stuff. Most of the companies or agencies, they are going to fall in this category. This is how they are, I can say, trapping the customers or they are playing with our minds by giving them less options to choose from. Now we've talked about why humans hate change. You can see over here, this is a big old website and this is an article from side point, I will send you the link. What they did is they transformed it into this very totally different website. Now the users, they were not expecting this layout, they were not eager to see this change. What happened is you can see over here, its traffic dropped 26 percent in the US and 34 percent in the UK. This is a very big loss. You can see over here. It was sold out in 2012 due to this reason, a half a million, they lost their popularity and everything. Make sure that your user really need the change. The second example is the Yahoo mail. This is the old mail and this is the new one that changed a lot of things. You can see over here, compose and the buttons, the icons, the whole background, everything. It was not looking like the old email. Due to this Yahoo's change, only 25 percent of the Yahoo staff kept on using the Yahoo email. Yahoo didn't disclose how many uses they lost due to this j design. The third example was target.com. When the redesign, they also lost a lot of their revenue. As soon as the chained or created the new version, a lot of their users started complaining. This is the first thing. This is the biggest problem. Our minds and we humans don't accept change very well. Make it very subtle. They brought bad this left categories menu bar over here due to their users and remove the shadows. You can see over here heavy shadows on the interface, this new design, they removed it. In the end, I'm going to give you just one thing that don't try to flow with the trends. Try to be loyal to your customers and see if they really need a change or your website really need an upgrade. Are the users having some problem with my website? I need to fix that problem rather than designing the whole website. This is all about human behavior and how we don't accept changes and decision in paralysis and all of the things. If I have missed any example, I'm going to create another video, and we will see you in another video. With more examples, now let's move on to the next lesson. 32. F & Z Patterns, Cart Abandonment, Form Field Conversions examples: Now, in this lesson I am going to give you some of the examples of Z pattern or reading patterns, how we read and sift through the content, Z patterns, F patterns, and also the abandonment cart, abandonment rate problems and the form fields. Let's get started. Now this is an image of the Z pattern. Now the Z pattern was based on how we read the books from left to right. If we have a website written in Urdu or Arabic or any language that is from right to left. This is the opposite so it will be from right to left like that, but it will still be Z. It means that we are going to start, our eyes will start from the left side and then go to the right, then again shift to the left, and then again to the right. This is the pattern we use while reading paragraphs, advertisements, anything. Mostly our line will go from top to bottom like this in these area or will try to see this area or this area. Most of the times, designers try to use this Z pattern for their advantage while they are designing websites or mobile apps. The second pattern was F pattern. Why it was called F? Because most of the time it is also related to our reading pattern or hallway scape or skim through the content. We normally go this line in this vertical direction like that and like this. For the top content like this, we are going to go like this and this, and then we are going to skip everything. Now, if you see that there are few ads on this side and there is no content on this area. Most of the time we are mostly going to start looking on this side and then maybe we are going to look over here. So our eye scanning pattern makes this F pattern. Let me show you one more example. This is the Google search reserves. These are different other websites they are all making the F pattern. F pattern is basically related to our reading patterns and how our eyes are going to scan a page. Make sure you use this eye pattern to your advantage and put your important things in your product or your e-commerce website or whatever in these areas. Now there is a new research by this guy conversion XL. This is Peep Laja I think. He's researching about conversion, everything about conversion and he says that there are new patterns emerging that are not F patterns. Here is his new research from Google. You can see what here. This is Google in 2005 and this is 2014, I think it's his research. Now you can see this F pattern is almost gone. But still the reading pattern is always starting from this left area. You can see over here. Then some of the users, they looked at this area. The areas which are most active or most viewed by the users are in red, you can see over here. Then the next color is yellow, the green are a bit less. Users start looking at the top in this area. That is why most of the companies run different SEO campaigns to be in the top 10 results of the Google search results. This is all about patterns, Z pattern and F pattern and a new pattern that is this one. Now let's move on to the optimizing your form fields. Now, form fields are really necessary for conversion to make money on different websites, like learning pages and also e-commerce websites. Forms are essential part of getting information from the user. You can see in this research by Unbounce, they said that this image skip company, they reduced their contact forms from 11 to four and they gain 120 percent conversion increase from 5.24 percent to 12 percent so almost doubled, their conversion rate was almost doubled by reducing the fields. Note this is directly related to your psychology, human psychology. Why? When the humans see less hurdles in their way of achievement or their cool, they are going to pursue it. If they see a lot of hurdles lying in their path, they are going to quit. You can see over here, this is the optimum conversion rate that 3-5 fields is a golden standard. Don't try to increase more than five fields, otherwise you are going to lose 10 percent mourn conversion. This is about conversion and how humans feel reluctant to the laziness and when their goal is difficult to achieve, they are going to quit. One more example. This is another research with all the top companies and this is also the 37 cart abandonment rate statistics. Now, this is done on a lot of biggest websites, biggest giants like Adobe list, Star Trek, IBM, big companies like that. These are the major regions which are found in this research. They use 144 people. These are their responses, first was, the extra costs too high. This is a topic related to something else, which I'm going to cover in another lesson which is about showing every detail for decision-making. If you are hiding some details from the user which are going to help him decide, he's going too quick. The second most reason which we are interested in right now is the site wanted me to create an account. You can see a lot of people, they are going to be pushed out by this account setup. If the sign-up form is going to have like 10 fields, they are going to quit. Now, the third one is also related to our laziness and human nature that we are lazy and we don't like too many hurdles in our goal. Too long, complicated checkout process. If your checkout process on your e-commerce websites is very long, like it is taking six or seven steps, you are going to lose a lot of customers and revenue. These are the things that are related to human nature, laziness, and how humans feel when there are too many hurdles in their goal and they want to achieve it. Try to minimize hurdles in the path of the user's goal and their aims and what the main task they are going to use. For example, if they are going to use checkout process or account creation process or login, these are the two or three things that they are going to use on any app or on any website, e-commerce website, try to make them simple and as easy as possible. I hope you've enjoyed this lesson, if you have any questions, do ask me. Let's move on to the next lesson. 33. How Discoverability enhances a product?: Today we're going to talk about discoverability. Here's the thing. If you enter anyone's room and you can't find any of the switches to turn on the light or the fan, what would you do? The first thing in using any kind of product, whether it's a digital product or a physical product, it's discoverability. If you can discover how to use it, it's buttons or its features, you cannot use it at all. Discoverability means that how easily and swiftly users can find the features and buttons and elements of any product, any industrial product or any mobile app. Let me share with you a very small story. One of my friends, he came to my house and I showed him that I just bought this iMac 27 inches and for him, even for me, that was the first iMac we bought. Now when I bought this iMac for like first two minutes, I was unable to find it's turn on button or the button where I need to push to turn it on. Although this iMac is designed by Apple and they have the best design and end user experience designer, but still they traded of the design with discoverability. So they can put the turn on and off button on the front of the screen so it can be easily discovered, but they put it at the back on the left side. So what I did is then I showed it to one of my friends and I went out of the room. What he did is is the same thing, which I did for the first time. I tried to tap on this Apple icon in the front. I thought that this is the button where I need to just tap on it and it is going to turn on. He did the same thing. So you can see this how discoverability plays a vital role in any product, whether it's a digital or physical product. Now let me show you few more examples. Now, discover ability doesn't always mean that you need to discover the features. Their is also another thing that what this product can do or what you can do with it. It can also be communicated with your user by using text. So on websites you can see over here, here is my main headline off this head side mock-ups, the sub-headline and the button. So these 3 welcoming texts, they are going to define what you can do here. This is one thing. Now, let me show you another. This is the same mock-up tool and you might have thought that it shows the similar workspace as Photoshop, Sketch or any other tool. Even the coding tools like Visual Studio, Microsoft Visual Studio, they have the same layout. What they have is, here we have on the right side more controls or alignment options or text options to control or customize our objects. Here we have the objects, and here we have different controls that we can drag over here and place them over here. We have 1, 2, and 3 panels and this is our working area. So these features are very visible. You can see over here, some of them are enabled. You can see like this. Now on this interface you can easily discover the features of this app. You can see that you can do all these things with the tab. You can see now these have been enabled so I can align it in the middle or something like that. So let's see a few more examples. This is Square space. Now you can see this website shows a very straightforward and very simple message. Make your own website. No trial. No credit card required. Get started. So this is very simple, very powerful way of discover ability and users can instantly discover that this side is going to do this task. Let's see one more example. This is send-grid, and I don't know what it is. So I came here for the first time and you can see it has something to do with e-mail customization, e-mail newsletters, and a few other things you can see over here, see Plans and Pricing. But after reading this one, you are going to get the full idea. Partner with an e-mail service trusted by Dwell present marketers, scalability and delivery expertise. So it is basically more geared towards deliverability and maybe e-commerce. I don't know. Then let's see one more example here we have this Shopify website and it tells instantly the e-commerce platform made for you. It's an e-commerce platform. So these are the things that can really help figure out that what features are present in this website, this product, this web app, the mobile app, and they must be prominent, they must be easily discoverable if they try to hide all these buttons into a menu bar over here, hamberger menu, then this is not the thing I am looking for. You can see over here we have help center and get started. I might click on this. So these are all the things that are related to discoverability. Let's learn some more about discoverability. Discoverability also tells us what actions are possible and what is the current state of the device, whether it's turned on, whether it's turned off, can I turn it on? So all these questions are answered by discoverability. So don't try to hide features you really want your users to see in your product. For example, the hamberger menu we're the worst example of user experience design and these hambergers, menus, they are going to burry a lot of features of your website or your app away from your users. So make sure all the major features of your app or your product, they are easily discovered. Now you have learned a lot about discoverability. Let's move on to the next lesson. 34. What is Learability?: Let's talk about another feature of any product or any app that is really handy for user experience design. Now what is this is if you can't learn to use any app, you are going to uninstall it. Learnability plays a very big role. Now what's learnability is. It is how easy it is for a user to learn and use your products and it features. It is the part of usability of your product, how useful it is. Now, if your app is new, you need your user to learn it quickly. You need to show him, train him. You need to guide him or her toward the different features, and introduce them time, time to time, that you can do this with this product. Also there are different phases in learnability. There is a learner who is just in the beginner and there are advanced users and there are intermediate users. You need to take care of this. Now how you can improve learnability. There are few things you can put in your product or your app or your software to improve learnability. Number one is discoverable controls, as I showed you in the previous lesson, and discoverability that bigger buttons, bigger controls, enabled button or highlighted buttons, they can show me that I can perform this task. Then notifications, different notifications, different help videos notifying me that, hey, watch this video if you are unable to send the email or something like that. There is one more feature which you can add to your app is user on boarding. You might have seen a lot of different apps or software that shows you slide by slide one-by-one, and showed you different features, highlight the features of a product or a mobile app, and maybe some videos did show you small videos like ten 10-15 seconds on how to manage your emails, or how to delete your email, or if they introduce a new feature, they are going to send you an email with a video that this feature has been added and you can use it like that. Number four is social logins. Why social logins? They, because they are familiar pattern, your users already know how to login to an app using your Facebook or Google. It is going to help learn them fast, they can easily login or launch an app. They can easily start using it without any hurdle. Let me show you some of the examples of learnability. Now a lot of big companies like this sketch app, this is a new app for your designers. You can see there is a learn section over here. If you click on learn, you can learn different features for free of this app. It is really necessary that you are going to feature something like that on your app. You can see over here, here are different areas or different contents you can learn about it. Then even Adobe, that's a very big company, they have their own tutorials online, on their own website that are free to edit images and to do different stuff you can see over here if you want. They also have sorted it by experienced and beginner. This is what I was talking about, that you need to take care of your both users, whether they are experienced or whether they are beginner. Provide lending experience for both of them, so they can easily learn your app and start using it. This is also a very big part of user experience design. Now, there is one more thing you can do, this is how it works videos. You might have seen them on a lot of different websites and apps, and I think this is one of the best feature for Learnability. It can really pump up the learning speed of your users. That is all about learnability, if you have any questions to ask me, let's move on to the next lesson. 35. How Feedback plays vital role in UX?: Feedback is the only thing that can elevate your user confusion. So, if someone is using your product and he doesn't know what is happening and what he just did, then he's going to get confused. Feedback is basically the result of the interaction of the user, if someone presses a button or if someone tried to plug your product, tried to turn it on or tried to use its feature, it should tell what is happening and how it should be fixed or how it should be operated. Everything depends on feedback. Just take an example that someone pressed a login button and nothing happened for five seconds. What would the user do? He's going to press that login button, 10 times in frustration that nothing is happening, something is wrong. Here we have a need of feedback, proper feedback, timely feedback, in a timely manner and within the context. I'm going to show a lot of examples in the next lesson. So don't worry about it, there will be plenty of examples in the next lesson. Now, what should a feedback tell? Feedback is going to tell the user that what just happened. If you pressed a button, what just happened? What is the system doing? Is the system busy? Is the website loading? Is the app loading? Was it a success? Then the app is loaded and it was success. Was there any errors? These are all the feedbacks, also the current status of the device. So, if I open up a device or turn it on and it shows that set the time, so this is the current status that I need to set the time first to keep on using this device. In case of error, if there is an error, how the user can fix or get out of that error, this is also part of feedback. You experience feedback in all different forms while interacting with all the electronic devices, like your smartphone, which informs you of its low battery status by beeping, giving some low battery indication on its screen and also with some voice or sound. Now there are different feedback forms like you can inform user by movement, moving some pop-up box and you can use sharp colors, like red color for errors and for notification. Yellow colors or green colors that it has been a success. Also, your brain reacts to any sound. If you gave a sound error sound or beep sound, that battery is low or some chime that you sent the message, it is going to give the user feedback that something is happening. Nowadays, you might be using WhatsApp or Viber and you know when some message appears on WhatsApp, you know that even the phone is on your table and you are not viewing it, you know that someone sent you a message on WhatsApp or Viber. All these feedback forms can be combined together. You can combine movement with sound, or you can combine movement with the flashing effect or you can combine different kinds of sounds and colors. That is all about feedback. If you have any questions ask me. Let's move on to the examples of feedback. 36. Examples of Feedback: Now let me show you some of the physical products as well as digital products and the examples of feedback. This is very important part of any product design whether you are designing mobile apps, web app, website, or even physical product. So the first example I'm going to show is you might have seen all this switch buttons or panels on your walls. I really love those which shows me that it is turned on or electricity is running in it. When it's on, it shows the light audit that light is turned on that electricity is running and it is turned on. So this is really nice feedback form. Let me show you few more examples. So this is a latest, I think it's WiFi Smart panel and also you can see this is another form of feedback. It is showing two possible actions or state. Right now the state of this device that you can either lock your doors or you can open your door. Few more examples, this is another wall socket and you can see it also has a button turn on and off and it is going to lit once it's turned on. Few more examples you can see this is Nest website. They have cameras, they thermostats and a lot of new cutting edge technologies. You can see this camera, it has a green light indicator that it is running right now on the camera it's turned on. Similarly, in all these forms you can see it is showing the status of that thermostat. Green light again on all the cameras even you can see the green light turned on on your mac-book Pro when the camera is running. These are all the forms of feedback. You can see over here, Nest, it is showing that it is right now running the economical or energy-saving more. The temperature is right now set to 72 Fahrenheit. It is showing clock right now, the date and time, and it is showing the weather outside. So these two are really helpful. You can see over here these two are showing the status of this device. Now, let's see some of the examples of digital products like websites and mobile apps and their feedback. You can see I have searched on Adorama website, it's a camera store and once I search for Panasonic gh4, you can see it is returned with 84 products. So these are forms of feedback. It is showing me that these many products are found for your system. Also you can see the current status like you can see over here, the bags in cases, two cameras 22. These are also forms of feedback telling me that how many items of this kind are available? Now, one mobile app I'm going to show you this is a mobile app screen and from Mobile Patterns.com, and you can see that in this first screen on the left, the user has selected any vibe, so there is a tick and the whole color of this area is changed. So this is basically the selection feedback that you have selected this item from all these items, then this is basically loading. You can see over here the loading screen, and this is once you have loaded. So there's one more option you can see whether I have one option for you. So this is another form of feedback. It's so basically a notification. Now, these are my favorite. I really loved these buttons because they are going to give me feedback once I press them. So this is loading right now or I really like them. Most of the forms online on our web apps have these kind of patterns that are going to go into this form so they are not clickable, so the whole status and everything changes and really nice feedback. One more example, this is a pen from Ken and you can there is a loading animation over here, file loading button. I really like it. This is very nice animation and tells the user how much the file has been loaded. Few more example, this is a tweet from Luke Wroblewski and he's a very great US guy, mostly works with forms. You can see this is another feedback form. If someone has clicked, you need to show them that this has been selected with very sharp color. Also on Twitter, you might have noticed that this is another feedback form. So if I am going to click this, small animation occurs. This is basically a feedback. So if I am going to click one more over here, so you will see. This micro animation is really a great form of feedback. These are called micro animations. Now this is another example which is from Dropbox. You can see these are the notification pop-ups. They can easily inform your user the feedback. This is how Dropbox tells the user that they have a fresh new look, they have changed their interface. You can see this is the first screen then there is a pulsing beacon to grab the attention that this is happening over here or this has been changed and also they are showing each feature with this pop up at the bottom and once everything is done completed, you can see this is another feedback, you are ready to go. So on each step, feedback is necessary. Whether you are using a physical product or digital product, you should inform your user at every step. Now, this is the future. Let's see some of the latest devices which are voice controlled or voice powered or uses basically voice and color combined feedback forms. This is Google home. Vendor Google home is loading. It is going to show this animation. This is loading animation and then we have this turned on lights up. So if it's on, it is going to light up. There is one more feedback from this device. I'm not sure what's the name of this device. Mi-croft, I think. When someone is speaking, giving the command, it shows a wiggly line over here because so the user knows that it is getting his feedback or recognizing his voice or her voice. Also you can see this is another device. It gives the light feedback with emitting lights that it is telling you something. This is another one. It shows a ring light inside to show the command and everything. So this is another feedback form. This is another form of feedback. You are reducing the volume and it is showing you instantly and giving you feedback that you have achieved this volume or you have reduced the volume to 50 percent. You can see over here, this is another feedback form. This is turned off the volume, so it is basically turning off the audio. So this is another light and it is showing red light to show the user that you have turned some feature off. So these are all the different feedback forms. You are going to find them everywhere around you. Make sure that your feedback is meaningful and it is comprehendible and understandable by the user otherwise there is no benefit of showing the user L codes of others which he or she cannot comprehend. So these are all examples of feedback. Let's move on to the next lesson. 37. Feedback within Context - Walmart Example: Now I'm going to talk about feedback within context. Now, if I go to this Walmart and if I have ordered something on Walmart, it is going to show me the process that you place order, then it's processing, and right now the status is shipped. It is a very good form of feedback. Also, it is showing me when it is going to arrive, also the box number. Now, once I click on this track item, this is where the problem starts. I'm going to give you how you are going to really use the feedback in really nice terms. Now once you click the track items, you are going to see this screen. My memory, working memory is very limited. The problem here on this screen is that I don't know what was the package, and if I have opened like three or four multiple screens of different tracking items, I do not know what the item was. It is showing me the estimated delivery, but where is the item name or the box name or the items I ordered? This is really confusing for me. They are violating the problem which is within contexts. Whenever you use your feedback, it should be within the context. Within contexts mean that it should show the status of the thing and also what the status is related to. This status is related to a box I ordered, and it should be somewhere on this screen that this box is going to arrive on 24th May. This is very important when you are using feedback. Few more things they have violated over here is working memory. They have increased the load on working memory. I cannot remember if I have opened three or four of these pages. I cannot remember which item this page is talking about. This is really important in any user experience design that you should remain in the context and don't try to violate the rules, or put some cognitive load on your user's mind. This is another tape which came to my mind after I used this Walmart, I thought that I should share with you. Let's move on to the next lesson. If you have any questions do ask me, see you soon. 38. 4 Consistancy With Examples 8: Now let's talk about consistancy. It is also one of the major concepts behind any user experience design. As the technology is advancing these days, consistancy is not limited to just fill off your product or the colors used in your product. It has been expanded to very complex smart network devices in your home for example, the smart kitchens. Now the Apps and systems, they are connected and everything can be tracked or located from just one interface. Also, one app is not limited to one device. You can use WhatsApp on your PC. You can use WhatsApp on your Tablet. You can use WhatsApp on your mobile phone, iPhone, IOS, Android. One App, or one product is being used on different platforms. Now that consistency is very important as user is going to shift from one platform to another. He should not feel the difference. The apps should be consistent from one device to another, one platform to another platform, one system to another system. What you can do to increase the consistancy level of your apps or digital devices. Number 1 is that everything should work and function the same and the placement of those functional items should be the same. If you have positioned a button that is going to send message on every device, it should be sending message rather than doing something else. If we have a dark theme and a light theme, then that switch should do the same function on every device or any platform that the app is installed. Now the second thing, in consistancy is the consistancy of UI elements. UI elements are buttons, drop-downs, all these interactive UI elements. The third is the consistancy of typography, colors, and themes. If your app is using the green theme on one device, it should use the same theme and typography and phones and colors on another device. User, don't get confused that he has opened up and at any other app or any other product. Context of use of the app might be changed, but consistancy should not change too much. You can change, for example, if your app is a little bit different on iOS or iPhone, and it's a bit different on Android, they cannot be 100 percent similar in design because they are different operating systems or different mobile systems. You can vary a little, but you cannot deviate a lot from it. Now, how you can keep consistent and keep the consistency of design of your products. There are design systems and style guides. I have discussed atomic design in my course workflow of modern web design and is a Full Stack Design System by Intercom and these design systems are basically going to keep our designs and functionality consistent on different mediums, on different devices, on different platforms. I'm going to show you some examples of style guides and design systems so you know what I'm talking about. Let's see some examples. This is carbon design system and it is really great. You can see all the guidelines over here. These are the styles, these are the colors, grids, iconography, layers. You can see all here, this is how our style guide or design system looks like. Then we have this, another design elements and UI component, JS components, VS, JSS, utilities, all the colors, texts, interfaces, everything is described over here. If I go to this interface, you can see over here they have all the icons, the colors, everything listed over here. Now, Atlassian is also a great way to see how they have lined up their whole design veterans and everything they have. They also have their style guide. If we go to this atlassian personality, you can see these are the brand style guides, illustration, typographic, logos, colors, writing style. They even have similar tone or personality in writing their website or mobile app or whatever the content. The content should also be consistent in all your platforms. You can also see different other style guides, like you can see over here, Yelp style guide. I will share the links of these style guides with you. Now, I'm going to show you the example of WhatsApp. I feel it a little odd when I see a very big app using things like that. If you have used WhatsApp on Android, you know that the whole theme is built with dark green color like this. You can see over here, green top area. This is also green when you call someone. But once you move to iOS device, you can see this is the same WhatsApp, and for some time when I open it up for the first time on iOS, my iPhone 5S, I was confused that whether I am using WhatsApp or some other chat app from Apple. What they did is they have removed the whole theme. You can see over here there is no green bar at the top. Nothing similar to the actual theme or their style consistancy. They broke their style consistancy. Maybe they have their own reasons. Maybe they have some iOS sections or platform sections, or maybe they want to make it fast. But still I think they should have kept the green background behind to make the theme similar to the Android app. This is a very major difference between WhatsApp iOS and WhatsApp Android apps. They really broke the consistancy of their design. These are all the examples of consistancy. Let's move on to the next lesson. 39. 4 Constraints With Examples: Let's talk about Constraints and how they make our product or our web or mobile app more usable and more useful. You might have seen that Twitter has a limit of 140 characters per tweet. You cannot exceed 140 characters. This limit help us make our products more useful and more usable. I will show you a lot of examples of constraints that were put deliberately in the products to make them more usable and useful. Here are few examples of constraints. I'm going to show you the images of these examples in a while. You might have seen a lot of security systems, safety locks on guns, dangerous equipment, and locking the ADF, or dangerous operation. Why these constraints exist because few things should not be used by some other user or the novice one or the kids. These constraints are going to make those products more useful. They are not intended to be used for that specific person or that specific age or that specific age group. That is why they put some constraints. A very common constraint example is a save and don't save pop-up box. You might have seen a lot of dialogues appearing when you are using Photoshop or any of the software, when you try to close that software and the document without saving, it is going to prompt you, it is going to constraint you, it is going to give you limit that I am not going to close this app until you save, or do you want to really save or quit the app. These are basically constraints. Few more examples of constraint, if you look at any new or modern washing machine they have built-in Child Lock. I think these Child Locks are even present in a lot of other devices like microwave ovens. If someone tries to open it or if some child try to mess with your washing machine, it is going to stop working or it is going to turn off or it is not going to let the child open the lid. These are all the constraints that are making these washing machines really helpful. Otherwise, if some accidents like these starts happening, it will be a lot of mess. Also if you use microwave oven and while microwave oven is spinning, if you try to open its lid, it is going to stop instantly. This is to keep you safe and also it is a very good example of constraint. Let me illustrate more with some examples. Here's a Twitter example. If I start typing, you can see it is going to constrain me to 140 characters and it is going to show me that these much are left. This is one example. Now one example of constraint is this pricing model. You can see each pricing model has a fixed active projects. If you are using free one, you can just have one project, so it is a constraint. It is helping these products, these web apps that the users are more willing to or going to go to the next step and going to pay them. They are going to apply a constraint to keep it under their control. This is another free mockup tool I use, and you can see on the left over here, it says free plan and I can place only 300 objects in this free plan. This is another example of constraint. One more example is you can see this is my bounding box. This is the document box. It shows that I need to draw or create something inside this container. This is another example of constraint. Then we have this very good example of constraint. You can see there is a round space, circled space for CDs. Once I try to put my DVD over here, I know that this is the place I need to put it in. Also if you have used very small CDs, they are going to be put in the inner circle. Other example is lego blocks. You might have used them a lot. They are perfect example of constraints. If they don't apply these constraint that lego blocks are going to fit in the other lego blocks with constraints. These constraints make these lego blocks usable. Now here is a washing machine of Samsung, and this is their feature. You can see over here. It says safe washing. Now what is safe washing is that, AddWash door can only be opened when the drum temperature is below 50 degrees centigrade, and the Child Lock is deactivated. By default, I think the Child Lock is always activated. If some child, even with a mistake and even the Child Lock is not activated, still it is not going to open the lid until the temperature is below 50 degrees so the kid wouldn't get burned. This is another example, and here is another example of your child. Children are in safe hands. They have Child Lock, and you can see over here it won't open when the Child Lock is activated. If you are going to use the Child Lock feature, it is not going to open the lid. You can see they are advertising their safety a lot and all these things are related to constraints. They have put a lot of constraints to make this device usable in all conditions. Here is the menu. I think they are showing that if you press these two buttons, you can see here there's a Child Lock icon over here. If you keep on pressing these two buttons for three seconds, and I think it will activate that Child Lock. Once you activate Child Lock, whenever you try to restart your device, it is again going to be in the Child Lock mode. This is really helpful and very great example of constraints. This is all about constraints. If you have any questions to ask me, let's move on to the next lesson. 40. Slips And Mistakes With Examples: Even if your product is 100 percent usable and it doesn't have any usability problems. Still, users are going to make mistakes. Keep that in mind. There are two types of mistakes, slips and a mistake. Now, slip is when you are doing the right choice, you started the right thing, but you took the wrong steps or you skip one of them. For example, I forgot to turn off the gas burner of my stove. Or I went to the refrigerator and got the milk from my refrigerator and poured into the coffee, and then, I put the coffee mug back rather than the milk. This is an example of a slip. No mistakes. On the other hand, they are based on the wrong decision from the start you took the wrong step. Mistakes happen when the user has selected wrong goals and plans. They're starting step is wrong. From the start they have taken the wrong turn. So for example, if you have got calculated or recomputed the fuel weight of fuel, in pounds rather than in kilograms. There's another example. For example, if you have put your product on eBay and you are doing business in pounds and your user is buying in $. Maybe he's viewing the wrong product price in $. So for example, you might have set it to five pounds and the rate maybe stating five $. This is going to give you a lot of problems. This is basically a mistake. Let me show you some of the examples to illustrate more on slips and mistakes. Now, this is a dialogue box which normally occurs when you try to delete something or uninstall something. Now why do operating systems asks whether you really need to uninstall it, because it could be a mistake, because someone might have clicked it without any consent. Maybe he doesn't want to re-install it or maybe he doesn't want to uninstall it. Asking yours user before committing, delete or deleting his backup or relating his website, you should ask them to backup or you should limit them with these dialogue boxes that, do you really want to do this action? I have seen some of the websites here. Now one more example of slip is, you might have installed if you are a Windows user or a PC user, you might have installed a lot of software or apps. I think three or four years back, if someone asks me, a newbie, who just started using PC, I normally tell him that if you want to install any software, just keep on pressing yes or next. This is called slip. So for example, he's pressing yes, and the next screen he sees is this one next. He's not looking on these options over here, so he will not look on these options and he will keep on pressing this next. Now these screens are in continuous succession and these are susceptible to slips. A lot of people who, daily use software on a daily basis, or they have 4-5 steps of copying and deleting or merging files. They are going to make a lot of slips because they are used to the same patterns. If something is missing or something just missed one step, they are not going to notice it. This happens when you have a similar routine or similar work setup. In the end, I'm going to sum up this lesson with just saying a few things, that if you are designing your web app or mobile app or any kind of software or application or product. You need to keep in mind that don't provide the user something like you might have seen mobiles. There is a factory reset button. If you provide just one tap factory reset, a lot of kids are going to press that and it is going to reset every time in, the whole data will be lost. Keep in mind that before using or deciding such a big decision for the user, ask them once or twice that, that they really need to do this or do they want to skip this? This is all about slips and mistakes. Let's move on to the next lesson. 41. How to Design for Errors With Examples: Whenever someone is using your device or your mobile app or your product, it is very easy if someone is using it or demonstrating it with the intended action or the limits within the limits. It is very difficult to design when some errors or exceptions start happening. The real problem starts when something goes wrong. Just keep in mind that interaction of your user and your product it's just like a conversation between two people. One person is doing actions and the second one is guiding him or responding him with feedback, or telling him what to do. When something goes wrong, the other person should guide the first person that this is wrong and you should fix it like that. This should be very simple and easy to understand for your user. It is just like your teaching your grandma, very old grandma about computers, or Facebook, or Twitter, or WhatsApp. How can you design for errors to make your products more usable and more user-friendly? The first thing is that prevent the errors from happening. This is the first step. You can use constraints, you can use dialog boxes, you can use input fields with limits, you can use passwords, everything, to limit these errors. Then the second thing is that you need to get that cause how this error happened, and how we can minimize it. Why are the users making the same mistakes again and again? Is there a usability problem? Is there something that is making our users confused? You need to minimize that. Then you need to do a common sense check. Common sense check is that, for example, if you are using a microwave oven and the lid is open, and you left the lid open, you didn't close it tightly. If you try to push the "Start" button, it is going to give you error. This is a very basic common sense check that if the lid is open, you should not start the microwave on, it is also a constraint. The third thing is that you need to give your user easily reverse those changes. If something bad happens or if he by a mistake deleted his e-mails, he can easily reverse them, he can easily undo, he can easily change them back. Also you need to make sure that the errors should be easily discoverable and fixed. How the user is going to see that some error happened because you need to give them some feedback. You need to give them a timely feedback and you need to give them the way to fix that error. These are all the things you need to keep in mind while you are designing for mobile apps, any physical product, or any digital product. Let me show you some good examples of designing for errors. Now, if you have used Dropbox, it is a file storage service, and if you have stored some files and you deleted them, it is going to keep your backup for three months. If you remember that I deleted some folder by mistake, where I need to find it? You are going to go to these deleted files and when you click, you are going to see all those deleted files with dates when you delete deleted them. This is a really great feature of fixing any problems or any errors, or anything you can restore it easily. This is another feature you can restore it. Another example is Gmail. If you have a used Gmail and when you try to delete some e-mails, it is going to give you the feedback and also going to tell you the way how you can undo it, how you can reverse this change if you have done it with a mistake. Also there's a learn more to train the user if the user doesn't know what just happened. These are few examples. There are many more examples you can see and might have seen online when you try to delete something, or when you try to create something, there is some error. It is going to give you how to fix those errors. Also some sites they give you steps that do this. Last night, I had a problem with my YouTube channel that my AdSense account was not working with it. I went to the guide of YouTube guide and tried to open it. There were like five and six steps, and they were really difficult for me to follow. You make sure that you need to make them very easy for your user to understand. You can even use a video to guide the user how to fix this error. These are all the tips and tricks and designing for errors. I hope you have enjoyed this lesson. Let's move on to the next lesson. 42. 8 User always In Control With Examples: Whatever we humans possess or the things we have, we need to control it ourselves. This human need for control can be traced back to our earliest roots when we were cavemen. When we first started riding the horse, we used belts to control it. We can easily stop our horse, we can easily let it run. These are the human needs. This behavior is built into human nature. As UX designers, we need to give users full control or almost the best control of their apps, or the websites they are using, or their accounts, or the e-commerce sites they are using, so the users feel that they are in charge. They are going to feel very great. This is also part of user experience. Even if you see the kids and observed them whenever they are one and half years old, they try to eat with a spoon themselves. If you try to grab their spoon, they are going to weep, and they're going to say that, "We need to eat ourselves." Even they are throwing everything everywhere and they are throwing food on themselves, but they keep on trying to use spoon because they feel in control. Today, in our technologies everywhere around you, even cars, your mobile phones, your laptops, your computers, they have brightness controls. They have audio controls. You can reduce audio, you can turn it off. They have dark and light themes. You can apply if you go out in the sun. You can also connect and disconnect Wi-Fi and Bluetooth. All these settings and services, you can turn them off and you can turn them on. All your devices are in your control. Now, why do we give user that much control? Because it's human nature that we feel satisfied when we are in control. Let me show you some other examples of user in control. You might have seen some landing pages where you go to that landing page and the video starts playing itself and there is no way to control or stop it. Now, you can see this video's playing, but if it has a loud audio, you are going to kill this page. You are going to instantly click on this cross. This button is called autoplay. Autoplay is not a bad thing if you use it in a good manner, but if you try to limit the user in control and give them no option to turn off the audio or close the video player window, they are going to get irritated. Let me show you some of examples of different operating systems like Google, Android mobile operating systems and Windows, and iOS, Macs, and how they are giving control to their users. This is one example you can see, you can turn off any app, even you can force them to stop. All these apps are listed over here. Then, we have this settings screen for iPhone, and you can see, you can personalize everything, Wi-Fi, Bluetooth, airplane mode, notifications, everything. This is the settings screen of Gmail and you can see there are tons of settings you can do. Although it is not very well-defined or not very good, there is a lot of information or overwhelming settings over here, but still it is a good example. Then, this is our screen, Windows 10, and I have changed its theme a bit. These are all the settings, color management, devices, fonts, Internet options. Hundreds of settings you can do for any of your attached device or any programs you have installed. You can uninstall them, or you can install them back, or you can disable different services. Then, this is the screen from iMac or Mac's operating system, system preferences. There are a lot of things you can do over here. You can control the dock, desktop screensavers, teams, energy-saving mode, display if you have multiple displays, your sound, scanners, Bluetooth. All these settings are there so the user can feel in control and get satisfied that I own this app or this product. This is all about user in control. I hope you have understood the concept and human need and human psychology behind it. Let's move on to the next lesson. 43. 9 Grouping and Chunking with Examples: You might have read a lot of books, and you ever wondered why they divide each book into different chapters, and different sections, different paragraphs with using different headings, they are easier to scan. Human minds they can easily consume that information and easily understand it. We humans we cannot process a lot of data or a lot of information at once, but we love bite sized chunks of information. Now why do we need to group our controls or our buttons or our options? Just take an example, if I give you a washing machine and it has like a 100 buttons and controls and settings on it, you will be overwhelmed with this it's functions, and you would not prefer it with a simpler washing machine that has just 10 buttons on it. What you can do to make your products better, you can group relevant controls together, they make sense to the user that this set of controls is going to do this. Let me show you the image of the washing machine I'm using at my home. This is the Samsung washing machine I'm using at my home, and I'm going to show you what are these controls, and why grouping of them makes sense. Now, you can see in the middle they have grouped these two, Power and Start. This is a turn off this machine and to start it. This makes very sense they almost do the similar functions. Then we have all the custom controls on the left side. You can see over here, these are the three custom controls, and then the pre-made mouse where you can just select anyone, and these are grouped over here. If I want a quick wash, I am going to select this and it is going to just do all the settings for me. This is a very nice layout of all the interface controls and they are grouped to make sense to the user. Also they are not violating the in-control feature. The user always want to be in control on the left side, and on the right side they have pre-made modes and they use grouping to lay out this whole interface, this makes sense. Similarly, if you see any apps, there are tons of apps, Mac, Windows, Operating systems, even iOS Android, they have all the setting grouped into different areas. They're stacked into different sections. Let me show you some of the sections. These are Windows Settings and you can see these are Windows 10 settings and you can see they are simpler, and there are like seven or eight categories, and you can easily go with any of them. They have their description under them, and you can do the setting and customization. They have used grouping to accommodate a lot of settings into one category. Then we have, this is the screenshot of Sketch App. It's a popular app for UI designers and you can see this is how they are using grouping. Now, this first group is for alignment, other one is for next thing, then we have these for the positioning. Then we has all the texts controls in this bounding box, then we have the appearance and affects in over here. This is how it makes sense by grouping different controls into groups. This is also another example you can, you might have seen it in many navigation bars on menus that all these are grouped into sections. You can see this is the first section for files, and opening files, creating new ones. This is for renaming and saving and reverting file. These are export and these are reduce file and these are, they have grouped it so user can easily understand them and have some sense about them. Again, you can see here at the top we have different tabs. If I click any of them, sorry. If I click any of them, it is going to take me to tool settings. It's easier for me if they have like one long page, and all the settings that resides on that page, it will be too difficult for me to not change everything. This is grouped in two different categories and it's easier for me to change the keyboard settings. These are the System Preferences. Again, you can see these are Mac or iOS system preferences and they are also in different portions. Like you can see this is the first one, then this is the second one, this is third block, and this is fourth block, and this is the last block. Or you can see User Groups, and parental controls, and extra controls, accessibility, Siri, they are almost related they are over here. Also date and time. The controls that are related to networking sharing, Bluetooth, all are in this area, iCloud you can see. This makes sense. They're all almost all related. These are hardware devices you can see in this area, sound printers, trackpad, mouse, these are almost all the hardwares. These are the customizations of their own operating system like Desktop, Dock, Mission Control, languages, security, privacy. All these system preferences, they make sense. Now, this is a very bad example on Google adsense. I was trying to make it disappear. What happened is that I was looking or reading this area, and the next icon is appearing a bit on the right side, and it is a lot away from this screen, this pop-up. For like five minutes, I was unable to do what I have to do over here, how I can close this popup box. After looking around, I saw that this is over here. If something is away from its context of use, I am using this window. This next should be over here, or over here, or over here, they can also place a button over here. It makes sense. It's inside a group. Grouping also makes sense because user thinks that these things are related. This is a law, this is called Gestalt Law of grouping. There are more Gestalt laws. I might include another whole section on that but right now it's not in my plan. Anyhow, grouping makes sense so try to use grouping intelligently in your UIs. If you have any questions, ask me. Let's move on to the next lesson. 44. 10 Humans have Limits: All humans are limited. We have limits in terms of physical and mental limits. We can't operate or use any device or machine for too long. We have physical and mental limitations. Whenever you are designing for any app or developing any product, you need to keep all these things in mind. Now if we talk about smartphones and human limits, then you need to know that there is a research by Stephen Hoober and Josh Clark and according to them, 50 percent users just hold their smartphones with one hand, and 75 percent of their interaction is thumb driven so they mostly use thumb to press different buttons and to order something online. You need to keep these things in your mind. These physical limits also play a role in industrial UX. People who used to assemble different parts or different machines or different packs they used to pack different items into different boxes. They used to work for hours and hours on industrial plants standing there for like 10 hours or 12 hours. It started making people sick. What they did is the UX guys they started this ergonomic things that how we can use humans and not use them as a machine. How we can improve their health and their workspace using user experience and usability. Similarly, if you are designing a chair or a door, you need someone to test it for 8-10 hours or maybe more than that. You need someone that is going to test it for maybe days or weeks to properly see that whether it is generating some back pain or the leg pain or any other discomfort. Here are a few articles and research on these patterns. That how humans hold their smartphones and use different devices. These are the different holding patterns cradled, hold, and touch. You can read all this article. I'm going to share these articles with you and then we have this, you can see or hear, in this pattern. This is basically the safe zone where the user's thumb can reach. This is a smartphone. This is the area where the user can easily tap with his thumb or her thumb. This is okay zone and this no zone. Here, if you place something over here, some buttons, they are not going to reach it. You might have seen the most of the buttons are in this area over here so user can easily tap on it. Also, these comfort zones are different for different devices. You can read this article, you can see over here, this is the comfort zone for tablet, bigger mobile, or maybe the largest screen. A lot of companies like Apple, they took that into consideration and you can see in Apple iPhone 6 or 7. I think they have this reachability feature in accessibility. You can turn it on and it is going to move every app or any icons on your screen down towards this area. You can see they are cleaning out the area where your thumb cannot reach so you can easily use this, and it is going to turn on something like this over here so you can go back to the screen and the settings you had. Now, some of the [inaudible] designers and a lot of great usability gurus, they are designing apps like these. I was really surprised to see that you can see over here they have left all this space empty at the top. Why is that? Because users' thumb cannot reach this area. To make it easier for the user, they are placing all their controls at the bottom of the screen. You can see over here, it is a bit up, there's a margin over here, a space over here, and then they have listed all their controls or categories or anything they want to do. All these settings are counted, everything is moved down. This is done intentionally to support the thumb usage, physical limitation of the user. These were all the examples for human limitations and how we can use them to enhance our apps or our everyday products. If you have any questions do ask me. Let's move on to the next lesson. 45. Using Design Patterns: The only thing where our human minds are superior than any supercomputer is recognizing phase or design patterns or patterns they have seen before. So our brains recognize things easily if we have seen or we have experienced similar pattern in the past. When you are designing some product or any app or any website, if you deviate a lot from the patterns users have already seen or users have images of those patterns in their brain, it will be difficult for them to recognize it. Just an example, if you're inventing a car, don't try to put airplane like hundreds of controls in it to move around. It will be difficult for the users to recognize those patterns. So you need to take those patterns form already made cars and maybe you can alter them or enhance them a bit. Similarly, in web design, in mobile app design in digital products, there are already made patterns which users have already used, like search bars, different drop-downs, accordions. Before starting out using any or creating any new pattern, try to find the similar pattern which users are already using. So I am going to show you few websites related to design patterns and for developers, it is really necessary to use those already made patterns. It also saves a lot of time. Here's a website called patterns.com and pttrns.com and I'm going to share all these links for links in the resources. So what you have to do is you can see on the left side there are categories.So if I go to this cards pattern, you can see this is very popular these days. It is going to filter out and show me just the cards patterns. You can see this is one and then we have these cards, small cards, and then we have this, you can see on it, if we hover, it is going to show what is the App and what are the tags and categories related to it. So this is one way you can find all the different patterns and you can see whether you can use any of these already made patterns into your app. Second is this one. This is also mobilepatterns.com and right now I have opened the list. You can see on the left list, there are different formats of lists. There are different styles. You can see they're images based List one, two, three images with titles. Then we have these lists of different reviews. These are in different format, and then if we go down you can see these are also lists. They have different format. On the left side you can see all lists unrated, rated, liked. So these are all the things you need to find before starting sketching out your ideas or your app or the layouts and if you are a developer, then you should use already made patterns and libraries that you can easily implement. Even there are coded design patterns or design libraries. You can use them instantly in your iPhone or Android apps or any digital web app. This is another website, uipatterns.com, and there are a lot of patterns with different categories, for example, if I go to the smaller window, it will show me what is the problem, why user need it, and also some good examples you can see over here. It has shown me one example also its usage. So this is another website and it shows a lot of different UI design patterns. Then here we have another pattern library website, Welie.com, and you can see there are again different categories. Let's go to advanced search and see what patterns are there for advanced search. It seems a bit old. Maybe they haven't updated it in a few years. But you can go to this website and see some of the examples. I think they are very old, but I think it's good that we have some problem and solution. I think you should stick to these three websites. They are more latest rather than this one. This is a bit old and I'm going to share all the links with you. This is welie.com. It feels a bit old for me. So these three will be perfect. So this is all about pattern libraries and how you can use them. Our human brains are wired to recognize similar patterns, for example, these modal windows. I can instantly recognize them that this is a model window and this is maybe for some information or maybe I can click on it and if it's have a button, you can see over here in this example, I can click on it and perform some action. If you have any questions to ask me, let's move on to the next lesson. 46. Don't let your users think: All humans are lazy by nature, so if you are making difficult for them to use something, they are going to quit it. Or if you are putting a lot of stress on their mind or giving them a lot of difficult calculations or things to remember. They are not going to like it. The tip here is, don't burden your users with difficult calculations or let them memorize difficult or long passwords. Try solving all the hard problems for your users on the development side or on the design side. Here are a few ways which you can use to make your app or your e-commerce website or any digital product easier for your users to choose. Solving hard problem doesn't mean that you need to calculate different things, but also it is related to passwords, user location. You can automatically locate user by GPS, by automatically tracking them. Even websites are doing that. You can also show passwords while the user is typing so they make less mistakes. It is adopted by Amazon's app, and this is the patron I came up with. I don't know whether Amazon came up with earlier than me or maybe it's me. Actually I invented this design pattern that when user is typing, you need to show the user's password in very dim format, very dull gray format so others cannot read it, but the user can see it and read it while they are typing. So they know what they're typing, so they are going to make less mistakes. It is easier for them. You are making easier for them to type passwords rather than making mistakes, removing it again and again, typing it again and again. Let me show you some of the examples, how you can calculate things on your own rather than leaving it to users. There are a few examples like this Runtastic pedometer. There are many apps. They can calculate your calories and then speed, frequency, what were the steps per minute also the distance, everything, even your speed. So users don't just need to worry about this. They are just going to get everything from these steps calculated automatically. This is one more app Walk with Map My walk. You can see it is going to take all your part with the map and also the distance, duration, average base, calories burned, and elevation gain, how much you go above the ground, and things like that. Then we have another example, this is pillowise. A pillow that is customized to your neck. I have a lot of neck problems and pain so I went to their website. They have videos how to measure different shoulder widths and then you can select over here, like for example, I had this 44, I guess 43 or 40. Then you can neck the neck circumference. Then you can neck height, which is they have shown how to calculate it. Then you can also select whether you sleep on your stomach side and the firm mattress, you can click on here. It is going to advise you which pillow matches your widths and heights. I really like this pillow. I think I'm going to buy it soon. Then we have this login, which is login with Facebook and Twitter rather than user memorizing each and every password for every website, they can easily log in with these social logins. Then you can see here we have Uber app, and there are three presets already made. Like you can see the gym, home, and work. These are the three addresses you might have saved. I haven't used it, even once, so I don't know. But there is an option to save your presets or your routes so you can easily use them rather than typing them again and again. Then we have this very intelligent international telephone input. If you select any of your country like Afghanistan, or if I select my country, let me select Pakistan. You can see the format of this example phone number is changed to what I have in Pakistan. All the mobile numbers are in this format. This is very neat. If you go to USA or United Kingdom, you can see the format again changes to plus 44 and then your phone number. This is very intelligent and telephone input. Then we have few more examples. Like you can see over here Affordability Calculator from Zillow. I think this is about house mortgage. If you change your income level from here like 60 thousand, it is going to show you how much house you can afford up to, so I can afford up to like that. If I have monthly debt of like 800. It is going to change everything from here. If I change anything from here, you can also go to advanced payment breakdown reports, full report. These are very handy. User don't need to calculate anything, they're calculating it for you. There's another calculator. This is Mortgage calculator by the same Zillow and you can calculate over here like if I have. It is going to show me how much I have to pay every month. Then again, this is another example, tylko. You can customize this whole shelf. For example, I want to use the 26 centimeter height for this area and for this area I want 38 centimeters. Then I'm going to remove that grade. Maybe I can use this one or this one. There are many options. You just need to select the material and you can change the density with everything hide from here. You don't need to calculate all these, just need to select your customizations and it is going to make a very beautiful shelf for you. Then we have this co app and co, and this is how they create a contract. If I select a client, so I don't have clients. Just one client to make line. For example, my client is Charlie. These are all the things I can put over here, contract, name, email everything, and you can press Continue. It is going to build the whole project and the whole contract by itself. I'm going to project X 002. You can change the currency and you can continue. You can also check that my work will be my own. Anyway, I'm going to continue. You can see now they have prepared the whole contract. You can see over here, they are my signatures and that's my address, and that is the contractor. This is very handy. I can download the PDF I can sign and send this contract. This is very nice. Save As Draft, let's save it as a draft. This is very nice example of automatic calculations are automatically generating things rather than putting that whole burden on my mind. Then we have another calculator, automatic calculator on this website. It is from Australia. You can see this is also mortgage or maybe loan website, how to apply for the loans to live in. You can change these values and everything below is going to change. If I go like this, or if I go like this, it is going to change everything. These are all examples of automatic calculation and loading the burden on your users minds and their mental capacity. If you have any questions to ask me, let's move on to the next lesson. 47. Why Users need Speed and how to effectively show delays?: We humans are impatient in nature we cannot wait for long. That is why we invented remote controls, smartphones that are very fast processors, fast airplanes. So if you see any queue and it is very long, there are 200 people already in the line, then most chances are that you are going to quit and leave that queue. Similarly in digital apps and mobile apps users are going to behave in the same way. If you have a website or a web app that takes like 15 seconds to load. Most chances are that your users are going to quit and they are going to shift to another app or another website. Let me show you the effect of delays on conversion and users. Conversion is basically when users shift from one page to another or he has some goal in mind and he tried to pursue it. So what happens is there are a few stats I am going to discuss with you, that if you have one second delay or in any page response, it can lower your conversion by seven percent. So every one second is going to cost you seven percent low conversion rate, which is going to load your e-commerce purchases and it is going to lower your users staying on your website, so it has a lot of effects. Now the other studies that BBC have seen additional 10 percent of users leaving their website, when it takes one more second to load their website. Similarly AliExpress they reduced their load time by 36 percent and saw a 10.5 percent increase in orders and 27 percent increase in conversion for new customers. I'm going to share the links of this stats, which is WPOstats website which is very good. The other is Kissmetrics and you need to see those websites. Also, the speed and delays have direct effect on your SEO. So speed is basically our SEO ranking factor now. Another survey reveals that 79 percent customers are not willing to buy again from a slow e-commerce websites. So you need to keep this factor in your mind that users are not impatient and they are not going to wait for your website or your app or your e-commerce website to load. Few more stats 83 percent of users expect the website to load within three seconds. So this is a gold standard so optimal load time should be from one to three seconds. Don't let your website load for more than four seconds. It should be within four or three seconds, because after this you are going to lose your customers. Amazon and Walmart both reported that they see one percent loss per every 100 millisecond delay in their site loading. So this is very big for these websites. So if they even make their websites a 100 milliseconds fast, they are going to get one percent of more sales. On the right side you can see there is a Kissmetrics stats graph and you can see that after four seconds, you are going to see a lot of cart abandonment 25 percent. So before four seconds, you can see three seconds, two seconds is the safe bet. This is very important for developers that you need to make your website super fast. You need to use those technologies, those APIs, those back-ends that are going to load faster and even for designers, if you are designing a website, you need to keep in mind that it should load very fast. You don't need to use very heavy images in there. Now, what if you want to show the users that delays that, you were loading something, or you were doing some calculation in the background, are you are processing the e-commerce checkout or checking the credit card. You need to show the user the wait time. You also need to know how much long they are going to wait or either they're going to wait one minute, or they are going to wait two minutes. Also at that method is that you can show percentage loading by 56 percent loaded and you need to show it if you have a lot of loading time, if it is going to take more than three seconds then you must show user wait time or percentage loaded. Now while loading if there are some updates, don't try to interrupt the current task of the user. Like you have seen on Facebook. If you are browsing through and going through the post and then there are new posts it is not going to automatically jump at the top and show you the new post. It will just give you a notification that there are some updates, but it is not going to interrupt your current task. Also, if you are developing apps or websites or mobile apps, the response time should be quicker or within two seconds. Response times mean that when someone is clicking a button, then it should give the response before two seconds. Otherwise, users are going to click it again. Header through examples, you might have seen these kind of loading bars or status bars on e-commerce websites that you have set up this and you are very close to your cool. Also, this is an example of percentage loading bars, you can see over here this much has been loaded. Then you might have seen a new loading bar on YouTube at the top of the page which shows that it is going to take like one or two seconds, the page is loading to the next one. So that user don't keep on clicking on the video again and again that's why this video is not loading. So these are all the things you need to keep in mind you need to show the status that you are loading something and if it's loaded very fast and you don't need to show anything. If it is going to take just like one second or less than one second, then you don't need to show this status or these bars. So this is all about speed and delays and how you can use different patterns to show them let's move on. 48. Smart defaults and power of Suggestion: Most people are not going to change their default values or default settings of any product when they try to turn it on or try to use it. So defaults are settings are values set when you start using any app or any product out of the box settings, we mostly call them. All mobile phones they have ringtones and every other settings that are set to default settings. Now the default settings, why are they important? Because default settings play a vital role and it helps users make decisions and we normally make better decisions for the users. One step from Jarod Spool about defaults is less than 5 percent of the users are going to change their default settings. For the 95 percent users, they are going to use your app or your website on the default settings. So make sure your default settings are going to play well with all the users. Now if you have used your smart phones, you might know that the ringtone when you start your smartphone it is set to 78 percent, and also it is automatically set to vibrate. What if you bring out your smartphone, Samsung or iPhone or any other brand and you just start using it, and then you instantly know that there is no ringtone set by default, what are you going to do? So this plays a very vital role in user experience. Smart defaults is that you are going to set default settings for most of the users to satisfy them. So they are going to cover most of your primary users. A few more examples of smart defaults is pre-populating form fields with user location, country, phone number, phone cords, even email addresses. Few more examples, or you might have seen autos ave feature in MS Word and Photoshop and also if you have Facebook, then the Facebook should set a good privacy level in their default settings for any user. In the start I think they had some problems with default privacy settings. That is why a lot of people, they were complaining about it. Then they made sure that they normally prompt new users to set their privacy levels. So this is all about smart defaults. I am going to show you some of the examples, so let's see some examples. Here is a screen from Qatar Airways and previously I used their website to find different routes or my plan planning to go to San Francisco. You can see over here, it shows me when I click the from, it shows me my previous searches. It has saved my previous searches that I want to go to, from Lahore to San Francisco and J. F Kennedy Airport to the La Baule. So this is really handy. These are smart defaults. They are going to use what I have used before. Then in Photoshop setting, if you use Photoshop, you might know that it has automatically saved recovery information every 10 minutes, which is set by default. This is smart default because everyone needs this feature. These are our mobile android settings, media volume, alarm volume, and ring volume, set to default settings, and you can change them, but they are not mute. Similarly, this is Microsoft Word and you can see, it has also auto save recovery information every 10 minutes. Set to 10 minutes by default. So if you lose or your computer shut down instantly without any reason or some crash happens, it is going to save your document every 10 minutes. I showed you this website, Tylko Furniture and I think you can see here we have another example of smart defaults. You can see the row height is set to 26 centimeters, which is a good default. It can cover almost everything you can see over here. Also these settings density is a 100 percent of it is this one, height is this one. So these are for normal users. You can see over here, these are the default settings, they are very powerful. Then I searched online on Google to see how much different websites, different travel websites, ticket finding websites are using smart defaults. You can see I searched economy tickets from Lahore to New York. You can see I clicked on here, Lahore to New York, this one travel CheapOair. I think I clicked on this one, kayak.com. First I'm going to show you, for example, this is from one travel and they already filled to from and to fields from this search, okay, so when I click "Lohore", you can see this already filled it. But this is their first step. I need to select all the settings before going anywhere. Also you can see CheapOair, they already filled these too and I have to pick these. Over here also you can see they filled this one address, this is very nice. But I like this one a lot. This is Kayak.com and you can see Lahore they not just filled me, they also showed me the results. Okay? I can go ahead from here and I can change the dates. So they're just pre selected, today's date, 21st August, and they use that to search one adult economy ticket, which is going to be most likely most users are going to search them, but they can change it anytime. I think they should highlight this area a bit, maybe a background color on this so I know that I'm going to change settings from here. This is really nice. This is great use of smart defaults. The best I have seen among these. So this is all about smart defaults and power of smart defaults, which is also related to power of suggestions. So this website is using it perfectly. If you have any questions, do ask me, let's move on to the next lesson. 49. Guiding And Training Users at each step: When someone visits you for the first time and they come to your house, they don't know where is the kitchen, where is the bedroom, where is the washroom and same is the case with the users who start using your apps and websites. They don't know what they need to do with this websites, how to login, how to sign up. You need to guide your users, you need to train them at every point, and you need show them videos, illustrations, guide them in the direction, you need to show them different pop-ups on different areas that this is going to do this and how you can do or use this feature. You might have seen a lot of these images on onboarding experience when you start using some app. This is called onboarding experience for new users. Let me show you some of the ways you can improve your users guidance and training. I have seen a lot of apps this days, what they do is they send periodic e-mails on different features of the app or website. They have some training videos in them or they have some guides in them on how to use that feature. Also Adobe and many other companies like Sketch, Bohemian Sketch and other popular softwares, what they are doing is they have free video trainings on their websites to train new users. Similarly if someone is filling a form, you can give them a help text when something goes wrong so they can easily fix it. Now, here are some of the onboarding experience, you can also call them walkthroughs, how to use that feature on the new app. You can see this is Carousel and it is showing the user that how you can share and keep photos, all the buttons. This are different ways you can introduce new users to new features. You can see over here we have hand-picked your reading list based on our most popular stories. Slide to start reading. So these are different ways you can introduce your user with different features. You can show walk-through screens or onboarding screens at the start of your app, or whenever the user tries to use a new feature. This is another screen from pttrns.com and it's also called onboarding screen. You can see it is going to show some of the things you can do, and also some of the welcoming messages that, "Welcome to this feature." You can see now they have used pop up on this screen over here, pop up on different Inbox, Today, Upcoming, Anytime, Someday, and the information about it. On this screen on the left you can see they are introducing to you two buttons which is queue next and queue last because they are unfamiliar patterns or new icons they have to introduce it to the users that this icons do this features or you can use them like that. Adobe Experience Design [inaudible] is a new tool and you can see over here on the Adobe website they have the beginner and experienced both videos for both the levels. If you are a beginner you can see different videos to get started with this software, and if you are an experienced user, you can switch to experience and see different videos and train yourself. Similarly, I have showed this website before, pillowise, and it shows different videos on how to take measurements of your shoulders, and neck widths, and circumferences, and all that to select your pillow. Now this is a tool I bought for my trigger points and you can see they sent me with this product a user guide where they have shown everything, how to use it and how to press different trigger points and where they can be located. This is a how to guide along with this back number. This is really helpful. A lot of products are giving these guides free with their products so user can start using their product instantly. This is all about training your user and guiding them to achieve their goal, if you have any questions do ask me. Let's move on to the next lesson. 50. Reducing barrier to entry: It's human nature that we humans don't like barriers or if it is very difficult for us to get something, we are mostly going to quit it. Also, if you make it very easy for a human to get anything, they are not going to go for it. They feel more accomplished when there is a balance between how easy it is and how difficult it is. Most of the Apps and Softwares or even video games are using this technique. If you ever have played any video game, when you start the game, it is always going to start with the easy level or a medium level. It is never going to be set on default at hard difficulty level because most of the time users are not going to change the default and if they see a lot of difficulties and barriers in their path in achieving any goals inside the game, they are going to quit it and they are not going to like it. This same fact is also applicable to online forms. You need to reduce friction in online forms, on e-commerce websites or on signup pages. You need to lower the number of fields so you need to make it easier for the users to sign up for your service or website. If your user sees 15 fields to fill, that is a very big barrier, they are really going to run away. Let your users test your candy first and then ask for more details. A safe bet is three to five form fields for maximum conversion. Here's a conversion example or this human nature, the barriers as you can see it in action over here. When they make the form very short; five fields their conversion goes up 13.4 percent. When they shift it to seven fields, it is now down 1 or 1.5 percent. If they make it very long, then their conversion drops to 10 percent. This is their cost, you can see the cost is also increasing. You can see over here the cost is 31.24 when they are using five fields. This is really hurting a lot of your conversion and it is related to our human nature that if there are too many hurdles in our way or too many barriers to our entry, then we are going to quit it. If you enter a building and you see like 15 checkpoints and they are checking you again and again, you are going to quit. You are going to shop from someone else. You are going to use someone else's service rather than entering that building. If you want your users to be happy and you want to increase the level of user experience satisfaction, you can offer users to try your solution or your app right now for seven days, 30 days, even three months. All the big companies like Adobe Sketch and all other companies, they are doing it because it is human nature that humans need to know what they are purchasing or feel they're spending their money and why. You need to make sure that they really need your app or softwares. If you go five years back, there are very less examples. There are a lot of barriers of entry and you need to purchase most of the softwares without even testing them. Most of the softwares were just screenshots of those softwares and what they do and you have to pay to download them. That was a very big barrier to entry, which is loading these days a lot, even the most of the websites they are using just the e-mail to start using that app or that service. Let me show you one example. This is a website I just sign up month ago, and you can see they just have one e-mail input to start using their app. So it is about user experience. This is an app to I think my usability or record different screens off your website or apps. They just wanted me to fill just a e-mail address to get started and start using this. For passwords and everything else, they are going to e-mail me and when I open up my G-mail or e-mail, they are going to ask me to set my password and other details. This is the way you are not going to ask your user upfront a lot of information or put a lot of hurdles in their path of entry into your product or your website or your app. This is all about friction and barriers and why humans don't like them. If you have any questions do ask me, let's move on to the next lesson. 51. Natural Language rather than Codes With Examples: Most of the humans they understand simple language. If the words or text displayed on the screen or the title of your button is misunderstood by your user, it is going to lead him or her to an undesirable result or goal. You need to make sure that you are labeling your buttons correct. You are using correct labels for your form fields. You are even titling your web pages correctly, your blog posts, and even your error messages and notifications. Just an example, if you go five years back, whenever you encountered any error on a website, you might see some manner like this. Hashcode 449098 error SQL termination occurred. You never understood what that error was. If you can't even understand the error, how can you even fix it? This is a very big problem, very broad problem. If you can't understand what happened and what was the error, you can't fix it at all. Similarly, our users, they have very simple minds, so they cannot understand these codes. These codes are for developers or coders or the people who really know what that code means but for the normal user who is visiting your website or is using your app, it is a very undesirable result. He cannot comprehend it. A better example is, you can see couldn't install driver due to unavailability of internet. This is a very simple mistake and I have seen a lot of developers using this and leaving these errors on their apps and websites. Try to avoid these apps. Use simple language, simple actionable language which can lead to action and how to fix this error. You can see in this example, couldn't install driver due to unavailability of internet. You can also add, try to connect to the internet. A button with this, so the user can take further action to correct his problem. A little bit more about natural language and how to effectively use that in your interfaces or mobile apps or buttons or labels, is that you need to tell your user what this form is about, what this button is about, what this item does. You need to use very descriptive labels for your buttons and for your form fields and any navigational items. Instead of using submit, you can use download PDF file. This button shows that if I do this action or press this button, it is going to download PDF Guide. Also on your contact forms, if you are using submit or send, it is better that you use send message and this is a bit descriptive message rather than send or submit. Keep all these things in mind. I'm going to show you some visual examples of these add on pages and how you can make them interesting and even funny for your users. This is one of the old examples of error codes and error messages. You can see the SN type is not corresponding, error code 12. I never know what this- actually error code 12 means. I cannot fix this error at all. Also, you can see this is another example. This is a Windows Editor of- you can see this realmonitor.exe file and you can see the error code is 1142. I don't know why this error code has happened or how I can fix it. This is a good example. You might have seen this on Google Chrome, that if there is no internet, you can play this dinosaur game. This is a bit interesting error message and very descriptive, unable to connect to the internet. This is another error message, no internet connection, but there is no way to correct it. There must be some, but I'm like try again, try again after five minutes, something like that. Users can easily correct it. Now, this is a very bad example of error code or error message. There is no action the user can take. You can see over here, I am not getting any details or any actionable details from this. We couldn't complete your requests. What was my request, I don't remember. Maybe I tried to open an app or maybe I tried to use some tool to connect to online or maybe share my picture. Please try again in a moment. It is not telling me why this request was not able to be completed. I need the reason why this happened. This is another example, but it is not very clear. Now, I'm going to show you the evolution of error 404 message which was very common on online websites, that this page has not been found. These are the old messages that used to appear and they are not actionable. You cannot know what they are and although there's a homepage, you can go back, but you cannot know why this happened. There are a lot of great examples, let me show you. This is airbnb 404 error page and you can see or hear very nice graphic illustration, to make it a bit more engaging and you can see, we can't seem to find the page you are looking for. This is basically the main feedback or main error that tells the user, explains the user what happened. Now, error code it is [inaudible] a bit dull. Then there are few more helpful links. Maybe you need this, this or this or this. It is guiding the user. Maybe you are looking for these links. Maybe you want to go to home, maybe you want to search. This is how you are going to get your user to take some action. Then we have another one. You can see this is called 404 Venn diagram and it shows two areas. We broke something or you can't type. This is another one. Although it's very creative, but it has only one thing. We're here, please take me to the homepage. Then this is another one, it is using a very nice animation of 404 page and a very funny, you can say very funny title. That page never returned from a trip to the Atacama desert so you could need to go to the home website. This is another one. It is very funny. This is how you turn your user disappointment into some fun and let him use your website for some more time. Hello, it is me you are looking for, so this is very funny and go home Lionel, you are drunk. This is another one. Make sure that you are giving two things on any this problem. One is that your error message is comprehensible by your user. The user can easily understand it and the action he needs to take, whether he can fix it or he can go back to the page he came from or try something else, or maybe his Internet connection is done. You need to tell him what happened and how to fix it and also try to use natural languages, a live codes. I hope you have understood how you are going to use natural language instead of error codes and complex error messages. If you have any questions, do ask me. Let's move on to the next lesson. 52. Natural / Conversational Forms examples: There's a new emerging platform which is called Natural Language Form. And I really like it. It is related to our using natural language other than code. This is Natural Language Form and they convert better. The research shows that they're converting better like 25 percent, some where 12 percent, some where 50 percent better than the traditional forms. What they've done is they're using a conversation type language in a form. "I feel like eating Indian, French, Japanese, so whatever, in our traditional restaurant or whatever so I can choose. Maybe I need a standard restaurant or romantic restaurant at 09:00 p.m. in Los Angeles so I can type here, "Los Angeles" and you can see it is going to fill my form. This is a very nice example of using natural language in forms input. Another example which is live right now and it is being used on Oscar Consulting, which is an insurance company and you can see over here how they're going to guide you towards their code. I am going to enter ZIP code of one of my friends. This is ZIP code of New York. I would like to cover for me, my spouse and my kids. I am 55 years old and my spouse is 38, and my three kids are 20, 18, and 14. My family makes yearly with five people in my household. You see, while filling this form, they showed me very few values step-by-step to decrease my cognitive load. Cognitive load means the mental calculation and the process my mind is going to do while filling or doing any calculation or filling this form. This is very good examples. I'm going to press "Next". And you can see over here they've a few more things like. I expect to see a specialist. I am managing a chronic illness and this is all and get code. You can see now they're putting together my personalized quote. This is a really good example of this natural language and how they're using and simplifying this process by introducing one step at a time. 53. Google analytics and Hotjar to reveal more about users: If you are a developer, you can be a great asset to your user experience team of UX team by giving them some analytics and user background by using Google Analytics. If you know a lot about Google Analytics and you can use it to your advantage. It is a great tool that can tell a lot about your users, their devices, their operating systems, their location, and even the time spent on a page, or what are the pages, or where in the checkout process the user dropped. These user flows and drop off on different pages can tell you a very big story or maybe a problem behind this page or some control. Or it can tell you a lot that this page has some problem and we need some fixing on this. There are other tools which shows you what users are actually doing on your app or on your website. These tools are going to record your users activity where they click using a video. They are going to show you the actual user activity where the user is having problem on a specific page, and you can use this tool to your advantage. It is like a usability test. You can easily see what the user or where the user is having a problem on your website. Tools like Hotjar and UX scamp, they can create videos and heat maps of your user activity. I have used Hotjar previously with my website [inaudible] and I recorded like 30 or 40 video sessions, and this is a great tool. You can use these kind of tools along with Google Analytics to reveal a lot of story to your user experience team, and you can be a very good user experience team member if you have good experience using these tools. Let me show you these tools in action. This is Hotjar. I have signed up their free account and you can see here we have a lot of different analysis tools like heat maps, recordings, funnels, forms. You can even create polls and surveys, which can be implanted on your main page or any other page of your website. You can get a lot of feedback from your users along with what they are actually doing. Right now, I have enabled it again, so it is going to record 300 recordings with my free package over here. I have signed up for free. This is my basic package. If you want to go with more recordings, you can go with them. Let's see some of the valuable data we can collect from Google Analytics. You can see over here, this is the Google Analytics data from my freelancing course, and these are all the countries. My most users are from United States, India, top 10 countries. Then as you can see these are the top channels from where the most of the traffic is coming from. Most of our traffic is tract. Then we have referral, e-mail, social, and organics searches. These are all the different browsers my users or my students are using. You can see Chrome is the mostly used, Firefox, Safari, and Edge. These are the top three browsers which I should be looking for. I need to see or test my website or app in these browsers before launching it or maybe some users are having problem in these browsers or my CSS or HTML is not working. My website is not working properly, so I need to fix it. Then this is user flows. Here it shows you how much that drop-offs for when the user quit some page or the drop-off from this page, you can see here we have the different countries and their user flow and how they have been interacting with my different pages and URLs. I'm not an SEO experts, so I don't know much about this sessions and all this thing, but this tool is really helpful if you know how to use it. Then you can see here are the mobile devices. My students are using Apple, Samsung, Xiaomi, and LG and Huawei, so these are all the mobile devices they're using. I need to test, or maybe your demo need to test on Apple and Samsung, their apps and their web pages that they're loading properly and users can easily use them. This is all about using analytics and analysis, screen recording, and heat maps for developers. If you're a developer and you are good with these tools, you can be a very good asset and very good team player and user experience team. If you have any questions, do ask me. Let's move on to the next lesson. 54. Notification Timings and perception: Let's talk about the timing and placement of notifications or any interaction users doing on your website. Our minds are going to perceive things or interactions accurately when their timing is accurate or perfect. I have seen a lot of websites where they are showing progress bars or when I click some button the status is not instantly change, or sometimes it changed so instantly or so abruptly that I didn't notice any change. There must be some timing and placement of these notifications so that user's mind can easily perceive it. This is very important if you are a developer, I have seen a lot of times I clicked on "Add to cart" button and nothing happened for like one second, then I pressed it again and after delay of two or three seconds, I checked my cart and there were two items added twice. This is really frustrating, if you are doing something like that, you are updating your card using Ajax or any these kind of technologies are you are updating it without refreshing your page, then you need to keep these things in mind, you need to balance the timing of and placement of these notifications. You already know about feedback, but it's timing is very important, this is called the interaction timing on how our minds are going to perceive timing, sound, and animations. If you are developing an e-commerce website and try to show your users some loading animations or once they click some button, you can change the text of the button that "Purchase again". I know that I have already added this item to the cart, let me share with you my story. Once I was testing a Web application and it was meant for wireframing, so whenever I press "Save", nothing happened, I got curious what is happening with me? Is it really saving something or my document is not saved right now, then I looked in one of the corners and there I saw a very small message saved and it was appearing and disappearing with a lot of speed, it was like appearing and disappearing in like 0.1 second or maybe less than that so I was not noticing that change. So if some changes happening out of my peripheral vision, I think we talked about it and something is changing with a lot of speed, you are not going to notice it at all. Now, here are some ways you can make your feedback or your notifications, or your messages on interactive elements better. First thing is if it is happening very fast, you need to show some delays in your feedback messages or your interactions. The standard time is 0.2 seconds so no less than 0.2 seconds or don't try to increase it to half or one second, because after one second users are going to get worried. Try to use very different color, very sharp color, and a bit different place or a border around it to show that it is different from the whole page. You can also use some animations like fade, moving in, and out on buttons or status bars or information messages notifications. Keep in mind that you need to match your human mental perception speed and the speed of your interaction or animation so that users can easily perceive what is happening. The way of showing users that something happened or something changed is a red notification dot, you have seen it a lot of time in web apps, they are using it a lot. It is human nature that if we see something irregular or something is disturbing our eyes, we tried to fix it. So it is human itch, you can say it is our itch that we need to go to that red dot and press it. This is another button we can use to tell our users that something has changed. Here are few examples, this is my message board on Udemy, you can see I have one new message and it is a circle over my profile image, and I have an itch eye, whenever I open this instructor dashboard, I always go to this messages or anything that is new over here. Also when you are loading something like you have seen Facebook or even LinkedIn, they have some loading bars, they show very default data over here you can see that there is something loading on this area. So you need to make sure you are using something like that, this is a form of feedback. This is another example with LinkedIn, it is also loading few things over here at the top and you can see they have some place holder data or place holder bars that something is going to come up or will reload over here. This is SKILLSHARE dashboard, if I try to save and publish my course on skill share you can see over here, if I change something it will show that saving but for me, I think that they can make it better. They might show it over here or maybe close to where I am doing my work, for example, if I'm changing this typography anatomy terms on the bottom, and it shows me saving over here, they should have some animation maybe moving doors or something, so my eyes can easily capture it and my peripheral vision can sense that something is moving and something is changing. Here is another example, this is my Udemy dashboard for my workflow of Modern Web Design course, you can see here is another pattern you can see this is the feedback notification, this is another one that I have one message, new message, and it is my human nature that I am going to try to hover on these. If I go to this new Coupon, let me show you another example, Create new coupon, now if I click on this "Create Coupon", you will see what interaction is going to happen, I have clicked on this one and I'm waiting, now you can see nothing has happened till now, this is very long, you can see somehow the app was stopped and there was some animation at the top that you are Coupon has been created and I saw it at the top. But this animation should be very quick and it should show you the Coupon and the message bar near this Coupon or near my interaction area, although they have used some animation at the top to get my attention that you're successful in your goal, what are you doing? So I created this Coupon course, this animation should be very quick, it should be within 0.2, 0.3 seconds not slower than that. That was all about notification and their timings, feedback timing, and how you can use any missions and delays in your feedbacks. If you have any questions to ask me, let's move on to the next lesson. 55. Anticipatory or Data-Driven Design: You might have seen a lot of websites or web apps or mobile apps you use, where they show you suggested movies, your suggested books, or your suggested likes or your suggested search data, or they gave you a very accurate suggestions that you really like. This is called anticipatory design, or it is going to use that data of that user based on your search texts you write in the Google or the previous movies you have watched, they are going to see that what is that user's behavior, his browsing behavior, purchase behavior, search behavior, and they are going to use that data to suggest you or make decisions for you. This is called anticipatory design, and it uses the power of suggestion. Here are few examples of anticipatory design or the suggestion with some data. Some people might call it data-driven design or data-driven decision-making. Netflix suggests content based on your viewing habits and ratings. Amazon also suggests items based on your past purchase history or the categories you normally like to search. Nest thermostat, that is very popular, it learns your heating and cooling habits and patterns and then automatically adjusts the temperature of your home or your rooms according to your preferences. This is one of my favorite anticipatory design or data driven design, Gmail screenshots, and they have just introduced this new feature, when you are trying to reply to any of your e-mails, you're going to see three suggestions based on the text used in that e-mail. You can see on the left side it says thanks, I will look at it, sounds good, and I am available. It is the e-mail from one of my clients. In the second one, it says, "What is this?" "What happened?" "Thank you for your e-mail." It was the disk usage warning. I think they are looking for the e-mail subject and also the text inside it to make up these anticipatory design replies. These are really cool, they are really good, they really use the data and the user behavior from all his e-mails with that client. Let me show you a few more examples of anticipatory design. Now, you can see this is Netflix screenshot and they figured out that I am living in Pakistan or India or Asia, so they just changed their screen or their main screenshot behind their webpage to some of the movies, Indian movies and some of the dramas and some of the most popular things we see in this region. These are few of the suggested books you can see from Amazon, and I was searching a lot of books, I have bought a lot of books on brush pen lettering these days, so you can see they're giving me two of the suggested books, and I think I have bought one of them, Hand Lettering for Relaxation, I guess, and also you can see there is service design that is based on my user expedience. Also, I'm searching for speed reading books, I have bought one or two, although I'm not a very good speed reader. Some of the more suggestions you can see over here recommended for you. This is the Nest thermostat I was talking about, and it is going to see your behavior patterns and your usage patterns off their device and going to adjust to it automatically based on your behavior and your preferences. This is all about anticipatory design or data driven design. If you have any questions, do ask me. If I get any updates, I'm going to make more lectures. Till then, see you. Take care and bye. 56. CASE STUDY Project - Find UX problems in GPTools App: Now is the time for some assignment and this is going to test all your skills you have learned so far. You have known all the usability, user experience, problems, and principles behind them. Now is the time that you can apply that skills and you can actually find the user experience problems in any app. So I'm going to give you four screens of an actual medical app called GP Tools. I was assigned to improve this via giving them some wireframes, but I'm going to give you just a simple task. You need to see each screen, there are four screens, and you need to find user experience problem, at least one in each screen. So total four problems you need to submit, and also along with them, you are going to submit the solutions to them. I'm going to show you the template. You can use that template or format to specify the solution in the problem, and along with all this, you are going to also mention what usability or user experience principle it is violating. This is an assignment and I'm going to give you the solution in the next video so for that you need to wait. Let me show you these four screens. This is Login Screen you can see on the left and the first screen, and then we have this Register New Account Screen. Then after the doctors are going to log in. GPs are basically doctors in British, UK, United Kingdom, and when they are going to log in to their dashboard, this is what they are going to see. This is the navigation bar at the bottom and everything else. After that, this is one more screen, although this had like 12 or 15 screens, but I'm going to give you just four. This is the entry screen where they are going to type about their appraisal activity that this app was basically for the appraisal of doctors. So this is start date, end date, how much time did you spend, how many learning credits will you be claiming, and so on and so forth. So these are four screens you are going to find usability and UX problems in those screens. Find the problem and mention what usability rule or UX principle it is violating or what problem it can create for your users, then suggest a solution for it. So one line will be problem, second will be solution. Don't forget to mention the screen name like Login Screen, and the problem and solution. Register Screen, problem and solution. Similar with all those screens. So this is all about this assignment, and I'm going to show you the solution in the next video. So I'm waiting for your assignment. So do submit it. So I will review it and I will show you more suggestions to improve your skills. So let's begin. 57. CASE STUDY SOLUTION - UX Problems in GPTOOLS: Now is the time for the solution, let's see how I'm going to tackle these screens for you guys, so let's start. Now, first I'm going to go to this register screen. Whenever someone is going to give you an assignment or task, never think that this is going to be the first screen. Register screen is going to be the first one where a user is going to interact. First I need to register before going to this login. I'm going to give a shot to this one. First thing is that choose a username. First thing is that they have like five fields pretty standard but I think that the username and e-mail, these both are conflicting. Most of the websites and most of the apps, they are using just e-mail address to login. It's better that they remove this field and move this e-mail up over here. It is also going to reduce the cognitive load on the user because they don't need to remember two things like username and their e-mail address. They can easily remember, this is our working memory or long-term memory. We are going to reduce the load on S memory, the user's memory. Just e-mail, then we don't need to use this confirm e-mail because the account is going to be created via e-mail and you don't need to check this one. You can send an e-mail and test that this email really exists or not. You can test that with your programming or you're sending a dummy e-mail to this account, you can check it at the backend of this app. Don't need to use five inputs, you can reduce them to just three or two. Also you can see over here password and confirm password this is also an extra one. You can just use password and you can give some eye icon over here or a hint below it like show password and when the user clicks on it, it is going to show their password. They don't need to remember or they don't need to check their password again and again. One more button which I advise a lot and I really care for that is that when the user is typing the password, show them the actual password not the static mocks. This is a very unique pattern, new pattern I have seen Amazon app using it. You can just show their password in a dim like three characters which I was the one who invented it first. Now, coming to this username and password. Here we have just two screens and we are going to replace this with e-mail and the password will be password. One more thing is that if something goes wrong, I should have a way out of the screen. I don't see any arrow or go back or forgot your password or something like that. If I'm stuck on the screen, I'm going to be stuck on the screen forever. There must always be a part to go back or rectify my problem. Here we are going to use e-mail and forgot your password, these are pretty standard. Now, I'm going to next screen, it is going to be the dashboard. On the dashboard screen, the main thing is that this is the year, it is already selected, you can add some more info about this like appraisal year 2015 and 16. This text, just this year doesn't make much sense. Maybe it makes sense to the user but still you need to think that the dumbest user or the user that don't know much about apps or user computers they can easily understand what your interface is saying. This is about hours, the appraisal hours and credits. They can also add make it more descriptive, what hours are these related to or something like that. Now, the main problem here I see is this navigation, so bottom navigation or bottom icons over here like home, CPD, these are four sections over here. The highlighted section is very strange that you can see over here. Here we have blue color which is tappable so this is showing some information. Then here we have this white color that is mixed in this background. I'm not sure that this one is really pressed. Make sure that your pressed state is and your buttons look like buttons. Right now this blue area and this blue area, they are same. I wonder whether this one is button because it is shaped like a button or this one is a button. This is very confusing, it is our principal of design consistency. If this is an information, it should look like an information. If it's a button, it should look like a pressable button or a menu or a navigation bar. This is all about this one. Now, we are going to the screen. This is entry screen. Here we have start date and end date. This one is optional, that's good. Most of the time when we enter date, it is ranging from one date to another. You can easily use a calendar popup over here. So you don't need these two fields, just remove them and just enter over here, select date. The user is going to select the date from a range of date from a calendar. Then we have time. You can add over here some plus and minus counter. A user can click on the plus and add hours like two hours, three hours. Also you can add over here a drop-down if the hours are like 4-5 hours. You cannot add a drop-down over here if the options are more than five. You don't need to have a drop-down list extending on the whole screen. One control is called stepper. Stepper, you might have seen that it has plus and minus icons on both sides and clicking ''Press'' or tapping press is going to increase it. Also in the credits, you can also put some tapping stepper. Stepper is over here, maybe a counter stepper or something like that or maybe just a field where a user can easily enter just the numbers. You don't want them to enter anything else than numbers. One more thing is that if you look at over here, let me zoom out. Here we in this area and this area, this is basically my input area. You can see that this input area has no affordance that I can enter information over here or it is a text field. It must look like a text field. Let me show you an example. It must have something like this in a shadow. Something like this and one more thing, just minor detail. It's going to have something like this, a cursor over here, something like this. A user can know that this area, I'm going to type something over here. This is a very major problem with this app and I mentioned this in the wireframes that your app doesn't show the user that this area you need to type something over here, you need to input something over here. You can see a user confused if you hide these, whether he is going to click over here on this area, this blue line. Make sure that you have standard things going on which can specify a user that this screen or this item affords this function. A user can instantly see that this is going to be an input field, I can enter something over here. These are the two major problems with this screen. There is one more thing that there is no Save button over here which is also missing anyhow. But these are the two major; one is you can improve the state area, both these fields, you can remove them and just use one, this calendar over here. Then we can use some signifiers to support our affordance that users can know that this area, they can type something or this is an input area. The basic principles we improved over here are cognitive load, we are reducing the load on the memory, we've working memory, like you can see over here, removing the fields. This is also our principal that try to reduce the burden on the user or the hurdles in the path of the user barrier to the entry. This is the entry point over the app. Register is the entry point you need to make it easy as a breeze users can easily enter it. Then here we have the username, we just remove this one, replace it with e-mail. We added how we can remove or recover from errors. This is our lesson designing for errors and you need to add something so users don't get caught into an endless loop. Here we have something that is called buttons. Users expectations. If the user is expecting a button, it should look like a button. Your app should always distinguish between primary actions or secondary actions or primary button, secondary buttons or the information. If it's just an information it should look like an information. Then on this screen we have also removed two fields into one and we made one field, this is cognitive load or working memory. We have removed the load on the physical activity and mental activity of user. They just need to tap once and select a date, that's it. Then here we have some affordance. We use some signifiers to pronounce or make our affordance appearable so a user can see that this action is possible with this item, so he can enter inputs over here. This is a solution to these four screens, I hope you might have come up with more ideas and I hope you have enjoyed this exercise or this case study. These are the real screens of an app I have improved and ultimately you will be giving them the improved wireframes of this one because they are easier to generate. I used Balsamiq mockup for that and that's it. I'm going to create one more assignment soon, until then enjoy this and I hope you have learned a lot. 58. Student Request → Information Architecture Introduction: You might have heard the term information architecture. A lot of people, they are curious about this. They want to learn what information architecture is. Now information architecture basically is how your user is going to find specific information on your website or your mobile app. If someone is looking for some specific product, I'm looking for a camera on Amazon or Walmart. The whole part I am going to take from searching and then finding the results and then filtering those results down to the specific camera I need is all about information architecture. That how you have built the whole information architecture of your website, the whole house of information of your website or mobile app. Now, what you can do is you can create categories, subcategories, and how your pages are linked together. You are going to link your pages how your breadcrumb trail is going to lead to that product. If the user wants to go back, whether he can go back to the first page or the page back from the page right now hence on. All these questions are going to be answered while you are designing information architecture. Now, how you can design that information architecture. There are very simple tests. I'm not going to go in too much detail but a simple test is that you let your user write the whole categories of the website. For example, if your website is about jewelry, you are writing a bracelet and rings or something like that. Maybe your user is looking for a category like Christmas sales or summer sales, something like that. You need to test your users for that. You need to let your users try your few sketches or few prototypes, simple prototypes. What you are going to do is just create few sketches off your first few pages and your navigation and your subcategories off your website and search bar. Let your users try to find something and see whether he's going to use search bar or he tries to find some specific category. For example, if I'm looking for a camera which has DSLR camera, and I don't know the term, that DSLR cameras are special or something like that. I just know that I need a digital camera. Rather than getting very big category of DSLR cameras, which the term, I don't know. You can just write cameras or digital cameras. If someone tries to click on it and then there's drop-down navigation. With each subcategory like digital cameras, mirror-less cameras, you show the image of that category. User can instantly recognize that this category, or I'm looking for this camera. This is the image. Yes, I saw that image. This is how you can enhance the information architecture. If you've tried to shop on Amazon or Walmart, you can see that their search results when you try to type in something or try to find something, their search results are very accurate. Even if you mistype the spelling, they are going to be very good, such as when you open the search results page came back. Then a filtration process. This is the next process in information architecture. You want to arrange them with the price low to high or high to low. This is all inside the information architecture. Whether you want to rank them by ratings. You want all five-star rating products. This is also part of information architecture that how your user is going to find and filter the information he really needs. I'm going to show a lot of examples in the next lesson. Stick with me to the next lesson to see some more examples on information architecture. I'm going to show you different parts and different portions. Simple, if you want to improve any websites information architecture, you need to sit with your users and try to give them tasks. Usability tests are going to reveal a lot that what are the problems with your information. You can also see what information blocks are needed. For example, when you see any product page, you normally see an image or video of the product, then it's named subtitle. And then all the different specifications of that product, then the reviews. What user is looking for, whether he is really looking for the reviews, he is going to read the reviews first. You are going to move that reviews top in your information hierarchy. You are going to build that this information is most important than this one, than this one. This is also part of information architecture. I hope you have learned a lot about information architecture. I am going to show you four examples in the next lesson. Let's move on to the next lesson. 59. Examples of Information Architecture (Best practices): Now I'm going to show you some of the best practices and a few good examples of information architecture and how the information is designed on different websites and navigation bar, sub navigation bars categories, okay? The first website I'm going to show you is this Adorama. You can see at the top we have different icons and then we have sub menus with that, okay? Shop, there's store, home, rent, used, business, print and learn, okay? This is I think universal navigation. It is going to stay over here, whatever I searched on this area. This area is going to be changed on the bottom. The top navigation is going to be staying here, okay? These information are really necessary. They should be on the top of each page like this help links, this phone number, okay? Things like that. Then I think in the previous lesson I showed you that deals. You can see over here in the top they have deals then they have again over here featured deals, so it means that these users are mostly looking for deals. Okay, so that is why they have shown importance to that. There are two links to their deals. Then we have over here shop by department. It is a bit highlighted. It is in a bit more dark blue color and if you hover over it, you can see there are different categories of cameras, lenses and such and such. Let me go to one category, the cameras and here we have. This is another form of information architecture, which is showing these images with different categories you can see over here mirrorless cameras, DSLR cameras, digital point and shoot cameras, accessories, HSDSLR. These are all the different categories. Also they are showing the same categories over here on the left. Then we have more filtration like featured brands and then we have these bestsellers, okay? This is how this website is working. Now if we go to Amazon, it has a bit different working pattern, okay? There is a lot of good filtration over here, okay? If I go to DSLR cameras or something like that. You can see I mistyped, misspelled this DSLR camera, but they are going to show me the results for DSLR camera. If I go to this DSLR cameras, you can see over here, these are results and now you can see on the left there is a lot of filtration over here. This is also part of information architecture. Camera and photos, these are different categories, okay? You can see all 31 departments. Then it is showing me, do you want international shipping? I can refine my search by these, free shipping brands. I can just click, for example, if I want just a Canon camera, I can click over here and these are all the Canon cameras. Then optical zoom, so there are a lot of customizations for my search and why they are here because most of the users are not going to search 2,000 records over here, okay? You can see over here still I have 20 pages, so more than 200 records over here for different products. If I want to lower them down, I want to be over here just five stars, four and up stars, so I am left with still 20 pages, okay? Let's go to something else. Free shipping by Amazon. I'm filtering down my results. You can see over here still there are 20 pages so you can further go down by this like that and it is going to show you less pages, okay? I don't know how many results they have returned. Okay, so these are the results on the top, one like 16,000 records. There are too many products on this, so they need these filtration more, okay? Then we have this, you can see if we go to this website, Walmart, you can see this is our top navigation which is going to stay over here at all times. Now how they are going to name these items over here, like reorder items, sign in card, they are going to test their users naming these links and what links should be there, okay? You can see over here they have few more links. Okay, so if I go to this toys category, they are also showing that category with an image. This is really cool. I really like it. It is very easily recognizable. You can see patterns and images. You can recognize them easily, the images instantly, okay? You can see what here new. Then we have toys and on the left side you can see again we have filtration, okay? By age, by gender and if I go to this 8 to 11 years old. It is not showing me how many results it returned, but it is changing the page for me, okay? Then we have more, these mega drop-down, These are called Mega drop downs. You can see over here. They have some images, categories, archives so these are four very big websites, okay? But I think that most of these websites like Amazon and toys, they are not using it because their search engine or their search bar or their search results is very accurate. Okay, now another website, very simple example, this is Intel website and you can see they have very few links over here, so it is easier to choose. Support is very important. I have heard a story that they ran a UX usability tests on their customers and found that the support on Intel was used most of the time so they made it at the top of navigation, okay? Then we have products. If we go to products, you can see over here, we have different products, processors and still you can see there are images with different categories. This is very nice navigation. I really like it. Okay, so I can go back and for example, if I want to go to a networking and IO, there's different links. Okay, so this is called context-based links. I'm on this page, i7 processors and you can see related to this item I have selected, there are few more links; 1, 2, 3, 4, 5, 6 that are all about this product. This is called context-based navigation, Okay? You can see over here. Okay, now I'm going to show you some more mega menus over here. These are used in Magento. This is another e-commerce solution. You can see over here. Images with some links even few videos over here. Okay, so this is another one. This is a nice one you can see here we have icons. These are also easily recognizable rather than finding the text but they should be very good. These icons should be very good so they can be easily recognizable or you can instantly see that this icons means a bedroom. You can see one here. This page I am going to share with you, there are a lot of mega menu over here. Okay, so this is a very nice website and I really love their navigation. Let me show you, so if I hold on kitchen, you can see kitchen sinks, garbage disposals, bar faucets. This is a very great example of how the information architecture should be designed because these images are easily recognizable, they have fewer categories, 1, 2, 3, 4-5 6. Not more than seven items over here. This is great usage of how we are limited in our working memory so we can easily scan these, okay? This is a best example I have seen. This is built.com and I really love it. Okay, so another one, you can see there are great icons, simple icons, bedroom living areas. This is sliderobes.co.uk. This is a great example of this navigation menu. Okay, so these are all examples of information architecture. Now I'm going to show you this is called card sorting. This is a simple test. You just put your links, names of your website, on a paper like this and you tell your customer or your user you are testing with to select or search something, okay? If he likes that, I really wanted to see the fancy froks. This website was about frox. I was doing the research on one of the users and you can see on the left over here, I have written summer collection, so what happened is that my user, she was a girl. She was looking for summer collection rather than party dresses or casual dresses or fancy froks. Out of party and fancy froks, they were also almost the same wording so she chose this one. She said that fancy froks makes more sense rather than party dress. Also, I showed her to search for different froks and dresses she likes. Okay, so she tried to write barbie dresses, which was not in any of my categories. I had a Disney dresses or princess dresses, but not barbie dresses. This is one category I thought that I should make it in my website, okay? This is going to be in my next course. All these research and how to do this card sorting and different prototyping, testing and usability and all these stuff. It is going to be in my next course where I will be creating a simple e-commerce startup of fancy dresses or any other idea like that. I hope that you have enjoyed this lesson. Let's move on to the next lesson. 60. 5 second usability test: Now we're going to do a little exercise which is called five-second test. What you are going to do is; it's a usability test, you need one person or maybe two persons from your family or friends and what we are going to do is just show them the first page or the first few pages of your website or mobile app. To them it is just for just five seconds. Show that page or that app screen for five seconds and then ask them few questions after that. So hide that screen and ask them, what do you remember about this website? What do you think that this website does? What this website is all about? Questions like, what do you like about this website? What do you dislike about the design? If this website is about an e-commerce website or it's a donation website, you can ask them questions like, would you like to donate something via this website? The first question is what they remember about this website, what this website does is the basic question. This is the main question of this five-second test. The second one is to check their trust about this and credibility of your website or app. So the second question is whether you would like to do this task on this website. This is a very basic five-second test so let's do it. I'm looking forward to see some examples. You can post them in the questions and your findings. I would like to see the findings. Do this five-second quick test with any of your relatives or friends or anyone who is sitting around you to see what are their first impressions and what do they remember about your app, or website, or your service, or product. This is a very basic test. You can do it at your home or in the cafe. I hope you have learned a lot and you would try to do this five-second test again and again. See you soon in another lesson. 61. What is Agile UX? Introduction: Today we're going to talk about Agile UX and Lean UX. Now what these terms are? They are basically used in software houses and where software development is the main purpose. They have to develop something working in rapid succession or very rapidly. This technique is used to create working prototypes or working deliverables to the customer early on so they can test it early in real situation. What they do is they are going to skim the planning part where you are going to design different personas, or you are going to interview your users. What they do is they involve the customer. Rather than the user, they involve a person who has more knowledge about the users. This customer is going to write different features and different customer stories. This is going to happen in my app. A person is going to do this and do this. Then developers are going to extract functionalities and features from those customer stories. Those customer stories are basically the base of their planning. They are going to skim the planning part a lot. From these customer stories, they are going to create features list or functionalities they want, and they are going to discuss it with the customer. They're going to prioritize different functionalities and features on the basis of what is needed the most. Also, they're going to assess what is the time and cost to develop each feature. They are going to rank them with difficulty and time. What they are going to do is, they are going to create a minimal viable product which is called MVP. You might have heard, within just seven days or 10 days. Mostly they are going to use sprints. The sprint is basically their sound one-week development cycle and they are going to rapidly develop that software. Then they are going to give it to the customer. Then the customer is going to give them the feedback and they are going to use that feedback to iterate again. What they do is they work function by function or feature by feature on that product. Then they combine those features to create one big product. It is just like you are planning for a house in conventional user experience design, you are going to first plan, you are going to create a blueprint of that house. Then you are going to plan the structure and everything. But in the Agile UX, they are not going to create blueprints or structures. They are just going to start building one room. They are going to build different rooms rapidly. You want the kitchen? This is the kitchen. Customer says, "Okay, I want this over here or here" They change it, and they finalize it and release that kitchen. Then they are going to create other rooms, and they are going to combine those to make a whole house. This is how the conventional user experience and Agile UX or Lean UX they differ. The Lean UX or Agile UX they are advocates of that they should not waste their time in design documentation. They want tangible product or working product within weeks or maybe 10 days. I used to work for a software house in UK. They were building different games, and what they had, they were using Agile UX. I just planned their wireframes. What they did is they took those wireframes, and they gave it to their developers, and they had the engine for running that game already compiled. They just create a dummy interface, and they just launch it. This is how these Agile UX companies, they implement in their software houses. Their cycle or their development cycle is very fast. Now, why do we need this Agile UX technology, and things are changing rapidly? For example, if you are researching for a game for like three months or six months, you took six months to interview users and everything, and suddenly the new version of iOS or new version of that kind of game has launched, or people shifted their focus to that. All those. That research or that interviews they are going to be a waste. What they did is they just keep on iterating product and test it with the users separately and try to iterate it and try to reach the goal of the customer and the user in minimal time. This is how this conventional UX and Agile UX they are different. Let me tell you some of the problems with Agile UX. Agile UX, as you know that they start building rapidly, so there will be design inconsistencies because they don't work on the design or the interface of that app. They just start building it. There will be design inconsistencies. Then the second problem will be team collaboration. All the customers, users, and their marketing department, everyone or one percent from that department should be present when the team is making the sprint. The seven-day Sprint, I have read the book. This is a very good book Sprint. You can say that they are going to use that seven days to develop a working prototype or dummy prototype or functional prototype of that software by using the knowledge of the customer, the marketing department, and all the persons that are the stakeholders in that UX process. They are going to be in one room. This is very important. They should be together for the whole week. If you have your team that is spread across the whole world, you cannot use Agile UX that good. These are different problems that are related to this Agile UX. I hope you have learned a lot. I think this lecture is already getting long. I will leave it to you. If you have any questions, do ask me. Let's move on to the next lesson.