UX for Beginners: Craft delightful experiences by mastering the basics | Muhammad Ahsan | Skillshare

UX for Beginners: Craft delightful experiences by mastering the basics

Muhammad Ahsan, UI UX Visual Designer 10+ Years

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
61 Lessons (5h 20m)
    • 1. Introduction to the Course

      1:24
    • 2. What Is UX And UI Design?

      6:01
    • 3. Can I be a UX Designer

      4:29
    • 4. Different Roles Of UX Designers

      5:38
    • 5. Major Parts Of UX Design

      5:25
    • 6. Human Centered Design

      3:25
    • 7. Double Diamond Model of Design by Don Norman

      5:18
    • 8. Root Cause Analysis Skill

      2:15
    • 9. What are Seven Stages Of Actions?

      5:00
    • 10. What are Affordances And Signifiers?

      6:08
    • 11. Affordances & Signifiers explained → Headshot

      4:31
    • 12. Examples of Affordances & Signifiers

      5:31
    • 13. Natural Mapping

      9:10
    • 14. Conceptual and Mental Models to improve UX

      6:26
    • 15. Working Memory and attention Span

      5:45
    • 16. Examples of Working memory

      6:44
    • 17. Recognition and recall

      4:09
    • 18. Examples of Recognition rather than recall

      7:00
    • 19. User Expectations in UX

      4:10
    • 20. User Expectations explained → Headshot Video

      2:03
    • 21. Examples of User Expectations

      7:45
    • 22. Peripheral Vision Limitations

      5:14
    • 23. Examples of Peripheral Vision limits

      6:46
    • 24. What is Context Of Use?

      4:34
    • 25. Context of use → Headshot video

      1:41
    • 26. Why stakeholders are important in UX?

      4:12
    • 27. Humans Behavior, decision Paralysis and Scanning Patterns

      5:06
    • 28. How Old & New Brain make decisions

      3:15
    • 29. Humans hate Change

      2:40
    • 30. Our Goals and Change Blindness

      2:42
    • 31. Examples Human behavior decision Paralysis hate change

      7:43
    • 32. F & Z Patterns, Cart Abandonment, Form Field Conversions examples

      7:18
    • 33. How Discoverability enhances a product?

      6:14
    • 34. What is Learability?

      3:58
    • 35. How Feedback plays vital role in UX?

      3:20
    • 36. Examples of Feedback

      8:06
    • 37. Feedback within Context - Walmart Example

      2:29
    • 38. 4 Consistancy With Examples 8

      6:16
    • 39. 4 Constraints With Examples

      6:14
    • 40. Slips And Mistakes With Examples

      4:23
    • 41. How to Design for Errors With Examples

      4:43
    • 42. 8 User always In Control With Examples

      4:24
    • 43. 9 Grouping and Chunking with Examples

      6:32
    • 44. 10 Humans have Limits

      4:11
    • 45. Using Design Patterns

      4:55
    • 46. Don't let your users think

      8:10
    • 47. Why Users need Speed and how to effectively show delays?

      5:52
    • 48. Smart defaults and power of Suggestion

      5:47
    • 49. Guiding And Training Users at each step

      4:06
    • 50. Reducing barrier to entry

      4:35
    • 51. Natural Language rather than Codes With Examples

      7:38
    • 52. Natural / Conversational Forms examples

      2:33
    • 53. Google analytics and Hotjar to reveal more about users

      4:39
    • 54. Notification Timings and perception

      7:06
    • 55. Anticipatory or Data-Driven Design

      3:38
    • 56. CASE STUDY Project - Find UX problems in GPTools App

      3:16
    • 57. CASE STUDY SOLUTION - UX Problems in GPTOOLS

      11:59
    • 58. Student Request → Information Architecture Introduction

      5:28
    • 59. Examples of Information Architecture (Best practices)

      11:12
    • 60. 5 second usability test

      2:10
    • 61. What is Agile UX? Introduction

      6:43
12 students are watching this class

About This Class

Every field of study have some Principles and Basic concepts and if you master those concepts and principles, you can apply them anywhere. Similarly in User Experience Design, experts are studying Human behavior from past many years so you need to master these UX, Usability and Interaction Design principles

This course will walk you through all the Principles, essential Concepts and Behavior patterns of Humans when they use Website, Mobile Apps or any product so you can Design better digital products and satisfy users.

Develop mindsets and skills to deliver a better UX for any Website, Mobile App or product. This class is full of latest practical examples and screenshots of UX problems which a lot of Designers, developers and Product managers are making with their products.

 Whether you’re a designer, developer, or are completely new to ALL of this, you’ll leave this course with a practical understanding of which qualities makes products pleasurable, efficient and functional.

This course teaches you about

  • How to become UX Designer
  • Learn about HCD & User Centered Design models
  • Develop your instincts and skills for UX Design (Double Diamond model of Design)
  • Develop Root cause analysis skill and learn about 7 Steps of Action
  • How Human mental and Physical limits effects UX
  • How to reduce Cognitive load to improve User Experience
  • Use UX principles to instantly identify problems in your product
  • How to avoid common UX problems in Websites and mobile apps
  • How Discoverability, learnability and feedback improves UX of your digital products?
  • Design patterns and Anticipatory Design
  • Human behavior with Digital Products
  • How to improve Conversion by eliminating barriers to entry
  • How to use Google Analytics to know more about user
  • How Users scan and read on your websites?

Enjoy all the Real-World Examples inside this course and start your UX Design Career by mastering these basics in the right way.

Transcripts

