User Experience From Scratch: How To Become a UX Man | Klimentij Bulygin | Skillshare

User Experience From Scratch: How To Become a UX Man

Klimentij Bulygin, UX Designer & CEO at UXMAN Design Studio

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
24 Lessons (2h 12m)
    • 1. Module 1: Introduction

      1:19
    • 2. Module 1: UX explained on eggs

      4:13
    • 3. Module 1: The UX man's dilemma

      3:30
    • 4. Module 1: The UX design process

      5:57
    • 5. Module 1: A preliminary briefing session

      5:04
    • 6. Module 1: Takeaways

      2:04
    • 7. Module 1: Practice

      1:12
    • 8. Module 2: Why personas are that important?

      7:30
    • 9. Module 2: Workshop

      14:29
    • 10. Module 2: Takeaways

      1:50
    • 11. Module 2: Practice

      1:02
    • 12. Module 3: Principles of information architecture

      10:14
    • 13. Module 3: Workshop

      13:43
    • 14. Module 3: Takeaways

      1:52
    • 15. Module 3: Practice

      0:37
    • 16. Module 4: Advantages and styles of a paper prototype

      4:29
    • 17. Module 4: Workshop

      15:25
    • 18. Module 4: Takeaways

      1:56
    • 19. Module 4: Practice

      0:30
    • 20. Module 5: The value of an interactive prototype

      5:19
    • 21. Module 5: Workshop, part I

      10:03
    • 22. Module 5: Workshop, part II

      16:30
    • 23. Module 5: Takeaways

      2:05
    • 24. Module 5: Practice

      1:35
17 students are watching this class

About This Class

d50f3e86

Learn UX through practice, create your own user-centered interface prototype in Axure 8 and become a UX man!

Hi! My name is Klim, and I’m a user experience designer and a founder of UXMAN Design Studio.

The process of UX skills mastering contains 90% of practice and just 10% of theory. At the same time, currently available online UX courses mainly contain only theory which you’ll quickly forget due to a lack of practice. As a result, this learning process may seem more painful and boring than it is.

So I created my own, unique course. On this course, you will learn through practice how to build effective UX design so you can jump-start your UX career.

At the beginning of this course, you will choose your own project, and you’ll move it through all five design stages from briefing to the interactive prototype which you can later use for your future portfolio, or even to start a real business.

So If you feel like that’s what you need, just sign up and let’s start it right now!

Transcripts