1. Introduction to the Course: welcome to my course about UX design for bigness. Why did I create discourse? I have seen a lot of designers, developers, even product managers making in depicting the same design and visibility and interaction design mystics and why they were unable to fix those mistakes is that they don't have the understanding off disability whose experience or interaction design principles. Now these principles are these root ideas. They are going to govern that user experience off all the products, whether they're physical or digital products. So in this course, you are going to master these basic principles with tons off really examples. Real world examples like Amazon, Wal Mart and Gmail and Google different 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 you can easily improve them. You can see where the problem is and how to fix it. Hi, I am ha medicine, and I am designing Joyce from past eight years and improving their usability and use their experience from past three years. Now let's get started and start improving user experience off digital products 2. What Is UX And UI Design?: And now 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 game. In terms of product, it could be a mobile air Web app, smartphone or any package or a laptop or something else. Okay, so in simple terms, journey off your user video product is basically user experience. Okay, let's explain the user experience in terms off a mobile app. You might have used many mobile labs, and you don't know how the whole user experience affects you. Okay, so for a user installation, often APP is the or finding the airport installation off the APP is the first step. Okay, you might find it on a Facebook on maybe from of hiring hearing from a friend that this app is really cool. Man, you need to install it. Okay, You can make different funny faces with it or whatever. Okay, So the first step is finding the app or installing the Ibuki, then the next step is on boarding experience. Okay, Signing up There could be a lot of problems. Even I have seen a lot of APS that really sucks at signing up. Okay, Most of the users they're going to leave at this stage. No, The third stage is getting to learn the AB. The first impressions, how the app is, you know, flowing different with different screens and different interactions and how you are learning the application. Then the fourth stage is performing important task efficiently and easily s So this is the effectiveness. How functional is your product? How you can effectively and easily complete your major tasks with this product. OK, then, emotional impact. In the end, you will be, you know, frustrated. Or maybe 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 sporting via phone or email. Okay. Ah, lot of websites and APS. They're really good and they perform everything. But when their support team or their support delays are for, like, three days, your user are going toe give you very bad reviews. Okay? I have seen very good products having very bad reviews just because off there support team . Okay, so make sure this is also another very important step in user experience. Now we're going to discuss what are the end product off you six begins design. And who will be involved in user experience? Design process. Okay, Now the product off. Any user experience design will be detailed wire frames along with detailed specifications off that product. Okay, So detailed specifications mean what are the features and what will that will do or what this website is going to cover? How much area are how much features and functions? Okay, Now you X process involves CEO oh's because they know about the product a lot. Okay, then product managers than customer service. Okay, then you're designers and developers and as well as other users, your primary users and also the ASIO people or the marketing people. Okay, All these persons are going to be involved in the U X process. Now let's define the user interface design there. We have a lot of confusion about user experience, design and user interface design. Now, the user interface design means means the look and the feel off your application User interface is the point. Raise your user and your product is going to meet. Okay, the users going to interact with your button. The user is going to press on different things on your screen, but what he's viewing on screen is basically the user interface design. It includes colors, typography or how different buttons are spaced out. Ho. 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 rooks create and also works well, a lot off users these days. Even if you look at Apple products, they have a specific, ecstatic quality or they are very good looking. The first impression user is going to get from your product is how it looks and feels. Okay, so this is very important. OK, now the end product off any user interface designers, your design will be high fidelity more cups along with style guides. Okay, more cops are basically the final look and feel off your product. These are basically images on those off. You have taken my other your design courses. They know about style guides and markups. Okay, Style guides are basically how your colors, di faces and different sizes off Britain's and every other object you are using Design Elementary was using. They're going to come together and bought are different design specifications you are using . So these mark ups and style guides are handed over to developers toe actually implement them, inform off an actual product or actual cord. So in the end, I'm going to sum up this lecture with saying one thing that you y design is basically one process or for UX design. Jewish design is a very broad field. Your design is a part off UX design, so keep in mind all these things. And if you have any questions, ask me. There will becoming a lot off more things about you. Extend your design. Okay, 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. Okay, you have seen that I have shown everything about humans. So this is all about human. That is why it is called human centered design. Let's talk about the different jobs off. UX designer. There are different kind of your designers. They do different jobs. There are a lot of different specific job titles for different, kind off UX designers. So 1st 1 is user interviewer or using investigation. I call him. I use an investigator or something like that. He interviews different users and get some information from them. Then we have the planners, all the ones who plan information or information architecture. These are called information architect. Then we have designers. They are going to wire frame and prototype. Okay, then we have interaction designers that are going to design the floors and the diagrams and interactions planning all the interactions off your ab. Maybe some animations hold this screen is going to flow to another screen something like that. Then we have usability testers or disability gurus who are going toe. Observe actual users off your product with your users and going toe. Assess different UX problems with it. No Jews in interviews are also going toe involved interviewing stakeholders and CEO Zoff that company or product Okay, because they know about the product a lot. Now, if you are a way designers, 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 off UX design because you already know that how these Leo sort typography your colors are going toe grab user attention or whether user can click this button or not, how big this person should be or something like that. If you are you a designer, you already know the psychology behind designs and visual information. You know how to lay out information. You know how toe present information. Know how you are going to shift from a developer toe UX design. If you are a programmer or you are 1/4 then you know how things are implemented. You know, the back off, backbone off everything you Eckstine, my call you an engineer or software developer or something like that. You can easily understand why watching the usability test or users or maybe user interviews , or when the UX designers are planning for something. You know, that how we can achieve this, how we can make our product load fast or maybe some valuable things like that. Okay, so you already know how to implement things. You need to know the users psychology and how different things affect user behavior. If you master those things or the essentials off user experience concepts, you can easily become ah, ux designer. Whenever user investigators or user interviewers take the team to interviews as they always take an engineer or a programmer with them. Because programmers can see the pains behind the user interface, they can see why this problem is occurring. Maybe it is a database connection at our Or maybe the error is not true able. Or maybe that Ford is very small when gendered from the server or something like that, Okay, so they can come up with a lot of practical solutions. So that is all about becoming a UX designer from of designer background or a developer background. If you have any more questions, you can ask me. The same applies to S U engineers and other people who have development or a computer background. So if you have any questions, do ask me. I will pay 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 engineer, mechanical engineer, civil engineer. Similarly, like that There are different rules and user experience design. There are people who do use a recess. There are people who do information, architecture or defined the information architecture. Then there are people who are going toe do the interaction design for the product and their content strategist than their usability experts. I am basically an interaction designer because I normally work with violet frames, more cops and prototype. Most of the time. I normally also do some of the user research invisibility tests. So let's see all these rules. Okay, Now the user researcher is the someone who is going toe conduct user interviews and going to investigate user and going toe. Ask use a few questions about the product. The main purpose off user research is together. Information about how, when and why uses you certain products and what features the need in any product you can do On site user researcher off site use A research or online usually says there are different websites on site means that you were going toe Do use a research in the office off the user . Okay, 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 old user interview inside your lab and online user research is that you're going to pull some questions online and different users that meet your criteria . They're going to answer the questions. Okay, so these are different types off user research. Now we're going to talk about interaction. Designer interaction. Designers will work on the flu off your head. Okay, How someone is going to click or tap and where this screen is going toe flow and ah, 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 check out process flow on different websites. They are totally different with different websites. If you go to Amazon there like 56 steps in the checker process and if you choose Walmart, they're going to be just two or three check out steps. So this is how the interaction designer is going toe solve this problem. Also, interaction designer is going toe tell you the interactions or any missions that are going to happen when you open a launcher app. You might have seen iPhone. When you tap on any icon or you try to close any app, there is an any mission off closing and opening an apple came. So this is going to be the part off interaction designer. No information architect is going toe. Plan the whole information off any airport 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 form eight audio form it 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 text than we have different links or embedded type off posts. Okay, so there are different kinds. Off informations are different types off informations again, the information blocks. So this is the job off information architect to plan all this information and how it will be displayed and how the user is going toe, find them. Now, the content strategist is going to answer the question off how your company or brand or your business message is going to be delivered to your end users. What language should you use? What Weiss and tone off the product should be. In short, it is going toe frame the whole story off your product. OK? Now how you are going toe? Tell the whole story off your product. You are going to use less text and more images, or you are going to use to tail text or less images or whether you were going to use on introduction introductory video about it and the whole script off that video and everything is going to be the contents strategists job. Okay, Now it also involves all the content writing compiling it, how toe produce content that user really need. Okay, whether this content is needed by the users, whether the juices are really looking for this content, whether they really need to download this pdf file. Okay, so this is these are the decisions that content strategist is going to make. Okay, now, the usability experts, I really loved this job usability experts are going to get user feedback after viewing them using the product. Okay, They will give the user a chance to use the product or perform different tasks. And then they're going toe watch the user doing different tasks and get all the problems and north them and write them down. So this is how they're going toe, get to the users pain point and how we can improve the product. Okay, so they're going to prepare as usability report in the end. So these are all the different rules off user experience designers. If you like any off them, you can penetrate that field. Okay. 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 u X? What is your ex? But we are going to see what are different major parts of your ex process. I'm going toe, simplify everything. So we're going to start with What's the problem? Getting inside 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 others users. Then we have how it will be used. This is the context. How ours uses are going to use our camera. Are they going to use it in the rain or something like that? How uses will use the solution or how they're going to interact with it? This is basically the interaction, whether they're going toe Jews, their voice command or whether they're going toe personally input by using their fingers or whether they're going to vibrate eight with your hands or something like that. Okay, so this is the interaction, and then, in the end, how we're going to test and improve it. This is just ability tests and seeing your users using your products. Or if you don't have your product right now, then you can give them similar products or similar websites. All your competitors website and see what are the shortfalls and problems though your users are facing. Okay, so this can give you ah lot off insight into what is the problem and how you can fix it. No, this is a buzzword. You might have heard it a lot. Human centered design. Okay, Now, human centered design is basically an approach that WAAS adopted by ideo. Okay, the design team at IDEO and what that means is actually what the did is they put the human needs and capabilities and human behavior first and then designed everything according toe that. Okay, so basically, they're 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 stakeholders and other CEOs. They have their own goals and they have their own aims in their mind. Okay, so you need to cater for them also. Now, let's talk about user context. This is very important. It can change the whole process off your product or it can add a lot off necessary features into your product. just think that user context means that conditions and atmosphere on or the room or the office visual product is going to be used. Take an example off a camera. If it's a camera, Remember DSLR camera. And I am landscape shooter. And I shook mostly in the outside. Okay, maybe I showed most of the landscapes in the rain. Okay, then this camera needs over the shoes these days, a lot of people they shoot in every mosque where the shooting, the sun, the shoot in the rain, they shoot in the sunlight, the shoot, and they might shoot while swimming or something like that. Okay, so these things are going to change the context off yours. Let's take another example off train booking app. Okay. So you might be in a hurry. And your booking your train while you are traveling. Okay, so there might be noise around you, and there might be low signals, low signals, WiFi signals, K. Or maybe a few more constraints and user context is totally different. There might be people around you. Okay, there might be a lot of noise that might be a lot of catering. And you're booking your seats So you need to take it off All these things you might be in the sun. Okay, so your screen is not that bright, Are you Are having problems clicking are tapping on different buttons. OK, so these this is called user context. Okay, Now, what are the features off? Very good. Our great user experience design the only thing about user experience design or create user experience. Design is our interaction with technology of we as humans make a lot of mistakes. So good design requires communication, especially from machine 2% or percentile machine indicating what actions are possible or what is happening right now. What is happening with my app? I have kicked the burden. Does this submit my form or is it still working in the background? And what is happening going to happen next? Is it going toe? Charge me right now? Or is it going to shock judge me at the end of the month? Something like that. Okay, So these are the things you need to keep in mind that communication between machine and person or your product and that 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 ah, I will be ableto answer your 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 or you works, which is human centered design. Now, in this approach work, actually we do is we focus on Lee on our users. Okay, So each user have different needs and different limits, memory limits or maybe physical limits. So we're going toe, take care off all these limits, and we're going to create an effective and efficient product that can satisfy our user. And it can increase the overall effectiveness or major task you they're going to do with your product. And they can easily do that. Task now at city was basically used in the still Lars and production plants were uses need toe, you know, check hundreds and thousands off items and they were, you know, getting tired and sick. So what they did is they started reached the search 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. So this is all about human centered design. We are going to focus on our users, primary users and their needs and their limits, whether they're physical or mental limits. Ideo is an design agency, and they are working on human centered design, and they're well known for this approach. So I'm going to show you their definition off human centered design ideals. 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 off ideas with sketches with different vile frames. 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 toe show our refined product to the world. These are the four steps that are involved in human centered design cost. You are going to absorb, and research about what the user needs are so user needs and their limits is our first focus. Then we're going to move on to the idea generation and exploring different solutions. This can be tens or hundreds of solutions. Then we're going to refine and choose a few off the solutions and we're going to build prototypes are working Demi prototypes off those ideas. And then we're going toe test with the 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'm going to share with you human center designed to wicket, 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 what Here, the field guide to human centered design. You can download it and you can use it and you can read it. Ah, 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 Mourners or some basic approaches off user experience design . One off them is double diamond mortal off design This waas from Don Norman. And he's one of the pioneers off user experience design. And in his book, the design Off 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 2nd 1 is finding the right solution. No, let's look at the diagram. Now, this is the diagram off 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. So we're going from left to right now when we're going to start on this left yellow point, we're going to explore and prob into our real problem what the real problem is to our users really need this a 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. Okay, so 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 off this diagram, you can see on the left we have a dotted line at this stage. What we're doing is we are dropping into a lot of different problems. Okay, so divergence mean 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 club problem. Then we are going to focus and converge on one problem, which is the really rude off everything. At this point, we're going toe, start looking for solutions. So we're going to sketch different ideas, different solutions. These can be tens or thousands of solutions or maybe 100 of solutions. And at this point at this middle, we have explored a lot of alternatives you can see on this side This aero means that in destruction in vertical direction, we are basically expanding our alternatives. This could be alternative solutions or these could be alternative problems. After finding these alternatives, we're going toe again converge on the rial solution. Actually, we're going to test different prototypes with our users, and in the end we're 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're going to say a lot of things. I have this problem. I have this problem. But the real problem is for you to find. So start questioning your users and rob into their problems and expand the scope off 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 a solution. Before that, we should never try to explore solutions or try to find any solution. No, exploring possible solutions means we're going to create a lot of sketches. Ah, lot of Demi prototypes and show them to our juices, which want really works or which is there really problem? And in the end, we're going to converse to the right solution. The best and only solution that is working well have been testing with the rial users. The essence off 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 Modern User comes to me and say is that I have a problem. My car won't start and I don't know what's the problem Now You're starting Idea is solved the user problem and show the car staters or problems status on car screen or on his mobile app or something. Now you're going to expand that problem. What could be the reason behind that problem? Why the car is not showing any problems? What enters our problems could be later. Tocar ignition problems is the battery's low or the fuel is low. How many reasons could be behind car ignition problems once you're going to find the real problem, and in the end, you found out that the battery was low. Now you're going to expand, move toward the solutions. Do we really need an M 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 Petrie that it is low. Then you can converse toe. The right solution may be changing just one icon, or maybe the feedback toe that I call that What is happening to your car can be the right solution. So 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. So 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 toe, find the real problem behind what user is trying to say. It is called five wise, and this process was developed by security Toyota that is being used in to a production plant. And what you were going to do is just keep asking wise till the time you reach the rial or root cause off that problem. Let's see this root cause analysis with some example. Now the problem is that user was unable to logon. So the first question is, why didn't the user fail to log in? The answer is, she typed the wrong password. Why she typed the wrong password because she forgot it. Why she forgot the password because we had a constraint off 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 happened with the reset password? Because we are using some third party plug in now. The real problem. Waas that the user tried to use the forget password feature what she waas unable toe receive the password because off the delays saw the real problem behind How are field Logan was not. That's wrong password, but the password reset delays. So this is how you're going to find the real problem behind anything. You can apply this technique toe any situation in your life or in user experience, design or why you're designing something or you are questioning users. So this is all about root cause analysis. I hope you have enjoyed this lesson. If you have any questions to 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 toe, create a set off actions. First, I'm going to do this than I'm going to do this. And all these actions are based on our perception what we are perceiving, how we're perceiving that app or result off directions. So all of our actions, they're going to be based on perception, which is also called mental models, and other goes what we want to accomplish in. Then we will talk about mental models later. So let's see, What are those seven stages off actions? The seven stages off actions were also proposed by Don Norman. Let's see what our doors salmon steps. Number one is what and why do we want to accomplish first is our goals and triggers what is triggering to accomplish the school. 2nd 1 is what are the alternative action sequences can achieve the same goal with doing something else or with another sequence of actions. By pressing this button and going to this u r l and maybe hoping and pasting everything. Can I create Ah Google document like that? So this is the sequence off actions every user have different sequence of actions. They might use some other sequence toe accomplish the same goal. Then you will think that what actions can I do? Know? Can I press this button? Is it activated, or is it and disabled? Then the next step is hardware doing how I'm 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 the need to tell you what happened when you kicked or when you do Did this action, then the next step is you are going to perceive that feedback from what happened. So, for example, you are using a microwave oven and when you pressed start it doesn't start and it gave some other. You need to understand what that other means. What does it mean, what happened? And then in the end, is it okay have accomplished my goal. In the end, you're going to see whether you have created a Google document new document successfully or you have hated your milk in the microwave oven. So these are seven stages affections. If you can master these, you can apply them on any app, any website, any product. Let's elaborate. The seven studies affections with a screen off Gmail. It and this is my screen shot off my iPhone Jimmy lap. Now you can see my trigger and goal is toe delete emails. Now my trigger. Waas get rid off unnecessary mail. That was my main us to delete emails. I don't want unnecessary in minutes. So my goal was I wanted delete emails. No, I am on the screen and you can see how many possible alternative sick action sequences are . I can long press on one email to select it, or I can alternatively press on the left circle side OK and select multiple emails. Or maybe I can select just one email. So there are two possible ways to select. The aim is either I can tap in the circle or I can long press on the email. Next wars can I press delete? What actions can I do know is the lead icon is enabled or disabled right now, I cannot tell that this is enabled or disabled because most off my emails they are highlighted in black color, so highlighted or enabled are basically in black color. But the top icons are angry now. The next is I took the action. I pressed the delete button, which is how to do it. I am going to depress the delete button. Then the next message I'm going to see on the screen will be a yellow notification bar that do you want one? Do the messages has been deleted. This is what happened. I need toe perceive it. I need to translate it whether I'm able to understand the message. This is the next of what this in notification means. So I just comprehend that my I have successfully completed So notification Waas, you have deleted the emails And do you want toe? Recover them to you want to undo your action. And in the end, my goal was accomplished. I have deleted all my emails. I want toe. So this seven stages affection. You can apply it on any mobile screen, Any app, any product, anything you are designing or developing. I hope you have understood seven stages affections. Let's move on to the next lesson 10. What are Affordances And Signifiers?: Ford Ince's and signifies is one off the major concepts in user experience design or one off the basic concepts off UX. Now what afford in, says means, is just how you can use any object or what can be done with it. For example, smartphone for din's it that it can be turned on. It can be turned off with Normally, see a screen attached storage so we can touch the screen. We can tap on the screen, and you can also insert it into your pockets because offered small size. These are a few off the afford Ince's off smartphones. Similarly, doors they can be opened. They can be logged. You can hide behind the door. This is also an if ordinance no, let's see what our anti afford. Ince's anti afforded is the opposite off afford ins, and it shows that 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 for the shop or any design software. You know that there is always a canvas present and there is a bounding box around the canvas and that bounding box or that wide screen or the document boundaries in Microsoft Word or Google Dogs that shows that this is the boundary off their document. You cannot go outside off this bone reorder can. You cannot perform this action with it. So this is anti afford ins. There are few features built in any product. You can look at it and you can see Okay, it has sharp corner, so I should a wide it. I cannot, you know, put it in my pocket. They might stick into my skin. These afford Ince's an anti for dances. They are again later to your perception. If you can perceive that it's a door, you will never try to lock it, or you will never try to open it. So for that we need signifies, afford in seas 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 toe. Do this action so signifies communicate well, you can perform the action like you can see the handles on the doors. You know that this handle can be moved down or up, or you can open it or you can rotate it, open the door so this door handle or knob is basically signified in interface design, signifiers are in different shapes, like you can see the such field, the buttons on the such field. Okay, so you you know that you can click in this such field toe type something So this is a signifier. You can also see the buttons on an interface. They are a bit elevated or they have shadows and other That is a signified. It is a sign that this action is possible. This with this element, you can press this button no moving on toe. How we're going to use these afford Ince's and signifies to create a delight. Fridges that experience you need toe have afford Ince's and anti afford and says perceivable, what does that mean is you're going to use very strong signifies toe show what actions are possible and we're the user need to press or do the action. That's why we have very big such 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. No, having a very big or very significant signify helps a lot. User can instantly see that this is an e commerce store. I need to find our such over here. Most of the users are going toe issues such bars. So this is all about signifiers afford and says and anti afford and says, I'm going toe. Show some examples and I feel look at this website amazon dot com. You can see there is a very big such model here with such icon, and if I hold on it, you can see it signifies that this is touchable or possible so I can use this one toe such any product I want. Then you can see we have these adults or hear my customers record, and there are few more buttons. So if I hover on these areas, you can see they're turning into a buttons and it is going to show me a list so I can see that all these are signifies this button. This whole overstates the star color off this area, you can see over here this is a signifier, that this area is important. You can perform actions. Or here now, if we take the example of walmart dot com, you can see over here again. The same pattern is repeated over here. We have a very big blue bottle here. So most off the action is taking place in this area. This is a signifier. And then we have this very big yellow button power full color and again, a big bar to search. Over here, this is again a signifier, and you can see these are whole states. These are signifiers that these actions are possible and you can use these areas to do these actions. Okay, so I can click on this one. So also you can see on my whole were you can see a small hand. I concert means that this is possible or you I can click on it. So these are all the signifiers used toe Elaborate the action, what actions are possible and how you are going to complete it where you need to click. OK, so this is all about signifiers and four dances anti afford and says Let's move on to the next lesson 11. Affordances & Signifiers explained → Headshot: let me explain more about a four dances and signifies. Now you all have seen this iPhone. Okay, so on iPhone, the afford Ince's are that I can hold it in my hand and it affords putting it in the pocket . And also it is going to afford toe turn on and off. This is the property off all mobile phones. I know that this screen is dark, so I need to turn it on. But there I am, going toe turn it on or which but and I'm going to press is going to be signified by using signify. So I'm going toe show you the buttons over here. So here we have one button at the top, and if you see it kills me, then we have three burdens on this side. You can see a hit and you can see that they have Plus, let me show you a zoom in. Okay, so it's not zooming in, but there's a plus symbol on one button and vine, a symbol which signifies that it is going to increase or decrease the volume off this mobile phone and the mute button for the first time. I didn't know what is going to do this, but And what That is going toe mute All it is going toe dame my screen colors or whatever. But after using it, once I knew that this is going toe muted. If they had put some I call over here that is going to mute, and then that would be more helpful. Okay, So always, there will be some tradeoff between design and signifies. You can see over here on that. They can put they can make this button this done on button at the top. You can see over here. So this isn't heart focusing anyhow. Okay, the button at the top if it's a bit different color, like red or maybe green. So I know that I'm going to press this toe, Turn it on right now. When I use this for the first time, I'm not going toe. Be sure which burden is going to turn on this device. Similarly, if you see my I Mac at the back, you can see who were here. This is my I, Mac. And when I first showed my I Mac, one of my friends, you can see that there is an apple local over here. And what he did is he tried to tap over here like that and tapping it through your four times. He wasn't sure that this is going to turn it on. So then he tried to search around this device that is the 10 on button. And this is a designed drain 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 like six months. Still, I'm I have difficulty reaching out by putting my hand over here and try to find the button verities. So this is ah, bit story about signifies enough ordinances. Similarly, if I show you this border, this is ah, part of lawful medicine. I'm taking okay, so you can see we have laid over here at the top. Now the afford ince's us that I can hold it in the hand. It can be, you know, balanced on a table like that. And one more afforded is I can see that it is a bottle. So I need to open it so it can be opened and closed. Now we're it can be open and which portion off it is going to be. The lid. It is the signifier. So they have. Let me assure you that they have made this. Ah, but this lady is a bit separate from this bottle, so you can see that. Ah, this is going to signify that I can open it from here or I have to turn it like that. Okay, so, uh, this this is all about signifiers and afford Ince's. So, um, I will see you soon in another lesson. 12. Examples of Affordances & Signifiers: Now let me show you a few more examples off ordinances and signifiers to elaborate more about it. Now you can see this is for the shop. I have opened a document you can see These are the bonding boxes bounding boundary off this document which is in white and everything else is black. So it is an importance that you cannot anti if ordinance that you cannot type o r do anything on in this area. So whatever you need, you are going toe create. You need to be doing it in this city. OK, so this is an anti afford ins. That photo shop has bonded this document with a boundary. Same is in Microsoft Word. If I open up any document in Microsoft Word now, same is a situation in Microsoft. Word you can see there is an anti afford is 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 is document boundary. This is anti afford ins. It helps the user understand what he or she cannot do with this software. Now, if we talk about the afford Ince's 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 a empty document like this, you can see this is the car, so I can see that I can type something over here. I can copy or paste something over here. These are afford Ince's. And if we talk about signifiers, then you can see these are the signified. This is highlighted. So if I switch to this one or this one of this one, these are different styles you can see now on this customer has been changed with the larger text. OK, so these are signifiers. These are all the buttons you can see over here. This is clickable drop down and a lot of different grouping off buttons. These buttons, all our signifies that these actions are possible with this Miss off software are object. Same is the situation here In photo shop you can see or hear. There are few controls highlighted and few are disabled. So this is the way 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 thes are possible with it. Others are nor possibility. So this is about software's. Now I'm going to switch to heart. There are different products. You can see this is one off the example. No, from looking at it for the first time. I think that it is some kind off cattle and I have to put it on my stove or open toe. Hit it up. But I think these are speakers. If we look closely, you can see here's the signify. I'll that these small holes in it these are showing that this is basically speaker. Now, if you look at the buttons around this, you can see over here here we have the buttons on this side, and 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 that are really, you know, 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 afford Ince's. Maybe I think that it has door, so maybe it is a telephone. Or maybe it is, ah, microphone or something. But actually, I'm going to tell you, and you will be amazed that it's an ill umbrella. It creates an aircraft to stop the water drops coming from the top so you can hold it in your hand and you can be out off the rain. Okay, so this is very innovative product, and from looking on it, I cannot see most off the controls. I don't know how to turn it on or off. So afford. Ince's are basically related to your perception. So if I can't perceive what this thing is, then I am not going toe. Get the afford Ince's and, ah, I might be able to see some off the signifiers, but I don't know what they're 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. What are the Ford Ince's, whether I'm going to get here from it and all. I'm going toe see my face in it or ah, hologram in it. I don't know. Now if we look at the bottom off it over here, if I zoom in, you can see over 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's volumes type nor over here to turn it around. So these are the four dances. These are the signifiers that shows that this device can be turned on and off, and also there must be something toe increase or decrease. It might be it's speed or it might be something else. So this is about afford incident signifiers. I'm going to share another video where I'm to show you shampoo bottle to show you the afford Ince's. So let's move on to the next lesson 13. Natural Mapping: mapping is the relationship between two secs off things? Suppose there are many lights in a classroom and that drew off lights, which is is on the wall. Now. Can you guess which one is literate? Which one? This is the biggest question. A lot of people they have numbered their buttons and switches and by writing F or light one l one l two something like that on the switches. So this is really important concept? No, Another concept is natural. Mapping. Natural mapping is that when you have to search and they're mapping matches with each other in a natural manner, so the first burden is the first light, and the second button is the second light on the ceiling and the third burden. So, for example, if I have three lights in a row in a column, and I press fast burden than it lets up, the first light than this is basically natural mapping. So every time, if I want it done on any light I desire, I can naturally map it toe the button. I need to press through examples. Off map ings in software design or hardware design is when you have used your expose controller keys. And you also see that there are different shortcut keys in different Softwares and abs, even for the shop on any Dexter Edyta, there are similar controls. Like control s our command. As for save saving the file, it is common in all different operating systems or in all different Softwares, so user can easily memorize them. And ah, they are natural. Save s is for safe. So it is easier to remember. It is our natural mapping that if I press control s or commanders, it is going to save the document. Let's see some examples off mapping and how different Mapping czar, good or bad and how you can use these principles toe make your software's of websites or games Or perhaps better. Now you can see over here this woman is what she is doing is she's labeling the main area at the top or the main category, or the main in yet the top and the bottom. She's labeling what these buttons are going to let. Okay, so what? They're going toe which light they're going to turn on. So these are different buttons. She is using different labels in whole off our house like that. So this is her solution? No. 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. So this is the floor plan off the house, and he says that place the buttons on the places were the lights are actually there. Okay, so if the light is on this wall, you need to place the button on the floor plan over here. Okay. So if I turn this on, it is going to turn the light just over here. So this is his plan now? A designer called Harang. I think he is. Ah, a civil engineer on from Korea. He tried to solve this problem. I think he has solved the problem half off the problem. And you can see there is a whole panel with all the floor planning off the house and you can tap on any area. Like if I want to let my bedroom I'm going toe upon this area. It is going to live, turn on and turn off the whole life. This is his design. It is called floor plan light switch. Now, let's see some off 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 are where they are actually linked. So this is really confusing. Okay, I'm going to show you a few more examples from this store open. And if I resume into it, you can see there are 12345 stores and there are 123456 buttons over here. So this is a bit confusing. So if I am going to zoom in, you can see over here that this burden on the left, which I thought that it should let this one it should let this one up. It is for the really rear. Okay, so it is going to let this burner or hair and not this one. I think they have mentioned this plan because it is not natural mapping. You can see we're 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 friend one. But from my perspective, I think this should be turning on this burner. Okay, so this is for the center one which is over here, and I think it should be over here somewhere. So for more natural mapping in this area, But I think they deserve the Syria for these open controls. And, ah, if we go on the right side, you can see you here. This button is for the open at the bottom, and this is again front and the rear. Now, you can see this position is totally different from this one here. The rear bitterness at the first. And here the real is at the last, which is very confusing for me. So this is all about this confusing mapping off this device. Now let's see some of the more example. Now you have seen this immortal in a lot. Off quiet's every more controlled or radio controlled twice. You can see this is ah bit confusing because one off the panel on this control is stick control is for forward and backward, and one is for turning so sometime and a nuke it they really confused photo you know, turned this or use this. But instead, if you go to this one, these are a bit new and you can see these are really natural. If you done the this driver real at the right or left, it is going to turn right or left. So it is very easier for the kids. It is more natural because it is linked to our cars would drive cars with these reels. Now let me show you some of the examples off 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 the blue S A and E for movement. And the one is one. Most click is for fighting and second is for loading something like that. So most off these controls will be similar in ah, a lot off games you can see over here. This is another games, EMR and it has also almost the same controls you can see this is attack. This is aimed. These are called mapping and they are basically why they are using the same patron Because our minds are wired with veterans. So I have. 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'm already a custom and I have already seen those patrons store those mapping veterans like you can see the blue. It is very natural indeed because the blue is at the top. So if a process it is going to be movement in the far rejection and s is for backward is for left and right. So whatever the position off these buttons, it is going toe move my gaming character in the same direction. So this is gold mapping concept, off user experience and hall. We can use them in our Softwares or in our hardware's or in our devices or in Elektronik devices to make the Jews that experience mentor. Now, in the end, I'm going to show you the mapping off cars and vehicle. This is from Mercedes Benz 2014. Model s 5 50 and it is seat adjustment mapping. A few years back, they were not using something like that. They had a few buttons over here to press send, you know, manage this? No, If you try to press this button, this head seat and if you drag it at the top or died represented the top or the bottom, it is going to move in the same direction. Now, what you need to do is just you need toe press this button on this and this area is linked to your seat. So it is very easier to map with what I am trying to adjust. So if I'm trying to adjust my back back, see this portion? I'm going toe press this one, or I'm going to go push this one from the back or from here, and I can easily adjusted. So this is my last seat or whatever. I don't know what you call it, and this is the bottom. So all these controls are really naturally mapped so anyone can easily adjust the seats in Mercedes Benz. So 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 off for manuals when you buy a new thing or new product. New camera, A new microwave? A. When you might have read a lot of technical men walls and how to use it now conceptual model and mental models they are really necessary in understanding the user experience off any product or, if you want, improve the user experience off any digital product. Conceptual model is basically an explanation in very simply, fight ums. How this thing, this app, this product is going to work. Ideally, your user should be ableto start using your product or app without reading any man was on in 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 off your user. Your user is going toe see and build up his own. Model him in his mind after seeing your product that it is going toe work. From this button on. I have to do something like that. Toe this on, or maybe use this product or use this microwave. Owen knows. Use this app. So this is the understanding off your user in their mind how your product is going to work . Different people may have different mental models off the same item because it is relative to your perception. So if I have a different knowledge or I have interacted with different type of products or cars, then I might not be able to, you know, drive automatic luxury car on the first time. I might be confused. Getting it. My mental model might not match with the conceptual model off that product. Okay, No. What are the things that are going to create a mental modern? These are going to be afford Ince's constraints, mapping and signifies. 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 cannot use it without plugging it into the socket first . This is a constraint, and mapping is that this button is going to control these things as a designer or user experience designers. Your job is to align your users mental model with the conceptual model off your product, your app. You're going to use signifiers and you're going to use a four dances and you're going toe. Guide yours, user into using your product. You might have seen APS almost all APS these days. They're 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 a conceptual model. This is how we're going to 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 off the same item. For example, if I'm using microwave oven, I might think that toe heat up the liquids. I need toe use these buttons and to hit up meat or something. Some other thing I need toe 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 experts users that are going to use the app in Torti different way and they have different, totally different mental model than your novice users. So you need to take care off both off these mental models or both off these users. Now, let's see some off the examples off mental models. Hair is how you're going to clear the gap between a mental model and a conceptual model. You are going to show different walk two screens in the start off your app. You can see or hear one example Is here another example? Is this on boarding screens you can see over here? These are three screens and they're highlighting each feature all fuel app. There is one more. This is better because you can see it is gradually taking you toe the fourth step. Okay, so it is guiding you towards the first M, which is this log in with Facebook. So this is really nice. This is what your abs your product 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 few images from dream times, and one is this one is also from dream times. These are the old microwave were ones you might have used them. They have burdens like this. These are different heat levels and this is the timer. So this is very simple to use. Just you need toe, select the timer and capacity at what it is going to work. So this is very easy. You just need to turn the knob. Okay. For many years we tend to use something like this. So our mental model was built upon it. So whenever we see some designs like this, it is from Samsung. If I try to, you know, start using this after using the's, I'm going to really have hard time using it because I don't know where to start. Should I start? Press the start button and it is going to guide me. Or should I start typing on these buttons? So there is no guidance over here. Now, if you look at these model, these are, 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 A Here we have the knob, and here we have different buttons that are very, you know, a G and they have be world effect. Okay, So like old buttons here, you can see this is basically a a touch panel, and these are burdens. And you can see it is, I think, a bit more easier toe start with, have less controls and just need to select anyone and just turned this norm and start. This is my mental model. So 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 off. The biggest limitation off human mind is working memory. Working memory is our short term, focused off attention, and it has very limited time spend. It is the most limited resource we humans possess. It is basically our attention, and this attention is highly focused and very selective. So you were sitting in a restaurant and you are talking to your friend dining out, and you are not aware off most off the people around you that are sitting in the same restaurant. But you are aware off just a few things in front of you and a few things your friend is saying so this is how our working memory is limited. Similar concept applies to use. You are right, no conscious off the last few words or ideas you have heard from me, but probably you don't know what is the color off the wall behind you. So these are the limitations off human minds, the working memory or attention or 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 off working memory, the average capacity of working memory waas four plus or minus one items. Before that, there was an old research saying that it has something with seven plus tour 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 off different fruits, so it also depends on that. But the average ranges four plus or minus one. So it is from 3 to 5. Know how long the information is going to stay in your brilliant mind and the duration is from 10 to 15 seconds. By Goldstein. I think that Assistant by Igor Stein There is one mortem that is let itto working memory, which is cognitive Lord. It is shown and talked about a lot in user experience design that this thing is going toe increase the cognitive lord. It refers to the Lord placed on your working memory or your processing power off your mind So it could be any calculation, hard calculation, or it could be memorizing things. So keep in mind that this cognitive lord means the Lord 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 interpret you, you are going toe lose everything which was in your working memory. Now, this volatility also applies two goals and two details off objects. Maybe you are trying to remember the list off items and you went outside of the off your home toe, grab a few things from across restore. And you met a friend and he asked you, How are you, man? What's up? This and that. And suddenly you forgot all the list off the items you are trying toe by from the grossest . Oh, so it is very volatile. You are not going to keep it for longer durations in your mind. So if you lose any item, you are also going to lose the track off the thing you are trying to do all your goal. Maybe I was trying to go in the kitchen toe, 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 the 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 off examples of working memory and then its application In user interface. Designers use experience, design or more by laps. But right now I'm going to show just the one application, which is had Lie England Now that, according to the research published by one off a social media sharing paid form, a company that is called before and they actually research that what is ideal lent off any headline. And they found out that six words is the ideal end because six words our within our working memory limit. So it is very close also. Jacob Nielson. He's one of the pioneers in user experience. Design history also shows that headlines with the length of 5 to 6 words work very effectively, so actually, this is all related to our working memory capacity. We have a capacity off like 3 to 5 words or maybe 3 to 5 items, so it is easier for our mind toe process, these many chunks off data. So if we have, like 10 vers headline land, our eyes and mind are going to skip some off the worst toe easily or quickly and grab the idea or perceived the idea what this headline is actually saying. So keep this in mind why you're designing more by lapse or your 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 divisions. So let's move on to the next lesson. 16. Examples of Working memory: Let's see some off the examples off working memory and how different objects or design elements. They can lift the Lord on your working memory. Now, this first example is Google Maps, and you can see this. I am here. Map Locator is going to help me memorize that I am over here. Okay? Also, you can see all the symbols around me, like this mosque and this who is a bullet center. This is a school. Then we have this food club or food area. Then we have this bank over here. Okay, so all these things are helping me. My working memory, that heres something is located. Okay, so I can easily pinpoint that I want Togo over here, or I want to go over here and where I have toe, take the turn. These maps and ah, the APs that use uses maps to locate their 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 than you can use something like this, you can see over here at the top card shipping payment. So right now I'm over here. So this is also another implementation that I am right now over here, and I just need one more step like this one review and confirm it and toe out of the card. Okay, so this can easily tell me that how many steps I have done and how much I need to go for their One more example is Moore's Moore's Mean that right now I am in incognito, moored or hidden moored in my chrome browser. And you can see as I switched to this incognito you can see over here you can go on this overhead and new incognito men window and everything just changed. I am in right now in another window and the whole team stern toe black, and there is a sign or symbol over here. So this is telling me every time, every minute, every second, that right now I'm using this more off the software. So I am shifted to another more. If they remove this. All this and I might be thinking that I'm using my normal browser and via his brother, is asking me to log in again on this side. So this is another way using Moore's. You might have seen different video games. If you are switching to another more and it can change the whole interface or some indication that you are right now in this more you're playing in this more network mortar team player more or something like that. Okay. One thing that can also help in elevating your working memory Lord, is this you can see on this corner. This is called breadcrumbs. This is the part again that I am right now. Over here also, you can see these selections. So if I have clicked, dissected 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 were here, and I am right now in this state. Let's take another example of walmart dot com You can see again. They have very nice prayer comes and they are really visible in this example. You can see this is not very visible. Also, it is very packed. And here we have very visible breadcrumbs. And again we hear we have a whole trail and one more button added over here back to previous page. Okay, so if someone wants to go toe bareback and to another page. This is very handy. No one in the example is history. You can see if you go to YouTube. All the videos you have washed it keeps the history off all those videos. So I can search inside my history like you can see over here. And I can see what I serves for. And then this is my watch history and that this is my command history. So I might have forgotten that the last night which video I was watching for, for example, like magma Ooh, proof power button fix. And I can grab those from here. Okay, Also, if you go to this browser history, all these browsers, they keep the history off which pages or websites you have visited and at what time. So 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 photo shop or even this Microsoft one note, you can see now they have enabled or to save. So if I try to change something, you can see or hear, it shows the name off the person who changes on this document. Write notes and cloud. So it's sink acri across my I Mac and Windows PC. So I am using this just this document and it is automatically saved and uploaded to my cloud, our sink across different devices. And this is really neat feature. Or to save a lot off. Perhaps they are using auto save on. Let me go back to O the cards. Okay, over here. So this is another example of auto save. 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. So it means it is keeping record off my items over here. And all my orders are orders. Thes are also good for my working memory. Another example off working memory is that you have seen these recent files in a lot off absence office. So this is just to memorize that last time I opened all these files or this file this file this file. So it saves me time locating all these files so you can see or hear in. I am right going for the shock when it is displaying, I think almost 10 to 12 last open files, and it is sorting them by this last open. Okay, so my most recent is over here, so this is really logical. And it is matching my mental model that this is the 1st 1 last one I used and this one than this one. These are all the files. So this is another example. Recent fires. This can help a lot, making less Lord on working memory. So this is all about working memory and examples and how we can implement things to elevate working memory. We don't need our users to, you know, think everything and keep them in their memory. And ah, 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 even looking at their whole body or movement, that this is that person or this is John or this is Sarah. So our brains are wired, recognized things at a great speed. You can easily recognize a fee face you have seen 20 years ago, so similarly, the patrons or familiar faces or the familiar icons you have seen in already few APS. Your mind is going to process them very fast, and they're going to be recognized very fast, and it will take very less time to recognize them. So rather than re calling 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. If you don't need to recall anything, you just recognize him. You just know who is so 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, and you are going to know that what this actually means so that users should not remember information from one part of the screen toe. The other one. They don't need to recall the information they just saw. Also don't try to use any new kind off icons or buttons that user is not familiar with. Similarly, if we show a user and valid new patron or very new behavior off an app which he haven't seen before, it is going to be very difficult for him or hard to use that product or even sign up or sign in so a wide a Z calling and try to implement recognition try to use. Similar patrons were going to have another full lecture on patrons in the next section. So let's elaborate this recognition by using some example. You have filled a lot off online forms are log informs. You have seen that there are lock icons in the password field. Now you have. If you have seen it several times before, you are instantly going to recognize that without any label or without any help that you need to put password in this field So by using familiar icons and patrons in your websites or mobile labs or software's, you are actually reducing the cognitive load from your user. So keep in mind that you are going to use similar or familiar patrons and icons. Dordt Try to create a new type off letter or veal that 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 toe, create a new kind off their bar that is floating inside or middle off your app than user is not going to recognize it. User is not expecting the tab are to be floating inside the up in the middle off it also, if you try to look at the cart icon or visual ist icons, they are on the stop right side off any e commerce website. So if you are trying to place the card icon on the left or in the middle, user is not expecting that patron, so they are going to miss it. They are 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 Pagine or new icon to confuse your users. In the next lesson, we're going toe, see a lot off examples on pattern recognition or recognition and the user expectations. So 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 examples off recognition, rather gender recall. It is a very basic principle, and I have seen a lot of designers using it in a very wrong way. Okay, so this is a first example. Now you can see over here there are few icons which we recognize instantly, like this back icon and this phone icon. And also this shared. I gone. Maybe. But for these three doors, maybe this is more but most of the users, I think they are not going to recognize it. More new users. Then at the bottom, you can see this is our main Deb are. And this is our main navigation bar off this app, and you can see to users and one user than this is I don't know what is this sign, and this is for setting. So this is very common and this is not very common. This might be common 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 off users or whether these 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 overhead. If you can't find standard, I can't then put some labels under them like this is maybe my matches or this is my profile and this is my followers, and this is the These are my settings. So if you can write something in your user interferes. It is the best thing you can explain just by one word or towards that, this item is going to do this thing. So 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 change so four new users. This will always be a problem. Now let's see another example you can see over here. This is a log in screen designed by this replay Robert. So I think it's a dribble short now you can see this is pretty standard, but there are few things which might be confusing, that this is going to be always email, So this is basically an email icon, so anyone using this screen will always assume to put their email over here. And this is for password, but maybe a few users, or maybe all users that are just starting out on mobile there. Smart ass. They might not be ableto long and using this. Okay, But still, I think this is good example, because there's using almost the standard icons over here. Another example. This one logging and sign up. You can see over here. Here, we again have this user icon. Now, what do you think? Should you use your user name over here, or should you use your email over here? This is pretty standard for password, but this is up it ambiguous. It might confuse your user, Kim. So these are a few things you need to keep in mind That recognition rather than recall you can use an email icon over here. Or you can just use something like this. This is the best example off sign up and signing I have ever seen. Always try to use the labels at the top. So use valve in user is typing. He knows, or she knows that this is what they are typing over here. Or this is the information acquired if you was using something like this Inside labels thes are not very good. If you have a form like four or five feet, it's never tried to use it. But if you have just two fields, maybe user can remember these. This is in the limit off working memory. Please try to remember I showed you that it is almost like 3 to 5 items. Eso best example I would say, is this one. Every label is clear than they have. Text field over here. Password confirm password. In addition, cord, this is clear cut. Why? Because it is using text to explain that this information is acquired Also, you can see a funny way toe say that crap. I forgot the password. But if they put underline around it than maybe it's easier to click, then we have this log in and create accounts. So these are also very good indicators that we need logging over here. This is Logan skin. This is a clear account screen, so 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 user name. Or put your email 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 off Facebook. In the start, they sure some labels around these icons. If you remember, maybe some off you might remember. Then once the users, while you know familial ized and get familiar with these icons, then they can easily know that this icon is for my hair. Requests are network. This is for my message is this is all the latest updates, and these are my fields and disease. These are the extras. So although they're using something like this, but still, it is better that you put some Labour's around it and make it more usable. Okay, one more example from Google YouTube, and you can see we're here. There are few icons at the bottom off this video, like like and I dislike it, and whenever I hope we're on it, it shows a pop up. It is another way to show the user that this icon is going to do this. So far, 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 hoard over it, it says, add, Do I have to click on it to see what options are available? You can see over here I can add to my list playlists. So this is a bit, you know, confusing for me. I think the recently changed it, and these things can create confusions. I think before that it was, I think, here in this area, and they recently changed it, moved it over here, and this is good idea to, you know, show the text on whole world, but I think it is only possible on web. So on mobile APS 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 invisibility and user experience, design and what you need to keep in mind while you're designing your screens, logon 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're going to recognize the object What this object is. Is this a search bar? Is this a button, or is this a dropped on navigation bar or Ah, close icon. Then in the next step, we're going to see how it is going to behave and works. So what we need to do in 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. So everything you are designing it should behave in the manner the user expects it to be, not. The question is how these expectations are formed. What we expect is all in our head. It is about the knowledge we have gained from outside world or from similar experiences that is gathered in our head. Certain scored knowledge in head. It is that 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 than they are going to form our expectations the first time I knew that first time I saw the pop a bubble from a Facebook jet, I waas unable to remove it from my screen for like 30 minutes. Now, designers and developers, they have created a design patrons or design patron library. Now these designed libraries, they help us toe cop with user expectations and familiar behaviors, so users can instantly recognise that this is a drop down navigation or this is on everybody. This is our drop down navigation bar off any website. There is a whole lecture on this design patron, and I will show you these design patrons and its websites in and the next section. Right now, you just need to know that these are designed patron libraries that are built on familiar experiences and familiar items that users can instantly recognise. So we as a designers and developers, we should first look for those patrons and use them in our judicial products rather than inventing or creating a new patron or, ah, patron off 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 hand off user expectations. This is the screen off 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. So what they did is I don't know, they try toe, maybe modernizes or whatever. They put it over here like Google. So I waas expecting the search bar at the top and for, like, five minutes. I keep on pressing in over here in this area, and I was not expecting that the search ball is moved down here or this is the first page where I need to search over here. Enter my web address over here. So for like 5 to 10 minutes, I just keep on tapping over, clicking over here in this area and saying over there is my where I have to type the Ural off the website. What is happening with this browser? I don't know, but no. I think they have fixed this problem with these are new updates. But this is the screenshot. I took off the problem I was having also you can see in the bottom off this website. It feels like it is a webpage. So on a webpage, if there's a such bar, it means that it is going to search inside this website. So this waas a very unfamiliar patron and very new pattern. No, I think they have fixed it. But this is very confusing for any user. So this is all about your expectations, designed 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 off user expectations and how they are formed by using the same two phones I showed you before. This one is a try, and this one is iPhone. And you can see that this has a some screen area over here. Okay, So what happened is my kid, his two years old he tried to use most of the time he uses this phone. So he watches YouTube videos by tapping on different areas on the screen. So he had built up expectations that every food is goingto be, you know, functional. You can use it by tapping on the screen. So when I gave this phone to him for the first time, he tried toe, you know, use this cream. He tried to tap over here to activate it, but it was not activity. And for like, 15 minutes, he was not getting the idea that he need to push these buttons like that. Okay, so this is the major problem. This is how you sell. Expectations are formed and 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. So if you have similar your similar devices like these, you are going to use them in the similar way if you see a new one. So this is how user expectations are. And I love to see kids when they, you know, trying to show me some user experience. Problem. I love to see them. They are, you know, the best example off user confusions and user problems. They're going toe. When they're going to see a new product, they are going to react and try to use it. This is the time you need to see their They're going toe, put their hands. Whether they're going toe, pull it up there. Whether they're going toe, fix it. So this is all about user expectations and ah, see you in another lesson. 21. Examples of User Expectations: Now let's begin with some off examples off user expectations and how they are formed and what we are expecting and how most off the designers and developers and 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 search bar over here. Then I'm looking for sport email. Also, I am looking for mostly in the right side, right corner the shopping card. So also, I have check out signing. So all these are over here now. One thing I which I was not expecting, is that these settings on the left. But still, I think these doesn't matter. These are not very big. Settings are very big problems. So this is almost pretty standard, like I mostly need on the categories over here. This is pretty standard and everything else. Okay, now you can see over here air to card. Britain is very prominent. This is what I was expecting. Now let me show you some off the problems and examples where a lot off designers and developers have done it really wrong. Okay, so very poor, but user experience and visibility So let me show you one example. Okay, So in this example, the team is very minimalistic. But the problem with it is it's such more 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 Ah, peripheral vision. It is in the coming lecture, I guess. And you can see the whole The search bar and icon is on the left or here. So once I click on it, I I don't know what is happening. So I just kept looking over here. And then I looked on this side and found this. Okay, so 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 ah zero. By looking at it, it doesn't tell me that this is zero is zero items or zero for the number of dollars or the cost. So this is also bit ambiguous. And this is not what I was expecting him. This such bar is all although it is very, you know, unique and Morgan. 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 such bar over here in the middle, you cannot find it because they have moved it on the left. So this is really you know of what I should say? It is really unexpected that this such bar can be found on the left side. Well, the logo should be so they should switch this place. These places, so is local should be over here and such, but should be in the middle. Okay, now, if I go to this website, there are a lot off 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, you know, strange. They have to such bars overhead one, this one and another one over here, which is, I would say, relieved. Not a very common on familiar pattern. Okay. And you can see the logging and just was just in the middle sitting in the middle. So this is very funny. I would say this is really unusable Website usability sucks and user experience toe and ah , everything else is OK, but these things are really going to hurt a lot. Even if you're you have designed this very nicely and everything is create. But still, these few things are going to confuse your user. Let me show you more examples. This is the same team, same problems. Then we have this area and you can see over here. A card is over here. Such model with hair. Okay, that's good enough. And where is my log in? And where is my settings are? Console it. They should put it on the left side. So this is really, you know, messed up user experience and usability. I am showing you these teams from even in vato market and these are developed by a different developers and designers, so they should look on these ah elements. Okay, then this is really you know, this is also really messed up. This is not what usually is expecting. Such is over here and no icon for shopping cart, so I have to search all these text. Read all this text toe, go to the shopping card. This is also violating the rule off recognition rather than recall. So you this is also going to give your users a lot off problems. Then you can see there is no information for all these products. You can see. I don't know. What is the price off? These products are Okay, so this is really bad example Off an e commerce website or team. Okay, this is really nicely designed. Everything looks school, but this heart icon, I don't know whether it's my like items or wish list. Okay, so maybe I think Ah, a little bit of text over here like mission list is really helpful, although they have some whole vortex like this. So it shows that this is a risk revisionist again. They have violated the rule there, have used the such bar or on the left. And this is a very, you know, strange pattern. It should not be like this again. Over here. You can see on the search bar is on the left, so you can see there are tons off these teams that needs a lot of fixing. I have seen even seen a lot of economists websites that are using or doing it very differently. And they are, you know, surprising their users with the expectations on confusing them. So make sure you are not making these mistakes. So this is the last one. Okay? Everything seems pretty fine in this one, but I'm going to show you Ah, very strange behavior which I have found over here. So this is Ah ah, I'm not expecting. So I am not seeing any add to cart button on this product. So once I Khobar, I see this options or something like that, and I'm not sure what is what is this? So if I over on this, there's ah, passport, and I really don't know what it is going to do. So if I press on it, you can see it has added it, decide them to my card, So try to avoid these and new patrons or the expectations which uses us really not expecting. And they're not going to recognize these objects and they are not going to use them there. They will be in confusion and most off the time They're not going toe Use this feature. So these are all examples off really bad user experience, usability principles and violating most off the basic principles off user expectations. I hope you have enjoyed this lesson. Let's move on to the next listen. 22. Peripheral Vision Limitations: another really awesome concept is how our vision works. Our I works. We are limited in viewing, so this concept is called peripheral vision. What you see directly in front of your eyes or in the middle of your eyes is called your central vision, which is very clear. What you see off to the side or on the sides off your main vision is beautiful vision. Now. The basic limit off peripheral vision is that you can't see clearly in your peripheral vision. It is all blurred. Everything is blurred. You can or see in peripheral vision. Now a simple exercise to see how our beautiful vision works. If you try to focus on this screen or slide or the hiding off the screen, and if you try to read the text below it, you will feel it will be a bit blurred. You cannot see it clearly, so 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 the hope and the spell ful and central vision affects our user experience or how we see and interpret things now you can see in the middle. Our center off case is most clear. It is for details. In the middle of we can see very clearly. It is just some focused area and I'm going to show you how much it is. And on the right side, you can see on the sides the first areas near peripheral vision. We have some bloody area over here. We don't have too much blood than in the mid peripheral area. We have more blood 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 off peripheral vision. George Pell, Efren Vision is very weak on the right and the left or on the edges, and it is very clearest in the center, so central vision is used, forcing details while peripheral vision is more experienced on seeing motion. So if someone just moved on the right side off your shoulder and he tries to hit you, you are going toe duck instantly. Why? Because your nature has implemented this powerful vision that we can respond to the motion very clearly. So if some animal or some some dangerous thing or some car or some cycle is coming from the right, and it is blurry in that region. And if something moves very quickly, you are going toe. Guess it are. Our mind is going to interpret it. So this is how peripheral vision works. It is better at detecting motion. Now let's talk about how much the visual field is for a powerful vision and the central region. Now our visual field is almost 1 70 degree around us, and 100 degree is comprising off the peripheral vision. So most off it is beautiful region. 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, and 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 other happen. So what designers do is they try to use the motion, which is called pop affect our papa Perfect to focus the attention off users so users can instantly see that something is going on on the right, are on the bottom off the screen, and it will allow users to find the information easily. Another educator. This beautiful vision is sound. You can move things, and you can also give some sound like you have seen help a bubbles coming on in different websites. They come up with some sound and animation, so you can easily get through their attention that something is happening in this area. No central vision is very limited. Everything on the screen that is not in the one or two centimeters off your click location . Then it is going to fall. In the powerful vision where resolution is very low, everything is blurred. If you are using some form or you are using some button on user is going toe klik it, then your error message or success message should be very close. Toe that button, he just clicked. So if user is viewing on any object on his focusing on anything on your screen, the other message or anything you want to give feedback to the user about what he's doing. It needs to be very close, toe the users central vision. So this is how Belford 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 off powerful vision and how weekend and house our designs and products by implementing this peripheral vision limitations. Okay, you already know that our eyes are limited. Now, let me show you some of the examples of peripheral vision and how we can a wide the limitations off peripheral vision. While we're designing for weapon mobile apps that most common problems we see our when the users are using something. For example, I am using this Copen court creation set up on this U t mean that farm. And if I try to click over here and I create a Copan, for example free sample or something like that and the discount re price is $50 and you can see now, over here I am focused in this area. So if something or some ever happens and it shows over here in this area, I'm not going to review it. Okay, so I'm going to create 10 copans and the lines in their line will be next to you. Okay, So once I click on this, you can see I didn't get any message for two seconds. Okay, so this is the moment. So once something moved, I was looking in this area over here. You can see I was focused in this area. But once my peripheral regions saw some movement at the top, I was directed to the message. If this messy doesn't show up for 45 seconds or it is delayed by more than one or two seconds, then I'm going toe Be confused, Mike. Open laws unsuccessful. So this is one way off using powerful vision and how toe a wide the limitations off powerful region by showing this other Ideally, this should be appeared in this area. OK, so a za message and with some blood that this thing has been created. And let me show you one more example. Right now I am on amazon dot com and this is my visually store richest off products for calligraphy. I'm really interested in this subject. Okay, so I have this brushes and if I try to delete this, you can see or hear where the message will be appearing. So let's dilute this. And as soon as I diligent you can see the message been deleted on the left side. Okay? And it is in the same area where I was looking. I was looking over here, and it was over here as soon as I speak, saw the shifting. I saw this message, but ideally, I think it should be in this area in the middle. Or maybe at this decide. So 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. Okay, So Okay, so the only thing is, what they did is they are using some blurred affect. You, if you might have seen it, they are using some blood in effect of the text toe. Show me that I have delivered this message just to attract my attention. Toe the message. So this is another way. So let me show you one more example. Okay, so this is another example. And this is really bad implementation off this beautiful region and form filling and form errors display. What I did is that I was creating a form on the store. That was, I think, the Egypt store. Okay, so I was feeling all the farm fields and when I pressed the save button at the end and this error was appearing. Okay, so you might have known that a lot off your users. Web users, They are not using their browsers in full screen. So what was happening? This Adam message park was hidden behind and I was not able to see it. It was below the full full mean that I was not able to see it. My brother waas not maximized. Okay, so for like 5 to 10 minutes, I kept on feeling this and picking this. But then I saw this error message and I was not able to relate it to any off this fears. What I did is I waas changing the description field rather than you know, title food you can see over here, which is the title feel must contain these many letters. So what I was doing is I thought that it is showing the other 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. So if this error is grouped with this title, then it would make more sense. So never make these kind of mistakes or if the other is outside off the peripheral vision. For example, if I had the button over here and the aren message below it over here, then I might be looking at the button and I might miss the error. So these are the examples you need to keep in mind that the other messages are any information or notification you are showing to your users. They must be in the powerful 1,000,000,000. Okay, let me show you another example off peripheral vision and how this website is not using is it properly? This is sharp hiring one after biggest e commerce websites in Pakistan. And if I try to log in, let's show you the log in page. Now if I try, if I try to log in, you can see over here there is no Logan, but and so I feel this one. Then I feel this one. And when I went to press my button over here, there is no but And why? Because my powerful vision is limited to this So far few seconds. I was trying to find the button and then suddenly I find it all here. So this is really odd. This is not user. What? You that is expecting fasting then the second thing is it is outside of my powerful region . I waas focusing on this, so this is really confused. So 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. OK, I hope you have enjoyed this lesson. If I come up with another example, I will release share it with you guys. Andi, 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?: Toby, a better user experience designer. One of the thing is that you study human behavior or psychology. The 2nd 1 is that you are going to look for users environment or the context off the usage . So if you know that what your app is going to be used in, how it is going to be used and vee, the user is going to use it mostly and in which situations, then you can design it better. For example, if you design and air for example, the app for tracking and 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 toe design bright colored scheme for it, our maybe darker color scheme for it. If it is, he's going to use it in the in the night. So you are going to make sure that the contrast is high and he can view, or here she can view the whole app screen while holding it in the sun. Similarly, fire malign skate, photograph for and take photos during rain and nearly legs and near rivers. Then I need a camera with some leather shoe paged into it. So a lot off new cameras coming up, they have where the shell in it and a lot off photograph furs are, you know, inclined to buy those cameras. So if you know the context, it is going to change the whole objection off your product design. Let's see another example of the context of fuels. Context can also tell us about the limitations off our software or usage. For example, if I'm developing a software or an app for and banks, then I might need to see their workstation set up. I need to see what operating system they're using or what browser they're using or what version off operating system they have. So it can also tell me how much the distractions they have. For example, they have a lot of crowd in the bank, or there is a lot of noise in the bank, Fan wise is, or how their offices set up how their rooms and their cheers are set up. So also, what is the skin brightness, or what kind off monitors they're using? So, 99% of the time banks have a lot off outdated browsers and operating systems installed. It happened with me once that I was correcting and designing website for Ah, very big bank in Australia. And the client keeps on asking me to fix the bugs for Internet Internet Explorer it and at them I At that time I think there was Internet Explorer 10 released and they were, ah, lot of users Borders using chrome and Firefox. So I always complained him, Why do you need me to fix for Internet Explorer? It and what I learned Waas that all the banks they had Windows operating system Windows seven install and they had Internet Explorer it and there was no option toe, you know, downloaded an Explorer nine or upgrade because they were fixed. So you see that the context off use and how your product is going to be used is very important now how you are going to indulge into the context of how you are going to explore the context off use. You're going to take pictures off yours and environmental me to go out there they actually uses are using the product. You can go ahead and you can go there to their offices. Their homes spend a few hours with them. Spend few hours, and while they're using your products to see in which situations they're 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 our baby alarming or baby Benita, we need to spend a whole day figuring out how the sleep patterns off babies are and of what the babies are going to do with the monitor. Maybe they are going toe, 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 toe dark in the room off the baby and your monitor cannot work. Your camera cannot work in the dark atmosphere, so these are all the things you need to keep in wine while you're designing a product or building a product or an app or a website. I hope you have enjoyed this lesson about context, off use and how this use 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 off use by showing you these two more miles. No, this is a dry mobile and this is iPhone. Now, the major difference is that this is meant for kids. The context off use is totally different for these two devices. This one is for kids. They're going toe to it on the floor. They're going to bang it in the wall. And but on the other hand, this phone is not meant for banging in the wall. Okay, so this is going to be put in the pockets so you can see the slim shape. You can easily put it in the pocket. You can easily hold it in your hand. And on the other hand, this one is not meant for putting it in the pocket. So it is very you can see we're here if you see it closely, it is ah bit fact. So it is meant for kids so they can easily hold it s o. The body is something like that. So you can see that these two products are totally different because their context off use is different. Similarly, when you use some cameras, they are different because they're used context. Off use is different. Some off them are just point and shoot. They are very small in size and some off them are for professional use. Their very heavy. And they have a very good grip. You can easily gripped them. Okay, so this is more about context off use. And I was saving the strife from, like, six months in my drawer just to show you this one. Okay, so 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're 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 that no the ins and outs off their products, their features, which are different from other products. Okay, so these stakeholders, they include C E O's or the product managers or the market as, or even the investors which are tired party. They are interested in a certain feature off that product. For example, you might have used color printers now in the color 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. Okay, now, investors might be interested in the overall sales off your product. They might be looking for different markets like Europe or maybe Isha. They're targeting the specific market and they need the product Toby in a specific language . Toby hit, for example, if they want to go hit, the other countries are United Arab Emirates or people from the Arab countries. They need to have their product translated into Arabic or have a support off Arabic language. Why do these stakeholders really matter? Why do we need toe take their interviews? Are we need to see what goes they have, What are their aims? Okay, so 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 off that product. So if you are trying to skip at that feature, which requires the user to sign up for $5 per month or something like that, you are cutting up the rial profit or benefit off stakeholders. So you need to balance between both off them. You need to balance between the users and the stakeholders interest. So from my point of view, if you are designing or developing any product, the right balance between stakeholders, interest and goals and the users schools and interest is the really great user experience product. You might need to take off some of the features. Or you might need to add few features in your APP or your website or your E com a site Keeping in mind the ghouls off your stakeholders. All the decisions made in any organization are made mostly by the sea owes, so they are the most powerful stakeholders. Most of the start ups, you see, they have seen those that are really involved in the product, and they are, You know, the makers off the that product. So they might be looking for more sign ups or more market penetration or more juices flowing into their product rather than the revenue in the start. And once that user concentration is reached, they might be looking for the revenue. The same thing Microsoft did with Windows. Stand up with you might have had it free for the first time. Then you need to pay to upgrade toe the recent upgrades. So this is how some off the stakeholders they try to enter the market or they are looking for more users. So 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. So this is all about stakeholders, and there go than 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. And you need to keep all these in mind value 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 Lizzie. 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, toe achieve it and they are going toe 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 volunteer forms, they're not going to convert better. So try toe a wide. You're very Lenti forms or dort. Let users fill hundreds off input fields before trying to use the app. So same thing happens with e commerce industry card. Abundant men tree is 69% and the second major reason reason for this abandonment is a town creation. When it comes to creating a new account or sign up on any e commerce website 70% off, the people are going toe quit so you can see how this is going to apply toe our nature that we are lazy if we see a lot off obstacles and if we see that this thing is very difficult to achieve. We're going toe, give up. Another user behavior is the Sian Paralyzes. I have seen it hundreds off times with my life. Now what you need to do is if you try toe, overwhelm your user with too many choices or too many things to slack from. She's going to get into our ASEAN penalizes state and a human mind gives up and they cannot make an industry. And there was a research on the scene paralyzes. How it happened is a researcher. He puts like a seven or eight different flavor off gems on a shelf and let the users make the decision. So Juices was taking more time, and they were not trying to buy one off them because and they were unable to decide. So then what he did. He just put two or three flavors off the same gem on the that shelf, and the users start purchasing one off them. So this is called the C N paralyzes. You might have seen on a lot of websites that pricing breakages or pricing models off any website or any Web is not no more than four pricing models of four pricing packages Why's that? Because they don't want you get in toward the sea and paralyzes Noto. Why does the sea in penalizes you need toe? Give users few options to choose from? There's one more behavior I want to share. Video, which is mostly people do is they don't read the scan. This happens on any digital device, any website, any common side people. Our eyes and minds are wired to scan for the gold were looking for. So if we're looking for something, we are going to scan, we're not going to read. Okay, so there are two scanning patrons. One is the patron. And when his F patron I'm going to show you both off the example images in the next lesson right now. Just keep in mind that there are two patrons for scanning information. Z it move moves. Our eyes in Z Patron and F is that we normally see the websites or patrons enough ship. Every human being makes a mistake. Even if your app scores 100% on usability scale that it is perfectly usable, there is no problem. Whether they're still users will make mistakes. So if you think that your app is very easy, very intuitive. Still, the users are going to make a lot off mystics. So there are two is to limit it first is that don't let them happen in the first place and you're some afford and sees signifiers are constraints toe limit happening that mistakes. So second is that you need to guide the user to fix the mistakes easily. You have seen that when you delete some emails from Gmail, it give you 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 destruction. So we have very minimal attention. And if someone distracts us, we're 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 Lord from the user here, so 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 toe type the whole line. You just need to click on the suggestion and he's going to such for you. I will show you some examples off 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 human mind works and how we make decisions. We have to type of minds. One is called old Brain, and when it's called New Brain know most of the time the old brain is making most off the lessons and most of the decisions you made daily. I'll 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 the scenes mostly with your intellectual mind or video, dizzy and making mind, then you are wrong. You are mostly using your unconscious mind or old brain that is making the scenes for you some off the the scenes where we have to compare a lot of products. It is by a new brain, and our old brain is very fast, and most of the time it is going to take just 0.5 seconds to make an opinion about a website about a product about an Apple iPhone or new model off a camera. Okay, so all the customer's needs to decide is just less than a second, so this is very important. You need to learn about this old brain you need toe tackle this old pain When you are designing your products, they must look very cool and the 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 to 90% true. Why? Because 75% off the users. They admit that when this see for the first time any websites design off a company, they are going to guess the credibility or the trust off that company based on the first look off 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. No, 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 aecom a store or that website. So 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 toe work or this is a trustable company and this product is reliable now, most off the calculated the CNES, where you need to compare things with one another, or you need to compare the features off to 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. Okay, this specie has more processing power or something like that. So when you try to compare or use the comparison moored off 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 off 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: and of the human behaviour and human psychology is that we hate change and most of the humans they are going to resist the change. So Venable, an app or a website there makeover or they redesigned their website or app. Most of the users are is 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. So the solution is to create a progressive change, and also consistency is in design. If you are trying toe design a new version off Facebook, you don't need to change the whole colors or the whole layout off the post. Maybe you can use a bit off different icons one or two, maybe just a bit different. Not totally different. Just an example. If Facebook If he was using Facebook and they try to move their like button at the top and the movie to the top off the coast, what do you think will happen? Most of the users they're going to get confused as they are going to start complaining. Why did you change these things so similarly? You can see in websites. This happens and I think it happened with e B years ago. They introduced ah, great background from white and dissident Li see that most of the users start complaining about it and they wrote an algorithm to change the background off from white to yellow, I guess. Itwas very slowly evidence years. So each day the value of the color was shifted to another shade off the yellow, which was very close toe white so that users doored expect that that something is changing , so they just introduced a change gradually. So whenever you want to change something in your website, your web app, you need to use some progressive change. Introduced the change gradually, not instantly. No. Most of us. I have seen a lot of clients. They want to redesign their websites. No, the problem is that do we really need a new solution or do we really need a redesign of our website? So, before making any changes to your websites, you need toe. Make sure that uses really need a makeover or redesign off the website or just need to change few things to create a better user experience. There is a very big example off Yahoo and dig. They are both very big giants. And they feel when they introduced new redesigned website Yahoo, it was your home ill and I think they feel and digs. Traffic dropped by more than 25% in the USA and UK. I will show you the example images in the next lesson. So let's move on to the next listen. 30. Our Goals and Change Blindness: whatever we do all day long are all actions are cool oriented. We perform or do things or taf based on our cools. So make sure that you know what are the goals and motivations off your users. That is why, in user interviews, we record different goals and motivations off uses. For example, if I am searching Google for a painkiller medicine, this is my goal. So I'm searching for our medicine and similarly, some other person. He might be looking for a video, so there are different goals later toe the same tool, so same product can be used in multiple ways when the goals are different. So 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 ab screen. Now the goal might be different. For example, if you are using a log in screen, you need to know that you there is going to use the log in. But what are the different uses? He might forget his password, or he might need to sign up rather than logging. So is there any way that he can switch to that more or hey concerts to that cool and use the same skin for another goal. So keep all these things in mind. Another concept that is similar or lady two goals is change. Blindness. Jane Blindness is that when you are blind toe things that you are not looking for. For example, if your goal is to find a link to a Pdf file on a website than Hume, 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. So our eyes and our minds are blind to change is that we are not interested in. For example, if I'm looking on an article or a video on Google, and if I search about a video, for example, how toe create a better user experience or something like that. So whenever the search desserts 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. So here we are using our human behavior called scanning. We are skipping information. We are looking for our goal and the only information really need. So keep all these things in mind while you're designing a product are ah 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 CNES with digital devices and how human mind works while we're deciding and what things you are going to cut out to make this decision making and human behavior easier. So you need less Lord on human cognition and human minds to make this decision making process easier for them. I'm going to start with this Amazon checker process you can see over here right now. I am checking out and Estonia selected my address where I need to ship. You can see on this page I am only saying amazon dot com logo and nothing as just I can go and click on this. Continue, but no other. The C M's. No other options. I just have three options for the shipping. Nothing else. So one task at a time and won the c n at a time. Okay, so if you give your user to decide multiple things at the same time, it is going to give him or her some headaches on. Now, if I try to click on continue, you can see that I cannot even go back to my card or the main website. I Amazon logo is not likeable. So what I can do is I can just go in the 11 direction. So 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 and you can see No, I'm at this place or the stage and there is just one primary action I can do. This is placed your order on the other thing I can choose is this delivery option on delivery date. So I am very limited with these options. So whenever you are using an e commerce website or designing for it on our e commerce app where you want the user to spend something or make the decision, try toe a wide all the destruction. Take all the distractions away from him. Okay, so 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 on the scene. More 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. So let me show you the old ones here you can see the old ones. They are not that all, but they're also latest versions and that 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 where we're sitting. Similarly, if I want some information or I want some video I wanted right now, if you try to create a lot of hurdles in my part toe, get that information. If I want some information, you should a wide as many off cycles and try to remove them from my butt. So if I am looking for a PD a fighter download, it should be instantly downloaded. And I should just click on the download button and I get the pdf. If you are going to create a lot off other ways that try to install this software before I'm going to give you this town. Lord, I am going to quit. Keep these all these things in mind, we are lazy. We want the information and everything right now let's see some off the examples off the scene paralyzes, you can see over here on this is proto Adar I O toole, prototyping tool for designers. And you can see there are four options to choose from. This is corporate agency, startup and freelancer. Now you can see they have just given four plans. So this is how we're going to limit the CNES off the user toe. Three or four maximum options. So don't give them too many options. It is going to make them more confused. A few more websites you can see this is the you explain pricing models. You can see here we have one and two or three options and the pricing is attached to only two. So I can either choose this one or this one. If I am a very big enterprise are very big corporation. I might need to call them so only two options. So you can see And this you explain. It is a very prominent and emerging tool in a user interface design and user experience design. You can design wire frames a lot of things. Okay, so so one more example from every court, you can see what? Here. They also have three plans and only two options to select From. You can see this is not going toe be selected most off the time. And mostly the user is going toe switch from this one or this one. So they are either going to select this one or this one. So only two options and it is very easier to make the sea. And you can see they have just $3 difference between these two packages. So most of the people are going for this one because they have a lot of team members and a lot of stuff. So most off the company's or agencies, they're going to fall in this category. So this is how they are. I can say trapping. The customers are They're playing with our minds by giving them less options to choose from . No, we talked about why humans hate change. You can see we're here. This is a big old website, and this is an article from side point. I will send you the link. And what they did is they transformed it into this very, totally different website. Now, the users we were not expecting this layout. They were not, you know, eager to see this change. So what happened is you can see you were here. It's traffic dropped 26% in the U. S and 34% in the UK. So this is a very big loss you can see over here. And it waas, I think sold out in 2012 due to this reason half a $1,000,000 they lost their popularity and everything, So make sure that your user really need the change. The second example is this Yahoo Mail. This is the old male and this is the new one that changed a lot of things. Look, you can see what here compose and the buttons, icons, the whole background, everything. It was not looking like the old email. Okay, So due to this Yahoo's change, only 25% off the Yahoo staff kept on using the Yahoo email and you who didn't disclose harmony and users they lost due to this dreary design. The third example was target dot com and when these design they also lost a lot off the revenue and as soon as the change or are created the new version a lot off the users started complaining. So this is the first thing. This is the biggest problem. Our minds and our we humans are don't accept change very well, so make it very subtle. So they, I think, brought bad this left categories menu bar over here due to their users and remove the shadows. You can see or hear heavy shadows on their 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 toe, be loyal to your customers and see if they really need a change or your website really need and upgrade. Are the users having some problem with my website? So I need to fix that problem rather than designing the whole website. So this is all about human behavior and how we don't accept changes and DeSean palaces and all of the things. If I have miss missed any example, I'm going toe create another video and ah, we will see you in another video and 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 isn't I'm going to give you some off examples of Z Patron, our reading patrons, how we read and sift through the content Z patrons f patrons. And also the abandonment cart abandonment rate problems and the form fields. So let's get started now. This is an image off the Z pattern. Now, the Z patron was based on how we read the books from left, right. And if we have a website written in or do our 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 busy. So it means that we're 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. So mostly other line will go from top to bottom like this in these area are we'll try to see this area or this area. So most of the times designers try to use this Z patron for their advantage while they're designing websites or more by laps. The second patron, Waas F patron. So why it was called F? Because most of the time it is also ready to our reading pattern or how we escaped our skim through the content. So we normally go this line in this work vertical direction like that and like this. So for the top content like this, we're going to go like this and this and then we're going toe skip everything. Now, if you see that there are few ads on this side and there's no content on this area. So 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 patron makes this F patron. Okay, let me show you one more example. This is the Google such reserve. These are different. Other websites, they are all making the F pattern after veteran is basically related to our reading pattern than how our eyes are going to scan a page. So make sure you use this I patron too weird wanted 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 Excel. This is, Ah, people larger, I think. And he's, I think, researching about conversion, everything about conversion. And he says that there are new patrons merging that are not F patrons. So here is his new research from Google. You can see where this is going in 2005 and this is 2014. I think it's his research. Now you can see this. Ah, F patron is almost gone, but still, the reading pattern is always starting from this left area. You can see we're here then some off the users. They look at this area so the areas which are most active or most viewed by the users are injured. You can see over here than the next. Colors yellow, the green are a bit less, so users start looking at the top in this area. That is why most off the companies they around different S U campaigns toe be in the top 10 results off the Google searches. Er's. So this is all about patterns, the pattern and F pattern, and then a new pattern that is this one. Now let's move on to the optimizing your form. Fields no form feels are really necessary for conversion toe make money on different websites like landing pages and also e commerce websites. Forms are essential part of getting information from the user. You can see in this research by un bones. They said that this image escape company they reduce their contact forms from 11 to 4 and they gained 120% conversion increase for 5.4% to 11%. 12% so almost doubled. Their conversion rate was almost double by reducing the field. Now this is directly related to your psychology. Human psychology. Why, When the humans see less hurdles in their way off achievement or they're cool, they're going to pursue it. If they see a lot of hurdles lying in their part, they are going toe quit. So you can see where here this is their optimum conversion rate. That three fields 3 to 5 years is a golden standard. Don't try to increase more than five years, otherwise you're going to lose 10% moon conversion. So this is about conversion and how humans feel Elect in tow, the laziness and when their goal is difficult to achieve. Their going to quit. One more example. Okay, so this is another research with all the top companies. And this is also the card 37 card, about 900 statistics. Now this is done on a lot off biggest websites because giants like a job, the star track, IBM, big companies like that. And these are the major regions which far found in this research. They used 144 people. These are their responses. First waas the extra cost to hype. This is a topic later to something else, which is I'm going to cover in another lesson, which is about showing every detail for the scene making. So if you are hiding some details from the user which are going to help him decide, he's going to quick. So this is the second most reason which we're interested in right now is the site wanted me to create an account. You can see a lot of people they are going toe be, you know, pushed out by this account set up. If the sign of form is going toe, have, like, 10 feels they're going to quit. Okay? No, the 3rd 1 is also lady toe of laziness and human nature that we are lazy and we and we don't like too many hurdles in our goal. So too long, complicated check out process. So if you're checker process on your e commerce website is very long like it is taking six or seven steps, you are going to lose a lot of customers and remaining. So these are the things that our lady to human nature, laziness and how humans feel when there are too many hurdles in their goal and they want to achieve it. So try toe, minimize herders in the part off the user school and their aims, and what the main tasks they're going to use, for example, if they're going to use Jekyll process or account creation process or logging. These are the two or three things that they're going to use on any app or on any website e commerce website. Try to make them simple and as easy as possible. So I hope you've enjoyed this lesson. If you have any questions that you ask me, let's move on to the next lesson 33. How Discoverability enhances a product?: today, we're going to talk about discovery ability, hesitating. If you enter anyone's room and you can't find any off the switches to turn on the light or the fan, what would you do? So the first thing in using any kind of product, whether it's ah, additional product or a physical product, its discovery ability. If you can discover how to use it or ex buttons ours features, you cannot use it at all. So discoverable ity means that how easily and swiftly users can find the features and button that elements off any product or any additional product or any mobile app. Okay, let me share with you. Ah, very small story. One of my friends, he came to my house and I showed him that I just bought this. I'm a 27 inches. And for him and for me, even for me, that was the first or first time act we bought. Now, when I bought this, I make for like, 1st 2 minutes, I was unable to find its turn on button or the button where I need to push to turn it on, although this time it is designed by Apple, and they have the best designer and user experience designer. But still they traded off their design with the discovery ability so they can put the gun on and off button on the front off 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 and I went out of the room, and what he did is the same thing, which I did for the first time I tried to tap on this apple. I go on in the front. I thought that this is the button where I need toe, just tap on it and it is going to turn on. And he did the same thing. So you can see this is how discovered ability plays a vital role in any product, whether it's official or physical product. Now let me show you a few more examples. Now discover ability doesn't always mean that you need to discover the features. There 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 markups and the sub headline and the burden. So these three welcoming text they are going to define what you can do here. So this is one thing. Now let me show you another. This is the same more cup pool. And you might have thought that it shows the similar workspace. As for the shop or sketch or any other tool, even the cording tools like visual studio, Microsoft Region 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. So we have one, two and three panels and this is our working area. So these features are very visible. You can see over here. Some off them are enabled. You can see like these. Okay, now, on this interface, you can see you can easily discover the features off this app. You can see that you can do all these things with this. Have you been? See now these have been enabled so I can align it in the middle of something like that. So let's see a few more examples. This is Squarespace. Now you can see this website shows of a straightforward and very simple message. Make your own websites no trial, no credit card required. Cat started. So this is very simple, very powerful way off discoverable ITI 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 email, customization, email, 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 the aim is always trusted by developers and marketers, scalability and delivery expertise. So it is basically more geared towards and availability maybe e commerce. I don't know. Okay, so then let's see one more example. Here we have this Shopify website and it tells instantly the economists you played for made for you. So 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 will have this mobile app and they must be prominent. They must be easily discoverable if they try to hide all these buttons into, ah, menu bar over here hamburger menu, then this is not the things I am looking for. You can see what head we have. Help center and get started. I might look on this. So these are all the things that our lady toe discoverable the Let's learn some more about this community discoverable. Lee also tells us what actions are possible and what is the current state off the device. Whether it's turn on whether it's turned off, can I turn it on? So all these questions are answered by Discover ability, so don't try to hide features you really want your users to see in your product. For example, the hamburger menu were the first example off user experience design and these hamburgers menus. They're going to bury a lot off features off your website or your app away from your uses. So make sure all the major features off your app or your product they are easily discovered . Now you have learned a lot about Discovery. Really, Let's move on to the next lesson. 34. What is Learability?: Let's talk about another feature off 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. So learn ability plays a very big role. Know what's Len ability 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 off 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 on hard towards the different features and introduce them. Time, Time to time that you can do this with this product. And also there are different phases in LEN ability. There is a learner who is just in the bigger and better at once users and there are intermediate users, so you need to take care off this now how you can improve learning ability. There are few things you can put in your product or your app or your software to improve Learn ability. Number one is discoverable controls as I showed you in the previous lesson and discover ability that bigger burdens, bigger controls enable button or highlighted. But they can show me that I can perform this task. Then notifications. Different notification, different help videos notifying me that hey, of what? 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 APs or so fares that shows you slide by slide one by one and showed you different features. Highlight the features off product, our mobile app and maybe some videos. They show you small videos like 10 to 15 seconds on how toe you know, manage your emails or harder delete your email. Or if they introduced a new feature, they're going toe. Send you an email with a video that this feature has been added and you can use it like that. Number four is social Loggins. Why Social Loggins Day? Because they are familiar patron Usu's is already know how to log in to a nap using a Facebook or Google. So it is going to help lend them fast. They can easily log in our launch and app. They can easily start using it without any hurdle. Let me show you some off the examples off Land ability. No, a lot of big companies like this Sketch AB. This is a new era for your designers. You can see there is a learned section over here, So if you click on land, you can learn different features for free. Off this absolute, 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 at obey. That's a very big company. They have their own Pretoria's online on their own upside that are free to edit images and to do different stuff you can see over here if you are. They also have sorted by experience and big net. This is what I was talking about that you need to take care off your boat uses whether they're experienced or whether they're bigger, so provide learning experience for both off them so they can easily land 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 ABS. And I think this is one off the best feature for Len ability. It can really, you know, pump up the learning speed off your users. So that is all about Len ability. If you have any questions to ask me, let's move on to the next listen. 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. So feedback is basically the result off the interaction of the user. So if someone presses a button, or if someone tried to plug your product to try to turn it on or try to use its feature, it should tell what is happening and how it should be fixed or how it should be operated. So everything depends on feedbag. Let's take an example that someone pressed a log in button and nothing happened for five seconds. What would these user do? He's going toe Press that Logan button 10 times in frustration that nothing is happening. Something is wrong. So here we have a need off feedback, proper feedback, timely feedback in 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 off examples in the next lesson. Now, what should a feedback tell? Feedback is going to tell the user that what just happened if you press the button, what just happen? What is the system doing? Is the system busy? Is a website loading is the app is loading? Was it a success? And then the app is loaded and it was successful. Was there any N'Dour's? So 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 state is that I need toe set the time first to keep on using this device and in case off error if there's an error, how the user can fix or get out off that other. This is also part off feedback. You experience feedback in all different forms while interacting with all the electronic devices like your smartphone, which informs you off its low, better status by beeping, giving some low battery indication on a 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 others and for notification. Yellow colors are green colors that it has been a success. Also, your brain reacts to any sound. So if you give a sound, enter sound or beep sound. That battery is low. Are some time that you sent the message it is going toe. Give the user feedback that something is happening? No, it is 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're not doing it. You know that someone sent you a message on WhatsApp All Bible, So all these feedback forms can be combined together. You can combine a movement with sound, or you can combine movement with flashing effect. Or you can combine different, kind off songs and colors. So that is all about feedback. If you have any questions, ask me. Let's move on toe the examples off feedback 36. Examples of Feedback: Now let me show you some off the physical products as well as digital products and their examples or feedback. This is very important part off any product design, whether you're designing mobile app, VEB website or even physical product. So the first example I'm going to show is you might have seen all these switch buttons are panels on your walls, and I really love those with shows me that it is turned on. Electricity is running in it, so when it's on, it shows the light or it that it lighted, lightest done on that electricity is running and it is turned on. So this is really nice feedback form. Let me show you a few more examples. So this is a latest. I think it's Ah 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 off this device that you can either lock all your doors or you can open your door . A few more examples. This is another ball socket and you can see it has also has a button done on and off, and it is going to let once it's turned on a few more examples. You can see this is nest website. They have cameras. They have Telmo starts and a lot off the new cutting edge technologies. You can see this camera. It has a green light indicator that it is running right now or the camera is turned on. Similarly, in all these forms, you can see it is showing the status off that tell most. Drag green light again on all the cameras. Even you can see the green light turned on on your Mac book pro and the cameras running. These are all the forms off feedback you can see over here nest. It is showing that it is right. No running the economical or energy saving more the temperatures, right? No, set to 72 foreign highs. It is showing clock right now that they date and time and destroying the weather outside. So these two are really helpful. You can see over here These two are showing the status off this device. No, let's see some off examples off detail products like websites and mobile labs and their feedback. You can see I have searched on this drama website. It's it's Ah camera store. And once I said for Panasonic GH food, you can see it is returned with 84 products. So these these are forms off feedback is showing me that these many products for phone for your system. Also, you can see the current status like you can see over here the bags and cases two cameras 22 0 these are also forms of feedback telling me that how many items off this kind are available now? One mobile app. I'm going to show you This is a mobile app screen and from mobile pattern Starcom. And you can see that in this for screen on the left, the user has selected any vibe. So there is a big and the whole color off. 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 is one more option. You can see what I have. One option for you. So this is another form off feedback. It's basically a notification. Now these are my favorites. I really love these buttons because they're going to give me feedback once I press them. So this is loading right now on their really? I really like them most off the forms online on our web. Perhaps they have these kind of pretence that are going toe go into this form so they're not applicable. So the whole status and everything changes. And really nice feedback. Okay, One more example. This is a pen from Ken, and you can see this is there is a loading, any mission over here. Fire loading. But and I really like it. This is very nice animation and tells the user that how much the file has been loaded, a few more example. This is a tweet from Luke. Rob Rob less Lasky. And he's very creative. X guy mostly works with forms, and 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 toe klik this small, an emission occurs. This is basically a feedback. So if I am going to click one more over here, so you will see. So this micro, any mission is really a great form off feedback. These are called micro animations. Okay, 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. So 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 than there's a pulsing beacon toe. Grab the attention that this is happening over here or this has been changed. And, ah, also they're 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 on physical product or digital product. You should inform your user at every step. Now this is the future. Let's see some off the latest devices, which are voice controlled or vice powered or uses mystically voice and color combined feedback forms. This is Google home vendor. Google Home is loading it is going to show this animation. This is unloading animation, and then we have this turn 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 off this device, Mycroft, I think. And when someone is speaking giving the command, it shows a Wrigley line over here. Because so the user knows that it is getting his feedback. Oh, are getting Eric organizing his voice or her Wise. Also, you can see this is another device. It gives the light feedback with emitting light that it is ah telling you something. Okay, so this is another one. It shows a ring light inside to show the command and everything. So this is another feedback form. Okay? This is another form or feedback. You are reducing the volume and destroying you instantly and giving you feedback that you have achieved this volume. Are you are you have reduced the volume to 50%. 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 destroying red light because 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 comprehensible and understandable by the user. Otherwise, there is no benefit of showing you the user, apple cores or ADDers, which he, he or she cannot comprehend. So these are all examples or feedback. Let's move on to the next lesson. 37. Feedback within Context - Walmart Example: No. 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 than its processing. And right now the status is shipped. So it is a very good form of feedback. Also, it is showing me when it is going to arrive off the books number. No. Once I click on this track item, this is where the problem starts. And I'm going to give you how you are going to really use done feedback in really nice times. No one soup, Lichter track items. You are going to see this screen. Okay, so my memory working memory is very limited. So 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 off different tracking items, I do not know what the item Waas. So it is showing me the estimated delivery. But where is the item name or the box name or the items I ordered? So this is really, you know, confusing for me. So they are violating the problem, which is within context. So whenever you use your feedback, it should be within the context within context mean that it show it should show the status off the thing and also the thing. What works? The status is related toe. So this status is later toe a box I ordered. And it should be somewhere on the screen that this box is going to and I want 24th May. So this is very important when you was using feedback. A 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 off these pages. I cannot remember that which item this page is talking about. So this is really important in any user experience design that you should remain in the context. And don't don't try to violate the rules or put some cognitive lord on your users mind. So this is another tape which came to my mind after I use this Walmart I thought that I should share with you. Let's move on to the next lesson. If you have any questions to ask me, See you soon 38. 4 Consistancy With Examples 8: Now let's talk about consistency. It is also one of the major concepts behind any user experience design. As the technology is advancing peace days, consistency is not limited to just feel off your product or the killers used in your product. It has been expended toe very complex, smart networked devices in your home, for example, smart kitchens. Now the apse and systems they are connected, and everything can be, you know, 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. So one app or one product is being goes on different platforms. So no, the consistency is very important. As user is going is going to shift from one platform to another. He should not feel the difference. The apse should be consistent from one device to another, one platform to another great form of one system to another system of what you can do to increase the consistency Level off your APS or digital devices. Number one is that everything should work and function the same and that the placement off those functional items should be the same. So if you have position that button that is going to send message on every device, it should be sending message rather than doing something else. So if we have a dark team and lighting, then that's what should do the same function on every device or any platform that app is installed now. The second thing inconsistency is the consistency off you. I elementary elements are buttons, drop downs, all these kind off interactive elements. The third is the consistency off typographic colors and teams. If your APP is using a green team on one device, it should use the same team and typography and sports and colors on another device. So user, don't get confused that he has opened up and any other or any other part of it context off use off. The app might be changed, but consistency should not change too much. So you can change, for example, if your app is a bit different, a little bit different on us or iPhone, and it's a bit different on Androids today, and they cannot be 100% similar in design because they are different operating systems or different mobile systems, so you can very a little, but you cannot deviate a lot from it now how you can keep consistent and keep the consistency off. Design off your products. There are designed systems and style guards. I have discussed atomic design in my coursework. You off modern rep resign and there is a full stack design system by intercom and thes design systems are basically going toe keep our designs and functionality consistent on different mediums on different devices on different platforms. I'm going to show you some of the examples of style guides and design systems, so you know what I'm talking about. So let's see some of the examples. This is carbon design system and it is really create. You can see all the guidelines over here. These are the styles. These are the colors, careers, iconography, layers you can see or hear. This is how a style guide or design system looks like. Then we have this and other design elements, and you a component es component speech. Your CSS Italy's all the colors, tax interfaces. Everything is described over him. So if I go to this interface, you can see over here they have all the icons, the colors, everything over here listed over here. Now artisan is also a great way to see how they have lined up their whole design patrons and everything they have. They also have their steig art. And if we go to this August and personality, you can see these are the brand style guides, administration, typographic logos, colors writing style. So they even have similar tone or personality in writing their website or mobile app or whatever the content. So the content should also be consistent in all your plate forms. You can also see different other style Guys like you can see over here Yelp, stand guard. I will share the links off these tigers with you know, I'm going to show you the example of WhatsApp and I feel it Ah little or when I see a very big gap using things like that. So if you have used what's app on android, you know that the whole team is built with dark cream color like this, You can see over here green top area. This is also green when you call someone, but once you move toe IOS device. You can see where this is the same whats app. And for some time when I open it, look for the first time on us my iPhone five s. I was confused that whether I am using WhatsApp or some other chat app from Apple So what they did is they have removed the hold him. You can see over here there is no green bar at the top. Nothing like nothing similar toe their actual team or their style consistency. So they broke their style consistency. Maybe they have their own reasons. Maybe they have some are us ah, sections or platform sections. Or maybe they want to make it fast. But still, I think they should have kept the green background behind. So make the team similar toe there I android app. So this is a very major difference between work Sabai us and of our sap Android APS on. They really broke the consistency off their design. These are all examples of consistency. Let's move on to the next lesson 39. 4 Constraints With Examples: Let's talk about constraints and how the makeover product or our Web or mobile app more usable and more useful. Now you might have seen that Twitter has a limit off 1 40 characters are tweet. You cannot exceed 140 characters, not these limit. Help us make of our products more useful and more usable. I would show you a lot of examples off constraints that were put deliberately in the products to make them more usable and useful. Now here are a few examples of constraints. I'm going to show you the images off these examples in a while now. You might have seen a lot of security system safety locks on guns, dangers, equipments and locking the idea for danger suppression. Why these constraints exist because few things should not be used by some other user or the nervous one or the kids. So these constraints are going to make those products more useful. They are not intended visuals for that specific person or that specific age or that specific age group. So that is why they put some constraints. A very common constraint example is a save Endorse saved Baba box. You might have seen a lot of dialogues appearing when you are using for a show operating the software. When you try to close that software and their document without saving it is going to prompt you. It is going toe constraint. You it is going toe. Give you limit that I am not going to close this app until you save what we want to really save or quit. The AP AP These are basically constraints. A few more examples of constant 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 their devices like or microwave ovens. So if someone tries to open it or if some child try toe, you know, mess with though your washing machine, it is going to stop working on, um, it is going to turn off. It is not going to let the child open the lid. So these are all the constraints that are making these washing machines really helpful. Otherwise, if some kind of accidents like these stars happening, it will be a lot off mess. Also, if you use my career one and if you while microwave Owen is spinning. If you try toe open, it's late. It is going toe stop instantly. So this is toe keep you safe. And also it is a very good example off constraint. So let me illustrate Mawr with some examples. Here's the Twitter example. So if I start typing, you can see it is going to constrain me toe 1 40 crack doesn't is going to show me that these much are left. This is one example No one example of constraint is this pricing model. Now you can see each pricing model has are fixed active projects. So if you are using free one, you can just have one project. So it is a constrain. It is helping these products. These Web APS that the users are more willing to are going toe go to the next step and going to pay them So they're going toe apply are constrained toe, keep it under their control. This is another free markup tool I use and you can see on the left. Over here it says free plan and I can place on Lee 300 objects in this free plan. So this is another example of constraint. One more example is you can see this is my bounding box. This is a document box. It shows that I need to draw are created something inside this container. So this is another example off constrain. Then we have this very good example of constrain. You can see there is, ah, space around space, a cold space for cities. So once I try to put my city over here, I know. Um I d video here. I know that this is the place I need to put it in. Also, if we have, If you have used very small cities, they are going to be put in the inner circle. Another example is legal blocks. You might have used them a lot. They are perfect example of constraints. If they don't apply these constraint that legal blocks are going to fit in them on the other legal blocks with constraints. So these constraints make these legal blocks usable. Now here is the washing machine off Samsung, I think. And this is their feature. You can see what here it says safe washing. Know what to say. Washing is that ad wash store can only be opened when The drum temperature is below 50 C and the child law is deactivated by default. I think the child lock is always activated. So 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 kids wouldn't get burned. So this is another example. And here is another example Off your child. Children are in safe hands. They have child lock, I think Ah and ah, you can see over here won't open when the child lock is activity. So if you are going to use the child lock feature, it is not going toe open the lid so you can see they are advertising their safety a lot. And all these things are lately to constraints. They have put a lot off constraints to make this device usable in all conditions. Here is the menu. I think they're showing that if you press these two buttons, you can see here is a child. There's a child lock icon over here. So if you keep on pressing these Rubens for three seconds and I think it will activate the child lock once you activate child lock. Whenever you try to restart your device, it is again going to be in the child lock more so This is really helpful and very great example off constraints. So 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% usable and it doesn't have any visibility problems. Still, users are going to make mistakes, so keep that in mind. There are two types off mystics slips and a mystic. No sleep is when you are doing the right choice. You started the writing, but you took the wrong steps or you skipped one off them. For example, I forgot to turn off the gas burner off 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 medic. So this is an example off asleep. No mistakes. On the other hand, they are based on the wrong decision. From the start, you took the wrong step. Mystics happened. When the user have selected wrong goals and plans there, starting step is wrong, so from the start they have taken the wrong turn. So, for example, if you have called calculated or a computer, dob 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 dollars. Maybe he's being the wrong product price in dollars. So, for example, you might have set it to £5 the dollar rate maybe stating $5. So this is going toe give you a lot of problems. So this is basically a mystic. Let me show you some off. The examples to illustrate mawr on this scare slips and mistakes. No, this is a dialog box which normally occurs when you try to dilute something. One uninstalled something. Now why do operating systems asks whether you really need to uninstall it because it could be a mystic, because someone might have clicked it without any consent. Maybe he doesn't want to reinstall it. Or maybe he doesn't want one in solid. So asking Use user before committing the lead, are deleting his backup or relating his website. You should ask them to back up. Oh, are you should limit them with these dialog boxes that do you really want toe do this action? I have seen some off the website sphere. One more example off slip is you might have installed if you are a Windows user or a PC user, you might have installed a lot ofs office on APS, so I think three or four years back, if someone asked me a new newbie who's just started using PC, I normally tell him that if you want to install any software, just keep on pressing yes or next. So this is core slip. So, for example, he's pressing yes, and the next screen he sees is this one next. And 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. Not these greens are in continuous succession, and these are susceptible toe slips. A lot of people who you know daily use Softwares on a daily basis, or they have four or five steps off copying and deleting or merging files. They are going to make a lot of slips because they are usedto the same pattern. So if something is missing or something just missed one step, they're not going to notice it. So this happens when you have a similar routine or similar work set up. So 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 off, so fair or application or product, you need to keep in mind that don't provide the user something like you might have seen Mobil's. There is a factory reset button. So if you provide just one path factory reset a lot off. Kids are going to press that, and it is going to reset every time and the whole that I will be lost. So 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 are Do they want to skip this ? So 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, are demonstrating it with the intended action or the limits within the limits. It is very difficult to design when some errors are exceptions starting happening. So the real problem starts when something goes wrong. Just keep in mind that interaction off your use a range of product. It just like an conversation between two people. So one person is doing actions, and the 2nd 1 is guiding him or responding him with feedback or telling him that bottle do so when something goes wrong, the other percent should guide the first person that this is wrong and you should fix it like that, and this should be very simple and easy to understand. For your user, it is just like you're teaching your grandma very old grandma, about computers, our Facebook or Twitter, Or what's that now? How can you design for others to make your products more usable and more user friendly? The first thing is that prevent the others from happening. This is the first step you can use constraints. You can use dialogue boxes you can use Ah, input fields with limits. You can use passwords, everything to limit these enters. Then the second thing is that you need toe get the cause, how this enter what's happened and how we can minimize it. Why are the users making the same mistakes again and again is there are usability problem is this something that is making other users confused? So you need to minimize that. Then you need to do a common sense. Jack. Common sense check is that for example, if you are using a microwave oven and the ladies open and you left the lid open, you didn't close it tightly. If you try toe, push the start button, it is going to give you better. So this is a very basic common sense. Check that if the lid is open, you should not start the micro alone. It is also a constrained, and the third thing is that you need to give you a user easily reversed Those changes if something bad happens, are if he by a mystic diligent his emails, he can easily reverse them. He can easily undo. He can easily change them back also need to make sure that the idols should be easily discoverable and fixed. How the user is going to see that some ever happened because you need to give them some feedback. You need to give them a timely feedback and you need to give them the V A to fix that that error. So these are all the things you need to keep in mind. While you're designing for more by labs, any physical product or any digital product, let me show you some good examples off for designing for hours. Now, if you have used Dropbox, it is a file storage service. And if you have stored some file and you deleted them, it is going to keep your backup for like, three months. If you remember that, Oh, I deleted some fuller by mystic where I need to find it. You are going to go to these diligent files and when you click and you are going to see all those diligent files with dates when you delete deterred them. So this is a really great feature off fixing any problems or any others or anything. You can restore it easily. So this is another feature. You can restore it Another example is Gmail. If you have, ah, use Gmail and when you try to delete some emails, it is going to give you the feedback and also going to tell you the way. I hope you can undo it, how you can reverse this change if you have done it with a mistake. And also there's a learned more to train the user if user doesn't know what just happened. So these are a few examples. There are many more examples you can see and you have might have seen online. When you try to delete something or when you try to create something, there is some enter. It is going to give you how toe fixed or and those answers and also some sites they give you steps that do this. Do this do this. Last night I had a problem with my jujube general that my essence account was not working with it. So I went to the guide off you and Judy Guide and try to open it. And there were like, five and six steps and and they were really difficult for me to, you know, follow. So you make sure that you need to make them very easy for years. User to understand. You can even use a video to guide the user that how to fix this hour. So these are all the tips and tricks and designing for others. I have 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 things we have, we need toe control it ourselves. So this human need for control can be traced back to Ali s rules. When we were cavemen, when we first started writing, the holes were used belts, toe control it. We can easily stop our horse. We can easily let it run. So these are the human needs. So this behavior is built into human nature. So as UX designers, we need toe give users full control or almost the best control off their APS or the websites they're using or their accounts are the Ikuma sites they're using. So the user's fees that they're in charge, they're going to feel very create. This is also part of his experience. Even if you see the kids and observe them whenever they are like 1.5 years old, they try toe, eat with a spoon themselves. If you try to grab their spoon, they're going toe veep. And they're going to say that we need toe eat ourselves and even they are throwing everything everywhere and they're throwing food on themselves. But the keep on trying toe you 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, Argue you can turn it off. Hey, they have dark and light teams. You can apply if you go out in the sun. You can also connect and disconnect via fire blow. Dude. So all these settings and services, you can turn them off and you can turn them on. So all your devices are in your control? No. 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 of the examples off 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 is playing, but if it has allowed audio, you are going to kill this page. You are going to instantly click on this cross. This pattern is called auto place, so auto play 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, are close the video player window. They're going to get irritated. Let me show you some of the examples of different operating systems like Google Android Mobile Operating Systems and Windows and IOS Max 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. So all these absolute state over here. Then we have this setting screen for iPhone, and you can see you can personalize everything. WiFi, Bluetooth airplane, more notifications, everything. This is the settings screen off G meal, and you can see there are tons off 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 team a bit. So this These are all the settings color management devices force Internet options. So, like hundreds of settings you can do for any off your attached device or any programs you have installed. You can uninstall them or you can stroll them back. Or you can disable different services than this is the screen from I'm Eric or Max Operating system system preferences. And there are a lot of things you can do over here. You can control the door. Stop screen savers teams, energy saving more displays. If you have multiple displays, your sound scanners blue. Good. So all these settings are there so the user can feel in control and get satisfied that I own this app or this product. So 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 ah, you ever wondered why they divide each book into different chapters and different sections ? Different paragraph with using different headings so they are easier to scan human minds. They can easily consume that information and easily understand it. So we humans, we cannot process a lot off dead our Lord off information at once. But we love bite sized chunks off information. No. Why do we need toe group? Our controls or our pretends, are our options. Just take an example. If I give you a washing machine and it has, like 100 buttons and control and settings on it, you will be overwhelmed with this ex functions. And you would not preference with a simpler washing machine that has just stand buttons on it. So what you can do to make your products better, you can group relevant controls together so they make sense to the user that this set off controls is going to do this. Let me show you the image off the washing machine I'm using at my home. This is the Samsung washing sheen. I'm just get my home and I'm going to show you what are these controls? And by grouping off them makes sense. Now you can see in the middle they have group these two power and start. So this is a turn off this machine and to started. So this makes very since they almost through 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 premiered Moore's where you can just select anyone and these air group over here. So if I want a quick wash, I am going to select this and it is going toe Just do all the settings for me. So this is a very nice layout off all the interface controls and they're grouped to make sense to the user. So 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 moors and they use grouping toe layout this whole interface. So this makes sense. Similarly, if you see any APS, there are tons off APS, Mac Windows, operating systems, even IOS android. They have all the setting group in tow. Different areas. They're stacked into different sections. So let me show you some off the sections, these air in new settings, and you can see these air understand settings and you can see they're simpler and there are like seven or eight categories, and you can easily go with any off them. They have the description under them, and you can do the setting and customization they have used. Grouping toe accommodate a lot of settings into one category. Then we have. This is the screen short off sketch app. It's a popular app for your 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 he has all the text controls in this bounding box. Then we have the appearance and effects in over here. So 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, um, navigation bars or 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 diverting file. These are export, and these are reduced file and the's are so 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. So if I click any off them, so so if I click any off them, it is going to take me to those settings, so it's easier for me. If they have, like, one long page and all the settings that decides on that page, it will be too difficult for me to, you know, change everything. So this is a group. It is in group into 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 1st 1 then this is the 2nd 1 This is third block, and this is fourth block, and this is last block. You can see user groups and parental controls and extra control. XX ability City. They are almost related. So they are over here. Also date and time. The control that alleged to networking sharing blue Dude, all are in this area. iCloud you can see. So this makes sense. They're all almost all related. These are hardware devices you can see in this area. Sound printers track bad mouse. So these are almost all the hardware's. These are the customization is off their own operating system, like the strobe dog, Mission control, languages, security, privacy. So all these some preferences, they make sense not. This is a very bad example on Google AdSense I was trying to make Ah, I was trying to make it disappear. So what happened is that I was looking 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. So, for, like, five minutes, I was unable to do what I have to do over here, how I can close this papa box. So after looking around, I saw that this is over here. So if something is away from its context off use, So I am using this window so this next should be over here or over here or over here. They can also place a button or hear it. It makes sense. It it's inside a group. So grouping also makes sense because user thinks that these things are related. This is Ah, Law, this is called Guess, guess Start law off grouping. So there are Morgan start laws. I might in cured another whole section on that. But right now, it's not in my plan anyhow, so grouping makes sense. So try to use grouping intelligently in your you wise. 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 off physical and mental limits. We can't operate or use any device or machine for too long. We have physical and mental limitations. So whenever you're designing for any app or developing an in 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 data. The Search by Stephen Khobar and Josh Clock And according to them, 50% users just hold their smartphones with one hand and 75% off their interaction. Is Tom driven so they mostly used come toe, press different buttons and to order something online, so 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 backs. They usedto back different items into different boxes. They used to work for ours and ours on industrial plants, standing there for like, 10 hours or 12 hours. So it started making people sick. So what they did is the U X guys. They started this economic things that how we can use humans and not use them as a machine so we can improve their health and their park space using user experience and visibility. Similarly, if you are designing a chair or a door, you need someone to test it for 8 to 10 hours. Or maybe more than that. So you need someone that is going toe, 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 kind off discomfort. Here are a few articles and research on these patrons that how humans hold their smartphones and use different devices. These are the different holding patrons created. Holding touch. You can read all this article. I'm going to share this these articles with you. And then we have this You can see or hear this Patron. This is basically the safe zone where the users time can reach. This is a smartphone. So this is the area where the user can easily tap with his tambor. Haltom, this is okay zone and this is no zone. So here, if you play something over here, some buttons, they're not going to reach it. So you might have seen the most of the buttons are in this area like we're here, so you 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 a comfort zone for Phablet are bigger mobile or maybe with a larger screen, a lot of complaints like apple. The took that into consideration and you can see in Apple iPhone 60 R. Seven. I think they have this rich ability feature inaccessibility. You can turn it on and it is going toe. Move every app or any icons on your screen down towards this area so you can see they're clearing out the area where you're Tom 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 with screen and the settings you had now some off the vice designers and a lot off great usability gurus. They are designing abs like these. I was really surprised to see that you can see over here they have left all this space empty. And the cop Why is that? Because users. Tom cannot reach this area. So to make it easier for the user, they are placing all their controls at the bottom off the screen. You can see over here it is a bit up. There's a margin. We're here, a space over here, and then they have listed all their controls or categories or anything they want to do. So all these settings are found and everything is moved down. This has done intentionally to support the Tom usage physical limitation off the user. So these were all the example for human limitations, and how we can use them to enhance our abs are everyday products. If you have any questions to ask me, let's move on to the next lesson. 45. Using Design Patterns: the only thing we're our human minds are superior than any supercomputer is recognizing face or design patrons or patrons they have seen before. So our brains recognized things easily. If we have seen or we have experienced similar patron in the past, when you are designing some product or any app or any website, if you deviate a lot from the patrons users have already seen or users have images off those patrons in their brand, 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 would be difficult for the users to recognize those patrons, so you need to take those patrons from already made cars, and maybe you can alter them or enhance them of it. Similarly, in Web design in mobile app design in digital products, there are already made patrons which users have already used like such bars, different drop downs, Accordions. So before starting out using any or creating any new patron, try to find the similar pattern which users are already using. So I'm going to show you a few websites related toe design patrons. And for developers, it is really necessary to use those already made patrons. It also saves a lot of time. His website called Pattern Starcom and PTT are an s dot com and I'm going to share all these links four 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 card spectrum, you can see this is very popular. These days it is going to filter out and show me just the cars patterns you can see this is one and then we have these cards small cards on. Then we have this you can see on it if we over it is going to show what is the app and what are the tags and categories lady to it. So this is one you can find all the different pattern than you can see whether you can use any off these already made patterns into your app. Second is this one. This is also mobile patterns dot com and right now I am. I have opened the lists you can see on the left lists. There are different form. It's off list their different styles. You can see their images based list 123 images with titles than we have these lists off different reviews. These are in different format, and then if we go down, you can see these are also list. They have different form it on the left side. You can see all lists on rigid, rigid, like 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. Patrons are designed libraries. You can use them instantly in your iPhone or Android APS or any digital Web EP. This is another website, um, patents Broadcom, and there are a lot of patterns with different categories. For example, if I e quarter this model window, it will show me what is the problem. Why use it needed, and also some court 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 you. I designed patrons. Then here we have another pattern library website, valley dot com, and you can see there are again different categories. Let's go to advance such and see what patrons are therefore want such. It seems a bit old. Maybe they haven't updated it in a few years. But you can goto this website and see some of the examples. I think they're 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 big old and I'm going to share all the links with you. This is really dot com it It feels a bit old for me, so these three will be perfect. So this is all about patterns, libraries and how you can use them. Our human brains are wired to recognize similar patrons. For example, these mortal windows. I can instantly recognise them that this is a model window, and this is maybe for some information. Or maybe I can click on it. And if which 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're going to acquitted, or if you are putting a lot off stress on their mind on giving them a lot of difficult calculations or things to remember, they are not going to like it. So that repair is. Don't burden your user with difficult calculations or let them memorize difficult or long passwords. So try solving all the hard problems for your users on the development side or on the design side. Here are few res, which you can choose to make your app or your e commerce website or any digital product easier for your users to choose. Solving hard problems doesn't mean that you need to calculate different things, but also it is lady to pass furs, use a location you can automatically look at user by GPS by automatically tracking them. Even websites are doing that. You can also show passwords while the user is typing, so the make less mistakes. It is adopted by Amazon's app, and this is the patron IE came up with. I don't know whether Amazon came up with a Lear than me or Maybe it's me. Actually, I invented this veteran designed pageant that when user is typing, you need to show the user's password in very dim for mate. Very dull gray for mates so others cannot read it. But the user can see it and read it while they're typing so they know what they're typing. So they are going to make less mistakes, so it is easier for them. So you are making easier for them to tie past first, other 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 fume examples like this fantastic pedometer there. Many APS they can calculate your calories and then speed frequency, but with the steps part minute. Also the distance, everything, even your speed. So use a door. Just need to you nobody about this. They are just going to get everything from these steps calculated automatically. So this is one more walk with map. My walk and you can see it is going toe. Take all the all your part with the map and also the distance duration, average based calories, burn and elevation gain. How much you go above the ground and things like that. Then we have another example. This is below wise below, 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 my year, different shoulder words. And then you can select over here. Like, for example, I had this 44 I guess, 43 or 40 and then you can neck the next circumference and then you can neck height, which is they have shown how to calculate it. And then you can also select whether your sleep on your stomach side and the from mattress and you can click on here and it is going to advise you which below matches your rates and height. So I really like this below. I think I'm going to buy it soon, and then we have this log in, which is log in with Facebook and Twitter rather than user memorizing each and every password for every West website they can easily long. And with these social Loggins. 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. So these are the three addresses you might have saved. I haven't used it even once, so I don't know. But so there is an option to save your presets or your roots so you can easily use them rather than typing them again and again. Then we have this very intelligent international telephone input. And if you select any off your country like Afghanistan or if I select my country like me, select Pakistan and you can see the form it off this phone number example. Phone numbers changed toe what I have in Pakistan. So all the mobile numbers are in this form it So this is very need. If you go to USA or United Kingdom, you can see the farm. It again changes toe plus four four and then your phone number. So this is very intelligent telephone input, and then we have a few more examples like you can see what hair affordability calculator from Zillow. I think this is about house mortgage, and if you change your income level from here like 60,000 it is going to show you how much house you can afford up so I can afford upto like that. And if I have monthly deft off like 800 so 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. So these are very handy user Gortney to calculate anything. They're collaborating 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 so it is going to show me how much I have to pay every month. And ah, Then again, this is another example Telco and you can customize this Ah, whole shelf, for example. I want o use the 26 million sentimental high for this area. And for this area I want 30 it centimeters and then I'm going toe removed the grade. Maybe I can use this one or this one s Oh, there are many options. You just need to select the A material and you can change the density with everything hide from him. You don't need to calculate all these just need to select your customization than it is going to make a very beautiful shell for you. Then we have this cool happened Cool. And ah, this is how they create a contract. So if I select ah blind so I don't have blank. So just one Klein Dimmick line, for example. My client is Charlie, and these are all the things I can put over here. Contract, name, email, everything. And you can press continue and it is going to build the whole project and the whole contract by itself. So I'm going toe project X 00 cu. You can change the currency and you can continue. And you can also check that my work will be my own. Anyway, I'm going to continue, so you can see now they have prepared the whole contract. You can see over here there are my signatures and that's my address. And that is the contractor. So this is very handy. I can download the pdf I can send and sign and send this contract. This is very nice. Ah, savers Dropbox save it as a draft and this is very nice example off automatic calculations are automatically generating things rather than putting that whole burden on my mind. Then we have another calculator or a medical scooter on this website. It is from Australia and you can see this is also more gauge, or maybe loan website out. Apply for the loans I live in so you can change these values and everything below is going to change. So if I go like this on, if I go like this, it is going to change everything. So these are all examples off automatic calculation and lowering the burden on your user's 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 read for long. That is why we invented remote controls. Smartphones that are very fast, fast processors, fast aeroplanes. So if you see any Q and it is very long like there are 200 people already in the line than most chances are that you are going to quit and leave that cube. Similarly, in digital APS and mobile labs, users are going to behave in the same way. If you have a website, our weapon app, that takes like 15 seconds to Lord Most. Chances are that your users are going toe quit and they're going to shift to another app or another website. Let me show you the effect off delays on conversion and users. Conversion is basically even users ships from one page to another or he has some goal in mind, and he tried to pursue it. So what happens is there are few starts I'm going to discuss with you that if you have one second delay or in any page response, it can lower your conversion by 7%. So everyone second is going to cost you 7% Lu conversion rate, which is going to lower your e commerce purchases and it is going to lure your user staying on your website, so it has a lot of affection now. The other studies that BBC have seen additional 10% off users living their website when it takes one more second to lure their website. Similarly, Ali expressed, they reduced the load time by 36% and saw a 10.5% increase in orders and 27% increase in conversion for new customers. I'm going to share the links off these stats, which is the blue P or STARTS website, which is very good. The other is kiss metrics and you need to see those websites. Also, this speed and delays have direct effect on your CEO. So speed is basically a senior ranking factor now and others severely views that 79% 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 nor impatient and they are not going to wait for your website or your air, but your e commerce website Lord. A few more starts 80% off. Users expect the website Lord within three seconds. So this is a gold standard, so optimal low time should be from 1 to 3 seconds. Don't let your website lord 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 1% loss bar every 100 millisecond delay in their psych loading. So this is very big for these websites. So if they even make their websites 100 milliseconds fast, they are going to get 1% off more sales. On the right side, you can see there's a kiss Metrics, stats, graph and you can see that after four seconds you are going to see a lot of card of amendments 25%. So before four seconds, you can see three seconds. Two seconds is the safe bet. So this is very important for developers that you need toe make your website super fast. You need to use those technologies those FBI's those back ends that are going to Lourdes Foster and even four 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 dead. So no, what if you want to show the Jews or the deal is that you are learning something or you are doing some calculation in the background? Are you are processing their e commerce Check out are checking their credit card? You need to show the user the very time there's a need to know how much they long they're going to wait. Adviser, they're going to wait one minute, they're going to be a two minutes. Also other method is that you can show percentage lording about 56% loaded, and you need to show it. If you have a lot of flooring time, like if it is going to take, like, more than three seconds, then you must show user very time or percentage in order. Now why loading? If there are some some updates, don't try to interrupt the current. Ask the user like you have seen on Facebook. If you are browsing through and going through the pores and then there new posts, it is not going toe automatically dumped at the top and showed you the new post. Whether it will just give you a notification that there some updates, but it is not going to intra pure current task. Also, if you are developing APS our websites on mobile laps, the response time should be quicker or within two seconds. Response times mean that when some someone is clicking a button, then it should give the response before two seconds. Otherwise, use that are going to click it again and again and again. Hair. For examples, you might have seen these kind off loading bars or status bars on e commerce websites that you have set up this second, they set up this sensual very close to your goal. Also, this is an example of percentage lording bars you can see over here. This much has been loaded. Then you might have seen a new loading bart on YouTube and the top off the page, which shows that it is going to take, like, one or two seconds, the pages loading toe the next one so the user don't keep on clicking on the video again and again that 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 learning something, and if it's unloaded very fast and you don't need to show anything, if it is going to take just like one second less than one seconds, then you don't need to show this status off 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 the default values or default settings off any product when they try to turn it on or try to use it. So the files are settings or values said. When you start using any app or any product out off the box settings, we mostly call them all mobile phones. They have ring tones and every other settings that are set to the fire settings. Now the default settings. Why are they important? Because the far settings play a vital role, and it helps user make decisions. And we normally make better decisions. For the users who wants that from Jared Spool about default is less than 5% off. The users are going to change their the far settings. So far, the 95% uses. They are going to use your APP or your website on the default settings, so make sure your default settings are going toe play velvet. All the users now, if you have used your smartphones, you might know that the ring tone when you start your smartphone, it is set to 70 80% and also dissect toe the vibrate. It is automatically set to hybrid So what if you bring out your smart phone and Samsung or iPhone or any other brand and you just start using it and then you instantly know that there is no ring tone set by default? What are you going to do? So this plays a very vital role and user experience. So smartly farce is that you are going to set the file settings for most off the users to satisfy them, so they're going to cover most off your primary users. A few more examples off smartly farces, pre populating form fails with you the location, country phone number, phone cords, even email addresses. A few more examples are you might have seen auto save feature in and mess furred and for the shop. And also, if you have Facebook than 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. And then they made sure that they normally prompt new users to set their privacy levels. So this is all about smart. If ours, I'm going to show you some off the examples. So let's see some examples. Here is a screen from cattle areas and previously I use the website toe. Find different routes or my plan planning toe. Go to San Francisco and you can see your hair. It shows me when I clicked the from it shows me my previous such is it has saved my previous. Such is that I want to go to from Lahore to San Francisco and J. F. Kennedy Airport the whole. So this is really handy. These are smartly farce. They are going to use what I have used before then in 40 shop setting. If you use for the shop, you might know that it has automatically save recovery information every 10 minutes, which is set by default. This is smart if all because everyone needs this feature. These are our mobile and right settings, media volume, alarm volume and bring volume set to default settings, and you can change them, but they are not mute. Similarly, this is Microsoft Word and you can use. It has also auto save recovery information every 10 minutes, set 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. Tell Cord for nature's and I think you can see here we have another example of smarty files . You can see the rawhide 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 100% ever. It is this one height is this one. So these are for normal use. As you can see over here, these are the default settings. They're very powerful. Then I searched online on Google to see how much different websites different travel websites are. Ticket finding websites are using smarty farms. You can see I served economy tickets from Lahore to New York and you can see I clicked on here. Lahore to New York, this 11 travel cheap. Where? And I think I clicked on this one kayak dot com. So first I'm going to show you. For example this is from one travel and they already failed my these two from and to feels from this such ok, so when I clicked Hole here. You can see this already failed it. But this is therefore step. I need to select all these settings before going anywhere. Also, you can see cheap where they already failed these two. And I have to pick these or hear also that you can see the frill. This one Adults, This is very nice, but I like this one a lot. This is kaya dot com and you can see over here they not just friend me. They also showed me the results. Okay, so I can go ahead from here and I can change the dates. So they're just pre selected to raise their 21st August. And they used that to such 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, So this is really nice. This is create used off smart Defar. It's the best I have seen among these. So this is all about smart difference and power Smart defaults, which is also Lettered Tau power of suggestions. So this website is using it perfectly. If you have any questions to ask me, let's move on to the next lesson. 49. Guiding And Training Users at each step: when someone visit you for the first time and they come to your house, they don't know where is the kitchen with the bedroom with the washroom. And same is the case with the users who will start using your abs and websites. They don't know what they need to do with this. Websites. How to log in, how to sign up. You need to guide your users. You need to train them at every point, and you need to show them videos. Illustrations guide them in the direction the U. N Dooney to show them different pop ups on different areas that this is going to do this and how you condo's or use this feature. You might have seen a lot off these kind off images on on boarding experience. When you start using some app, this is called on boarding experience for new users. Let me show you some of the vase. You can improve your users guidance and training. I have seen a lot off APS these days. What they do is they sent periodic any meals on different features off the half our website , and they have some training videos in them, or they have some guys in them on how to use that feature. Also a job. And many of the companies, like Sketch Bowman sketch another popular software is what they are doing is they have free video trainings on their websites to train new users. Similarly, if someone is feeling a form, you can give them a help text when something goes wrong, so they can easily fix it. No, here are some off the on boarding experience. You can also call them walk throughs. How to use that feature on the new app You can see this is Carrousel, and it is showing the user that how you can share and ah, keep photos all the buttons. So these are different viz. You can introduce new users to new features you can see over here. These are we have Hank picked handpicked your reading list based on our most popular stories slide to start reading. So these are different res. You can show your user you can introduce your user with different features. You can show these walk through screens or on boarding screens at the start, appear off your app, or whenever the user tries to use a new feature This is another screen from patrons dot com , and it is also called on boarding screens. You can see it is going to show some off the things you can do and also some off the welcoming messages that welcome to this feature you can see now they have used pop up on the screen over here, pop up on Ah different inbox today, upcoming anytime someday and the information about it on the screen. On the left, you can see they're introducing few two burdens, which is you next and Q last. Because they are unrecognised in unfamiliar patrons are new icons. They have to introduce it to the users that these icons toe these features. Or you can use them like that at all of experience, Design or extreme is a new tool, and you can see over here on the idea Adobe website on the website. They have the signal and experienced both videos for both the levels. If you are a big now, you can see different videos toe get started with this software, and if you are inexperienced user, you can switch to experience and see different videos and train yourself. Similarly, I have showed this website before Bill o Wise, and it shows different videos on how to take my year mints off your shoulders and neck weights and circumference is and all that toe select your pillow. Now this is a tool I bought for my trigger points. And you can see they sent me with this product user guide, where they have showed everything, how to use it and how to press different trigger points and where they can be located. So this is how to guide along with this back number. So this is really helpful. A lot of products are giving these kind of guides free with their products, or user can start using their product instantly. So this is all about training, use user and guiding them to achieve their goal. If you have any questions to 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, were mostly going to quit it. Also. If you make it very easy for a human toe, get anything they are not going toe go for it. So they feel more accomplished when there is a balance between how easy it is and how difficult it is. So most of the apse 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 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 part in achieving any goals inside the game, they are going toe, quit it and they're not going to like it. The same fact is also applicable to online forms, so you need to reduce friction in online forms on e commerce. Websites are on sina pages. You need toe lured the number of fear. So you need toe. Make it easier for the users to sign up for your service or website. So if your user sees like 15 feels to fill, that is a very big barrier. They are really going to, you know, run away. Let your users taste your candy first and then ask for more. It is a safe bet is 3 to 5 form feels for maximum conversion? Here's a conversion example, or this human nature. The bad years you can see it in action were here. When they make the form very short five feet, their conversion goes up 13.4% and then when they shifted to seven fears, it is no down one on 1.5% and then if they make it very long than their conversion drops to 10%. So this is their cost. You can see the cost is also increasing. You can see we're here. The cost is a 31.24 when there's using, five feels. So this is really hurting a lot off your conversion, and it is ready 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 toe quitted. If you enter a building and you see like 15 checkpoints and they're checking you again and again and again, you are going to quit. You are going to shop from someone else. You are going to use someone else service rather than entering that building. If you want your users to be happy and you want toe, increase the level off user experience satisfaction. You can offer users to try your solution on your app right now for seven days, 30 days, even three months. All the big completes I could obey Sketch and other companies. They're doing it because it is human nature that humans need to know what they are purchasing. Orville. They're spending their money, and voi, you need to make sure that they really need your app or software is if you go five years back. There are very less examples. There are a lot off barriers off entry, and you need to purchase most of the software's without even testing them. Most of the software's were just screen shorts off those offers and what they do, and you have to pay to download them. So that was a very big barrier to entry, which is, you know, lowering these days a lot, even the most of the websites. They are using just the email to start using that app for that service. Let me show you one example. This is a website I just sign up like month ago, and you can see they just have one email input to start using their app. So it is about user experience and how this is an app toe. I think millions usability or record different screens off your website or wraps, and they just wanted me to fill just the email address to get started and start using this and for past furs and everything else they're going to email me. And when I open up my Gmail or email, they are going toe asked me to set my passport and other details. So 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 part off entry into your product or your website or Europe. So this is all about friction and barriers and why humans don't like them. If you have any questions to ask me, let's move on to the next listen 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 hard toe an undesirable result or goal. So you need to make sure that you are labeling your buttons correct. You are using correct labels for year form feels. You are even titling your webpages correctly, your block posts and even your anwer messages and notifications. Just an example. If you go five years back whenever you encountered any other on a website, you might see someone like this. Hash scored 449098 at our SQL termination occurred. So you never understood what that other waas. So if you can't even understand the other, how come you can even fix it? So this is a very big problem. Very broad problem. If you can't understand what happened, what was the error? You can't fix it at all. Similarly, our users, they have very simple minds, so they cannot understand these kind. Of course, thes courts are for developers or quarters, or the people who know really know what that court means but for normal user, who is visiting your website? Are you using your app? It is very undesirable result He cannot comprehend it. A better example is you can see couldn't install driver due to unavailability off Internet . So this is a very simple mistake and I have seen a lot of developers musing this and keeping living these kind off others on their abs and websites. So try to avoid these kind of APS your simple language simple, actionable language which can lead toe action and how to fix this error. So you can see in this in this example couldn't install driver due to unavailability off Internet and you can also add Try to connect to Internet a button with this so user can take for direction toe correct his problem a little bit more about natural language and how to effectively use that in your interfaces or more by lapse or buttons and labels is that you need toe. Tell your user what this form is about. What this burden is about, what this item does. So you need to use very descriptive labels for your buttons and for your form fields and you're any navigational items So instead, off using submit, you can use download pdf file. So this button shows that this action, if I do this section 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 you send message and this is a bit descriptive message rather than send or submit. So keep all these things in mind. I'm going to show you some of the visual examples off these enter pages and how you can make them interesting and even funny for your uses. This is one of the old examples off course and other messages you can see the S and type is not corresponding adult court. Well, so I never know what this actually other court well means. So I cannot fix this enter at all. Also, you can see this is another example. This is a Windows error off. You can see this real monitor dot exit file and you can see the other record is 11 for two . So I don't know what why this enter Korda's is 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. So this is a bit interesting. Our message and very descriptive. Unable to connect to the Internet. This is another other message. No Internet connection. But there is no way to correct it. So there must be somebody Unlike try again. Try again after five minutes. Something like that. So user can easily correct it. Now, this is a very bad example Off record or other message there is no action user can take so you can see over here. I am not getting any details or any actionable details from this. We couldn't complete your request. So what? Waas my request. I don't remember. Maybe I tried to open an app. Or maybe I try toe use some tool to connect to online or maybe share my picture. Please try again in a moment. So it is no telling me why this request was not able to be completed. So I need the reason why this happened. So this is another example, But it is not very clear. No, I'm going to show you the evolution off after 404 Message which fours? Very common on online websites that this speech has not been phone. These are the old messages that used to appear and they're not actionable. You cannot know what they are. And although there's ah homepage, you can go back. But you cannot know why this happened. Okay, so there are a lot of create examples. Let me show you. This is Airbnb 404 other page and you can see or hear very nice and graphic to make it 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 mean other that tells the user explains that user what happened now? A record. It is in crea bit dull. Then there are few more helpful links. Maybe you need this This or this or this. So it is guiding user. Maybe you were looking for these links. Maybe you want to go to home? Maybe you want to search. So this is how you're going. Toe. Get your user toe, take some action. Then we have another one. You can see this is called 404 Venn diagram. And ah, it shows two areas. We broke something or you can type. So this is another one. A lord's very creative. But it has only one thing We're here. Please take me to the homepage Then this is another one is using very nice animation off 404 page. And ah, very funny. You can say very funny Title that pays never returned from a trip to to the and a comma desert. So you could need to go to the home website. This is another one. It is very funny. So 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 I go home Land. You are drunk. So this is another one. So make sure that you are giving two things on any kind off. This problem one is that your and our message is comprehend a bill by your users. The user can easily understand it and action he need to take whether he can fix it. What he can go back to the page he came from or try something else. Or maybe his Internet connection is down. You need to tell him what happened and how to fix it. And also try to use natural language is a wide court. I hope you have understood how you are going to use natural language instead of intercourse and complex our messages. If you have any questions to ask me, let's move on to the next lesson. 52. Natural / Conversational Forms examples: There's a new emerging patron, which is called Natural Language Form, and I really like it. It is lady Toe over Natural, using natural language other than course. So this is natural language formed and they convert better. There is such shows that they are converting better, like 25% somewhere, 12% somewhere, 50% better than their traditional forms. So what they have done is they are 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 AH 9 p.m. in Ah, Los Anges so I can type over here Loss Angeles, and you can see it is going to fill my form. So this is a very nice example off using natural language in forms input, another example, which is live right now. And it is being used on Oscar consulting, which is in show insurance company, and you can see over here how they're going to guide you towards their court. So I'm going toe enter the court off one of my friends. So this is the Court of New York. I would like to cover for me and my spouse in my kids. I am 55 years old and my spouse is 38 my three kids are 20 18 and 40. My family makes you leave it Five people in my household. So So you see, while filling this form, they showed me very few values step by step to decrease my cognitive lord. So cognitive lord means the mental calculation and the process my mind is going toe do while feeling or doing any calculation or filling this form. So this is very good example. So I'm going to press next and you can see over here they have a few more things. Like I expect to see a specialist. I have Ah, I'm managing a chronic in less and ah, this is all get cold. So you can see now they are putting together my personalized quote and this is a really good example off this natural language and how they are using and simplifying this process by introducing one step at a time 53. Google analytics and Hotjar to reveal more about users: If you're a developer, you can be a great asset to your user experience team of UX team by giving them some analytics and use a bag loaned by using Google analytics. So 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, they're operating systems, their location and even the time spent on a page or what are the pages are were in the Czech or process that user dropped. So these user flows and drop offs 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 AARP or on your website. These tools are going to record your users activity where they click using a video so they are going to show you the actual user activity where the user is having problem on the specific page and you can use this tool to year old wanted. You can easily see it is like a usability desk. You can easily see what the user or where the user is having problem on your website. It was like heart er and the U X cam. They can create videos and heat maps off your user activity. I have used Hard Jar previously with my website Lanyu exciting, and I recorded, like 30 or 40 video sessions. And this is a great tool so you can use these kind of tools along with Google Analytics, to reveal ah lot of story to your user experience team, and you can be a very great user experience team member. If you have good experience using these tools, let me show you these tools in action. This is hard job. 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 so you can get a lot of feedback from your user, along with what they are actually doing so right now I have enabled it again. So it is going to record 300 recordings with my free package over here. So I have signed up for free. This is my basic package. If you want to go with more recordings, you can go with them. Now let's see some off the valuable that have we can collect from Google Analytics and you can see what Here This is the Google analytics stepped up from my freelancing course. And these are all the countries. My most users are from United States in the top 10 countries. Then head you can see these are the top generals from where the most off the traffic is coming from. Most of that traffic is direct. Then we have reference email, social and organic. Such is these are all that different browsers my users are my students are using. You can see chrome is the mostly used Firefox, Safadi and edge gesso. These are the top three browsers which I should be looking for. So I need toe see, or just my website or app in these brothers before launching it. Or maybe some users are having problem in these browsers or my CSS or HTML is not working. Website is not working properly, so I need to fix it then. This is user flows here. It shows you how much the drop offs were when the user quit some page or the, you know, drop off from the spade. You can see here we have different countries and the user flu and how they have been interacting with my different pages and your ins. So I'm not an S u expert, 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. Joma is yummy and algae And who I so these are all the mobile devices they are using. So I need to test. Or maybe you demean Ito test on Apple and Samsung. Their APS and their reputation is that they're loading properly and users can easily use them. So this is all about using analytics and analysis screens, according 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 to ask me, let's move on to the next listen. 54. Notification Timings and perception: Let's talk about the timing and placement off notifications are any interaction user is 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're showing progress bars or when I click somebody in the status is not instantly change or sometimes it changed so instantly or so abruptly that I didn't notice any change. So there must be some timing and placement off this notifications so the user's mind can easily perceive it. This is very important if you're a developer. I have seen a lot of times. I clicked on add to cart button and nothing happened for like one second. And then I pressed it again, and after two or three seconds delay of two or three seconds, I checked my cart and there were two items added twice. So this is really frustrating. If you are doing something like that, you are operating your card using Ajax or any thes kind of technologies, are your operating it without refreshing your page. Then you need to keep these things in mind. You need to balance the timing off and placement off this notifications. You already know about feedback, but its timing is very important. This is called the interaction timing, or how our minds are going to perceive timing, sound and any missions. If you are developing an e commerce website, try toe, show your users some loading animations or one cyclic some. Burton. You contain the text off the burden there, but she's again. So I know that I have already added this item. Toe the card. Let me share with you my story. Once I was testing a web application and it was meant for viol framing. So whenever I pressed saved, nothing happened. I got curious what is happening with me? Is it really saving something or my document is not saved right now. So then I looked in one off the corners and there I saw a very small message saved and it was appearing and disappearing with a lot of speed. So it was like appearing and disappearing in, like 10.1 2nd or maybe less than that. So I was not noticing that change. So if some changes happening out off my peripheral vision, I think we talk 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 point of seconds. Or don't try to increase it to have for one second, because after one second, users are going to get worried. Try to use very different color, very shark color and a bit different place, or a border rounded to show that it is different from the whole page. You can also use some animations like food and 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 you're the speed off your interaction or any mission so users can easily perceive what is happening at the weigh off showing juices that something happened or something change is read. Notification. Dort. You have seen it a lot of time in APS in verb. Perhaps they're using it a lot. And it is human nature that if we see something irregular, are something is disturbing. Other eyes. We try to fix it so it is human. Each you can say it is our H that we need to go to that red dot and present. So this is another patron we can use. Toe, tell our users that something has changed. Here are a few examples. This is my message board on your day. Me? You can see I have one new message and it is a circle over my profile image and I havent each I whenever I opened this instructor dashboard. I always go to this messages or anything that is new over here. Also, when you're loading something like you have seen Facebook or even lengthen, they have some loading bars. The show very default that over here you can see that there is something loading on this area. So you may you need to make sure he was using something like that. This is a form of feedback. This is another example. With Lincoln. It is also loading few things over here at the top, and you can see they have some placeholder that our placeholder bars that something is going to come up with the Lord over here. This is skill share, Dashboard. If I try to save and publish my course on skill share, you can see what 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 and art midterms on the bottom and it shows me saving over here, them should have some animation, maybe moving doors or something so my eyes can easily capture it. And my peripheral vision can sense it that something is moving and something is changing. Here's another example. This is my Jimmy dashboard for my work flow of more than representing course. And you can see here is another patron 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'm going toe try toe. You know Hobart on these. And if I go to this nuke open let me show you another example. Create new Copan. Now, if I click on this create open, you will see what interaction is going to happen. And I have clicked on this one and I'm reading now. You can see nothing has happened till now. So this is very long. You can see some how the app waas starved and there waas some animation at the top that your Copan has been created and I saw it at the top. But this any mission should be very quick And it should show you the open and the message bar near this Copen or near my interaction area. Although they have used some any mission at the top to get my attention that you're was successful in your gold. What are you doing? So I created this Copen core So this any mission should be very quick. It should be within 0.2 point three seconds nor not slower than that. So that was all about notifications, Their timings and 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 Listen 55. Anticipatory or Data-Driven Design: you might have seen a lot of websites or Web ABS or mobile labs to use there. They assure you suggested movies your suggested books are your suggested likes or your suggested such data or they give you a very accurate traditions that you really like. So this is called anticipated design, or it is going to use the data off that user based on your search text you write in the Google or the previous movies you have wash. They are going toe. See that? What is that? Users behavior. It's browsing behavior, purchase behaviour, such behavior, and they're going toe use that that are to suggest you are make the CNES for you. So this is called anticipatory design, and it uses the power of suggestion here. A few examples off anticipatory design or the suggestion with some data. Some people might call it that are driven design or data driven, decision making. Netflix Adjust 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. Next storm a state that is very popular. It learns your heating and cooling habits, and patrons and then automatically adjust the temperature off your home or your rooms according to your preferences. This is one of my favorite anticipatory design or data driven design Gmail skin shorts, and they have just introduced this new feature. When you're trying to reply to any off your emails, you're going to see three suggestions based on the text used in that email so you can see on the left side it says tanks. I will locate It sounds good and I'm available. It is the email from one of my clients and ah, in the 2nd 1 it says, What is this? What happened? Thank you for your email. It was the disk usage boarding. So I think they are looking for the email subject and also the text inside it toe make up these anticipatory design replies. So these are really cool. They are really good. They're really used the data and the user behaviour from all his emails with that client, let me show you a few more examples off for anticipatory design. Now you can see this is Netflix screen short, and they figured out that I am living in Pakistan or in the ER issue So they just changed their screen or their main skin short behind their webpage. To some off the movies, Indian movies and some off the dramas and some of the most popular things we see in this region. These are few off the suggested books so you can see from Amazon and I was searching a lot of books. I have bought a lot of books on brush Ben lettering Thes days so you can see they're giving me to off the suggested books. And I think I have bought one off them hand lettering for relaxation against. And also you can see there is service design that is based on my user experience. Also, I'm searching for speed reading books. I have bought one or two, although I am not very good speed reader. Some off. The more suggestions you can see your here recommended for you. This is the nest thermostat I was talking about, and it is going toe. See your behavior patrons and your usage patrons off their device and going toe adjusted automatically based on your behavior and your preferences. So this is all about anticipatory design, or that our driven design, if you have any questions to ask me if I get any updates. I'm going to make more lectures till then. See you take care. And by 56. CASE STUDY Project - Find UX problems in GPTools App: Okay, 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, experienced problems and principles behind them. Now is the time that you can apply their skills and you can actually find the problems. User experience problems in any app. So I'm going to give you four screens off an actual medical app called Chipotle's. I was assigned to improve this while giving them some vile frames. But I am going to give you just a simple task you need to see eat screen, therefore screens, and you need to find your 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, for mitt toe, specify the solution and the problem. And along with all this, you are going toe also mention what usability or user experience principle it is violating . So this is an assignment, and I'm I'm going to give you the solution in the next video so for that. You need to be a bit. Let me show you these four screen This is log in 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 G P's are basically doctors in British UK, United Kingdom And when they're going to log in tow their dashboard, this is what they are going to see. OK, this is the navigation bar at the bottom and everything else. Okay, After that day, this is one more screen although this had, like, 12 or 15 screens. But I'm going to give you just for this is the entry screen where they're going to type about their activity or appraisal activity that this f was basically for the appraisal off doctors. So this is started ended. How much time did you spend harmony landing 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 a rule. Are you expensive? It is violating. Oh, are what problem? It can create for years. Users then suggest a solution for it. Okay, so one line will be problem. Second will be solution. Don't forget to mention the screen name like log and screen. And the problem and solution is just a 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 reading for your assignment. Eso do submitted. Okay, 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: Okay, Now is the time for the solution. Let's see how I'm going to tackle these screens for you guys. Okay, so let's start. Okay. Now, first, I'm going to go to this sister screen whenever someone is going to give you an assignment or task. Never think that this is going to be the first screen. Okay, so resistor screen is going to be the 1st 1 where user is going to interact. So first they need to register before going to the slogging. OK, so I'm going toe give a short to this one. First thing is that Jews are user name. First thing is that they have, like, five fears. Pretty standard. But I think that the user name and email these both are conflicting. So most of the websites and most off the apse, they are using just email address to log in. So it's better that they removed this field and move this email up over here. It is also going toe give reduced a cognitive load on the user because they don't need to remember two things like user name and their email address. They can easily remember. Okay, so this is our working memory or long term memory. Okay, so we are going to reduce the Lord on s memory. They users memory. Okay, so just email. Then. We don't need toe. Use this confirm email because the count is going to be created via email and you don't need toe check this one. You can send an email and test that this email really exists or not. So you can test that with your programming or you're sending and Demi email. So this account you can check it at the back and off this app, so don't need to, you know, use like five imports. You can adduce them toe just three or two. Okay, So 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 Iike on over here are, ah hint below it like show password. And when the user clicks on it, it is going to show their password so they don't need to remember, or they don't need to check their passport again and again. One more patron, which I advised a lot and I really care for that. Is that when the user is typing The password showed them the actual password, nor the ecstatic marks. So this is a very unique pattern. New patron. I have seen Amazon abusing it. Okay, so you can just show their password in the dim, like great directors, which I was the one who invented it first. Okay, now coming to this user name and password. Okay, so here we have just to screen, we are going to replace this with email, and the password will be password. And one more thing is that if something goes wrong, I should have ah, way out off the screen. So I I don't see any arrow or go back our forgot your password or something like that. So if I am stuck on the screen, I'm goingto be stuck on this screen forever. So there must always be a part to go back or rectify my problem. So here we're going to use email and forgot your password. These are pretty standard. Okay, now, going toe next screen, it is going to be the dashboard. Okay, so on the dashboard screen on the main thing is that this is the year it is all already selected so you can add some more info about this, like appraisal year 2015 and 16 dis text just this year doesn't make much sense. Maybe it makes sense to the user. But still, you need to think that I'm best user or the user that don't know much about APS or user computers. They can easily understand what your interface is saying. Okay, so this is about hours, their appraisal, ours and credits they can also add make it more descriptive. But ours are these little toe or something like that. Okay, now, then, Mean problem here. I see. Is this navigation okay? So, bottom navigation are bottom icons over here like home CPD. These are four sections over here, and the highlighted section is very strange that you can see or hear, hear We have blue color, which is capable. So this is showing some information. Then here we have this vie color that is a mixed in this background. So I am not sure that this one is really pressed. So make sure that your pressed state is and your buttons look like but And so right now, this blue area and this blue area, they are seem so I wonder which one is. But I bet that this one is button because it it is shaped like a button shaped like a burden and art. This one is a button. Okay, so this is very confusing. It is our principal off design consistency. So if you are you this is an information. It should look like an information. If it's a burden, it should look like a possible button or on a menu. Our navigation bar. Okay, so this is all about this one. Okay, now we are going to the screen. This is entry screen here. We have started and ended. OK, so this one is optional. That's good. Okay, so most off the time when we enter date, it is ranging from one day to another. You can easily use our calendar pop up over here, so you don't need these two feels just remove them and just enter over here. Slacked date and the user is going to select the date from arrange off, date from a calendar. Okay, then we have time so you can add over here some plus and minus counter so users can track click on the plus and add hours like to oversee yards. Okay, so also, you can add over here, dropped on if the hours are like 4 to 5 hours. Okay. You cannot add a drop down over here if the options are more than five. So you don't need to have a drop down list like the extending on the whole screen. OK? 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. Okay, Also in the credits, you can also put some tapping stepper separates over here. Okay, maybe. Ah, counter step or something like that. Or maybe just a field village user can easily enter just the numbers. Okay, so you don't want them to enter anything as 10 numbers, OK? One more thing is that if you look at over here, let me zoom out. Okay? So, hair we in this area in this area, this is a bit basically my input area. OK, so, uh, you can see that this input area has no afford ins that I can enter information over here or it is a text field, so it must look like a text field. Let me show you an example. So, um, it must have something like this in a shadow. Something like this. And one more thing. Just minor detail. It is going to have something like this, a parcel over here, something like this. So using can know that this area I am going toe type something over here. So this is a very major problem with this app. And I mentioned this in their, uh, wire frames that your app doesn't show the user that this area is You need to type something over here. You need to import something over here you can see usually confused if you hide these whether he is going to kick over here on this area, this blue line on. Ah. So make sure that you have standard things going on which can specify user that this screen or this item affords this function so users can instantly see that these this is going to be an input field. I can enter something over here. So these are the two major problems with this screen. There is one more thing that there's 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 it them and just use one this skill in there or here. Then we can use some signifies toe support, our afford ins that users can know that this area, they can type something or this is an input area. The basic principles we improved over here. Our cognitive lord. We are reducing the load on the memory working memory like you can see or hear moving the fears. This is also one of the our principle that try to reduce the burden on the user or the hurdles in the part of the user barrier to the entry. This is the entry point. Our AARP register is the entry point. You need to make it easy as a breeze. Users can easily enter it. Then here we have the user name. We just remove this one to replace it with email. Okay, So, uh, we added how we can remove or recover from enters. So this is our lesson. Designing for others. You need to add something so users don't get caught in tow a loop. Endless loop. Okay, here we have something that is called patrons. Okay, so uses expectations. So, user, if user is expecting a button, it should look like a burden. Okay, so your app should always distinguish between primary actions or second reactions of primary Burton, second re buttons or the information. So if it's just an information, it should look like an information. OK, then, on this screen, we have also removed two fields into one, and we made one feel. So this is cognitive lord or working memory. We have removed the Lord on the physical activity and mental activity off user. They just need to tap once and select a date. That's it, then. Here we have some afford ins. We use some signifies toe pronounce or make other afford insa parable. So user can see that this action is possible with this item. Okay. So he can enter inputs over here. So this is a solution to this as these four screens, I hope, um, 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 off a nap. I have improved, and ultimately you will be giving them the vile frames. Improved wire frames off this one because they're easier to generate a used balsamic markup for that and that's it. I am 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 and a lot of people. They are curious about this. They wanted land board information. Architecture is now information. Architecture, basically is how your user is going to find specific information on your website, all your mobile app. So if someone is looking for some product specific product, I'm looking for a camera on Amazon or WalMart. The whole part I'm going to take from searching and then finding the results and then filtering those results down toe. The specific camera I need is all about information architecture, that how you have built the whole information architecture off your website, the whole house off information off your website or mobile. No, what you can do is you can create categories, sub categories and how your pages are linked together. You are going to link your pages how your breadcrumb trail is going to lead toe that product. If the user wants to go back, whether he can go back to the first page of the page back from the page right now is on. So all these questions are going to be answered while you're designing information architecture. Now, how you can design that information architecture. There are very simple tests. I'm not going to go into much detail, but a simple test is that you let your users you let your user right the whole categories off the website. So, for example, if your website is about jewelry, you are writing bracelets and rings or something like that. Maybe your user is looking for a category like Christmas sales are summer sales something like that. So you need to just yours uses. For that. You need to let your users try your ah few sketches or few prototypes. Simple prototype. So what you're going to do is just create a few sketch sketches off your first few pages and your navigation and your, um, sub categories off your website and such, but and let your user try to find something and see whether he's going to use such bar. All he tries to find some specific category. So, for example, if I'm looking for camera, which is DSLR camera, and I don't know the term that DSLR cameras are special or something like that, so I just know that I need a digital camera so rather than, you know, getting are very big category off DSLR cameras, which the term I don't know. You can just write cameras or like digital cameras. So if someone tries to click on it and then there's drop down navigation and with each subcategory, like digital cameras, middle s cameras, you show the image off that category. So users can instantly recognise that this category or I'm looking for this camera. This is the image. Oh, yes, I saw that image. So this is how you can in hasta information architecture, if you try to shop on Amazon, are our Walmart. You can see that their search reserves, when you try to type in something or try to find something there searches er's are very accurate. Even if you mistyped the spelling, they are going to be very good. Such reserves when you have such a czar, speeds came back and then the filtration and filtration process. This is the next process in information architecture. You, Wanda, 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 toe, um uh, you know, rank them by ratings. You want all five star rating products. So this is also part off information architecture. Er that how use user is going toe find and filter the information he really needs. So I'm going to show a lot of examples in the next lesson, So stick with me. So the next lesson to see some more examples on information architecture, I'm going to show you different parts and different portions and ah simple you. If you want to improve any websites, information architecture, you need to sit with your users and try to give them tasks. So disability 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 off the product. Then it's named subtitle and then all the different specifications off that product than the reviews. So what user is looking for? Whether he is really looking for the reviews, he's going to read the reviews. First, you are going to move the reviews stop in your information hierarchy. So you are going to build that this information is most important, and this one than this one. So this is also part off information architecture. I hope you have learned a lot about information. Architect. I'm going to show you for examples in the next lesson, so let's move on to the next lesson. 59. Examples of Information Architecture (Best practices): No. I'm going to show you some off the best practices and a few good examples off information, architectural and how the information is, you know, designed on different websites, navigation bar sub sub navigation bars, categories. Okay, so the first website I'm going to show you is this interim Indorama and you can see at the top. We have different icons, and then we have sub menus with that. Okay, so shop there, store home. Her friend used business, print. And so this is, I think, universal navigation. It is going to stay over here. Whatever. I search on this area. So this area is going to be changed on the bottom. The top navigation is going to be staying here. Okay, so these information, these are really necessary. They should be on the top of each page like this. Help Ling's this phone number. So things like that, then I think in the previous lesson I showed you that deal. You can see over here in the top. They have deals. Then they have again over here featured deals. So it means that the users are mostly looking for deals. Okay, so that is why they have shown importance toe that. So there are two links toe that 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 over over it, you can see there are different categories off cameras, lenses and such and such. So let me go toe one category that cameras. And here we have. This is another Ah, form off information architecture. Which is this showing these images with different categories. You can see what Here? Middle s cameras, DSLR cameras, additional point and shoot camera accessories. That s DSLR. OK, so these are all the different categories also there showing the same categories over here on the left. Then we have more filtration, like featured brands, and ah, then we have these bestsellers. Okay, So this is how this website is working. If we go toe Amazon, it has a bit different working Badran. Okay, so there is a lot of good filtration over here. Okay, So if I goto the Acela cameras something like that. So you can see I mistyped misspelled this DLS our camera, but they are going to show me the reserve. Send for the SLR camera. So if I go to this DSLR cameras you can see or hear There are These are the results and now you can see on the left There is a lot off filtration over here. This is also part off information architecture can run for Those days are different and categories. OK, you can see See all 31 departments than it is showing me We want international shipping. I can refine my search by these free shipping brands. I can just click. For example, if I born just a canon camera, I can click over here and these are all the canon cameras, then optical zoom. So this is there are a lot off Customization is for my such and ah, why they They are here because most of the users they're not going to, you know, such like, 2000 records over here, so you can see or hear Still, I have 20 pages so, like, 200 more than 200 records over here for different products. So if I want to, you know, lower than down, I want to be over here like, um, just five stars for an up star, so I am left with, like, still 20 pages. Okay, so let's go toe something else. So free shipping by Amazon. So I'm filtering down my reserves. You can see or hear. Still, there are 20 pages. So you can father go down by this like that and it is going to show you less pages. Okay, so I don't know how many reserves they have returned. OK, so these are the results on the top one leg, 16,000. Okay, so 101 16,000 records. So there are too many barks 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 overhead Like the order items sign in guard. They are going toe test the users for these naming these links and what links should be there. Ok, so you can see or hear here They have a few more links. Okay, so if I go to this twice category, they are also showing the category with an image. This is really cool. I really like it. It is very easily recognizable. You can see patrons and images. You can recognize them easily. The images instantly. Okay. So you can see what had new. Then we have wise. And on the left side you can see again. We have filtration. So by age, by gender. And if I go to this 8 to 11 years old. So it is not showing me. Haman results it return, but it is changing the page for me. Okay. Okay, then we have more. These mega dropped on these accord mega drop downs. You can see we're here. So they have some images categories, archives. So this these are for very big websites. Okay, But I think that most off these websites like Amazon and ties they are not using it because their search engine or they're such bar or their search reserves is very equity. Okay, now another website Very simple example. This is Intel website and ah, you can see they have very few links over here, so it is easier to choose. Sport is very important. I have heard a story that they ran. I he works. Ah, his ability tests on the customers and found that the support on Intel was used most of the time. So they highlighted it. They made it at the top. Navigation. OK, then we have products. So if we go toe products, you can see or hear, hear. We have different products processes and still you can see there are images with different categories. So this is very nice navigation. I really like it. Okay. So you I can go back. And for example, if I want to goto a networking and I Oh, these are different links. Okay, so this is called context based links. Okay, so I am on this page I seven processors and you can see later toe this item I have selected . There are few more links. 123456 That are all about this product. So this is called context pieced navigation. OK, so you can see overhead. Okay, Now I'm going to show you some more mega menus or here These are used in magenta. Oh, this is another ekulama solution. You can see over here. So images with some links, 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, you know, finding the text. But they should be very could. These icons should be very good, so they can be easily, you know, recognizable on. You can instantly see that this icons means a bedroom. You can see what? Here. Then we have another this speech I'm going to share with you. There are a lot of mega menus over here. Okay, so this is a very nice website, and I really love their navigation. Let me show you. So if I hover on kitchen, you can see kitchen sings garbage disposals, bar faucets. So this is a very great example off how the information architecture should be designed because these images are easily recognizable, they have fewer categories. 123456 So no more than seven items over here. This is create usage off how we are limited in our memory working memory. So we can easily scanned these. This is a best example I have seen since this build dot com, and I really love it. Okay, So another one you can see. There are great icons, simple icons, bedroom living areas. This is slide rubes Dorsey co dot UK and this is create example off this navigation menu. Okay, so these are all examples off information architecture. Now I'm going to show you This is called a guard sorting. This is simple test. You just put your links names off your website on a paper like these and you tell your customer or your user you are testing with so select Oh, are such something. OK, so if he likes that I really wanted Tosi the fancy frocks. So this website waas about frocks. I was doing the research on one off the users and you can see on the left over here there I have written someone collection. So what happened is that my user she was a girl. She was looking for summer collection rather than party dresses or casual dress Is offensive frogs so out off party and fancy frocks. They were also almost the same wording. So she chose this one. She said that fancy frocks makes more sense rather than party. Just also I showed how to search for different frocks and dresses. She likes Okay, So she tried to write Barbie justice. Which waas? Not in any off my categories. I had Disney dresses or princess dresses, but not Barbie dresses. So this is one category. I thought that I should make it in my website. Okay, so this is going to be in my next course. So all this research and how toe 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 an AECOM, a start up, a simple e commerce startup off fancy dresses or some some 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: No, we're going to do a little exercise which is called five second Test and what you're going to do is it's a usability test. You need one person or maybe 2% from your family or friends and what we're going to do is just show them the first page or the first few pages off your website or mobile app and show them tow them. It is just for five seconds. So show that page or that ab screen for five seconds and then ask them few questions after that. Okay, So high debt 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? And questions like What do you like about this website? What do you dislike about the design on? If if if this website is about an e commerce website or ex intonation website, you can ask them questions like, would you like to donate something? Why this website? Now the first question is what they remember about this website. What this website does is the basic question. This is the main question off this five second test and the 2nd 1 is to check their trust about this incredibility off your website or app. So the second question is whether you would like to do this mosque on this website. So this is a very basic test 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. So do this five second quick test with any off 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? So this is a very basic test. You can do it at your home or in the cafe, so I hope you have learned a lot and you would try to do this. Five second test again and again. See you saw on in and in the lesson 61. What is Agile UX? Introduction: today we're going to talk about Asia. UX and Lini works now. What these terms are, they are basically used in software houses and we're software Development is the main purpose and they have to develop something working in rapid succession or very rapidly. Now, this technique is used toe, create working prototypes or working deliverables toe the customer early on s so they can test it early in real situation. Know 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 involved a person who has more knowledge about juices. Now this customer is going toe like different features and different customer stories that this is going to happen in my app. Person is going to do this and do this. And then developers are going toe extract functionalities and features from those customer stories. No, those customer stories are basically the base off their planning. So they are going toe, you know, skim the planning part a lot now 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 and they're going toe Paradies different thes functionality and features on the basis off what is needed the most. Okay, Also, they're going to assess what is a time and cost to develop each picture. So they are going toe, you know, rank them with difficulty and time. Okay, So what they're going to do is they are going to create a minimal, viable product which is called M. V P. You might have heard within just seven days or 10 days. Mostly they're going toe. Ah, use Prince. This is the Sprint is basically their self one week development cycle, and they're going to rapidly develop that software now. Then they're going to give it to the customer and then the feedback. The customer is going to give them the feedback and they're going to use that feedback toe . I trade again. Now, what they do is they work, function by function or feature by feature on that product. And then they combined those feature to create one big product. Now what they do is they It is just like you are planning for a house in conventional user experience design. You're going to force plan. You're going to create a blueprint off that house, and then you're going toe plan the structure and everything. But in the age, all you ex, they are not going toe create blueprints or structures. They're just going to start building bond room. Okay, so they're going through Bill. Different rooms rapidly. Okay. You want the kitchen? This is the kitchen. Customer says Okay, I want this over here. Over here. Okay, so they change it and they finalize it and release that kitchen. Okay, then they're going to create other rooms and they're going toe. Combine those to make a whole house. So this is how the conventional using experience and a judge you extra lean ux that differ the lean ux or a dangerous They are advocates off that they should not waste their time in design documentation. So they want a tangible product. Are 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 a gel ux. So I just planned their wire frames eso. What they did is they took those wire frames and they gave that it to their developers. And they had the engine for running that game already compiled. So they just create a dummy interface and they just lost it. So this is how these age I'll ux cos they implement in their software houses. Their cycle of their development cycle is very fast. Now, why do we need these? A judge works technology and things are changing rapidly. So, for example, if you are researching for a game for, like three months or six months, you took six months interview users and everything and suddenly the new engine off the US our new engine off that kind of game has launched. Our people shifted their focus to that. So all those that research or that interviews, they're going to be this. So what they did is they just keep on eye trading product and tested with the users separately and, ah, try toe. I trade it and try to reach the goal off the customer and the user in minimal time. So this is how this UX conventionally works and e j u x the different they're different. Now let me tell you some of the problems with age and UX No Intel, ux. As you know that they start building rapidly, so there will be designed inconsistencies because they don't work on the design or the interface off that they just start building it. So there will be designed inconsistencies. Then the second problem will be team collaboration. All the customers, users, the marketing department, every everyone or one person from that department should be present when the team is making the sprint. Okay, so the seven day spring I have read the book. This is a very good book, Sprint. And you can say that they are going to use that seven days to develop a working prototype or dumb importer type of functional prototype off that software's by using the knowledge off the customer, the marketing department and all the persons that are, you know, the stakeholders in that US process. They are going to be in one room, so this is very important. They should be together for the whole week. So if you have your team that it spread across the whole world, you cannot use age and ux that good. Okay, So these are different problems that are, you know, later, toe. This age I works and I hope you have learned. Lord, I think this lecture is already getting long, so I will leave it to you. If you have any questions to ask me, let's move on to the next lesson.