1. Module 1: Introduction: uh, hi. My name is clean and I'm a user experience designer and the founder of York's Man Design Studio. The process off your skills mastering contains 90% of practice and just 10% of years at the same time. Currently available online UX courses mainly contained only theory which you will quickly forget due to a lack of practice. As a result, this learning process may seem more painful and boring than it is. So I created my own unique course on this course. You will learn through practice how to build effective UX design so you can jump start your you X career. At the beginning of this course, he will choose your own project, and you will move through all five design stages from briefing to the interactive prototypes, which you can later use for your future portfolio or even to start a real business. So if you feel like that's what you need, just sign up and let's start it right now. 2. Module 1: UX explained on eggs: There has lately been a lot of talk about user experience about prototyping interfaces. It's becoming transient fancy. But what does it mean to you? How do you understand what you X actually is? I asked quite a lot of people about it. And you know what? I felt to get in to similar answers in this course. Lt shoe how to design user interfaces. But before that, I would like to help you to get a clear and deep understanding of the most basic things. Do you know what's dead? Well, actually, it's an interactive user application. I mean, seriously, look, this service has an interactive user interface with which people in tricked took says the content they're interested in, By the way, one thing clear to see that the user interface is kind of an intra layer that those users to manage some interest service or app to achieve their goals while the content is potentially useful for user feeling off the service. So where is your ex? Hear you ask. Okay, look, In general, there is an international standard. I s o 92 41 to 10 which defines you X as a person's perceptions and responses that result from the use or anticipated user product system or service. Please know that you X is not a process off human computer interaction itself. It's not a characteristic offer product. It's not an interface. It's not His ability. User experience is on Li about the perceptions and responses off a user himself. In other words, you X is something that is insight. A user's head. Now let's see how your experience looks like on the example off our interactive application . What users due to excesses, content, what they experience and how they respond to the Epstein back. - I believe you already have figured out that this started just watched, used to happen with real life services and applications. Each person has his unique background, his experience off using the similar products. Developers will never believe if they realize how many ways users can figure it out to solve the same problem in their products. At the same time, they all have were different. You x sometimes generally good, sometimes not. Typically, no one wants to product with bet you X and soon as it has more customer oriented competitors. Well, it may not be the only reason off a business failure, but definitely one of the major wants. On the other hand, products with good jacks are much more likely to take off and make their investors and founders reach. Apparently, you X can become good just by itself. You have to use a special process, which is called UX design. It's a process off creating and approving user experience through user interfaces. That's what you will learn during this course. You'll learn how to shape the required users perceptions and responses, making the product user oriented on the one hand and profitable for business on the other. 3. Module 1: The UX man's dilemma: the U. S. Design should ideally be done by especially trained you X men. This work is based on two pillars. Empathy and understanding of his client's business. So empathy, empathy is a capacity to place oneself in another's position. You X Man relies on this skill to see the world through his users. Highs You X Men makes an effort to forget his own experience temporally and kind of replaces it with goals, needs, expectations, fears and background of this user. Better he dalit stronger. His empathy is, and so more user focused. The final interface happens to be the U. S. Men's empathy works throughout all the design prose is the second component is the understanding of your customers business. You have to figure out what business girls opportunities and limitations are. We will elaborate on this in the episode about customers briefing in general, the UX designer is a kind of a double agent who is responsible for fighting for both user and visas at the same time, and they realize the main difficulty of this profession. The U X men's dilemma. The girls off a business and the girls off users so often contradict each other the designer has to constantly give into the user mostly to the detriment of business. And he also has to give into business making less user center interface. Let me explain it on a real life example, one of our customers is engaged in collecting and analyzing the information about new real estate properties. The primary source of their income is ads on that website. For the last 10 years, these adventurous collect these portal, and it became unclear where the real and honest information and what it's an Versant can you imagine 40 feet to Ben Harris in the page? Surprisingly, people Duke Leak and the company are as well, but computers are already here now. There are a lot more user friendly interfaces on the market, and our customer felt the significant traffic downfall. And it's kind of interesting thing. Turns out, on the one hand, there is a user whose primary goal is to choose an apartment based on objective and precise parameters. On the other hand, there is a business which is aimed at an entirely different girl to sell as many at clicks . It's possible, so service, which is in theory, should help the user literally put spokes into his will. Unfortunately, it's quite a difficult situation. As you can see, our your ex man is caught in the crossfire again. On the one hand, some frustrated users do not reach their goals and no way to competitors. On the other hand, there is a business that wants more money from ads. This dilemma This conflict of interest is probably the main challenge of the U X Man's job , but a good designer has to dig deep. She uses public research results, successful competitors, ideas and his own experience to persuade the customer to use new, more efficient models off interaction, monetization and business logic. And only then you X men moves forward to the years design itself. 4. Module 1: The UX design process: So, with help of empathy and visas, understanding our You X Men begins to greatly transform his customers idea and requirements into a user interface. But turned up with a high quality product, he has to follow a certain standard process. This process includes four distinct stages. The U X Man has to go through them to create a decent user interface, user, portrait's information structure, paper prototype and interactive prototypes. Now let me briefly describe each of these stages, so use a portrait or personas. The U X Man starts his work with a small study of the potential product user audience. Haven't received a general idea. She breaks these large audience into several distinct segments and crazy character or persona. For each of these segments, this persona represents a particular average user profile for each segment. Off target audience, usually using table for mint, The X Men creates general concept off this character. How old is he? What does he do? How often does he use certain gadgets? Why does he need to use our product? And most importantly, what girls is he aimed at in relation to these product and what girls businesses aimed at in connection with this user look, this pressures were important. Old decisions taken at the next design stages are dreaming by this purse onus. Ideally, this table should be used not only by the U X men but also by the in China product team, designers, developers, marketers, etcetera. Then the U X Men turns the girls off the user and business into an actual interface functionality and shows it as a mind map. It's gold information structure. It describes. Which section doesn t I contain Which pages should be there in the sections and which functional blocks should be shown on the pages? This skin can already be called a prototype of the interface, just a very low resolution product. The main advantage of the information structure is a miserable cost of changing the product . For example, imagine the product team decides to add a payment and withdrawal functionality at the interactive part of that stage. It would take a few days and even more at the pixel perfect design stage. When you work with information structure, this improvement is a question of just a couple of minutes. Then you expend increases resolution during the information structure into a paper president So in the previous stage, it looked like in my nap off text labels like profile notification settings, payment data and soul. Now all this stuff turns into rectangles drawn on the paper with a pencil. A paper prototype can easily synchronize the product division between a customer and a designer much faster and more accurately than personas or information structure. After presentation and approval of the paper products, the Axman starts working on the interactive prototype without fear of going the wrong way, because the customer has now certain clear expectations of the final result. And now Jackson approaches the last and most laborious stage, an interactive prototype creation. By the way, the 1st 3 stages usually take no more than a week, while the interactive prototype can take anything from two weeks after several months, depending on the product complexity, such a big time costs a caused by the fact that the designer constantly has to face a lot of problems at this stage. Is it worth placing the main meaning of the top or in the lab? What status is should the least elements have? What happens if the users bank cancels the payment after the subscription has already been activated. How should buttons be named? How would the page look like when there's no he's your data on it yet and so on. There is a very high level off uncertainty, which persists even after you X Man has taken into account all the personas and assembled the first page. He has to constantly discuss with developers the possibility off implementing some particular fashions during such details. Prototyping. There was a lot of emergent issues which nobody considered before. Now let's see where our UX design ease in the global process. Off product creation. So here is a visual designer coming into play, not distracted by business logic and functional requirements. Should uses all the U X men's deliverables to create a unique visual language of the product it picks the right color stands, forms, creates icons and illustrations. This part of the global process is called visual interface design or you I design or pixel perfect design. Then they could be a nuptial stage of creating product specification. Depending on developers preferences, it may be necessary to produce such documents. Is functional and nonfunctional requirements, data requirements that scenarios and so on. These materials are usually made by a dedicated specialist called business analyst or by U X Man himself, Then all the deliverables from the previous stages transferred to developers. At some point, a public product release shows up and the business team starts to collect user speed back after a while, there is both issues accumulated, or even a needle and next complete redesign, and our U X Man takes up the job again. 5. Module 1: A preliminary briefing session: Okay, so our hero, you X Men seems to be ready to start working on a new project. She opens an empty spreadsheet to start working on personas, but he suddenly realizes that he actually has quite a little understanding off. Who's going to use the product, Why they will use it, and how will the customer's business benefit from it? Also, there is usually no any product documentation prepared for you. X men In general, there is only one way out to go to the customer and puzzle him with this four simple questions. Who is going to use it? What does their pain? Why will they prefer this product? But no, the competitors want. How is the customers? Vision is going to benefit from this product Now let's dive into the details on each of these questions. Who is going to use it? After discussing this issue, The X Men has an initial idea about the target audience. The customer usually starts with trying to include the whole population of the planet to this persona. But you X Men knows that if you make a product for everyone, there is a big chance you will end up with a product for nobody. Therefore, he continues to ask leading questions and eventually finds out that the product should still be primarily aimed at, for example, 25 to 35 years old. Couples with two kids. No, that better already. And here comes the time to ask, perhaps the most significant question. What is the users? Pain? If you were given only a couple of minutes to talk to a customer, it would be worthwhile to confine yourself to just these. One question. When the client starts to talk about user Spain, it becomes so much clearer about users about business, girls and opportunities and even something about the future interface. For example, imagine it in the service that helps parents to find after school classes for their Keats and prepared a life. Just ask your customer about the abuser Spain, and that's what you will likely hear. Both parents work load, and they just don't have time to drive around the city trying to find the best after school classes. And then it's more comfortable for them to pay online because they used to it. Here, you X men realizes, OK, it means that there should be an ability off a quick search for classes with location, Children, the ability off a usable classes comparison. A user should also be able to book classes online and pay for it cool. The next question is way. Why do these people would prefer exactly these product rather than the one that the competitive ER has been running for a long time? Here is the moment when you X Man has to be prepared for the phrase which ever second client says this product doesn't have any competitors. In fact, there are always some competitors in the market, although sometimes they're feature said, is not identical to what your product willow. But rest assured this users will already figured out how to reach that girls, and they're mostly fine, even without your product. Thus, by asking the right questions and explaining his fears about the high probability off competitors existence, you X Man finally begins to realize what exactly is the unique business offer and the reasons why this people want to use the product become evident. For example, unlike compares in our service, there will be an expert independent classes rating an online payment interface with the ability to keep payment details. That's already something. The last question is not that important, but you X men should understand how exactly customers business wants to benefit by creating this product. Most awful, it effects the choice of the monetization model. For example, if a financial institution wants to attract attention by creating a helpful tool for easy currency rates, trekking it makes sense to give it out for free. And it's a war effect to stimulate a quick popularization. If a customer has an Abeel, that side builder, which is supposed to be his only source of income, it's important to say the right pricing providing extended trial period so that users can get involved and completely moved to any u petrol. So now you X Men understands who will use this product. What is their pain? Why they will prefer these product to what competitors offer and how is the reason is going to benefit from this product, and that's it in the vast majority of cases. Unless, of course, it's not about specific B two B services. This information will be pretty enough to start the UX design process 6. Module 1: Takeaways: So now you're almost done with the first module, and there's somehow work for you to do. But before that, I would suggest to go over the main thoughts of these introduction resection. User experience is a person's perceptions and responses that result from the use for anticipated use of a product system. Assad's in other words, you X is something that is inside a user's head. This entire courses aimed at fishing you to shape the required users perceptions and responses, making the product user oriented on the one hand and profitable for business on the Adam empathy is a core element of the U X man's job. It's a capacity to place oneself in another's position. The other core element is the deep understanding of business goals, abilities and limitations. It often leads to aux man's mental conflict at first sight. It seems impossible to make both user and business happy at the same time. Therefore, you X Men pro uses public research results, successful competitors, ideas and his own experience to persuade the customer to use new, more efficient models off interaction, monetization and business logic. There are four Sequent stages in the U X design process using portray its information structure a reporter. That and indirect. For that, the user interface crystallizes on each stage, changing its shape and acquiring more and more new details before starting the design itself. You always have to ask the client this four simple questions. Who is going to use it? What is their pain? Why will they prefer these products? But no the competitors want, and how is the customers reasons going to benefit from these products? 7. Module 1: Practice: so now is the time to practice. During this course, you will be creating an interface for your own project, moving it from the concept to a fully interactive pro today which you can even use. And you're fully, by the way and so that everything will work out right for you. I'm going to show the example off what to do before each of your practical tasks. Starting with the next one, I'm going to show it on the same educational project. So first I show you what and how to do and explaining details why this is so end. Then you repeated by yourself with your own individual project, and right now your task is pretty easy. You just have to choose and reserve one of the individual projects and then conduct a briefing section with your hypothetical customer. This video is followed by media file with detailed instructions on how to exit the coursework in space, have to book an individual project and how to simulate a briefing session. So go ahead and just do it right now. See you 8. Module 2: Why personas are that important?: So you collected the preliminary information about the product and the customers business. You very roughly imagine who might want to use this product and what is his pain? And do you know what is going to happen if you just go through the right now and start creating information structure and prototypes? You definitely will forget about someone. Some super important feature might simply never appear in the product. Or you will just thank you, you I with the stuff nobody needs. And then there was a visual designer coming killed just calorie. A prototype based on his own taste, and you'll end up with your expense center or unusual designer center product. Probably this is not really what you are looking for right. Historically, people tend to create new products primarily for themselves. I mean, those first inventors just considered themselves as a target audience, which was to some extent fine. I think that's why they didn't become mess scale it Waas, the ingenious inventor, always comes first, and then the one who takes into account the rial users needs and just makes his fortunate. The thing is, inventors are the only ones who actually can afford to create products that are not user oriented because there is no competition yet. But for other companies taking percent of seriously, it's almost always the only way to survive. I imagine it's eighties, and you have to create a camera for everyone. That's what you likely end up with. It's an excellent camera, very reliable and community. But wait, let's see, what do this real users want? Take, for example, a 3 to 5 years old housewife. She does not like to figure out how those new gadgets work. He just wants to take a picture off your grandchildren all. She needs us to click on one button and take a picture. There's also a 32 years old professional photographer who needs a lot of advanced settings . His ratings sort everything out for a sake of obtaining high quality pictures. And, of course, the hipster his 28 he just wants to be stylish imprinted. He doesn't even need to take pictures, actually. Okay, now, Emei Ging, the big companies started to manufacture your cameras. Notice these worth computers, but the cameras look exactly the same. Now imagine our users go to the store and get a camera and what happens next? The house wife is really confused. She press the shutter button and apparently didn't set anything up. And after the development, she found all her pictures overexposed. The photographer figured out how to use it right away, but he doesn't have old advanced settings he needs. The hipster seems to have become more stylish. But then the same cameras have appeared all around and now collects personality. It doesn't have a unique gadget anymore. Everybody owns the same cameras. As a result, we got a pretty average product, and we didn't manage to satisfy our user settle. But what if you start creating a product for specific characters? They're Sonus getting maximum priority to their needs. It is how the camera manufacturers work now. As a result, the housewife gets exactly what she needs. One large shutter button, and she gets all her well exposed pictures without any questions. The photographers needs are covered by a fundamentally different product, a costly camera within insane number of settings and excellent quality. The photographer is also pleased with the hipster. Everything is simpler. It was just enough to wait for the old cameras to become so old as to be called retro and wila. The hipsters heavy. You'll probably not be suppressed when I say that it's all the same with user interfaces. Let's take once again our House y persona and imagine what kind of future experience you would get if you tried to download and install a program by herself in Windows, for example, Skype. Usually it's pretty challenging for the beginner even to find the installation file after downloading. But still, if our house wife succeeds, Chill certainly phase a lot of disturbing questions, which the installation wizard will ask her. The answers to these questions I needed on Lee by the program itself, when the only real need of our 56 years old housewife is just quickly to install Skype and finally called her grandson, Can you say these you access user center? I don't think so. And here was nothing. Store. No questions, no doubts. Even if the Aiken is not direct, one can just click it to install the application. The Users girl is just as quickly as possible. The user is satisfied. Let's remember the old Microsoft work, and that's of small another's. I can bring the miss turn all over the place. Probably. There were a few users, coaches they goes faster with this year I. But the majority, including our house wife, was just horrified by this experience. However, in recent versions of Ward and You, You, I, Petr has appeared, they call it Ribbon. It allows you to separate these tone off controls into some groups so that each group could pretty well covered the main user scenario for each person. Now it's enough for our house five to learn just one main tap off this ribbon, and she just fine, even without checking other types. Another interesting example is social networks. I've been following the Facebook you I improvements for many years, but the sad truth is that they don't even try to make it, anyhow, more user friendly, this interface is focused only on one thing. What could we do else to sell more at leaks? Therefore, the Facebook team on the country next extra ordinary efforts to confuse the user as much as possible. So he begins to wander around the Web site erotically, bumping into ads and thereby yielding the income to shareholders. And here is an example off a social network that is, to some extent user oriented, simple aesthetic navigation, one film content, clear timelines, sort order, fewer ads, more useful content. You may be thinking now that person is another important because Facebook continues to earn billions pretty much ignoring its real users needs. Well, it's simple. Facebook is an exception. Products like Facebook were historically the first in their niches. In real life, all the services that you will create for customers will likely have already well established in the market. Competitors in this case right user portrait supported by a decent user. Research is a necessary condition for this product to survive on the market. 9. Module 2: Workshop: I'm going to show you now how to create effective personas from scratch. I'm going to work without trained project. It's a delivery. Service them up. Let's next late say that the customer wants to create a that application where some deliver service managers can dispatch a group of careers. Also, the customers showed us an example off competitors product, which somehow does these. But it's quite complicated to set it up, and it's not really user friendly. You're in the customer's briefing. We collect answers to Allah. Four main questions. Who will use it? What is their pain? Why this service is better than the competitors want and what does the customer's business eventually meet? It turns out that potential users somehow connected to drivers not only managers of dedicated delivery companies but also all the service businesses. Christine's off plumbers is tolerance. Electricians visit several objects every day. Also, the customer mentioned transfer and cargo transportation companies. The biggest pain of these people is that the traditional way of despatching, I mean, when they call drivers and speak to them, get 10 efficiency as soon as there are more than a few workers and others. Some managers also admit that automated systems could significantly optimize logistics, but at the same time they consider existing solutions too expensive and difficult to set up and use. Moreover, some users already have automated systems, which partly but not completely so, for the problem. But they afraid to buy and install new products because of possible integration problems. The customer beliefs that the product will jump, start and become famous if the interface allows users to do it really fast and easy set up and then immediately start working if the tech support is ready to help users with their current issues 24 by seven and if the product is versatile enough to cover the needs of several logistics related departments within the same company. And finally, the last question is, what does customers beat us actually want to get from the start up? It's all pretty standard here. The company wants to quickly release and minimal viable version of the product, and the P tested on a small group of users make sure that the need for such product actually does exist and fund raise some money to improve the product and scale it to a huge audience. That's it this data is quite enough to complete our per Souness. And since this document will be created not just for the sake of creation but for the product in members could actually use it. It should be relatively compact, clear and easy to read. Practice shows that the regular spreadsheet is the most convenient format for a personas description we can use Excel for these, but I prefer cloud based spreadsheets because of the benefits of collaborative editing and discussion, which you'll want to have later. When your customer starts to ask all these questions, okay, lets go. So first we creating the header off our table. It is standard and doesn't usually very from project to project. First of all, there should be some short presentation off the character so that the members of the product team can quickly find it on the least. Just take a photo and the title the target audience segments name, for example, the owner of a small service company. Then comes a small but capacious description of the character Here. You can give him some name, age, tell how he uses a computer and what he likes. Next. We describe the pain. If users eight more details towards a particular character. After that, we least what exactly this person would like to achieve with this product, then the same thing, but only on behalf of the product as a business. How the business off our customer would like to benefit from this user and the last two comes are a brief description off the first interaction scenario when nothing is configured , when all the lists are empty and the user is lost, and a short description of the scenario for some future interaction. For example, the hundreds a couple of months after the initial use of product, when the user has already become sufficiently experienced and has customized everything in the U. I to his needs. Now we have to determine which user portrait's our worst. Describing the customers said that the service should be universals so that you can create a least 100% us, but it obviously will be a useless job because no one will even read such a large spreadsheets. Usually, I recommend to do no more than 4 to 5% us, but such ones, so that each of them would give you information about large and significant target audience segments. It's kind of an aggregated representation of these segments. Say we have mangers off pizza flowers and iPhone cases deliver services off course in real life. They are treed, very different people, but they're likely to have common pain and common needs. That means their users narrows will also be similar, and so the user interface for them will be approximately the same. That is to say, we can safely combine these three characters into one persona, and better. It represents more one of those three guys who are most likely to have less computer skill and but who will be more frustrated with luring in your product? Say it will be the delivery service manager in a large flower shop. Also, the customer mentioned the category if users commanded in place that move from side to side during the day, it also could be, say, a supervisor off a group of bank careers could take a bunch of create Carson morning and then delivered too many applications during the day, and many other users with similar scenarios. But there is no need to describe them here will just assume that we will have aggregated them in all these one persona Khaled service company manager. There's one more segment with a different pain needs and scenario is transferring cargo services. Guys. Let it be a large company that provides transfer services for corporate clients in big cities. So we've got the names of the characters to fill the remaining fields. You want to get more information about this people. One of the ways to do it is to use social networks where you can filter people by profession. Also, it works great when you find your target user in someone from your friends, or ask your customer for contacts que probably already had this time to get acquainted with some potential users. I really call this. People briefly describe the product and then just as them, if they would use it, what features they would like to see in why, if they have this need you expect they have, we will only have to listen carefully to their long, emotional nonlocal. There is another way to get enough accurate information about users quickly. It's the editors, products, reviews and this references. People almost always describe the pain and the functions there really neat, so using the reviews, social networks and information from my customer. I got an approximate vision off all personas and clarified it by talking of Facebook with some relevant friends. All that's left is to fill out this spreadsheet. The manager in the flower shop called her march. She's 38 years old. She's a creative person, doesn't like beauty, and the Internet brings up three Children. Okay, it's pretty enough. Then the owner of a small service company, Jon, 30 years old, collect store bear things. She has an old and right and a big pickup truck. The manager of this service company is Daniel, his five well versed in computers. Here's an iPhone six s. He is a single work Alec. In the past, he was a successful sales manager in household appliances industry. Now we've got enough information to pick up some photos for our percents. Off course, you can use Google pictures, but again, social networks will give you a more accurate result if you filter by profession and age. The main thing about this picture is really is forget about stock images off photo models with white teeth on the white background. Ideally, to these a user captured in his natural environment, for example, in a flower shop done with photos, no account with pain. At the same time, we can give an idea of the world of this character through his vocabulary. To do this, we just had to write from first person. I've heard about all these dispatching naps. It's probably were cool, but for me it's likely to be too difficult. It's out of my league. And also would I have a programmer who will set it all up as a result of this pain and taken into account only previously collected information describe in detail what she wants from our product. Off course. It's a straightforward and quick start that she wants online notifications and real time online tricking in turn, the customer's business wants her to understand that this interface is really very simple and that there's nothing to be afraid off. And the second is to help her to try some eight features for free, to show her that they're really very useful that there was it, and now we have an aggregated bureau of the character, his Spain and meat. In fact, you can now build the first direct bridge to the future interface. We just need to briefly describe the most likely scenario off using the product. By this persona, it's pretty simple. First, she creates a delivery by filling out the form and a science. According to Treat sees this driver's unmotivated right to the system. She sends an invitation by SMS using a special interface. Then she probably wants to make sure that he understands what they want from him, calls him and asks to instantly mobile trigger application. Then the courier. According to the jockey, God delivers flowers and much, which is the delivery progress in real time. In the end, she decides to save the delivery address as the address of her store. So the next time you don't enter it again after a couple of months, she loves in for the hundreds time and immediately creates a delivery to a pre saved permanent customer. Rest turns on the photo assigned function and just make sure that everything works correctly. Sometimes customers called her to clarify the status of delivery, so March just quickly finds in order in the interface and gives all the details. That's it. We're finished with the first persona. Now let's do the same for the others. The John Service Company has problems on Lee. The high season. This is the beginning of the summer, when all the air conditioners breakdown at the same time, and the profit now depends very much on the logistics, efficiency and minimising downtimes he wants to collect for the proof of the done work diminishment features and instant notifications. Our customers business wants to show John that the service allows him to serve more clients per day and show that using a functions, John will get more profit during his first session. Key creates a delivery, a sense to driver, state and invites them by SMS. He s categories for them. One is an electrician, the other is a plumber, then tracks the execution of his job and he can add the clients. Dress two favorites with hundreds use, John will create a task with categories example electric so that the system could automatically assign drivers with the right skills to the job. Then he tracks that everything is working as it shoot, and sometimes in the case of some conflicts with clients, he just downloads the photo proof of complete work and send it by email. Daniel has all hands on deck in his work because he tries to manage a town of orders manually. They do have a simple customer relationship management system integrated with the voice over a piece system, but in fact it works just as a phone book. But Daniel is afraid that some advanced monetary system could not be integrated with their CRM. He wants responsive technical support. 24 rests on stable A P I for integration, the ability to buck jobs generation from a file, the ability to odor send drivers for new tasks and limited access rights for his colleagues . Our customers business, in turn, wants to show Daniel that the product is reliable, and then it's worth spending money and time on the integration you're in the first years. Daniel, unlike others, begins with drivers creation and you're in the hundreds use. He already creates everything in his CRM and loves into our product. Justin manage some exceptionally complicated cases or to download a Reppert for his boss 10. Module 2: Takeaways: so it works, Remembering a few things by percents, the ingenious inventor always comes first, and then the one who takes in dot com. The rial users needs and just makes his fortune in it. It's impossible to create a user oriented interface until this users there girls are somehow discredit. Facebook can afford, not really to take into account the goals off its users. And you can't now about describing personas. It can be a regular spreadsheet better in the cloud. If you want somebody to use the document, it should be wrote in the compact, clear and easy to read. Also, it's better have no more than 45 percents. We aggregate personas according to their shared pain and goals. We don't hesitate to use the reviews about similar competitors products. Usually, it's pretty easy to Google. Back. Social networks is an excellent source off information for your percents. Don't forget to use filters my profession and manage get realistic photos and general information about this person. It's worth describing not only the first, but also the hundreds use of your product, because these two scenarios are almost always very different, and otherwise you have a chance to skip some essential part 11. Module 2: Practice: and this module. We talked about why it's important to write down your target audience description, and I showed a step by step mythology of creating personas for out training project. The delivery service management them up. Now I suggest you to do the same, but only for your own project. To complete this assignment, just go back to trailer to the course board, finding a project great user portray. It's in some cloud service like Google spreadsheets. A little comment on your project with a link to this spreadsheet. But don't wait for the answer, since there Simon reviews is not including, of course. Oh, and if you want to learn more about personas and use a research in general, check this book its comprehensive and well written. You'll find a link to this book in the resource is section of this video. So take your time to work in the Portray. It's with the book, and when you feel we already just go head to the next module 12. Module 3: Principles of information architecture: So we have a general idea about the product. We have our persona spreadsheet, and we know so who we create this interface. What is their pain? What are the advantages of the product over competitors, and how will the customer's business benefit from it? But if you take pencil right now and try to actually draw this interface, most likely you will not get far, because you'll always becoming across unresolved content and features placement issues. Imagine you're creating an online auto parts store. What categories will use in the catalogue? Ari's was going to find parts by Carrera name like Body Chessie Engine or buy a car motile . Or maybe they would prefer to use some contextual tags like suggestions for over 200,000 miles. Vehicle. What should we show them on the main page? If he tried to Self problems like these in the paper Interactive prototype don't spend a lot of time just changing the product of itself instead of focusing and information architecture design. That's why before you jump to a prototype, I strongly recommend to do another intermediate document, an information structure. You can make it however you want, even in a plain text editor. But I prefer the mind that format. It allows you to temporally hide the induced errors of the structure and focus on what you needed a moment, even if there are five more sub levels of information up and down from where you are. Here's the information structure off a small website off a logistics company. In a minute, I will tell you what principles is this document built on. But for now, let's quickly see just how the result looks like. If the user is the main page, he sees the header, the content part and the Fuhrer. We decided that there will be a manning in the header that contains links to the deliver page services. Patients on you can immediately see which blocks issue of this page is consists off returning to the main page, which is the blocks of the main content area. For example, the first title block What we designed the structure. We decided that taking into account the girl support users and the customer's needs, this block should contain the main message of the company describing the services in a descriptive mirror and a protection money based on the requirements we have the button should be called connect, deliver service and should lead to the application form. And so, uh, we spent about a couple hours of the structure, but on the next stage is it will save us dozens of hours off experiments with information placement in the product or the visual desire heaven and approved information structure. You can focus on the interaction design. Think about how the U I should respond to US actions. Where to place all these bottles and stuff on the page have to visualize those features users wanted so much and so on, so on. And now let me explain what underlines the decision making process. When you X men creates an information structure, there are different existing approaches, dude, to say more. There's even a dedicated profession called information architect. And if you want to become one, I'd recommend you this great book. I read it, and honestly, it gets boring some places, but it's so detailed and real life experience driven that you don't want to read entails on this subject. Just this one book is more than enough. You'll find a link in the resource of section of this video in case, you just want to go ahead right away and have some tool for everyday use. I would recommend a set of this few fairly straightforward but practical principles once formulated by Dan Brown, an expert in information architecture who has been doing these for over 20 years. Originally, there were eight principles, but I thought you more likely memorizing will actually use them if there are four. So I transported these eight principles in before, Of course, keeping as much sense as possible. There was a link to the original principles in the resources section as well. The 1st 1 is the principle of disclosure, Even if there is a lot of information. The U X Man leaves exactly as much data on the page as the user needs to make his choice, and the rest is grouped in the set categories and sub sections. So the user guest information gradually from page to page, and everything does not fall out it once. For example, in the social network mania, you can give the whole set off available content, but it is so much more efficient to break this least into several levels so the user could spend way less time searching for the necessary information. This principle is was confirmed by a so called Hicks law, which says that person spans notch less time choosing if he has fewer options to choose from. However, you need to be very careful when it comes to reducing the number of choices, especially in the navigation meaning, because the fewer many items you have, the more bad words contend these animals hide, which means the increasing probability that the user will not be able to determine from the first time which item he should click to find the information he needs. The 2nd 1 is the principle of examples. Examples compliment principle of disclosure Examples help the user to realize in advance what is hidden behind this category. Many white, more button even before a user clicks it. Let's say the least of product categories on the Amazon site Looks like these. At 1st 1 can choose a category only after reading the names off. Medicaid agrees, which takes a lot of time. Secondly, not all the names can be familiar to user. Therefore, he doesn't have a clue what's there in those sections. But on the warmer website, there is a principle off example supplied for each category. There is an example off probably the most popular products in this category. In the least like these, a user will navigate much faster. Of course, this examples should not necessarily be presented as pictures in this case. Instead of pictures you could read for each category 34 names of the most typical products , and it can use the space you've just saved to promote the actual products. The 3rd 1 is the principal of the main entrance. In recent years, there has been a tendency to reduce the role of the main page off informational websites. It happens because search engines often lead visitors directly to the relevant internal pages of the site. The U X Man Trust to keep these users of the website longer so that they can achieve their goals and possibly bring some profit. For these, A user has to understand what is this website about, and how can he profit from it? For example, if Google's what to do in London, Google will likely send you here. It's tough to understand both the purpose of this website and the value and reliability of information on the page. Also, the user doesn't know what to do in case he doesn't find the answer to his question of the space. Maybe he should just leave it and tried to find something else in the same search results page. Google can also show you a link to this website. It is evident right away that it's, um, popular website for trailers. You can see the categories of information that will be useful for this trip. You can see the place of this page on the side and for the pre field search textbooks, the you I even suggest you how to find something else here. As a result, in such an interface, both a user business will achieve their goals with much greater probability and efficiency in the website, from the picture on the left and the last force principle is the principle of multiple classifications. How do usually launch applications on your mobile phone or a computer? Personally, I'm used to search took, says the app and people who are looking for applications swiping the home screen even if there are more than 100 efs on it, someone many of the groups abs, two folders and Of course, the logic behind it is we're different from the same EPS, even within a small sample selection off users. All these is possible because most more operating systems support the principle off multiple classifications for its ebbs, in other words, that provide the ability to find applications in several ways. Unfortunately, you can't always say that about websites. A user who is looking for a cheap for the stock to buy a picture could accidentally count cause these side. The designer apparently wanted to make sure that images could be found on Lee using the search field. And it's, of course, not entirely clear what level of square complexity doesn't support. Well, the rest some categories below, but I'm sure most users just will not notice them. But the team off these father stock definitely thought about a variety of search user scenarios. In addition to the usual text search and notable categories, the user can select photos also by type of licence, basic collison by text, or even just by the least of suggestions. When you X Men creates multiple classifications, she also always remembers the principles of disclosure and examples, giving the user a reasonable number of place it fires or they're a logical nested structure and also showing examples off filters work. It's possible. So the picture on the right shows examples of the classified by color. Decks are shown as hash tax, and each category filters. It's accompanied by explaining. 13. Module 3: Workshop: And now let's see how this brings Most could be applied in real less. I'll show you how to build an information structure from scratch on the example off training project A delivery service management that Okay, lets go. We open and you mind write down the name of the project in the center. Now we have to do a pretty mechanical job. Just throw in a pile all the required functions that should be in the interface to do it systematically and forget nothing is better to follow the user scenarios. The ones from our percent of spread should we open the table and we move from top to the bottom, starting with the first use scenarios. Then the hundreds use scenarios. So march from the flower shop looks in and crazy delivery, and to look in, we need registration and authorization functions. To make it possible to create a delivery, you will need to create a delivery for next three invites the career by SMS since just still hang out in the delivery creation form. Then inside this for the structure would go down to the level below. That should be the possibility to either a sign already invited drivers to this desk or to invite nuance. Now the desk is created. But since March uses this product for the first time, she's not sure that the queer works today a toll, and therefore she wants to call him and clarify that he actually got the task. To do this, we give the user some area on the screen where he could see already created desk and get a quick access to the careers contacts. But at the same time, there could be many tasks and progress, so we need some leased to visualize it. And inside each element of this least we have access to careers contacts. Then much wants to somehow triggered the delivery task in progress. Since we already have a least of tests in each item off this least you can provide the desk status and some progress indicator. And since all tasks are tied to locations, the user wants to understand where everyone is located in the moment. So we'll need a map with the real time queer location markers and probably the delivery point markets in it. Now, March understands that the delivery, now those the permanent client and that it would be nice to somehow save that dress of this client so that it shouldn't be entered again. For that, one could, at the least of favorite addresses, somewhere in the interface. But since we're still a startup working on a minimal, viable product, we can just add the ability to use old tasks, create nuance in other words, instead of an entire additional least favorites. With its dedicated editing controls, we just reuse already existing u I and just one extra element for it. It's a simple copy button for each desk. A list of flavors can Remark is nice to have function for future versions, and that's it. The first scenario is now pretty well covered by this futures. Let's go for the rest of the personas. John from the service company also creates a desk first, then invites drivers. We have already entered these functions to the structure. Then, he said, certain categories for the drivers. She wants the desks with Christians. Calgary are automatically assigned on Lee, the employees with an impression stick. And so this simple but pretty useful algorithm will also help the next character, Daniel, from the transfer company. Most likely, he'll create Congress for vehicles. So we had Congress to the test creation form and to the driver's profile. You I where one can view and change contact and other users data then Daniels scenario. Unlike the rest, he starts not with creating a task, but with the invitation of drivers. Therefore, we should provide some least of drivers where you can invite new drivers by SMS, and we already have functionality for the rest of this scenario. Now let's check if our users need new features in the future, creating a delivery through the favorites least this is still replaced with the function of coming tasks drivers, old assignment we edited. Next, the user sometimes wants to view and sent for progress. All be proof off work performed by in place. To do this, we have to create some car tow this desk where Onley details are visible and clear, including the possibility to download a photo now about integration. It's more about coding, and it's not connected to the U. I. We just have not to forget to show the A p I key for integration in the setting section. So we have just prepared the preliminary release the functions using only the user scenarios. Now let's quickly go through other peremptory off all personas and make sure that we didn't forget anything. So what does the business want? Business wants to show that the service is convenient and reliable, that it can be trusted. We'll show it later in the prototype. Also, business wants to make money on paid features. But while it's more important to attraction of the first users, we decide to make and be completely free. Now let's check what users want but that we haven't edited it. John from the Source company. Once visual reports, well, we can include at least a simple page with the reporter. Now every B it's is enough to implement. While a page with beautiful charts, it's usually good presentation material for B two B sales. Well, let's keep Rose Management for now. But the both tasks import will not be difficult to implement. Let's provide a but for bulk import on the new task creation for no when you can imagine and realized the entire set of functions, you can think about the proper application off this information in the interface. For these, let's recall the four principles off a good information structure, the principle of disclosure examples, the front entrance and multiple classifications at first. By the principal disclosure, it's necessary to distribute the entire set of functions according to the optimal number of sections. In this case, we're dealing not with the irregular informational website, but with a business Web application, a tool for everyday use. So a set of top level sections should be chosen based on the frequency off certain scenarios. For example, a user will create tasks many times a day and track their implementation. Reports will review maybe once a week or once a month, and even less often he will use the settings try. Therefore, in the moment, it will be reasonable to disclose all information from the three top level sections, morning touring reports and settings. By the same principle of disclosure, it can be assumed that a user is unlikely to need at some 0.2 simultaneous and look at both the list of drivers and the list of tasks so that we can place them on two different depths within one block. The same time, a user can also see the desks and drivers simultaneously on the Net. The principle of examples in this structure has practically no place to use, but later, during the product in stage, will return to it when it comes to detail. Visualization off the elements that cause the appearance off there s pop up windows and lists say we can show the NEB the icon of the users vehicle type and so on. Since we have the application, which Internal pages will not play a role? Laney pages for the search engines traffic. The principle of the front door is also almost irrelevant, unless you can add logo with service to one level with our Freeman sections and also already in a prototype, we shouldn't forget about the noticeable and clear highlighting on the current active section so that the user always understands where he is in the moment and where he can get from here and the last one, the principal off multiple classifications. First of all, you should think about options off how to access the most relevant user content tasks and drivers. In fact, they can already be found both through the least and with map, but it's not enough for efficient, productive work. At first we need the ability off the quick search. Most likely, this will be a single search field for all types of content, so you need to place it at the highest level of the information structure somewhere in the main menu and local area. Also, how users will most likely need to see a list of tasks that have already been assigned to certain drivers and by stores. We should provide the user with a reasonable choice off drivers who could be assigned to these desk. It is also worth while to provide, at least in minimal access options to the settings you I To do these, you can place the logo and the name of the users company in the main menu area, the same time increasing the attractiveness of the service in the US of the client's side decision makers. So when a user clicks this company name, you can show him at least off those standard options that everybody's used to find in the similar areas. In other interfaces, a link to the help section and a look al button further in the prototype will return to the principal off. Multiple classifications will try to visually separate the tasks for which no one has been assigned yet and will mark the state assess of desks and the load status of drivers with color tanks. And so so we went through al personas and made an approximate set of functions. And then, with help off four principles, we prove this feature set and transform it into a multilevel structure. The last step is to add the missing details to have document. Perhaps you noticed that, for example, for the test creation form, we ended a category field, but there was no mention off. Much more relevant feels like the delivery address deadline, etcetera. Now let's work in these details for Texas, in the least, it's necessary to display the desk name, deadline, status, progress and the driver's name. You can also write down here a possible least of actions that the user can apply to this desk now in the desk creation window. We had the entire least fields that a user will need so that you can finally get their task . Least we just describe, and it's so so worthwhile to show which feels on mandatory and which are optional. So the name of the cask, the deadline, the delivery address are mandatory feels because this is the data without which the new task doesn't make sense. And then there were many fails. We will add a deadline, the pickup address and contacts off people at the delivery. Address the check box to link for the proof required for a driver the ability to enable the drivers alter a Senate in the same way. We fix the details of the elements of the list of drivers, the contents of the test card and drivers card. We also show what should be displayed in all these bumps, which appear when you click beans on the map. A crucial thing on this last step of creating an information structure is the details. Death. The depth should be reasonable. Let's say if there is only one person from the customer side and you're working on the project that it makes no sense to waste time on the super detailed document, it's fine enough to show only the most basic and not very obvious things example. In this case, you can skip the map about structure scenes. They probably have the same elements as once in the least, and we have already down those also, you can skip some low priority areas, which could also be changed as the prototype is created, such as reports and aesthetics. 14. Module 3: Takeaways: and here your information structure takeaways to design an information structure and satisfactory decent level quality. It's not remember, just for basic principles, the principle of disclosure. Well, it just as much data on the page as user needs. Focus, meaningful and quick choice, and the rest regroup in tow, sub categories and sub sections. The principal off examples Examples Alo o User. To understand what is hidden behind this care, agree many items or button even before the user X, The principle of the main entrance. It's important that the user always understands where he got what he can gain from the interaction with this interface and where he can go from here and the principle of multiple classifications. The interface should alot the user to find information in various weights so that the user can be the most convenient way for him based on his habits and the particular context off use to create information structure, you gonna play the following three step process at first, create a complete set of functions based primarily on the scenarios and then on all other parameters of the previously described characters. Then you can elaborate this least and converted into a multi level structure, consistently applying for basic principles of information structure and finally you at two AM I left a reasonable amount of details. 15. Module 3: Practice: So we're very close to the most exciting part off the U X man work user interfaces, prototyping. But before you have to create information structure for your own project and leave a public link to your mind left in Trela Oh, please don't forget to make sure you link as at least they read only access so everybody can check your work. And so you also can have access to the projects off Other students don't hesitate to check their work. It will help you to learn faster. I wish you have fascinating design and see you in the next module when you're ready with your mind that 16. Module 4: Advantages and styles of a paper prototype: a paper prototype is another useful design tool that allows you to quickly find some common ground with a client and save an enormous amount of time on rework on interactive prototyping and visual design stages. The main goal of this paper prototype is to agree on the product concept with a client quickly. Besides, a paper prototype is also the simplest and the most accessible tool that can be used right away without any additional training or special software. You just need a paper and a pencil to make it work. But the rest of new answers I have to mention there are many approaches to paper prototyping, which differ in the level of details, the level off interactivity and in the way of desire. Many years ago, when it was just starting with you guys design, I somehow decided that paper prototypes should be, sir, presently interactive. I mean, I took scissors and cut out everybody. They never pop up and tried to animate all this stuff by hand shooting video on the camera that was fixed on a tripod off course. At first it was a lot of fun for both me and my client, but the unsustainability of this approach becomes evident after the first portion of comments from the client. When you took this back off cut pieces of paper and tried to make some changes well, it was unsuitable for most projects. This approach can still be justified in the whole concept. Off the product is building some unusual mechanics or some non standard gesture. Of course, finally, I have been in this approach and started to make static but very detailed protects. Unfortunately, the presents off a vest number of details at this stage Coast, the clients and natural desire to give exhaustive comments on each element of the interface . This led to the need to redo all the pages from scratch often, which significantly shifted the paper product, deliver deadline, eating all the time from all of the following stages. In fact, what did the interactive product stage work right in the paper prototype instead of doing it on the next stage using some dedicated software? And there is nothing better in it, just the product and software is already grounded for assembly user interfaces and supporting changes, even in big projects with lots of details. Believe me, you don't want to do done paper, so we just got a very inefficient and time consuming process. But there exceptions to this approach to a detailed paper prototype works well on a super small to three pages. Products, for example, in small that and mobile apps. In this case, even if you draw a lot of details, it won't take you much time. There was a time when I was often ordered you I for large information portals. Detailed paper prototypes would be endlessly labor intensive on such projects, so I quickly came to the former off high level paper products. As you can guess, they have a minimum resolution and ridiculously small dimensions. The main goal is to show the key steps of the user scenario. Such a prototype can be created and then modified very quickly, usually in less than an hour. When you presented all the stakeholders discussed on Lee, the concept and the approach itself without diamond in the details. And that's great, because is the main goal of the paper product just to agree on the product concept. Recently I came to another method, which in effect, is a hybrid off detailed and conceptual prototypes, combining their advantages I call such prototypes adapted depending on the particular spot off the user interface, you adapt the level of detail basically criteria of clarity and common sense, making the prototype as accessible to the client as possible and at the same time, no too labor intensive, for example, for some information, Porto, you can show in detail, some significant for and feel the rest of the beach with low resolution pages. Thumbnails. If it's a one page Web application, I would roughly outline the Overlook. And on separate sheets, I show some key fragments in details. 17. Module 4: Workshop: Now I will demonstrate how to turn the user portrait and information structure off our delivery service into a paper project. In fact, there was nothing complicated here. You just take the next block off the information structure made up, or because suitable interface better for it and making sure that this better and will be familiar to our particular per sentence. You just sketch it with an adequate level off details that soul No tricks. Let me remind you that the main goal off a paper prototype is to agree on the product concept with the client quickly. In other words, when looking through his catches, your clan should immediately imagine how the product will look like and what the user will see as he passes his scenario. In this case, we have a small that application with the main monitoring screen, which will have a lot of different functions and secondary pages with reports and settings . Therefore, you need to draw such a paper prototype that the prospective client would look at and immediately realized how the main page is that monitor Midsection looks like what information the user will be able to get in the least off tasks and drivers how the user will create tasks and monitor their execution. So, first of all, we want to show an approximate general view of the monitoring page. Let's just leave it. Just do these size on the paper. I choose executive these size in 1/4 of regular off the street so that there was no temptation to try to show details here and that it was evident which blocks are there in the interface. Then we opened the information structure and go consistently across all the areas. This is the area where we have the highest level off information. There is a logo search, the main menu in a profile button. How did wrote Well, let's think about the options it can be. Show horizontally or vertically to the left or right from above or from below. Of course, you can make up quite a few combination just in the location of the logo. Search many in profile. But how to figure out the best option for us in these case to remember that in our mantra section we were going to add this least off tasks and drivers most likely twill be large vertical blocks, so many should be done in a horizontal direction to separate the main litigation from the content visually and better. Make this area from above so that it is noticed. Now you have to arrange the elements, insight, this panels and how. But how, exactly? It's straightforward You need to use Petters. Players are integral parts off the interface that users used to because they are repeated from side to side and from and to end well, let's say the better off swishing taps the drop down list parent. And so usually designers make the mistake of trying to come up with their own patterns they made up from scratch instead of reusing the existing ones. As a result, a user who, as a rule used to self a certain bask in the interface as soon as possible, spends time learning a new pattern, which is believed that the last thing he wants to do take the logo first. You want to understand the options. The logo can be natural placed inside these panel in the center of the left or the right. Statistically, in the best majority of cases, logo is located on the left, and therefore most users are primarily looking for there, and we have a rather conservative audience, so they will likely not appreciate our creativity with logo in the center. So just leave it on the left. So we just figured the first element. Now weaken. Build everything else from it. With this local placement, the profile button is almost always in the right corner. By the way, if you are not sure about the popularity of these four other patterns, you should not guess just to review the similar interfaces in the 10 15 products that all personas probably already used. To save time, you can even use the whole really made libraries of Federer's. There are quite a few of them, just Google UX betters. So we still have search at three many items, the search feelings better located close to the content on which the search will work, like closer to the least of tasks and drivers. But since we don't yet know where this least will be located, let's postpone this navigation area and think about where to place the search field. It will be more convenient for our users to see as many tasks and drivers. It's possible to spend less time scrolling, so the list should be as long as possible. The question remains left or right, So now we have to understand which pattern for the location of the least on the map could be the most familiar to our person. It's most likely the user unconsciously will begin to look for similarities with more learn mapping applications such as Google maps. In such applications, the content area is most often located on the left, so we'll decide to do the same. Returning to the navigation area, we need to know the search field to left and just below the menu, we have the unused area to the right. We have three menu items at this resolution. It makes no sense to write with wards. It's enough to show it roughly. Then, in the least area, we had two taps, 14 tasks and one from drivers were scheduled depths and made up some names. But it fault. The first step with desks will be opened because most of the time all users will more likely need to track the state assess off the tasks rather than the drivers data. And because tasks is the user content, they're somewhere should be a button for aiding and you desk. It is better if it was closer to the least so that the user could into Italy understand how to adding you task, and that he was sure that the desk would show up here. In this case, the add button should not look like an element of the least because it would be harder to recognize it. And also it would create the effect of having more tasks than user half. So we fix the button here, and the tasks themselves are here. You can outline some content inside the task tiles. That's it. The main workspace. Cache Israeli. Now you can highlight the key accents in a different color. And if you text labels in another more color so that the client can understand what is being drawn here, it's advisable to use no more than three colors as a tool. I recommend regular markers because when you're working with a Pantsil a pen, there is usually a temptation to dive into the details Too much. Also, the markers for give you a lot, and the prototype finally looks cleaner. So what else has declined to understand from the product, he should see at least the most basic user scenario. The scares. The scenarios do not fundamentally differ from person to person A so we could show the paper products some general aggregated scenario. But sometimes it happens that different personas work in various interfaces. For example, if you're doing a e commerce platform in which there are both sellers and buyers, then in a paper prototype it's worthwhile to show separate scenario for each persona. In our case, I would separate the show in detail. The desk creation it's monitoring and the driver choice do assigned the task. So the test creation we can make this interface as a model window so the user will have access only to it or as a mode lis panel. So the user will see not only the test creation form but also the arrest of the interface in the NDP. I was just starting with a visually more simple and clean and more user friendly option. A model window. It means that in the process off fill in the form, the user will pay attention on Lee to the input without being distracted by all the stuff happening in the rest interface. I'm not yet sure that this is the best option. And after the launch of the product, I would conduct a split test with the alternative mold Lis there and then was set the form header. Note that all the headers and feel names in the interface a better formulated using announce creating a new desk delivery address and sold well. The button name works better with the verbs like create a task assigned driver, and so you'll also be fined two and vice versa. But you have to stick the same name and rule everywhere in the product. There are many fields of this form, as shown roughly and at the bottom on the left. There is a new task, but when the left there is this Feat law, which says that the user will need less time to click on the object that is bigger and which is closer to the mouse pointer, in our case, the most pointer before clicking the button it's somewhere in the left part off the button input field, so the button should be placed as close as possible to this area, and it's also nice to make it bigger, so the user has just created a desk, and now he wants to track the process off its execution. To do these, our persona will try to look for it in the test least. And what will he see? Let's show in detail one task from this least first. We didn't note the bond risk off the least area. It's better to leave more space under the map, Otherwise it will just be unusable. Therefore, we make the wits of the least, not where large we showed boundaries off. Our task, according to the information structure, has a name. The next important parameter for the user is the status, because that's how the user decides whether to pay attention to this task or not. It's also important for him to see the time left before the delivery deadline. It fits this same road. We also talked about that. It would be nice if the user explicitly sell the progress of the delivery. You can just use the area below to show this Progress bar. Let's set three key points the point where the driver except the task and a point where the driver takes the product and the point where the product has to be delivered. Rich Point. You can show at least the address, then if someone is assigned to the task than you need to show it, it's an important information for other user. We showed the driver and the button that changes the driver. Also, we talked about the fact that if we do not have any addresses yet, then at least we should give the opportunity to copy tasks. Also, desks must be able to be cancelled. There is no available space for full function buttons with text anymore, and there is no such need because the actions off copying and cancelling are not a very frequent case. Therefore, we limit ourselves to the Eiken buttons, and the most likely place for them is the upper right corner. And it's better not to stick them to the task name because by clicking on the title well, most likely called the window with a detailed description of the task and the smaller the distance between the active elements ease, the greater the probability that the user will needs and call the wrong interaction. Now all we need is to show the same kind of carte in the least of drivers. Seems the driver set of parameters is somewhat similar to the tasks set. It's desirable to preserve a similar arrangement of elements so that the user feels more comfortable with switching between the lists. We add driver name, then state us. In general, our persona based on these sort of fields should either decide on who to assigned to the task or to estimate the driver's performance in general. So here you can show some useful statistics. Let's say the number of texts in the life somewhere right away, and we find a place for categories at the center of this block. In the test least, we have an indicator of execution for the driver who can be assigned to several tasks simultaneously. It would be nice to show the downtime indicator is going to be a bar, negating all his available time for work, in which we will highlight the time for the complete tasks and the time we can utilize for new desks. The low. You can show the drivers load summary, for example, that during the day he had two or four hours or 50% off downtime. After our users select the driver, he most likely wants to assign him to one of the tasks. Such an action can be considered popular, which means that according to the Feats law, the bottom for this action should be larger. For exceptional cases. It is necessary to provide a button to bend the driver. We make it smaller and place it on the operate. That's it. The paper product is ready. 18. Module 4: Takeaways: So let's briefly refresh What is it worth Remembering about paper products? The friendly go off a paper prototype is to find a common language with a client, quickly agree on the product concept and safe diamond budget on changes in the following stages. The most reasonable approach to a paper product is that it's when you show the details on Lee, where it is needed. The rest you show with a low resolution. The main thing is that this president should be readable and usable, at least for the main user. Snare. The interface will be much more friendly if you use popular you expenditures instead of coming up with your own ones. Haters could be found either a specialized at our library, such as Aaron Step that come or by reviewing some popular websites manually. By the way, there is a site called Good I Ork, where you can find vitamins comparison, and the efficiency of some of them is even measured quantitatively. Using a B tests. The interface will be more efficient if, according to the feeds and takes loss. You're careful and make sure that, at least in the most frequent scenarios, the user rounds around the screen with the forint or less fix on larger Barton's and selects for fewer elements. There's also these accident book about paid of prototyping. You should read it. If you want to master this skill, you'll find all the links in the resource is section of the video. 19. Module 4: Practice: and now, as usual, I suggested to do the same with your own project. It will be nice if your paper products are clear and understandable, so that everybody can imagine without additional questions how your user goes through the main scenario in your interface. It will also be great if it's can your schedules or least take pictures with good lighting . So post the links to your scans or pictures and trailer and move forward. Good luck. 20. Module 5: The value of an interactive prototype: The demon, as you know, is in the details. Therefore, the nice looking product concept is only half the battle now. It's the time when you have to dive into the details. And the interactive prototype, in my opinion, is the most convenient and most intuitive form off the you. I detailed representation before the visual design stage, and I mean user interfaces off any size and complexity. What is so good about an interactive from that? First of all, it makes possible to test the life interface even before the visual design and development stages. Actually, for a relatively small cost and in a short time it is possible to check the product hypothesis. Find out what users think about the service and there's the product. UX. Isn't it great it allows all the stakeholders to do their job? The U X designer thinks about how the product should feel like and how should itself the user of problem, while the visual designer Onley deals with the creative part he's responsible for. The U. S style makes sure the accents are where they should be under the product looks and feels like it's supposed to. It can serve is a more convenient and visually reach replacement off the functional requirements for developers. In such a prototype, most of the interactions are just visible right away, while the hidden logic can be written in the notes directly in the project. So why should the president be interactive? Let's now briefly compare the in corrective and static versions of the prototype for several real life situations. The client sees the prototype of the first time anaesthetic product. It's not immediately clear what happens back leading hovering in different areas, and it's not clear which areas are interactive. To praise the user scenario, the client will have to always sleep through the pictures, trying to rebuild the way how the U. X Men was thinking. And eventually he will likely understand this scenario. Role in the case, often in tricked from NetApp, declined, simply opens the link and starts to behave like an ordinary zer. All the questions on navigation and other interaction nuances just disappear it once the prototype is tested on potential users. I suppose there are no such users who will behave naturally. They asked to has the service presented as a set off linked pictures, most of them will likely feel lost and confused off course. You can explain them how it works. Before the test, you can show what is clickable and what is not, but then you'll just get a biased result. While with an interactive prototype, there are usually no such problems. Often, users don't even realize that it's a kind of a fake interface with fake data, and so their behavior in such a product can be considered relatively close to their possible behavior. In the rial implemented product, the designer changes the product. It takes a lot of time and patience to make even a small change in the steak product, because most often this change will have to be doubling. Skated on many pages while in a probably organist contract for Deb squad enough to make each changed only in one place. And then the dedicated software will automatically distribute this change all over the product. Today there are many great interactive prototyping tools on the market. Some of them are bailiffs. Some are desktop EFS, the different price and of course, in a scent of features. It's totally up to you, which one to use. I have to warn you that I have no affiliation with any of those tools I'm going to talk about, so I prefer. Actually, I started to use it around sound years ago and still consider it as the most advanced U X two available on the market. Well, it may not be as easy to learn, comparing to some more than fancy there, perhaps, like you explain. But if you seriously consider becoming a pro UX designer, I would definitely recommend it. Sure, Alozie to quickly build and, most importantly, support and modify all kinds of user interfaces, from small applications to large information portals you can share your prototype. Using the leak actually also allows you to automatically generate and interface specification if developers require it. And the stool is probably the most popular in the U X industry, so it wouldn't be a problem to find a good job. Since many companies require specially actual skills in the next leader, I will show you how to create an interactive product in actual on the example off our delivery service step 21. Module 5: Workshop, part I: Now I will show you how to build an interactive prototype off our deliver service app from scratch. In general, if you have ever used graphic editors, then almost everything will be intuitive for you. Although the rest and features where common sense doesn't work that well, I'll make it clear that worry. Okay, let's go. Let's start with a monitoring page. As you can see, we have here panel with the main menu on top. The reason area with lists off tasks and drivers and a map with the same desks and drivers . First of all, you have to set the width of the prototype and create a modular. Agreed. Most of our users will work with the APP on desktop computers than most. Often. There will be either 1920 or 12 80 pixel screens. Better pick a smaller 12 80 wits and taking into account the browser frame and gifts on the edge of the murderer, we'll select 1200 pixels, right click in the empty area. Select greets and guides great guides, and then there is a 1200 pixels per cent. We don't have a lot of your elements, therefore, will be okay with 12 calls. That's it. Don't forget to say the project. We start to be a little crunch up with the container blocks. We move from large containers to small lots. The biggest container in the Net area is the bed ground. Let's make this queen shirt off the map and based it there. It's just reducing the quality of the picture, which will reduce the source file size. But if we want the product to look nice on routine of screens, then click. No next for discreet shirt in the upper left corner. 00 I have a regular screen, so the screenshot was inserted twice as large. We divide this size by do and reduce it. It sticks out a little bit beyond the border of all product. We minimize, besides by hands holding shift to keep the proportions. Now at the block to the main mate, we need a rectangle. Greg it from the library and set it to 00 to a higher it With and hit is 60 and make the big ground based Ducker go do the base style background. Okay, let's see. What we got actually allows you to view the product as HTML page at any time click, publish, review or better to remember the Shaka and here, where the product is better placed in the center of the window. So for these, go to the same page style and said the central alignment, Miss Bear. Next we mark the least area. Just copy the already created rectangle and drug here. It's nice to keep the same paintings everywhere. Supposed would take 10 pixels from the age and 20 pizza. Spiritually, it's just a prototype. And of course, it's not necessary to spend time on keeping strictly the same painting. Several where. But we should remember that it's still your main and filed deliverable, and your client used to feel that he based mostly for the interactive prototypes. So believe me, when these deliverable looks nice and neat, you'll enjoy your work way more, and also the client will be impressed and satisfied. Now it's the details time, take the title and make a local out of it. Next is this search field we caught is the rectangle. Reduce it and set slightly darker shade. So the bond race off this field can be seen, and we ed and I can so the user can immediately identify it as a search field for many different. I collaborates on the Internet. You can use any of them to your taste. Step 10 pixels back from the beginning of the search field. I also need Cem King text in actual weaken right not only in text objects but also directly in any shapes. Next, the profile button show a great circle for a user picture to do it. We copy the Great in Fulfilled in Click on This Blind and here we have the least of available shapes and we add the name. And to make it clear, the drop down menu shows up on the click. We inserted the down arrow. Now the menu. We can't be text labels, right? The many items names for Lomond. It's better to use the building functions. That's it. The steak. Many is ready. Let's at some interactive now to make the user intuitively feel that the interactive elements are ready to start interacting with him, they must somehow react to the Miles pointer. Take the search field first to change the however style, we select the interaction styles most over, and let's say we want slightly ducker age line on Howard Review. That's fine now. The same for many items and profile. We can change the color of the text, select all the captions holding control key and said the mouse over style, slightly lighter text color. That's much better. Now let's show the profile. Drop down lease again. We copy the rectangle many items. Let's make links. Tour particular help section to the profile settings and the lug out link. Let's visually separate the active areas with lands distributed vertically and aligned to the left. That's what we got. But of course, we want this panel to be initially heating and to be parked up smoothly on user picture. Click. For these, you have a special kind off element. ENAC. Sure, it called dynamic panels. A generic panel is an under a group of elements, but for these group, you can set different states that show up on these certain conditions. Just select all the elements that belonged to our drop down list and create a dynamic panel from them. As you can see, it minutely appeared in the least off panels later will have a lot of battles, so you are not to get confused with a mess. You want to call it somehow. In this case, the drop down list can have only two simple states. It is shown on the page, and it is hidden. To do these, you can either create a second state for the panel itself here and leave it blank. Or and it's even a better way to set the bell s hidden and then ask ek sure to show it on quick. We can call the pound by clicking on both the name and these, or picture, but our user can miss. Therefore, the active zone needs to be increased. To do. These will add another one particular element called hot spot over the entire area. In fact, it's this simple rectangle, but it's always transparent. We put it over the click area and chicken. Here. The possible events are displayed. You can assign them some actions. In this case, we need a click event. We find the action called show height through the search, refine our panel and specified Tuggle so that its appearance has always changed to the opposite. You can add some basic animation, say fate in 100 milliseconds. Let's check it. Everything's OK, but the user's name is no longer highlighted because we have blocked the text object with a hot spot. It's critical to understand how this multilayered thing works in extra. The easiest way to solve this problem is to copy the action by clicking into the text field . Then we remove the husband and drag the text area to the hearts. But bar gris to fix the alarm until the text. You need to write you correct paintings here in the field properties. Well, that's it. So we just built the core of the product. We showed one panel and and it's some interaction. In the next video, we'll do the rest. 22. Module 5: Workshop, part II: Let's continue now we have to show in detail the panel with Let's off tasks and drivers. Even during the creation off the information structure, we decided that the lists will be placed in the to several tests. Let's add the steps. We make the big ground darker under the tempt area a copy of the text from the menu here and planted the center off each huff when hovering. The text in the inactive tap should now be highlighted in white. We had some additional indicator off. The active steps of the user had no doubts, but which tab is selected at the moment, I should mention that this kind of graphic elements can be just skipped in a product. But in some places, I still leave them. Mostly is a reminder for a visual designer, so he won't forget about these details for the same reason. In the best video, we increased the invisible active area for the profile button. It was a reminder for the developers We'll go further down to the task step. We have a button for it in a Teske. Show it. It will be useful for the user to know how many tasks are there in the least, and sometimes he wants to look at the text for other days in order not to clog. The interface with a large filter by date will make a label with the number of days, and we will mark the work today with a dotted line so the user can understand that this link can call some local action, like opening it pull back so it will call a calendar pop up where you can choose another day. Next, we show the least itself first will assemble one least item at a title Aikens for copying and deleting status and time before the deadline. Lies show the delivery indicator. Most tasks will have a big appoint and a delivery point, but the driver will not be at the delivery point instantly, so it's worthwhile to show one more point in which the driver except the desk for each point we add the time and address. We also show the signed driver Edson Space to his profile picture name and the driver change button. So we've just shown one element of the least, but you want a whole east of such elements off course, you can just copy this task several times, but at first it will take you some time. And second, if you later want to make changes to these least item, you'll have to repeat this change for each element. It is a useless waste of time, and it's annoy. So to avoid this hell, you've got a special element in extra called repeater. You just insert any content into it, and it repeats it the necessary number of times in any direction. But it fault it just public aided the content. But you can even use a small building database to customize text and pictures in every double gated item based here. The task, said beddings, and a few more elements and go back. That's it. The list is ready now. Any change you make on this single item will be automatically distributed for the other least items, as you can see the least is much longer than the screen hates. It would be nice to have scrolling in it, INEC Sure you can use again a dynamic Penhall friend. Let's create a dynamic panels for this least and in the final settings will enable scrolling. Let's see what happened. Now we add the second tap with the least of drivers. As I said in the previous video, dynamic panels allow you to display several states with the same area. In this case, we can make a dynamic panel the first state which will be a TEM with tasks and the second attempt with drivers to do this with, like, the whole area with the least and created a maelstrom it here is it only you're right. You can also see that it has our tasks least in it. That's fine. In some projects, I've got 45 levels of vested panels. Some designers prefer tow, avoid such model air structure and use the separate pages instead. But I believe that is not very pleasant for the client and everybody who's going to use the prototype. They'll have to wait for everybody page to load for 3 to 5 seconds every time they switch pail state. So we created a dynamic pale where we have our test leased in the prostate. Let's duplicate this state and modified, so we do not need to build the drivers tap from scratch in order not to get confused. Well, somehow name this state as well. Would go to the second state and begin to change everything here. The second tip is highlighted. The button will be called and by driver. Let's change the label with the number and dedicate a filter for a driver's least in the list item. The title will already have the driver's name, then tax status and the number of tasks in the line. The indicator is more complicated here. Let's use one large rectangle to show all the available time during the day and the highlighted areas for the time when a driver was busy doing tasks. Then show the idle time percentage. Remove the carry Baden and the button. We at large buttons for the most common actions with the drivers assigned to the task and send SMS chicken the least turned out quite noisy. The user doesn't need to see all buttons for all items in the least simultaneously, so we can only show these buttons on hover. To do these, we first give the buttons internal names so that later we can call them. However, by default we said a hidden state for the buttons. We put the husband over the entire driver's area and in the mouse over event. We call this show comment to show these buttons and hover, and so the buttons again disappear. We call the high Command for the most out of it. Let's review. As you can see, we cannot check the second TE because we forgot to assign a commend to switch the state's off. The Daniel Penhall would go to the first step and sign it, change state command on the driver, stepped, leak and do the same for the second state. We at a change state four desks tab click running that that was opened buttons. Appearance Khobar. You can also show the cupping and doing buttons on the hover of the first step the same way . I also would like to show you one more special extra element called Mr Masters are essentially the same repeaters, but without the possibility to customize intent. Also, unlike repeaters, you can doublet Kate Masters content in any places throughout the positive, including other pages. For example, for information sites makes sense to put in a master the header and footer, and then just add them to every page. In our case, I'll show it on the example of drivers least item we had to monitor the current driver's position on the map. So let's show it as being on the map with driver's profile picture in it. By clicking on this image, user will want to get some details and so that he doesn't need switch his attention to the least of the left. These details can be shown right here and in the same way to do these, we go to the least of drivers, select all the Germans off one item and create a message from it. Now you can just drag this master or copy and paste it wherever in your product reported on the map and a bit of beauty. And we will back to the master, together with his triangle, into a dynamic panel with a single state that will be hidden all the time. Now you can click on the user picture to change the visibility of this panel. Let's check it out. Well, now we have the driver summary both on the map and in the least, and if you want to change the content of this item, you have to make this change Onley in one place, and then it will be automatically updated in others. Finally, I would like to show you how to create moral windows. Let's show and moral window for creating any task. In actual everything starts with erecting off. This will be a background off our window. We'll make it, then a panel from the rectangle. Now an important thing. We need to make sure this Bennell is always in the center, on the browser window, so we need to fix it in the middle. So how to do these? Click into browser in the mill and the center. Next. We won the pale not to be displayed by default. So we said, hidden. We can also hide it only neck. Sure, so it doesn't mess up with other animals when we don't need it. Just click on the box near its name, but we can steal access our model window through this least of panels. The model window should be called by clicking on Be a test button to do these. In the on click off this button, we add the show command for our Derrick Bell and it the treat as lightbox option. It means that the bell will not just be displayed on the screen It will also have a deep background with close action. When you click it, let's try next. Let's focus on the content of the window itself. Of course, we need tile and the close button closing and window by clicking. The second is that where efficient? Because it's harder to aim it into aimed the grand area around the window. But still, not all users know these ux better, but you can help people to start painlessly moving train. You better. Better to do these. Just move the cross to the background area to make it more intuitively clear that the window closes by clicking anywhere in this area that we have input feels for each field, there must be some label and the in facility itself. When this text box is not filled with text, you can show a hint in it that will help the user to feel these field fester. According to the information structure, we have both mandatory and optional fields on this four many years ago lays developers decided to mark mandatory fields with asterisks, just as from time in memorial, people marked mentor feels in paper questions. But this asterisk you expand earn is not very user centered users, actually not interested in Western time and effort to feel in the data that is not required to submit the form. I'm not even talking about the fact that and bunch of extra feels overwhelms the user. Therefore, it's just to take advantage off the digital interfaces. And so instead of the optional fields themselves, we can show the buttons, which will call this field Onley when the user needs to see them. And this set of opened optional fields can also be saved and shown when the user parades new desks. And so here we have task description. We could a title task description and a large, empty next feel for it. But the task can exist even without the description text. So instead of this field was simply show the at description button by clicking in which this text box will show up next in the form near us in other fields. But it's essentially all the same. I will not spend your time in it. I hope you'll figure it out. We just also have to add a test creation button, which submits the data. As I said earlier, Source. Wild to make it bigger and closer to the left age for the sake off usability. For some reason, it's popular to place a cancel button somewhere close to the save button. Well, sometimes users really want to delete consciously all the data they just entered. But obviously it's not a very frequent scenario. But if the user mrs just a few pixels, he will get an epic destroy off his recent work. And that's what sounds like a frequent scenario. It is important to remember that interfaces are originally designed to help the user reached his girl faster and make his work more efficient. A good you. I should prevent any situations where a user can make mistakes and especially should not allow to delete just enter data accidentally. 23. Module 5: Takeaways: So here what you want to remember about the interactive for today. The interactive prototype is a very usable, visually reach form off detailed crew presentation off interfaces, any size and complexity before the pixel perfect design stage. It makes possible to conduct user testing before the visual design and development stages. It allows all the stakeholders to do their job. It can play a role off a more convenient and visually rich replacement off the functional requirements. Paper for developers. Why should the president be interactive? When the client sees the product at the first time, he simply opens the link and starts to behave like ordinary zer. All the questions on navigation many Munitz is off interaction disappear it once. When the product is tested on potential users, they usually do not even realize that it's kind of faith. Bake interface with big data. And so they had behavior in such a prototype can be considered relatively close to their possible behavior. In the rial implement of product, the designer changes the prototype. It's quite enough to make a change Onley in one place, and then the dedicated software will automatically distribute this change all over the product. EC sure may not be as easy to learn comparing to some mortar. Fancy that. But if you seriously consider becoming a pro UX designer, it's definitely worthwhile to invest your time and learn. And don't forget to take advantage over the features that make your life easier, like repeaters, masters and dynamic panels. 24. Module 5: Practice: So all you need to complete this course is to create an intricate part of that for your own project and publish the link to intra and actually go to publish X share to generate a publicly it prepared for the stairs to take several weeks. Whatever product in software you choose, you'll have to spend some time fighting this, too, before it actually becomes your friend. But here is Google to help you today. It's so easy to find a solution to almost any problems with any tool in just a couple of means. If you want to learn sure, really fast, there is not a good you did a course in it. Find a link in the resources section of Speedy. And finally, I would like to thank you for your interest in user experience design. To be honest, I see that it's still an incredibly undeveloped niche with very low competition, which really likes good. You ux designers. Thank you for being with me until it I'll also really appreciated belief, a review on you. Then it will help this course to reach more future UX designers and make this world more user friendly for everybody. I wish all the best and have a great day. Goodbye