UI/UX-Design, Benutzeroberflächen-Designmuster — Gelehrt von einem UX/UI-Kursleiter der Universität

1. 1 Introduction Design Patterns added class: Welcome to the user interface design patterns course. My name is Erin Lawrence and I'm a Principal UX designer and founder of a UX agency called UX honey in San Francisco, California. I'm also a UX instructor where I teach advanced UX design at the Academy of Art University, also here in San Francisco. This course is a very practical guide to understanding user experience and user interface design patterns. Design patterns are a set of user interface guidelines and rules that pertain to how users use products and user interface elements. An understanding these patterns is a must for any UX or UI designer. These are things like form fields and drop-downs and navigation bars and checkboxes and radio buttons and tab bars and date pickers, etc. If you are planning on doing user experience design or user interface design. And you don't have a firm understanding of these design patterns. That's like being a baker of cakes and not knowing anything about cake ingredients. Because essentially it's the ingredients that make up a cake. And the same goes for user interface design. User experience design, or UX design, has a lot to do with understanding the needs of the user and what content they need to achieve their goal. And this content is what makes the interface. In other words, a user interface is just real estate for content. And understanding what is the best real estate to use for specific content has a lot to do with design patterns and user interface components. That is what this class is all about. Each video within the class, we'll take a deep dive and cover a following topic or user experience component. We're gonna start with things like form fields, buttons, drop-downs, date pickers, radio buttons, checkboxes, toggles, address forms, Search Forums, tab bars, title bars, accordions, tabs, tooltips, shadows, thumbnails, carousels, modals, lightbox as menus and drawers, wizards, breadcrumbs, pagination, icons, photos, and all of these topics will have explanations, real-world examples, best practices on how to use them, why do you use them? And my favorite we will have do's and don'ts examples as well. I have included all of the source material within the class that you can download and you can keep forever. And also you can download the Figma file that I used for this class so you can have it within your Figma application, also forever. And also as a bonus, we're going to take all of those design patterns. And I've added an extra area to the class. Well, that's more project-based, where we're going to use the design tool figma. And we'll build out all of these components to see what they look like and how to use them in live prototypes. Things like custom radio buttons where the hover state and the selection state here. We'll do menus that slide in, slide out. We'll do modals, accordions that utilize smart animation techniques within Figma. We'll do inline validation and learn all about inline validation in the class. And then we'll apply it to a prototype to allow somebody to see the password requirements, validate as they enter a password that has the correct requirements and press Create. We'll do animated spinners here to mimic loading of account creation, will do drop-downs that mimic the scrolling of an actual drop-down and the selection state. And then we'll go learn how to do these in mobile devices as well. More. And what's cool is I've also built out an entire Figma file where the top row of each one of the sections here has been designed ready to go prototype that you can use an example pick apart. And then during the videos will go through each one of these and we'll do it together for all of these different types of design patterns. And we'll also do the same thing for all the mobile patterns as well. So not only are you getting the best practices and do's and don'ts. You're also going to get your hands dirty and learn how to do it within the figma design tool. This class is great for anybody studying to become a UX designer or a UI designer. Or if you're already in the field and you want to brush up on these patterns. Alright, that's the intro. My name is Erin Lawrence and I hope you enjoy the class. 2. Class Structure: Before we kick off into the class, I wanted to do a quick video on the structure of each video and what we're going to cover. Each video is going to go through and deep dive into a user interface component and the existing design patterns that associate to that component. Each one, i'll, I'll give a brief explanation of what the component is, the origins of the component. We'll talk about pros and cons. We'll talk about use cases for that component. I'll show how it's built out, how the different states of the component is, what it looks like. We'll look at real-life examples. I'll show you how to combine existing components together. We'll do do's and don'ts for the component. You can say the same thing here for tabs. Again, the origins, what a tab is, examples for mobile and web best practices. And again, we'll end on do's and don'ts for each component. Alright, I'll see you soon. 3. Class intro : All right, Welcome to the class. This is just a quick introduction of what to expect for the class. And I'm also going to talk a little bit about UI design and UX design and design patterns as well. But just start from the top. Yeah, user interface design is the process designers use to build interfaces and software or device operating systems. Again, focusing on content and usability and also content hierarchy. And UX design is the study of understanding your users needs and how they use a specific application or user experience. There's a lot of overlap between UX and UI designers. User interface designer is translating these user needs that came from your observation testing or your research into content and content hierarchy. And this set of information will be used are displayed within an application's user experience. Being a good interface designer means you have a solid understanding of what content and content hierarchy you need to design for. And most importantly, what types of UI real estate components and patterns will best communicate and serve this content and content hierarchy. This is where understanding design patterns is super-helpful and that's what this class is all about. Design patterns are just a set of user interface guidelines and rules that pertain to how users use products and user interface elements and understanding these design patterns. It's a must for anybody do in UX or UI design. And these are things like form fields and drop downs and navigation bars and tab bars. And I'll get all into that here in the next second. Design patterns are extremely helpful, mostly because they save us time and money and they get us better results quicker and faster. And this is a core philosophy to agile application development. And it asks designers we could leverage these patterns and use them in our daily design decision-making. Because these patterns and these components are used every day across many user experiences. And users haven't been accustomed to how these patterns were. So essentially we know they work and we can leverage them day to day. This course is going to give you a very practical guide to understanding what these user interface design patterns are, and how designers use them, what rules apply to them? Real-world, real-life examples. Each one will have do's and don'ts for each component. And again, mastering these patterns and components will help make you a better designer, but also make you a better decision-maker on what UI real estate to use for the content and content hierarchy that you're working within. So again, it's gonna make you faster, make you better. And it'll help you apply good decision logic on why you used a certain layout or design pattern within your design. We're going to cover a lot of things. We're gonna cover foreign fields, buttons, drop-downs, date pickers, radio buttons, checkboxes and toggles. Address forums and search Forms. Tab bars entitled bars, accordions and tabs, tooltips and shadows, thumbnails and carousels, modals, light boxes, menus and drawers, wizards, breadcrumbs, pagination, icons and photos, and each one of those examples, again, we're gonna have best practices where they came from, when to use them, when not to use them. And we'll have do's and don'ts on those as well. Then at the end, again, this is all great information. If we're going to go the next level, if you want, we're going to learn how to make all these within Figma and Figma as a design tool. And I'm going to supply a file. And that file looks something like this. It's already preset, pre-designed. What we're gonna do is we're gonna go through and create all of the different components that we talked about and design patterns that we talked about in the class, like things like custom radio buttons or even just what radio buttons are. We're going to create modals, are menus like this and close it will do modals. And learn how to, not only to learn about these patterns and how to do them and best practices, but we'll learn how to make them towards the end as well. We have accordions here. You can kind of see that interaction, inline validation for account creation here, putting spinners inside of a button here to show loading states. And we'll do drop-downs and how to make these in Figma as well. We'll even do all of these for mobile applications as well. Learn how to do these in mobile prototypes as well. So we'll cover web best practices. We'll do this in mobile as well. And we'll apply all these patterns that we're going to learn about within the design tool figma, have all the files ready to go. So all you need to do is download the file. I have the example pre-built out so you can pick it apart. During the class, what we're gonna do is we're going to look at it and see how it works and then we're going to build it together. So it's gonna be super fun, it's engaging. And I hope to see you there and I'll see you in the next class. Bye. 4. Class Materials: Okay, I just wanted to do a brief video on the class material showing take about 30 seconds or a minute here, I have two different types of formats. I have all of the material in PDF format, which I'll open up here in a second and show you. I also have all of the material built within Figma, the design tool. I've included this file, it's a dot, it's class Figma file dot zip. Just double-click that file. And it's going to open up a folder. In that folder I have a Figma file dot config file, and I also have class instructions on how to open up this file, but I figured I'll do a video for you as well. Just the thing to point out, if you do open up the Figma file is you can't double-click the Figma file and open it. You'll get this error here. And I'm on a Mac here, just heads up. What you've got to do is you've got to, you've got to drag this file into the drafts sections in your Figma application here at the top left. Your drafts section may look a little different from mine since I have all these files here. So again, drafts sections top-left. Let's grab this Figma file, drag it in. You'll see this blue outline around the Figma tool. That's great. That means Figma is going to open this up and let's click and drag it. And this is a big file. It may take a second for Figma to open that. While that's opening, you can take any one of these formats here, PDF format material, and this follows along with the class. So the first-class we're gonna do form fields. Again, they're a big file, so I got to do is open up in a preview application, zoom in. Then you can just navigate from here, go from the beginning, and work your way through the right of the class and have all this material here. Again, I'm a big fan. You should just have this stuff forever, whether you have it in PDF format or in Figma format. Let's go check on Figma. Okay, cool. So it's still loading the file. And so again, like I said, it's a big file. Okay, great. It had loaded up. So let's go ahead and open it real quick. The benefit of the Figma file here is that these are all live components, meaning that you can go in and grab these elements and use those for your designs. Like I said, we're gonna do a class at the end where we're going to build out all of these. But these are all live. You can zoom into Figma, Let's say you want this date picker here. You can go in and grab this date picker. I have all the form fields. I have a bunch of buttons here you can grab and use and form fields over here are different styles that you can get into and use and they're all live components that you can grab. I haven't had a whole bunch of icons over here that you can grab two. So again, whether you, regarding class material, whether you want the Figma file or you want the PDF format as well, doesn't really matter. You don't even need this. The videos are great, they cover a lot of good content, but like I said, I'm a believer, you should have this material forever and refer back to it whenever you need. I'll see you later. Bye. 5. Form Fields: All right, welcome to form fields. The factors of a good form field are just a couple of things. And then we'll get into different common styles and states and we'll dive deep into form fields and use cases for them, but mostly they're easy to read. They have clear labeled texts and form texts. They're easy to click on an input text. They make good use of the ghost texts and I'll talk a lot about ghost texts, that it's an important attribute of a form field and it has a defined state like hover active disabled error. I'll get into different examples of those states. It has real estate for error messages and it has a clear error message of what errored and what form field didn't error. And it's an easy to understand what form fields are required, as well as what form fields are optional. Let's go get into some form filled styles. There's five most common styles of foreign fields that you see across all over the web and applications. One thing to mention too, is that form fields are super important there. Actually one of the most important UI elements within user experience and applications that we have. Only because it extracts information from our users. We get to know information about them. It helps build content. It's that barrier between our application, or it's the funnel of communication between our application and our user. If the user wants to tell your application something, it's gonna happen in a form field. It's also important for our business services like if you're a company that sells product than you need people to buy product from you. And when they byproduct they're engaging on a form field. So as a UX designer, it's important that we have a really good sense of the rules, best practices, and patterns amongst form fields. The first thing we have here is a outlined form filled. This is most common. This is the default state, meaning this is the state, but that's not hover or inputted yet, just the first state the user would see an outline form. It's just the rectangle here, and it has an outlined gray color to it. And then we have the labeled texts here. This would be like name. And then we have the ghost texts. That ghost texts is actually a secret. It's, it's a strategic opportunity for us to use this. And there's so many different functions and secrets in the industry of how to strategize your ghost texts to communicate the format that you want for your user. Or strategize it to show the community the communication goal that we want for the user or to prompt your user into this information, right? So that's called the ghost texts. I'll talk a lot about that. Again, a good form filled is at minimum 50 pixels tall, and then the width just depends on the content here. This one examples 350 pixels wide, but it really depends on the width of your form, the context, and the content that's gonna be written within this form field. Let's say it was a name or an email. You're going to want a longer form field. If it's a phone number, then you may only want a short one like this. The second state, it's a filled form. And essentially it's the same contexts. We have the ghost texts, we have the label, it's just filled instead of the outline, we have a field color here. Then we have a material UI form. Same kind of principle here. It has a ghost text and a label. It's just instead of an outline, It's using a rectangle. It's using just a line to indicate where the form is. This is material UI was created by Google and this type of style, a form field is common in Google products and Android devices. You also have a material UI without the title. This is called a float labeled where the title is replacement of the ghost texts. And what happens here is that That's called a flow label because when the user clicks into this label or this form field, you'll see the title or the label text here floats. And the ghost texts appears like this. But at the default state there is no ghost texts. It's only the title here. One thing that I typically don't use these for personally is because they don't show that ghost text at the default state. The ghost texts only shows up when the user clicks to type in information. And so we lose that opportunity to strategize our ghost texts at the default state of the forum field. And input information here that helps serve our users or gives them prompts or tips on the format that we're expecting them to enter. I've also have used these before in the past where we've had a one-column form filled layout like this. Where you may, you had something around like name here and you could say a dress or something here. I noticed when we were testing this with senior citizens and an older audience, they actually didn't know where to click. In one, in one case, the user was actually trying to click on the name here. This might've been a little bit tighter here, and they accidentally clicked on the address because the line isn't a strong enough indication of the tap area to click or tap on the target area or the tap area. Based off of those, I typically stay away from them. And you can see that when you use the most common one, which is this outline form here, this has a good sense of tap area. You can see the rectangle, that's where the input is going to happen. Where the material UI, it's just this line here. Another one is, we have is an outline form that has the float label. And again it's without the title. The title replaces the ghost text here. And so what happens? It's the same principle when you hover over the forum field. The title then floats on top of the ghost text here. Like that. Same principle I typ, typically stay away from them just because we don't utilize the ghost texts for communication strategies at the beginning. Some of those were all the default states. For hover states have forums. I'll go through this quickly. Your philosophy for hover is that something should come alive when you hover, and usually it should be a brighter color. So if you have a, a, a color like this filled form here, then it should be a brighter color on the hover state just to make it seem more alive. That's sort of the philosophy and principles around the hover. And we did the same thing here for the outline form. We just did make the outline blue. Very common saying from the material UI you get the same thing to outline goes blue, whether it's a float label here. And then the same principle for the outline form fill that has the float label is we just changed the outline color to a blue. Alright, the next state is called an input or focus state. And this is when the user clicks into the form field from a hover AM or taps into the form field. And the ghost tech changes to the type cursor. So you'll see the type cursor show up and the ghost texts and most cases will still stay here until the user starts to type. Once they type the first letter, then you'll see this go away. The ghost texts will go away once that first letter starts to type. All right, so this is the active state, meaning or I'm sorry, the input state or focus state. And all it means is the user is inputting information into this state here, or they're focused within the state there. Type cursor is here, it focused into this form field. And it's best practice on hover to use that. A bright color here, the blues. But when you get to the input state, it's better just to go with a darker gray or even a black, or you can add a little bit of blue into the gray, like what we've done here as well. But it's best to go from this light color for the default state and then a darker color for the input state. Here. You can see the different examples here, just same for the material UI. They had. The blue for the hover just goes darker for the input state. And then the same thing for the other float label form fields. All right, so the active state is pretty much once the user has typed any information in and leaves, leaves the form field. This form field will go back to the default state. The only thing that changes is the inputted text changes to a stronger color. All right, so we use a light color gray for the ghost text to indicate that there's nothing been entered here. And usually this looks like a call to action, like intern, intern name here, like that. And we want to be able to darken up the text for the input states. So when the user scans all of this, they can see that those were filled out. Again, same for the filled state. If we're using a filled form, we have a brighter white. And same for the input state here for the flow label forms. Cool. So every form field for error stage, every form should have its own real estate for error message, usually at the bottom. And again, this can happen when the user is either a typing within the form field. And we have what's called inline validation, which is when we error the user within the form field. Or it happens when they press the Save or submit or Next button. And we didn't meet the requirements of this form field. Whatever it wasn't met for a specific form field as far as requirements go, should be the error message here. Again, those error messages should be very clear on what errored. You could see for the field forms, we can just make the whole form red for the outline. It's just best practices just to, just to do the red outline on the forum field, you don't need to do red with the text or anything like that. You don't even get too crazy. All you need to do is just a little subtle indication of red to help point the user where to look at in their message. And red. Same for the material UI forms here and the other float label here. In the last state that we have that's common in form fields as the disabled state. So this is the state in which a user cannot engage or input or edit any of this information. And I like to just use 30% transparency or a light gray, or you can even use both. All right, so all of these are 30% opacity here. Okay, so let's get into the deep dive of form fields now. Look at different functions. Let's look at how we can use the ghost text to strategize the different needs, a format and inputs based off of the form field that we have. We're going to look at some common form fields. One of them is phone numbers. You can see the example of the ghost texts here is that it's giving the user the format that we want them to input in the phone number. We're not asking for a 11. We just want 1112223333 here, like that. And so what happens here is we have these dashes you can see here as well. And so when the user goes into this form field, we auto populate the dashes for them. The auto, they'll see the dashes still here as part of the ghost text. When they get to the first number two, and let's say they typed the next two. We'll put that dashing for them. They don't need to do dashes will auto, auto populate that for them. Then you'll see the completion of the form field once it's done. The other thing too to know is that if you have a mobile phone form field or a form field that is directly tied to just numbers. When you're on a mobile device, open up the number keypad. Don't open up the letter keypad and make the user go back to the number keypad. This is also in line with why we auto populate the dash, is that if your user typing as typing this on a keyboard, all they need to do is type the numbers on the keyboard. They may have a keyboard which is a number section to the right. And then on a mobile device, there are key bad number, keypad looks like this. They don't need to enter any of the dashes. They just put the numbers in and we'll do it for them. Again. It goes a lot, a lot back to that, that first thing I spoke about here, which is affordance, the least amount of time and energy to complete a task. So these are big ones. Affordance, I'll speak a lot too. And conveyance as well are super important. Date of birth. It's the same principle we use the ghost texts to input, to convey to the user the format in which we want them to input information. We want month, month, day, day, year, year, year. And the trick with the date of birth one is as the user's typing, we still show the ghost texts. It doesn't go away when the user starts typing and the slashes, Oh, you bet it. The slashes get auto populated too, right? So all you need to do is on the keyboard just typing the numbers. And here's my birthday, 09131983. Slashes are all autocomplete for the user. All they got to do is type on the keyboard. Bad, Boom, affordance, easy, no problem. When this date comes this year, you guys can go ahead and reach out and send me a birthday wish or gift, whatever you want, I will I will happily accept it. Email form is pretty simple. Instead of type e-mail, just show a fake e-mail. You can put mad or you can put like name. Email.com just shows the format at a difference here is that when the user types the ghost texts goes away, like it shows up right when they click. So you would have this keyboard cursor show up. So this thing would show up right when they, it'd be a little darker, but it would show up when they start to type. And then once they put that first word in, it will go away. But it doesn't show up like we used here on the date of birth as they're typing, only just shows up once. They click in and once they type it goes completely away. For money filled. Same principle, we use the ghost texts to show the input and the format we would like. Once the user starts typing, we remove the zeros. We don't show the ghost texts anymore, but we keep the dollar sign. Dollar sign doesn't go away. Then we add commas. We don't need our users to add commas for us. Well, we'll put the commas in, but the user must type the decimal. We don't auto populate the decimal, so they need to do a decimal. Leave that up to them. Credit card numbers. Again, look how we're using the ghost texts. You can see why I like form fields would ghost texts because it's a, It's an additive element that helps us strategize communication needs. And so we have 111 space, 2222, space 333. We had the space indications here. What happens here is when the user types, they'll see the number that they're typing. But everything else will become bullets. They only see the number there typing so they can know what they're typing the right number in. But we're not exposing all of the rest of the numbers of the credit card just for security and safety reasons. And guess what? We auto populate the spaces for our users. They don't need to do that again, all I need to do is just hit them numbers on the keyboard or that keypad. And we'll do the rest of the formatting for them. And then we always showed the last four just in case the user has multiple credit cards. I don't know. Let's say you have ten credit cards and you went on a shopping spree on Amazon when you're drunk and you ordered a bunch of stuff you didn't need and you maxed out like four or five or your credit cards and you don't really realize that. And then three days later, your girlfriend's like, why is there like 50 boxes of Amazon stuff at our house? And then you're like, Well, I don't know. And then you look at your Amazon history and you're like, Oh my God, I think I ordered a Gucci wallet the other night when I was drunk like, oh, that's not good. So when I go to buy my next Gucci Wally, I won't use the cards that are maxed out and I'll know because I'll see the last four digits here. I just made that up. I didn't buy an agouti coat. So the next thing is free-form message fields. They are free form because we don't really have a requirement of what the user is going to input. That's why it's a free form. They can input anything they want. We use this a lot in UX as like feedback fields. If we want. We have these in some of our applications where a customer comes in and they can go look at user application. And we have a little area that says give us feedback or radar application. And they open this up and we use the ghost texts again to strategize the hint or the prompt that we'd like to get from our users. So in this case, we always like to hear about problems people face when they use our software. But we love hearing about feature requests, like you'd love to see something that's in the application that we don't necessarily have read the moment. We use this ghost texts here to help us strategize that we can get that type of information from our customers and users. We also sometimes they'll have a max character count. You'll just put this here at the top right. Once the user gets to a max character count like this will go this Coco read. They won't be able to type anymore too. So you'll have two levels of vindication on. That type of requirement is this will go red and they actually will stop hitting. Once I type the keyboard, nothing will happen. We also have this little expander icon here. So for open form fields, like I don't know if maybe somebody who wants to write a pretty long paragraph, 500 characters is a pretty long amount. So they can grab this and they can stretch the form filled down and up. So that helps a lot for these open form fields. All right, so let's go look at some password requirements here. What do we call it when we say default girls texts, that means we're not really using it to strategize any of our communication goals. All right, so this one is just enter password, pretty simple. I think that happens with passwords though, is that we never even show the character that the user is typing. If I type a five, we don't show the five. It comes in as a bullet. For security and privacy reasons. We can add the little icon here, the eye icon. And when the user clicks that, then we'll reveal the password, right? So the III icon is like people are watching, don't show anything. And then when you click it and the clothes like people aren't watching, show me, show me my password. The difference between an optional and required form fields. It's better to show just text that says optional and versus another. When you have a required field, what you'll see is these little asterisks here. Most often or not, most of your form fields are going to be required. So instead of having all of the form fields with these little asterisks and not everybody knows that asterisk is a required form field, like senior. Older users don't don't catch on to that. They may not even see it. It's better just to leave all of your require form fields as required and then type in where it's the form filter optional because it's better conveyance. And if we go back to our, our guide here, conveyance, is it easy to understand information as it relates to a particular task? So optional. Writing the text optional means something because it's text, it's optional versus an asterisk is a very abstract thing. Like PDD. Not everybody knows what that means. So when we think about easy to understand information related to the task, optional does better. And then you could do, I have a whole video on tooltips will see you could do an info icon and this will give you a tool tip on hover or if you're on web, or click if you're on web and then tap if you're on mobile and tablet devices, look, we're using the ghost texts to strategize further what the secondary addresses. Example, apartment 111. You can use ghost text here for prompts like favorite ice cream instead of like inter favorite ice cream, you can do examples like vanilla chocolate, rocky road, all that good stuff. Remember that people will tab through your forms. More tech savvy users, they'll press tab on the keyboard and they'll move through each form field. And this allows the user to avoid using the mouse and having to click out of a form field and click back into it. Again. This goes back to that keyword, affordance, At least amount of time and energy to complete a task. If you see here, this is how it works. The user will be in the second field. They just completed this text here. They'll press tab on the keyboard. The second formula, the one they were just on, we'll go back to the default state. And then the third foreign field when they tab will now be in the input focus state and ready for them to start typing. So they can tab through your entire form fields and never have to click on that mouse. Let's get into some do's and don'ts. One of the things that's common here is the difference between a one-column foreign field layout and a two column which is more zigzag. The one on the right. Studies have been done with eye tracking test, time test as well. They found that users spend more time jumping from one column to the other when there's a tool column here, your eyes scan in Z's here versus moving down the form fields. And when you have a one column form field is psych psychological, but it performed better because you feel like you're completing more. You're moving down the list more, which felt like more completion versus going left to right. It was actually found that the one column form filled with the same amount of form fields tested against a two column one actually performed was faster, the one column was faster than the two column. All right, so going back to that affordance again, then single columns also do a better job at conveying what form fields. If somebody taps on the key, presses tab on the keyboard, which one is gonna be the next one? Where two column is it going to go down or is it going to go the right model? More often than not, it works in a Z pattern, right? It's gonna go to the right here and then down over here. But the studies work and one column form fields, they may have more white-space. They may not fill up your UI if you have a large desktop, but they're way easier to scan quickly and they give a user a sense of completion as they move quickly down them. Another little trick here is you can space them two different groups, right? So if this had to do with like name and this had to do with, I don't know, employer information. We just use a little bit more space from here to just group that information together. And it helps more with scanning, putting information into systematic ways. You can see why this is important, why these form fields and learning this stuff's important is that this company did a study on the reasons people abandoned their website during the checkout. Again, 50% of them was because their stuff was just way too expensive. They had too high of shopping fees and taxes and shipping shipping fees and taxes and stuff. 28% said the site wanted to create an account. They had an account wall. They didn't let a user just like guest checkout. If somebody is gonna give you your money, like make it as easy as possible for them to buy your product and give me your money. Don't make them at the create an account. But look here, 21% said the checkout process, the form fields for too long, too long of a process. Complicated checkout. Then this is a number, this is what's called a quantitative metric. It's quantitative because it's a number with the qualitative is why? Well, why was it too complicated? Then? We'd have to go look and we would take some of these principles here that we were learning ago. Wool, is it a dual column form field? If so, then what's go experiment on a one-column. You can have this out. I'll jump over to this one if it's mini form fields like this here. You see all these form fields on the right, like avoid this, that's way too many form fields. If you have this much information, it's better to put this into a wizard. The wizard is great for long forms and I have a whole video at the end of the class here where I just talked purely just about wizards. At wizards are great because it gives, it breaks up all of the long form information into little bite-sized categories. This gives a sense of the user, a sense of location like you're on here. You've completed these two tasks, so there's progress and time. And also progress and time that you only have one more left. It broke up all of these long form fields we would have here on the right. And it put it into a step-by-step process. Again, the reason why is that this doesn't look daunting versus a Zoom Outlook to the right. That's a daunting task here to try to complete where this from the forefront doesn't look all that daunting. And another little psychological trick is if you do really easy tree and really easy outro for the first step, it's super easy. And if it's really easy, most often, studies have shown that people are more likely to complete these steps in the first one is really easy, then the last one should be super easy to write. You don't want people falling off. They've already put in the work and make the last one is super easy. And then they're done. Use another do's and don't use helpful errors. In this case, we can see the passwords didn't match. Avoid things like this where these are pressing the Create button and it just says something went wrong, please fix and you don't know what went wrong, right? So each one of these form fields should have its own error that apply to itself. Explore log inputs, right? You don't control how long people's names are. At this point, we need to know if this person had a long name. We have two options. Do we ellipse it? Which is what I like to do. Give these little three dots here to indicate to the user that there's more name. And if the user wants to see more name, they can click into this and they can arrow forward with the arrow and they'll see more of the name there. Or we can break this down into two lines. Like so here. What, but the only thing with that is it, it, it causes more, it moves the forum field and creates more width or height here. And it kind of throws off the assymetry of the visual consistency of the height of all the form fields. That's why I'm just more of a fan of ellipse here. But just be aware of it. You don't people, some people have really long names, really long last names. Don't use a short form field like this. If you know it's going to be a long input. If it's an email, give them a good enough, good enough space. Remember this one already talked about it, but group relevant sections together. So if you have group one, group two, and group three, versus like keeping the same space for everything. Just use space. It's all you need to do. Space, spaces. Whitespace is your friend. Inline validation. This is great. So use inline validation if you can. So if I'm typing an email and I accidentally put a comma, error me at the point that I put a comma, like once we get here, just addresses invalid. Or if I put an extra space here, error me at this point, that's erroring me in line meaning within the forum field while I'm typing it, so that way I can fix it before I leave this form field. This is depending on your database. This isn't like don't do this or that people are not gonna use your application, but it's better to have them lie validation. What happens if you don't is that the user fills out all the information, presses submit, and then when they have to hunt down like What? Oh, why didn't they go through something errored? So then we have to look at the highlight, the forum field here, and at the retyping the form field, click retype into it, fix the mistake where it goes back to that affordance. Like we already knew the user was here, we knew it was an error. Why let them leave? Like let's have them fix it here. Why are we gonna do this to our user? I talked about wizards. It can have a whole video on wizards here. We'll wrap up with these last two do's and don'ts. Remember appropriate size. We got to zip code here. Make it the size of a zip code, even if it throws off your your visual assymetry. Because again, usability should always trumped visibility or visual. Although this may look better. Peep the way people use your product usability is always better than the way something looks. There's something that may look great, but it doesn't get used very well. Something may not even look that good, but people use it and performed very well. Versus the one on the right here. And then never, ever to three column form fields like this, please, please don't do this. Again, you could do the two column I just put be aware, this is a bad, That's not a dome. There are times that this is, we've done this, but just don't, don't actually do three column here. I'm just going to wrap up again with just some high level pieces. I spoke a lot about the single column layout. Again, one of the things to talk about too is autocomplete. Autocomplete. Great. So autocomplete is, I show this in the video where we talk about address forums and search forms. But essentially what this does is it shows relevant information based off the inputs that the user has already made. And it skips the user from writing the entire word. So if you're just typing in my name AIR, the auto-completes going to show a drop down below, and we'll talk about drop-downs in the next video. But it will show a little quick drop-down of what it thinks are matches to AAR. It says it may have arid and a couple of other things that match to that name. What happens here, What's great is like, let's say I typed in my name and I was filling out an address and an auto completed Erin may also auto populate my last name, my e-mail, my address, my city, my state, and a lot of cases the application won't provide this. Chrome like your Internet browser will do this for you. But just be aware of the terminology. That's what the autocomplete is. Remember that wizard that we shown, i'll, I'll talk a lot about this. But regardless of wizards, it's just always great to think about sort of user experiences, having these three key aspects to it, like setting the expectation, location, like letting your news or user know where they're at in your user experience, time and progress, they're going to have a task to complete like, what have they already done? Where are they at and how much time left? What steps going forward, what they need. We talked about just want to make sure we talked about the optional versus required inline validation give helpful errors. I remember just practice. Be explicit about how you want people to treat those long names in your form fields and guess what engineers are going to want to notice. They're gonna ask like, okay, so how do we treat a long name? Do we go to two lines? Do we ellipse? And I preferably like to ellipse like I showed you before. Okay, Cool, that's form fields. I'll see you in the next video. We'll talk about buttons. 6. Buttons: All right, Welcome to the next class. We're going to talk about buttons. I'm gonna skip the Button Theory and I'll do that towards the end because I think it's gonna be more relative and easy to kind of get once we go through this whole thing. Alright, so let's start with some button types then I'll get into button combinations in different states and best practices and do some don'ts. But typically we have our square button. You can see here, I'm a good button, is at least 50 pixels tall. Good Tap areas, 50 by 50 pixels. The width is really dependent on the context of the button. And so you want a little bit of breathing room for your texts. I'll, I'll show some do's and don't examples of that. But this one, it's 140 pixels wide. It can probably be a little bit shorter if you wanted to as well. But good breathing room for the topography inside the button. And at least minimum 50 pixels by tall. We have a square button that has no rounded edges. And you can see the one on the right has some rounded edges to it. This is called a pill button. It's pretty self-explanatory, looks looks like a pill you would take. It's fully rounded, full rounded on the edges. This one's called a ghost button. And it's just a ghost button because it has an outline so that the primary color here would be the outline of the button. And the fill is most of the time white or whatever color of the background of this button sits on. If it was all like a dark UI, it'd be a darker color or if it was on a white background, it'd be white like it is here. But essentially it should look like It's just an outline with the text. And these are really great for secondary buttons. I'll talk a little bit about that where you can see these full color ones are great for primary buttons. And this ghost style is a great combination with the primary button. And these are for secondary actions. And I'll talk a little bit about secondary actions here in a second. We have text buttons or links. These are just words without any graphic elements next to it. And if you tap on them or click them, they'll, they'll be, they'll take the user to a place. Pretty simple. We all know what links are. Either have the color texture, you have a line underneath. This has, the line underneath is actually in some cases better just because of accessibility. If somebody is colorblind, they might not see this as a link. But if they see the line underneath, then it indicates to them that that's the linkable element. Buttons can also have loading states in it. So you'll see this one's pretty common where user will be paying for something on a site and they'll click the play button and instead of jumping them into another screen or at other state, which is like loading. And if something didn't happen, right, We error it. We can keep them in the same context and the button turns into a loader state. Keeps that. It gives that level of control and feedback and you press pay, you see the feedback we received the payment. Just wait a second, we're processing it and then we'll give you a success. At the end of this. We have icon buttons again, it's just texts and icon combos. You'll see popular ones like add next, download. And then you have icon buttons. They're just buttons without the texts, and they just serve as action elements. No tech, usually these are more common icons like shopping cards and forward or snacks and download and close and an ad. Most times they don't need text next to them because they're commonly recognized icons. And they can go inside the button like you've seen here, or they can just be icons themselves. I have a whole talk at the end, one of the last classes I'll talk about just a whole deep dive into icons, iconography, best practices there. Let's go look at some button combinations. I really like this combo here, which is secondary button on the left, which is the more lighter in color. Or I like the combo of the ghost button for those secondary actions and secondary actions or things like it'll cancel or clothes or in some cases maybe delete. Then primary buttons darker in color. And I like the filled one over here. So ghosts on the left field, on the right. And those are your primary action. So those are the most important thing that you want your user to do in a particular workflow or a screen that should be in combination or accompanied with the primary button. Those are things like Save and Submit or next. You can see you can also use color to help indicate those secondary and primary buttons. You have. A little bit less strong color on the left and a much visual stronger color on the right. Then you have the cancel ghost button pill on the left and the pill on the right. Pretty simple stuff here. I typically like to use the same width of these buttons side-by-side. So if you pull this cancel button down here, it's the same width of the Save button, so they stack very easily. You can see that here. They stack, stack nicely versus something like this. It's okay to have your, your Cancel button, maybe a little smaller than your primary button just visually, it gives some more important to see or stronger tone to the primary action. That's great when you do this type of horizontal alignment, but when they vertically stack like this, it throws off the vertical alignment. And it's not a bad idea just to make it the same width like that. Go back a little bit here. Okay? Button emphasis, kind of describe this already, but high emphasis for primary Kotlin actions, darker color, medium emphasis, secondary actions, lighter color. And low EF emphasis meaning like no action disabled buttons that don't have any action to it though should be very low. The visual emphasis or visual appearance of a button. Let's go look at buttons states. So again, we have this default state. You have a hover state here. And like I talked about in the forum video, best practices for hover is to use a brighter color. This helps the button become more alive. It's like, Hey, I'm alive, click on me kind of thing. But remember hovers only an action we use on web, not mobile and tablet devices disabled, I tend to use 30% opacity for the background and then 70% for the text. You still want people to be able to read the texts if it's disabled, you just want to make it look very disabled. They still should know this is a submit button, but they should see it as something that doesn't look engage or actionable. Alright, so you can use shadows on buttons. I'm gonna show you real quick some buttons here or some shadows here. So if we were to add a and I have a whole talk on shadows, but let me just quickly go through a quick little demo on shadows here. If we were to add a shadow to this button, one of the first things not to do or to avoid as the default, the default shadow that you get is never the best, just never start with default. You can see here it has four on the y, meaning on the vertical line below the button. For pixels down and there's 0 on the x. That means there is no shadow showing up on the vertical side of the buttons. So again, y on the horizontal line and x on the vertical line. We at least want to do five on each side and five. Now the next part is that this button is the shadows too harsh. Like if you squint your eyes, you can still see that button. We don't want that. We want a very subtle button here or a shadow here. So let's go ahead and add some blur to it. That's already better. 20 blur will be good. I typically liked even regardless of the buttons color, I like to put a little bit of blue, just a little tight bit of blue into the color shadow of that button, right? So regardless of the color is pink or purple or whatever, a bluish little bit of blue and the black or gray area for the shadow is always better than just pure black. There you go. That's it. Give us a little bit of depth. Feels like a button feels like something you can tap on. You can even go and add a color. You can add the same color or similar color to the shadow for another effect as well. So let's go ahead. Let's actually change this up. Let's do, let's do a blue color here. Cool. Now let's go over to the shadow color. Let's change the shadow to a little bit more blue. That gives you a little bit more of a look. I'm gonna take down the blur bit. I'll probably go a little bit higher on the opacity. There you go. Very subtle. Subtle is effective. We don't want the shadow to be very noticeable, should just give a little bit of depth. You can see these three here with the shadow. There's no depth on this button. And these shadows help with a little bit of the depth here. Just one thing to remember is if you do this pairing system where you have the ghost button on the left and a primary button on the right. And a user goes to hover on the Cancel button. And you feel the cancel with the orange here, the same orange as being used for the primary button. When you look at this data hover, they both have equal visual hierarchy. They're competing against each other just in the hover state. It's better to avoid something like that and use a hover that's still maybe within the orange area, but a little bit lighter of a color tone orange like this is better, right? So the primary still looks like the primary button, even in the hover state. Alright, the next button state is called a focused state. And this is when a user Ms highlighting this button element using an input methods such as a keyboard tab. You can tab through form fields and you can tab to the button as well. This isn't the mouse going over the button, but I like to use the same state as the hover where it's a brighter color when you teach keyboard tab over to the button. So if you have three form fields and a submit button, the user can tab into each one of those form fields, put information in, and then tab to the button as well and press Enter on the keyboard as a submission. It's just showing that sort of focus state is important as well. Again, as long as you have the hover defined, it will, it will, this will be the same state for that. There's a pressed state. This is when the user has pressed the button. Again, you can use a lighter color than what was on the hover or focused state. You can also do an animation where you have this default, you have this hover, they press it, and you get this little animation that happens pretty quick, but it goes from pressed 123. And it's real subtle, but it gives that feedback to the user that they click the button or tap the button. Let's get into some do's and don'ts. Buttons should have one or two words, three words Max. Anymore than three words, it's not easy to scan and see what the primary action or what the button does, right? It should be really easy to just look at the button. Button is going to inform the user what it does. And here you have to read within this button, this is too long, too much text. If you're using button icons use horizontal alignment and avoid vertical alignment with the texts and the icons here just creates unbalanced shape and it's not a common button here. So just avoid it. There's no reason not to do something like this on the left. Give good spacing. So you can see here we've given equal spacing from the top and equal spacing to the right. And you have a good button like this versus the one on the right here. We have good spacing on the top. Well, we don't have even spacing to the left and right, so we need to make this a little bit more spaced out. Also give good breathing room from the text. You can do equal spacing or you can add more space from the left and the right. This is helpful because you have a tap target, the real estate that this button takes, how big it is, that's going to inform how easy it is to tap or click, right? So there's no problem. There shouldn't be a problem with making the button bigger, especially if it's the primary button. To make it easy to, to tap and return, you get better breathing room from the text in your button versus the ones on the right here. Like all these buttons feel squeezed. Like the text fields very squeezed here like I can't, I got to keep it this way so I can show you the example, but I just really would have gotten me near and just, that's so much better. Yesterday Should nice button now, you can see it's really hard for me Nazi even leave these buttons like this. So again, it goes back to tap and click space like this should be easy to click and tap. So this one needs more vertical like that looks good. If you're using a button icon, use one icon at a time. Don't use more than one. It mixes the communication style. You can see this one is like what is this a download or NADH. I don't know. Use a brighter color for hover. Then also I've seen this once. Don't make the text bigger on a hover. Use color as your hover indicator, not, not text and size. If you have a secondary link like this one where it's cancel, it fits really well underneath the Save button. Don't put it on the top because people most of the time we'll leave their reading down like that. We want the primary button to be the first thing that somebody's scans and not necessarily the cancel button because it cancels secondary. Same deal here to the left. You can stack them too as well. Most of the time we're doing primary buttons on the right and secondary buttons on the left. You can switch that order when you have something that could be accidental. If you have, I'm going to squeeze. So I'm gonna shoot over to another class. I'll talk about here. This one here. If you have something where somebody's gonna delete something and a delete, we can always do an RU sure, mobile modal here and we have a delete and a cancel. Sometimes these modals will pop up and the user will accidentally click in the primary position right here and accidentally delete this. And this is an impactful delete because they're deleting an account and we're like, Hey, do you sure you want to delete this account? Like you've done a lot of work on this account, you're gonna lose everything, right, so the first delete that they did, we fire this modal up and we just give them one more chance to say, are you sure you want to do this? You can switch the order of these buttons, so that doesn't happen. You can put this one over here and you can put the cancel one to the right, like this and switch that order just in case they accidentally press the cancel again. It's not the impactful primary action. This is a strategy to, to sort of use that combination here to help just that accidental case where accidentally press Cancel again, but you'd like all thank you. They did that. I didn't mean to press Delete where this one you really have to go. Oh, I really do want to delete this rapport. That's pretty much all I was describing here. On this one. Here was you can switch this up a little bit. Just for those very impactful deletions that happen in those. Anything that can be accidental that you want to just make sure your user doesn't do this. When you use a button on the background of a photo like this, use your field color button like the primary one. And most of the time don't use the ghost button here because it's going to impact legibility of the text where the one on the left here stands out a lot more. When it comes to links. Use the right amount of words to show your links. So you see the one on the left. If we just put click here to see your CR user guidelines, the click here, the blue texts. And so everything else is easy to read. It has good legibility to it. And we're also conveying to the user that we're intentionally using blue here because we want you to engage with this link. You can even go a step further and add a line here if you wanted to as well. Just like that. Versus the right, like making everything blue, I really want my users to use this. They may not, first, it affects readability and legibility. And they may not know that this is all clickable. They may think it's part of your brand and you're just using blue texts for everything. Be crafting smart with your links, especially if they tie two sentences like this. Use one line of text for your buttons. Never do this, where it goes to two lines. It just throws off the button symmetry and it looks super weird. Again, if it hasn't got a two lines, you have too many words. We got to something's got to give your words like button with something nice to give there, but never should be on two lines. Again, keep buttons to same width when you stack them, and then don't do mix width like this when you stack it. All right, I think that's it. Let's just quickly go through the color of the button theory and we'll wrap up. One of the things I just want to call it, you'll hear this acronym get thrown around. It's called call-to-action. The call to action can refer to two things that can refer to the text on a particular screen, which is like the most important thing you want a user to see on screen, or refers to the button, the call to action button, which is that primary button. Then again you have secondary to action, which is that secondary button. Things like back and close, cancel, things like that. Remember the size button should feel easy to click, easy to tap Apple user interface guidelines. They say, anything in there, Apple's devices or Apple Store applications, anything tappable or should be 40 pixels by 40 pixels. I personally think that's too small. I tend to do at least 50 pixels by 50 pixels as the smallest. Again, remember the background color should have good contrast and should stand out from other UI components if it's the primary button, right? So the primary button should be one of the most like, darkest things in the application. So it's really easy to know. Can show you an example of that, of what the thing that you need to do, right? So if you look at this page here, squint your eyes and look at it, this orange pops, right? So it's the primary thing we want the user to do. So we're using visual hierarchy to convey that as well. Also, you can use that color again to make a key differentiator between the primary button and the secondary button. Already talked about shapes. So just pretty much horizontal pill shapes. Placement is also crucial, right? So no matter what your color of your button is or the size of your button. If it's not in a location where people in your users can't see it or scan it easily, then it's not as effective. So placement again of these buttons, they depend on your context, but usually in the top or the bottom of your screens work best. Then again, copy should be short and sweet, easy to read, easy to scan. And if you don't know what the copier button is member, it should inform what the button is going to do. Okay, cool. That was buttons. I'll see you guys on the next. See you all in the next video. We'll cover drop-downs. 7. Dropdowns: Alright, let's talk a little bit about dropdowns. Dropdowns are pretty much formed elements. The only difference is that they're used for selection. So they have something that when you click into the form field here, that menu appears a little what we call it the drop-down menu here. That has selection variables for the user. They're great for anything that has three or more items or variables for a user to select. Because you can put a whole bunch of these items. You can put, say, 15 of these selections within the small window. And it saves a ton of screen real estate, real estate as opposed to just showing all 20 of those selections. But if you only have, say like two to three variables or selection items for a user, then it's better just to use a radio button or a checkbox. And I'll, I'll show you those in video here. I think not the next video, but the video after we'll dive into radio buttons and checkboxes. The criteria for a drop-down is, again, we'll use the same styles for our form fields. You'll see the outline form field here. Then the material UI form that just has the line. The only distinctions from a form field and a drop-down is the little carrot, this little blue arrow here. When that gets clicked, that opens up the drop-down menu. And the thing that's a requirement for the drop-down is that the user can only select one item, and then that selection becomes the input here where the ghost text is. If you have more than, say, 20 items in a dropdown, It's also best to do a type of head or autocomplete, which I'll show you an example here in a second. Drop-downs are great for not only forms, but you could also use them as menus. And so you'll see them a lot in e-commerce sites. You'll see them in your computer operating system like Mac. The top window area has menu dropdowns here. You'll see a lot of drop-downs for menus that looks something like this. Here's our Bobo t site at our home goods. And then the apparent level architecture is the home goods. And the child level information based off home goods is pillows and art prints and clocks and what have you. Then. You'll also see drop-downs in the form of menus called mega menus, where these are large e-commerce sites and they have multiple information architecture where they have a parent level like home goods and they have a child level like pillows, and then they have a whole bunch of grandchild level a pillow options here. I'll get all this information and menus and an a video I think towards the end of the class I talked about menus and drawers, and we'll deep dive into this topic. Let's go look at some typical drop-down styles here. So we have the default style. Again, we have that hover where the outline turns blue. We have the dialog window or the actual drop-down that contains the menus. And also note that within this drop-down menu, you also have the hover here. This will follow your mouse. Again, hover for desktop but not for mobile or tablet devices, then you have the active state. So this would be the selected value here. So if a user selected something, then you have the error state. So similar to our form fields and error message and an outline for red to indicate the error. And then again, you have that disabled state, so 30% surpass transparency or, or a very light gray. Or you can even do both to convey that this drop-down is to stabled. Let's go look at some drop-down types and use cases. They're great for anything that has range value. Rather you're saying like, how much square footage is your home or how much money do you make a month? And you can use the ghost texts again to help give a little bit of the communication goal or the prompt like example 500 to 100. When the user clicks into this, they see all the ranges they can select here. This is better than just a straight input of like I mixed 2300 a month. You could actually are $335 a month. Sometimes it's better in those values just to give a range. And it makes it easier for the user to just select a range and it's not so intrusive. Especially when you think about how much do you make a month versus an exact number versus a range. And same for the square footage here. Like you may not actually know your exact square footage, but you'll know a rough estimate of your home's square footage. So the range and the drop-downs are good to go together. So you can combine the dropdowns with form fields. So here you can see we have our phone number value. Let's say this as an international product, you can use the drop down here to select the type of phone number you are going to input. And then the four number format here and the ghost texts will change based off of the selection of the country that you've selected. Another big one is that again, if you have more than 20 items, when the user clicks the form here, they'll see the drop-down, but they'll also see the input typing state. And as the user types it filters the list below. So you'll see this very common for states selections. And so as you type in, MA, you'll see the drop-down list of items filter based off that type. And then again, you could go here and click on Maryland, or you could keyboard arrow down on your keyboard and go and do and select this element. So the hover state not only works for hovering the mouse, it also works if you were an arrow keyboarding down on your keyboard here as well. An important attribute to that kind of gets overlooked. Sometimes it's the hover state for this drop-down here when you're designing this, you can combine these drop-downs with checkboxes. So let's say you wanted something that had more than one type of selection. The default dropdown being only a one selected selection criteria. But in this case, you can combine it with the drop-downs to inform a multi-select. So in this case, we're looking at all of the ice cream flavors. Have the checkboxes here. And if a user clicks on the checkboxes and closes the drop down by clicking outside of the drop-down window. So anytime that drop-down appears, you click outside of it and it will close. And you can see here the selections it based off of the multi-select drop-down coming in. And if you click the X here, it would de-select vanilla within the drop-down, and it would also delete this value here. This would pop over and cookies and cream, which slide up here like that. Awesome at it. Another way that you could use the same drop-down is by doing a filter icon. So you can see where the drop-down has the carrier or the arrow to indicate the drop-down. And then for the filtering, we use a filter icon. And if you open this filter icon up, you can see you're selecting food types. This would be good for like an ordering online delivery service. And in this case we have Chinese, Italian, and Indian food being filtered. And usually you'll have the filter icon and in blue or a color to indicate that this form field is being filtered. If it wasn't being filtered, meaning that you had all of the food type selected. It might look something like this, which is the select these. Just the gray color here, the same as the stroke color. That would be the default state. And if it's filtering the list, it turns blue to indicate to the user that the information below is being filtered by the food types. Again, you can use the scroll within the drop-down and scroll with the mouse to see the other selections that are below the fold. Below the fold means that this is the selections I can't see underneath the dialog window or the drop-down window. A big thing that you'll see here quite often. And you may have not noticed is that a mobile dropdown, a drop-down on your mobile device is a little different from a drop down in what we just saw for web. Mobile drop-down utilizes the full real estate, the full width of the phone, and it makes it easy to tap to select the elements here and also scroll the elements that are within the items that are within this drop-down, right? So what you want to avoid is using a web format mobile drop-down like this because it utilizes less space and it can make it hard to tap and swipe this area to see the rest of the dropdown items. And it doesn't utilize the full space for tap real estate as well. On a mobile device, your friendly, most friendly tap spot. And the easiest to get to is where this gray boxes, That's the idea behind a mobile drop-down is to utilize the full real estate of the phone, the full width. Also make it easy for the user to swipe up and down within this drop-down selection. It looks something like this. I have one open here. All you have to do is click on regular sweet I or tap on regular sweet ice here. You're sweetness level will show up and if there was more fields, you would just click and drag our swipe. And it would show different sweetness level values here. And if you select regular sweet or semi sweet here, it's going to close the drop-down. You large tapioca if you want to. I don't want to make you hungry for Ababa t. But yeah, that's essentially the mobile drop-down there. So again, the avoid web style dropdowns on mobile devices, you can do these for tablet. But since our real estate is so small on our mobile devices, It's a slide up from the bottom. And then when you tap on your selection, it slides down. Let's get more into some do's and don'ts. Again, a drop-down is great for three or more values. Another thing is for the date form filled, it's better to have the user just enter the date here. Month, month, day, day, year, year, year. Then versus doing the drop-downs for separate months, days, and years again, because this is an affordance, it's going to take the user either three tabs or three clicks to get in here and input this information and then find the date. Let's say you're looking at your birthday or something like that, to scroll down and find the date that you're on versus just engaging one time, one-click one keyboard numbers, input and be able to input the numbers based off that keyboard. They are great for combined form filled with a date picker. So what this is is I have a talk just on date pickers on the next I believe the next video we'll talk all about date pickers here. But essentially you can go in, you can type in the date here, or you can click on the calendar icon, which will then will show the date picker. And you can either go today's day as default or you can move forward in time or back in time based off the context of this, if it's like scheduling an appointment, then you're only going to be doing forward in time. If it's more of a past date of time reference, like you want it to look at analytics or something that happened yesterday on your website, then you can click back into the days and won't go. You won't be able to go future state here as well. But I get into all of that in the date picker video here in a second. Okay, So if you have less than three values, it's better to expose these as either radio buttons or check box because again, it goes back to affordance is less clicks and exposes the information at the face level and not within the drop-down. So avoid if the question is you're over 21, use the yes or no radio buttons versus Are you over 21? Click, and then now you've got to go do another click. No. So it's one more click. Better off doing a version like this with the radio buttons. Drop-down. Width needs to be minimum at minimum. So the window here, this thing, this width needs to be at least the length of the dropdown form filled. Don't make the form field here less width than the actual or the drop-down dialog box. Don't make that less width in the form field here. It's okay if they go over like they can go a little bit wider than the actual drop-down itself. Just don't make it less width here on the right. You can do either one like this form field can live above this drop-down here. Like when you click on it, it can't go above the value. Or it can see it can do what it's doing here, which is it slides underneath the form field, either one or totally fine. So you can see the example here like you click here and the form field dialog box here. It goes on top of this favorite for color drop down. Whereas here it goes right below. There is no right or wrong here. Told both of those are acceptable. Remember to give good spacing between the arrow here and the text. And always use the width that determine the width of your drop-down based off of the longest word that you have within the drop-down area. That will be that will determine the width when it's selected. So if you have a long word here, makes sure that this covers the long word here. And if it goes longer than that, let me type this into real quick. Cool. So if it goes longer than the drop-down, what you can do is you have a choice. You can go to two lines, which I typically don't like to do. Or again, you could do what we've done in the past, which is ellipse off. Good, just go three more like that. But let's say that your word is just where it's at. Let's say you just have the longest word in that drop-down is here where you just have one word on the second line. It's better just to add a little bit more width to your drop-down. Pull that out that's too tight here. Add this a little bit longer. There you go. That should be a good width for the longest word within your drop-down menu. So this would be like the most longest ice cream flavor in the world here. I'm going to undo that. So again, just give good, adequate spacing here for these drop-downs. Don't tighten the arrow or the texts give room for these things to breathe. Again, ellipse the long words here, and don't go to two lines. I think it just looks weird at throws off the asymmetrical alignment as well. Again, give good spacing between the texts and the form fields. Don't squish these down like this, right? This should go, give it some breathing room. Well too tight here they suffocating this thing should be able to breathe a little bit. As always, use the right amount of length for the dialogue list box to scroll, right? So all of this content within here should be able to scroll. Don't make the list box so big like this that it shows all the items because that won't fit on your device or your desktop. And you'll be scrolling the whole entire thing to get down. Anyways, if you have a list this long, It's better to do a type of head. Anyways, just show the list here if the user wants to scroll down and find it great. But they can also type on the keyboard and quickly filter that list and then find the value of the variable or the input selection that they're looking for. Alright, that was drop-downs. And on the next video here we're going to cover date pickers. I'll see you there. Bye. 8. Date pickers: All right, Let's talk about date pickers. A date picker is pretty much a drop-down for dates. And it allows a user select dates by interacting with a calendar overlay. And there's mostly two common types of date picker functions. The first one here is used to select one specific date. The other most common one is to select the date range. Let's start with the first one here. If it's used to select a specific day, it's commonly used for scheduling. If you were to make an appointment, say at the Genius Bar, Apple Genius Bar, or a one-way flight. Or didn't creating an appointment for your Diego see your dentist to get your teeth cleaned. And what happens here is, it works just like a drop-down and you click on the form field itself. The calendar overlay drop-down shows you have a little gray box that indicates the day that you're on and then you tap anywhere and you'll see the active stay appear not only where the ghost texts was, you'll see the active completed text. And you'll also see a representation of that selection on the calendar overlay as well. Then it gets a little more complicated when to use to select a date range, and again, commonly used for roundtrip flights or hotel stays. Examples you can find this as on Google Flights or Travelocity. And what happens here is if both of these check-in date and check-out dates or departure and arrival. Arrive or depart dates. These show up as one equal calendar overlay, but two different types of date fields. And what happens here is when you click and say check-in date, your first selection makes the the first date. And then on the same calendar overlay, you can go forward months or back months. And the second selection makes the date range. And you press done or you can click off of the drop-down window and close it. And the first selection will input the value for the first date picker. And the second selection here, we'll input the value for the second date picker. So let's go look at the states for a date picker here. Again, you have the two most common types of styles. You have that material UI for that just has the line. And then you have the outline form here we're shifts and outline rectangle. Again, the hover state, going back to the principle where something lights up or feels like it's alive. We're going to use the blue for the outline or for the material UI dropped, date picker, drop-down rule, use the line for, the line will turn blue. And then we have the active state again, that's just the input state. The error stay here. And a disabled state as the 20% transparency within the calendar dialogue picker. This is pretty complicated itself, just the box here because it has a lot going on. You can go back a month, you could go forward a month. Like I said before, you have the the gray rectangle box around the data. It's today. You have the blue indication, which is the selected or acted date. And then you also have a hover state as well that would go around and follow your mouse here. So there's a lot to just go within the dialog box. You can also use these and again, you can combine them with a date field. If you have a date selection, the user can go in and type just like we would the date field on the form fields that we saw before, they just open up one keyboard pad type in the numbers, will do the slashes for them and then they'll complete that. Or they can click on the Menu icon, which then would open up the date picker drop-down or dialog window where they could select, make the selection for the date. You can also get pretty crafty with your date dialog box or drop-down selection. And you can make it a little easier for selecting years in the past and you can add months. And again, this would help with the affordance gives it a little bit easier for the user to go back years, go into different months here, and then make the selections here as well. When we get to mobile date pickers, I recommend that you, and it's best practice to take the full screen real estate. And I'll show you some examples that we built out for an application that I'm working on. This is great for. Again, tap real estate at utilizes the full screen real estate that we have, the precious. Screen real estate that we have on mobile devices. And it makes it really easy to swipe two different years as well. I'll show you an example here in a second. Again, it makes very clear use of the, if this takes the full screen real estate, you can use these bars here is to in it to indicate that the date range in which you've selected for an individual date as well. And again, it's more tappable real estate, easy to swipe up and down and see future months. You could see it or past months you can see it in Google Flight examples. If you go look at Google Flights on your phone. And then here's the date picker we, we use for an application that I'm working on. This is for a solar application, and essentially you have the date picker here. You can go back in time and you can analyze your system. And if you click on this Tuesday or tap on this Tuesday, you'll see the date slide over again. You can go back. At this point, look how easy it is to swipe past different months. All right, so I can go easily go into the past. Let's say I wanted to go look at September 23rd here, I can click on the 23rd, press Done. And that would change my selection here. Lot easier than going back and forth on these arrows, such as a quick way to get into there and select a date. And then I'll show you here the custom date field. So same principle here. We press the custom, the slides in and you have the start and the end dates. Again, really easy for the on a mobile device to swipe these different months. Let's say I wanted to do the 29th of September here, all the way to the 13th. And you could see the indication of the orange bars to convey to the user the date range. And if you press Done, we'll have the range here. And the user can go back in, add different dates that they need to. That's best practicing for date pickers on web, you can use things just like this looks great. And then you could use this type of interaction for mobile date pickers as well. Let's get into some do's and don'ts use a date form field for birthdays. So again, if you're doing a date of birth, use the format like this where we show MM, DD, YY. Never use a date picker for a date of birth form field. This will show when you click on this, when the user clicks on the date picker form field, the drop-down is going to default to today's date. So if you can imagine, born in 1979, I got to go back and tap through to 1979 on these months. Like nobody's going to want to do that where on a form field here I can just easily type the format ba, ba, ba, ba, ba, ba, done. Remember for mobile devices, give enough space for your calendar and also remember to give a good Tap space. If you remember in the past video, I talked about Apple user interface guidelines being at least 40 pixels by 40 pixels for any type of tap real estate on your mobile device. You can see here if we made the calendar really small, it's gonna be really hard to tap on a specific value, especially if you have big thumbs or fingers. So here's 50 by 50 pixels. You can see that's, that's not, that's not good enough. It's going to make somebody really hard to select just one of these values where here, each one of these letters are these numbers here is precisely spaced out at 50 by 50 pixels. So that we follow that principle. Alright, so that was date fit, date pickers. And I'll see you on the next video where we'll cover radio buttons, checkboxes, and toggle user interface patterns and components. See you there. 9. Radio Buttons, CheckBoxes, Toggles: Alright, in this video we're gonna talk about radio buttons, checkboxes, and toggles. For radio buttons. They're used when there is a list of two or more options. Their function allows the user to select exactly one choice. That's all you get. One choice with the radio buttons. And if you're clicking on a non selected radio button, it will deselect the other radio button that was selected. So it's only a one choice function. The origins here is a radio button was actually modeled after these physical radio buttons that were in old cars. And what happens is you would have these predefined favorite stations that you would, the user would select. If you click this am selection here, then the car would go back to play that pre-selected defined radio station you had. And if you click the another AM station, the one that was just there would pop back out, and this one would pop back in playing the other favorite station that you would have. So it was a similar functionality of radio buttons, meaning that it's only one selection at a time. And instead of popping out and popping in, today's world, they look more like this. There are circles for a default state, and then there's for the active state, you'll get the two circles here and the inner circles fill, always filled in like this. You can customize these. I'll show you how to customize these in here in a second. But in most cases, There's usually already one predefined radio button still in the active state selected. Even if you got to a radio button question like this, I said, Are you over 21 and you press yes. Now there's no way to deselect this. You can't just de-select this state, meaning like go back to this state. Once one is selected, it stays selected and now you have to choose it's one or the other, either yes or no. That's the primary functions of wind and why you should use a radio button, especially over a checkbox. Checkbox gives you multiple selections. Were a radio button is only a one selection criteria or function. You can see here some use cases here is if you were to select what time do you want, what time is your dinner time? And you select five o'clock, or six o'clock or seven o'clock, it's only going to be one time. You only have one time, say in this day that you're going to have dinner. If there were other times you aren't seeing, here's how you can combine it with a open form field if you press Other than the open form filled goes from the disabled state, which again is at 20% opacity and now becomes the default state. And a user can enter a slot that they're not seeing based off their dinner time here. Cool. You can do custom radio buttons here where in this case we have a select your gender. And so either you're male or female. And if you're a female, you, when you hover your mouse over here, you'll see the pink outline as a hover. And then you'll have this selected state, which is the full color state here. But again, we're using radio buttons for the right amount of content or function, which is one selection only. You can see this is a custom style for a radio, but it doesn't look like a radio button, but it functions the exact same way as a radio button where if you were to click Mel, it would de-select the female and it would select the male. Here. You can see the same selection here is I have Mel selected and female not. And if you were to hover your mouse over the female state here, it would click and clicked. You would select the female card here as well. The difference is we actually included the radio button here on the card itself, right? So we added the card. Without the card, it would look something like this. We added the card here to give it a little bit more flair polish. If you have more than three radio button selections like this, lay them out vertically. It's okay to do them side-by-side here. If you have two or three, you can probably push to four. But any more than that, you want to lay on out vertically, it's an easier to read and easier to scan. All right, so here's a selection where you have a whole bunch of these buttons laid out here. And what happens when they're laid out vertically like this is you may not have enough real estate for all of these to fit and you definitely don't want to break these down into two lines, just see how weird that looks. And what happens is the user has a hard time scanning the association between the radio button they selected and the time. So you can see the seven o'clock is inputted, but sometimes it can be confusing if weighted is the button here more six o'clock, or is it seven o'clock? Where if you lay it out vertically like this, it may take up more screen real estate. But as far as the function goes, it's a lot clearer on the relationship between the radio button and the time field. If you have more than, say, ten options, then it's better just to use a drop down again. The drop-down serves the same function. It's one selection at a time. What time do you go to bed? And you're going to do our ghost text here. So example 1030, they can come in, make click the drop-down menu, select 1030 or whatnot, whatever time you got to bed, maybe four AM. We're here. It takes up a little too much screen real estate. And it's a lot to scan for a user right away to see all these options where a drop-downs better because it will hide it within the window. You'll save screen real estate and the user can scroll or swipe to find their preferred time window. Alright, so the next thing here is just to remember one option at a time. Only. Pick a number one to five, you only pick them one number, number one. Here you can see we're breaking the foundational rules of radio buttons. You can't have more than one selected. That's referring more to a checkbox type of interaction and not a radio button type of interaction. All right, So good segue. Let's go and talk about checkboxes. So again, checkbox boxes are used when there's a list of two or more options. And their function allows for a user to select more than one choice within the selection values. So there are no, there are no checkbox is selected at default and the user can go in and unselect more than one option at a time. Or you can have some cases where you're filtering a list. You can have all of these pre-selected already and the user can come in and de-select based off of that. But in this case, we want you to come in and select your favorite ice cream flavors. You can see here where the user clicks or taps on any one of these. And then you'll see the multiple select here with the checkbox. Again, you can combine the checkboxes with the drop-downs like we talked about in the drop-down video where we have the form field here you click, you've got the checkboxes here you click on Vanilla rocky road cookies and creams. And then you'll see the pill form selections here show up. And again, the user can click one of these to delete that would also uncheck it in the checkbox as well. Styles are pretty simple, it just has a outline for default. Again, you can do two things for the hover. You can make the outline go blue or you can fill it with blue and then the active state when it's selected, you have the little checkmark. And then you can have the disabled state when something's selected on the active state. So again, 30% opacity. Or you can have it on the default state where there's nothing selected. And again, that's 30% opacity. You can customize checkboxes. So again, just using these for the right type of context before we use them for like Are you 21 or older? Yes or no, or male or female? One selection per criteria where for the radio buttons where the checkboxes we can do multiples. In this context, we're going to ask somebody what their favorite, select their favorite activity. When the user hovers their mouseover on any of these, we can use the outline stroke to indicate these are alive and clickable and tappable. And when they click and tap on one of these, we fill the card shape here. And now you can see these are custom checkboxes. They allow a user to select more than one and then a little bit more fancier than just the checkbox here with text next to it, we can add cool little illustrations and icons. I also have a whole video on just icons and iconography and the best practices around using them toward the end of the class. Okay, Let's go move over to toggles. Toggles are pretty much a switch that represents it allows a user to turn things on and off. And it represents a lot of what we see in our houses, which are light switches. So there are more actionable elements used in settings. The thing is like Wi-Fi and Bluetooth. You'll see this a lot or turning off notifications. But the core function to a toggle on and off. You're putting something on or you're turning something off. Where a checkbox is more of a selection criteria and a radio button is also a selection criteria. A toggle has a little bit more uniqueness in that sense because it's more of an often on type of switch. You kind of see it here like received notifications. You'll see the default state is gray. And then when the user turns it on, they will say turn notifications on. When it's on, it will say turn notifications off. One way you can you can change the labeled texts to help indicate the state in which this is on. You can also do it here. Received notifications you put off to the left, onto the right office a darker color now it's the same color as the radio button or the toggle. And then when you turn it on, on, turns into the color state that is used for the on-state of the toggle and off goes back to that gray state. Same deal here. Here's another example where it's a little bit smaller and more common on web is this type. And you click on the circle, slides over. Again, we add some color to indicate that this is on. And then you can turn it off again as the call to action or turn it on when it's at the default state here. Let's go get into some do's and don'ts here. Again, like I mentioned before, use color on not only the inside of the box, but also on the text to indicate the current state. And avoid doing it where the text is inside of the toggle because it's unclear if you're looking at this, if I'm turning it off by sliding or if the state is off, or in this case here, is it on or am I going to turn it on by, by engaging with this toggle? Then again change the texts to let the user know what is happening. So instead of a call to action text, you can also give the state texts where just saying what the state of this toggle is at the current moment, which Wi-Fi is off. And when you tap and slide or tap it and click, you'll see the text change Wi-Fi is on. Again, avoid something like this with the checkbox where it just says Wi-Fi on and it's checked and Wi-Fi on. The checkbox again, is more of a selection criteria where if you did have a Wi-Fi on type of criteria like this is better to use a toggle. Remember that left is always the off-state and right is always the on-state. Again, match the current conventions of existing toggles. Don't switch this where it is off and left is on. Okay, cool. That was radio buttons and checkboxes and toggles. And the next one I'm gonna cover on the video is addressed forms and search forms. And I'll see you there. 10. Address and Search Forms: Alright, so let's talk about address forms and search forms. These two are so common and they sound easy, but they're actually pretty tricky, especially search forums that I just wanted to break these out and just do it, talk and examples and do's and don'ts just on these two types of form fields. Again, an address form as it sounds, it's forms for your address. They're very common. We use them all the time. My favorite one to use is the one form field, autocomplete address form. Instead of having the home address with the, you know, your address, your city, your state, your zip code, your country. What you can do is you can do something like this where you have your home address, you have the ghost texts, just default enter your address. And as you're typing in the home address here, you'll use the auto search or autocomplete here dropped down, and that's going to search the address database based off the character count that you've put into your auto, into your form filled here. Usually these don't start until you have at least three or four characters into the form fields. And then that will start narrowing, narrowing down this drop-down list of results. And within the list here, we may have 30 or 40 results based off of your input here, but we only show five dash seven at a time. It's easier for a user to scan five or seven of these to see if they're matches there. If there are, don't see the match, they can easily keep tight typing. As they keep typing, this auto-complete list of address is going to filter itself based off the character counts. And that search result will become smaller and smaller and smaller and more exact to the address that you're inputting as a user until you find your address. So at this point the user can stop typing. Here, see the address that they want to put in, which is five-by-five Gary Street, San Francisco. They can arrow down on their keyboard. Again, you need to have the hover state here, or the hover state would also show up when the error, when the user was keyboarding up and down on the keyboard. Then when they press Enter, you can see now that the one address form has the street name, the city, the state, and also the country. And you can even add zip code to this as well. You can easily press X or tap X on the forum field, which will take you back to the default state here. So very easy way to get somebody's address going back to that keyword, affordance, like user affordance, saving them time, saving them energy. Here's more of a traditional manual way. Again, it's not a make or break. You'll see this all the time. But I'll show you a way that we could still utilize the autocomplete auto search database of address fields to populate all of the information you need for an address here, even if you have to break it out like this, where you have the address, the city, and the state, and the zip code. So traditionally what this would look like is something like this and you would have to type in your address. You'd have your second address, you type in your city. You would have a drop-down for your state. You'd have a zip code and a drop-down for your country. Again, never use drop-down for a city. You can always use drop-down for a state selection. Rarely do you ever type in the state here. So always use a free form text here for the city and a drop-down for the state as well as the country. Okay, so again, if you can avoid this, do it. And here's a way that you can combine the one that I just showed you above with this type of form field interactions. So let's say you have the address 12, you have the city, the state, the zip code. And we already know most people are gonna be for our service that we provide are in USA. We can leave that USA. So what happens here is a user goes into the address field number one, they type in their address, they see the match. Yep. This is 515 Geary street, San Francisco. They click on that. And what it does is it populates the address, the city, the state, the zip code, and the country within these form fields so they don't have to go into each one of these. This is a smart way of doing the address Forms. Let's go look at search form. So search box is essentially a combination of an input field and a submit button. And they seem super easy. But there's actually a lot to them. And for complex sites, the search box can be the primary way that a user finds anything or the first thing they do when they come to your site, think about like Amazon. The first thing you do an Amazon is you go to search. You search the thing you're looking for. In these cases, the search form is a big deal. And the results page that the search box gives you as also a big deal. Remember that search is only needed when you have a lot of content. If you don't have a lot of content on your site, you don't need search of odd size where we're prioritizing products that we're building. Search comes later after we have more things like if a user input a bunch of information they need to search. We usually don't start with search because we don't even have a product yet. We launch without search, let users input information that they waited it technically you want to search at some point in our application. And then at that point we would add search later on. So that's just a sort of a scope mechanism or a priority set for launching new products. But if you have an e-commerce site where you're going to just have a ton of things that somebody who needs to find, then searches super important and should be almost the number one thing you would, you would start to build out besides the content and the products in the checkout flows that you would have. Again, make search to be accessible on every screen of a complex site and don't make it hard for users to find search. So you usually in the top right or middle of your navigation bar on your search site. Here's a couple of examples. The first example here is a common search field, but there's no submit button. And the submit button is engaged by doing keyboard Enter on your keyboard. And that will submit the search field here and take the user to the results page. So in that case, again, autocomplete is very important. And you can use ghost texts to hint at some of the possible searches that we want a user to search. The second example here is a physical button. Again, the user can still press Enter on the keyboard to submit the search and go to the search result page. Or they can click on the Search button which will take them to the search result page. And in both cases, autocomplete still super important. But remember the visual physical search button conveys to the user that if there's no match in the auto-complete, that they can still hit the submit button and go find whatever match we had that we couldn't find the autocomplete. I know it sounds kind of complex, but let me, let me show you the example here. So Google is a great example of a search field without the submit button. But I want to show you how the either way either you're submitting on the keyboard or you have a physical button which you can click on or still be able to press Enter on your keyboard as a submission. But I want to show you how the autocomplete takes, takes a role into this. Let's say here I'm in Google and I'm typing typography. You can see it's giving me the in this case, it's giving me, I think ten search results here that are most common. At this point, what I could do is I can arrow on my keyboard, I'm narrowing down. I'm going to arrow up. I can X out or I can click into one of these edit, take me to my results page. But as I keep on typing, the search results start to get less and less. And I'm gonna just start typing some weird numbers here. All right, so now there's no more search results. But I still can press Enter on my keyboard. Whatever system we're doing is going to do its best job to match whichever options that were there. And give me the result page here. That's where autocomplete comes in, comes in handy. And also the Search button, because the search button will always convey to the user that no matter what their input is, you can still search it. There might be these rare cases where your result page didn't result anything. You can go back to the result page with no results in this case, you can see Google has about eight results. Based off of that. This is searching the entire web for a really weird name like this, and there are still eight results. Let's see if we can get it to do like no results here. Yeah, it's still, still results. So you can kind of see what I mean here is that the, if you're designing something for search, not just the search form field, you have to think about the way that the user auto-completes their searches. The way that they select the auto-completes. The search result page matching the results. And if there is no results, they can still press Enter on the keyboard and go to a results page. And if there's no results, we have to think about that user experience. Do we just have clear texas has sorry, there was no results to that search. And however we approach that type of edge case is important. Again, when you think about just searching, it sounds easy, but it's a lot more complex. And I'll show you some more complexity when it gets into a mobile interface on how search works. Quickly, let's just go through the auto-complete. So again, we match five to seven in Google's case, it looks like they did ten. The matches that are most common based off of the selection that the user has done. This case, we're just looking at PAHO. We're trying to match phone here is what we're assuming that the user wants to search based off the most common search functions that we've had in our system that start with PAHO. Again, the x here, the user can cancel this. And then as I just talked about the autocomplete SOS up, this drop-down menu only shows up after the first three searches. It gives the user a much more clear defined list of what they're searching. Again, don't overload your users with suggestions in five dash seven to ten options here on the autocomplete will work great. And don't forget about defining what the hover state or keyboard Up and Down Arrow state can be. Again, you can use the same interaction for search on your web navigation bar. And you can do a default state like this where we actually show the word search and we show the search icon hover, it lights up and an active state. We can take more real estate like this, could either push the text over or it could hide all the text. Here. You can make it really long. And the user starts typing. We add the autocomplete dropped down. They can press X here to delete the list. Or they can press PAHO and actually pressing the keyboard enter. And we'd have to define a search result page for what we think are the best options for PAHO or if there were no results. Or they can say all I was actually searching for phone cases. Click phone cases and we take them to a results page showing form the phone cases. And on that result page, they should still be able to search, should be on all places. Here's the same search interaction for mobile. And all we did here is I have a video where I talk about menus and drawers here towards the end of the class, I'll talk a lot about how these parent level navigation functions on your navigation bar will collapse into menu icons, or in this case like a menu drop-down. We still have the search bar here. And for the mobile will take the full navigation bar here lock of the user and keep them focused in this search state. Another do, some do's and don'ts for dues for web is just actually show if you have the real estate, show the word search. It saves, it will take a little bit more space. You can also expand the active state of the search to give a little bit more real estate for the user typing. But if you have the room, showed the search bar to give or the search text here and the search form field here as better conveyance. And it shows the user, it gives them a little bit more tap target as well too, where to tap on for the search bar rather than doing something like this, although it looks slick, it's just this little search icon. If you have the real estate, show the form filled shell, the search ghost text here, It's more clickable real estate again, affordance. It has stronger conveyance, always reminding the user that there's a search here versus the icon. But if you only have the, when this response is this navigation bar shows up on a mobile interface. Then it's good to show just the actual icon itself because you don't have the room for the entire search bar. It's only when you have the room do you want to show the search texts and the foreign field? And avoid doing something like this for web when you obviously have the room to show the forum field and the search bar. And even on mobile if you have the room to do it here, but it's acceptable if you had something like this as well where it was just the actual search icon here when on mobile. Thing that I wanted to call out for mobile as well is that's kind of a tricky interaction that you wouldn't necessarily pick up right away unless you engage with search a lot in this type of mindset. So when you're, when you're doing interaction design or a UX perspective, whenever you're using devices, just think about how these things behave. This is a very common interaction on Apple. Interfaces is the message search box. If you look at the message Turks box right now on my messages, I can create a new message here with the little blue box here. I also have the settings with the three icons here, and I have this search bar here. What happens when I click on the Search or tap on the Search bar here is this search bar actually floats up. And it puts me into a search mode where all I can do at this point is it's focusing me in search. Either I search, I can press Cancel, and go back to the mode that I was before. I can type in my search, I start to see the auto completes and the matches to my search below. I can press X to X out the text easily and continue typing other texts. This is a very good interaction because it focuses the user on one specific goal and task, which in this case is search. The thing that you would want to avoid. This type where let's say you just press Search. Now I'm in the search mode and I'm not focused at the same point of search. I can go in and press Create new message. Or I could go into the settings here, I can select new messages, I can edit the names, I can do the photos. I can also view my mom's texts here within the search state as well. So it's not keeping the user focused in this type of state. There's too many actions going on besides, the one thing we're trying to achieve for this user is search. They tap the search. They're informing the user interface that they want a search. So making them focused in that interaction is important versus something like this. It's a tricky, tricky interaction, but you, you see why they do. It, has lot to do with conveyance and keeping the user focused. Versus here, there's too many things going on at once. Awesome. So that wraps up address forms and search forms will see you on the next video. We'll talk about tab bars and title bars. 11. Tab-Bars and Title-Bars: All right, Welcome to the next video. We're gonna cover tab bars and title bars. Let's start with tab bar. So a taboo words are also known as bottom navigation bars. And they appear at the bottom of an application's parent level screens. And it lets users quickly switch among different sections of the application or destinations within the application. And they're used for mobile and tablet applications or when viewing a website on a mobile or tablet device. But avoid using these for anything that's website desktop related. We've all seen them. They look like these ones here in the bot beauty application, this little section here, that's your tab bar. So it's a navigation UI element. And before we get into some of the best practices and some tips on using them, I do want to talk a little bit about information architecture because as we're gonna start getting into more videos, we'll talk about not only levels of information architecture, but it applies to navigation as well. So if you think about navigating content within your site or navigation bars or how a user applicant user experience application navigates, or how are user navigates across your user experience? A lot of that has to do with information architecture or IA. The core foundation just at a basic level is that we have a system like this where you have a parent level and then you have a child level. So the child has a relationship to the parent, and then you have a grandchild level. Then the grandchild has a relationship to the child level. In the world of, in this example I'll give is like ice cream. The parent level is like ice cream sizes, small, medium, large, or cone sizes. And the child level, that of information that relates to the parent level of ice cream sizes is ice cream flavors. Because if you choose a large size, you may get three scoops of different flavors. Well, if you choose a small size of ice cream flavor e-mail and get one or one flavor if you choose a small size. So you can see how there's a relationship between that child level and that parent level. And then from the grandchild level in the ice cream analogy here is ice cream toppings. And it has a relationship to the flavors because the flavors will dictate or indicate what type of topping you would want on your ice cream. When we think about important levels of information, the parent is most important. Second to the parent is the child, and third to the child is that grandchild. And as far as hierarchy and important see, one of the things that's interesting here is that this applies to the way that people think about information as well. That's called a mental model. And I'll talk about this when we get to the menu videos. But if you go to any ice cream store anywhere in the world, the first thing they asked you that is ice cream sizes. They don't come in and ask you a cool All right, well, what toppings would you like? That's that's kind of odd. So it usually starts with this set level of information architecture that applies to the common convention of ice cream, hierarchy and mental models of ice cream that exists in the world. So it starts with sizes that goes to flavors and that goes to toppings. This level of understanding how information relates to each other in a hierarchical standpoint is important as we go through these classes. Okay, cool. So let's talk about best practices for tab bars. So like I said before, categorize the top-level content in your tab bar. So those destinations are those categories should be parent level like home, profile, shop, browse, that type of thing. Use the tab bar strictly for navigation and destinations, not actually unrelated elements. So it shouldn't be like things where an action button or you would do something. These are destination focused and navigation focused. For your mobile and tablet. Tabs. Only at the very least, you have to have two categories. And at the maximum, you can have five, but no more than five and no lease less than two, and I'll get into a little bit more than that on the do's and don'ts. Again, don't use these for web desktop. They're best for mobile and tablet devices. And don't hide the tab bar when the user taps on another option within the tab bar. The tap size per tab is around 40 pixels by 40 pixels minimum. But you can get it up to 75. By 75. They're better than what we call the hamburger menu. If you remember, I have, I'll have a whole video on just menus, but the hamburger menu is sort of a A UI element that houses menu options is where the user clicks on it. It reveals those options to the user, which saves us real estate. And it can house a lot more options than we could show on screen. But if we can categorize our tab system or our profile or our parent level system of navigation needs to at least two to five, then we don't need a hamburger. We can use the tab bar and it works better because it exposes these options at the main level of a screen. So again, it goes back to that affordance. The user doesn't have the glow. Click into the tap into the menu. See the menu tap again at the menu element and then go back and forth. They can easily with one tab, go throughout the parent level sections of your website or user experience. The tab bar, remember, always stays fixed to the bottom of your phone or tablet. It should never scroll. And make sure there's a clear active and default stay active meeting the state that the user is on. And a default state, the states that the user or the destinations or taps the user has not gone to and it's not on, then never have a disabled state tab option. All of these tab options should be tappable and not disabled one where you wouldn't be able to go here. You can make these sections here about 90 pixels tall to a 100 pixels tall. And then again you can see this pink dot rectangle is 50 pixels by 50 pixels. So the target area, meaning the tap area for the user. It's not the icon. The top area is a invisible space. We want to make that space bigger than this icon here, right? So these would all have a tap area that would look like this. And make sure that tap areas at minimum 40 pixels by 40 pixels. But again, I tend to go with 50 by 50 just to make it a little bit easier for users to tap on it. Some more options here you can see the profile screen here. User taps on the Bubba Illustration Icon. They get to a bobo shopping site here and they can tab over at any point to the checkout and then start to get into the checkout workflow. Some other examples here for one of the applications and currently working on. And you can see the phone. We're going to squeeze in the four tab options. And when we get to a tablet, we can space this out to fit the real estate that we have for tablet. The reason why these work so well is that they're placed in the most tappable real estate on mobile devices. If you're using one hand, if you're left-handed, all the green area on your mobile device is easily tappable and you don't have to stretch or it's not hard to get to. If you're on the right hand. Like most users, then this is all. The green is great, natural, easy to tab on, easy to go through. So they're placed with about 80% within a natural space, 80 to 90% for a user to tap depending on their left hand or right hand. And then this area up here is it's hard if you're where this gray boxes here, that's a hard area, but some of the bigger phones we use our left hand. So if I'm right-handed, I'm holding this phone here. We'll use our left hand to close out things here. And so if you had an X button here, it's actually better to put your x button here. Make it a little x. Okay, cool. So it's better to have your x button here on mobile devices. Then over here. The reason why is it's actually quite comfortable to tap out of this x with your other hand. So you're holding the phone with their right hand and you press with your finger or your thumb on with your left hand at the top here. Let's get into some do's and don'ts on good Tab Bar usage, but pretty much just follow this pattern here and you're gonna be good to go. Let's get more into the do's and don'ts. So again, use your use your your tab bar 45 destinations or five icons are tabs, max. And keep the drawings very simple like this example that I'm showing you here with this home detailed like this. This is about as complex as you want to get anything more than that. It's too complicated. Then the thing to avoid is don't use more than five destinations. There's six tabs and destinations here. These are all too tight. And when you create a apple application, you have to send it to the App Store and Apple will review your application. And if it doesn't fit their user interface guidelines, they'll actually deny you from launching your application on the App Store. And what are their strict guideline policies is that these tab bars only have five destinations and not six or seven. So make it clear what is the active step, the step that the user is on stuff you see on the home here we have this little orange dot, and we also made the home a lot more darker in color. And the default states here of these icons, the profile and the analyze. You can see how these ones are a little bit more gray. And the darker color, bolder font and the little orange dot helps. You can see this one here. The, the, Although the home is bold here and we do have a little bit of a thicker blacker outline for the home icon. It's still not clear enough what step the users on which section of the application the user is on? We're on the one on the left. If you squint your eyes and look, you can see the home really pops out here. Also. Remember to use consistent icons, don't mix filled or stroked icons. You can see the one on the right here. We have an inconsistent visual language here by showing a filled icon for profile at a stroke icon here for home. Again, we want to be consistent with and be uniformed with our visual language. So either best-practice, use filled icons and only filled icons are used. Stroked icons and only use stroked icons, but don't mix the two. But here's the kicker. You can use a filled icon for the active state. Again, they're all stroke when their default state. You can see the default here for profile and a default for analyze here. But when the user taps on these, we fill this section of the analyzed page. We also fill this section of the profile with our brand. We have an orange color brand. You can see how you can use that to help even more so and form the active state of your application. And it helps to bring a little bit of brand and a little bit of flavor into the icons as well. Don't ever add a button in the navigation bar. These are for destination purposes, not actions. And then never use one tab option like home here. Like if you only have one option, you don't need a tab bar. There's no need to navigate. Use small texts, but use good letter spacing on the small text. So the small texts you can use is about ten pixels. You can go all caps. Use 1.5 pixel letter spacing. Or you could do 12 pixels. What I have here tout tall pixels, height, all lowercase, but both have 1.5 pixel letter spacing. The space of the letter spacing is the space in between the letters here. These types of spacing. You want a little MIP, extra letter spacing for the small text just because it makes it easier to read. And you won't end up with your letters being too scrunched together. I'll show you here like that. Like that's too tight. That's probably too much letter spacing. And just like we had was fine. Okay, cool. And then never use two words. You can see shopping, home here has gone down to two words, span two lines or big text. So you can see this text is way too big. It just looks horsey. It doesn't look slick, doesn't look modern. And these are, these are mostly meant to be navigation pieces and shouldn't be too heavy as in visual weight. Because you want the user to look at the content that these tabs house and four and an inform versus something that stands out really strong like this. Alright, let's go move over to tab bar, our title bars. So a title bar provides a reliable way to guide users through an application. And a title bar displays information and actions that are related to the current screen. And it also stays fixed, meaning it doesn't always stays at the top, even when the user swipes or Scrolls. They're often paired with a tab bar in mobile or tablet applications. So most common, you'll see a system just like this, where you have the title here. You have an area for action on the left, an area for action on the right. And then we have the tab bar that we just spoke up here at the bottom. You'll see on one of the most popular applications is the instagram. And they use a combination of a title bar and a tab bar. So they have the tab bar here. They also use the technique of a filled icon for the active state and the little dot here for the active state, the state that user is on. And then they use the title bar for their logo and some in the very apparent level homepage. And they used the right side for action elements. But you can see here when the user taps into from a parent level, this would be a parent level screen. Into a child level screen, we still keep the tab bar, but we use more of a traditional title bar here where you have the French Bulldogs here in the middle as the title and the back button to go back to this homepage. And then we have the three dots menu here more for settings that relate to this page. And just look at those cute little dogs. Look at this little one here. Okay, cool. I love these type. I have one of these dogs. Her name is chewy. I'm a big fan. Here's the breakdown. This area here where you see the battery and your time and your Wi-Fi connectivity, that's called a status bar. And this is a, an iOS or Apple, android has a version of it. They're also called a status bar. They just look a little bit different for Android versus iOS. You can see the two here. This is Android, this is Apple. The breakdown mostly is the top-left section here. This is mostly used for the back button or a menu icon. The middle section here is for the title for Android devices, the title can be over left align. I prefer these to be in the middle, but it depends on the, if you're designing an application for Android versus Apple, they have two different types of user experience and user interface guidelines, and I'll speak to both of those throughout the class. You can make this section here with the status bar on top of the title bar being in the same color. I'm about 50 to 80 pixels tall. And again, this right area is a great place for actions. So you kinda have this title. It gives contexts and location for the user. You have the back button which allows the user to navigate back to where they were from. And then you have action items at the top right that are based off the contexts that the user is seeing. You can also have buttons up here. You can have cancels save the beauty of this one is the buttons are very like always in your face. If you're scrolling through a site, the buttons are always there, they stay fixed where we talked about with the tab bars. We don't want any buttons in our tap systems, but we can have them in the title bar. These are four very important actions here like save or cancel viewers, putting some information and based off your settings. Or we wanted these buttons not to get lost. For a very modern fill. I personally like small texts, all caps with a lot of letter spacing. You can see the example here. On the left, you've got title, again, all caps. And you can see the one on the right. I'm using 12.1212 pixels height, all caps with 2.5 pixel letter spacing. And it just makes the application look much more modern like, Well, we'll do this right now with this text here. If I select it, I gave it a lot of letter spacing here. Makes the app look a little bit more sleek, makes it look a little bit more modern. And what we want to do is avoid anything too tight like we got going on here. Too tight like this is just 0. This is default. To me that's too tight. We need to make this breathe a little bit more. Little pro tip for you there. Okay, So tidal bars on Apple, they have two different types. They have a standard title here which has the, what we just spoke about, an action on the right, Back button on the left and the title of the page that you're looking at in the middle. And they have a large text title, which is the title at the top moves below the, the Back button. And again, nothing changes with the action item. And this takes up more screen real estate versus the one on the left. It just depends on the application and sometimes the Apple device, it will allow you to set large titles within the operating system. Say for, for a little bit older, your eyes aren't as good. It's what we call an accessibility feature. And it helps people that can't see little texts be able to read these little easier for them. The difference here between Android on the left and apple, also known as iOS on the right, is pretty much the same thing. It's just the title will usually be centered for Apple products. And then on Android they'll left align it over here. The same kind of deal when it comes to action item is mostly they follow the same paradigm where you have action items at the top right of your tab bar. It's, the titles will go left versus middle here. I like it middle because it allows us to utilize this space here for any back buttons or that type of navigation. I typically like to style where you have the back button action items here and a title in the beginning or in the middle. And it doesn't matter, you could still design a Android application. And it can still have the title here in the center of the back button, the action elements on the right, and it's totally fine. All right, another thing that you can do here That's pretty neat as again, the title bark always stays fixed. Meaning that as the user swipes down on a mobile or tablet application, the title bar ain't going nowhere. But you can do this trick where as a user I'm swiping down, our swiping up. And so I'm pushing content up, meaning I'm interested. I want to go look into more of this section, what this section has to offer. When that happens, you can actually move the title bar at a position, you'll see it go away. And then when I move back down, meaning I may want to navigate out of this section, then you'll see the title bar reappear based off that interaction. You'll see airbnb uses this on their mobile application or in their, their website on the web as well when you go on mobile or tablet devices. And I'll show you a little preview here. You can see it. Here's their title bar at the top. This is they've added some filters on the title as well. And they have the tab bar here at the bottom. You can tap between like risk, login, wishes, your stays. When I swipe up or scroll down, you see how the title bar went away and they will remove the tab bar as well. Then when you swipe back down, you'll see it appear when you swipe back up. All right, so I'm swiping down. Again. The idea here is that you're interested in, you know that your action is informing the site that you're more interested in the content right now, when I swipe back up, your action might be relevant to, Oh, do you need to do something with this content or navigate out of this screen? You can see how this responses, so they're saying, okay, here's, here's your tablet. We're gonna give you that tab bar. Here's your mobile. We're gonna give you that tab bar. But you see when we go to web, they don't use the tab bar. Tab bar is not a webbed pattern. It's a mobile and tablet pattern. All right, cool. So last thing to look at before we go into some do's and don'ts is the title bar can actually change and show actions based on user input. So we have a default nav title bar here. And what happens is when the user taps on one of these photos, the navbar switches and we'll give actions based off of that user interaction. They've tapped a photo. Now the tab bar switching from contexts, sorry, the title bar switching from contexts to an action-oriented title bar. So it's letting you know you have one selected and it's giving you options that you could do. You could delete this one, you can send it. And then you have the overflow menu, which is also called a sheesh kebab menu or a kebab menu here, that just houses more actions that are related to this as well. This is how you can use it from an interaction point of view and not just have it strictly for communication and contexts and location, but you can have it action-oriented. Remember to summary, most applications that utilize the tab bar at the bottom, title bar at the top, it's a common design pattern. Now let's get us some do's and don'ts. Your title for a tab bar should be short enough to fit the space. He's like FAQs. And then don't make the title too long that he has two ellipses off the three little dots here. Title should be short enough to fit the space again. And then again. Don't make the title II long that it has to go into two lines eclipsing out, or two lines here. Place the adjusted enough actions here in the title bar like three to four max, five is kind of pushing it. You see six here is too much. And if you've got a long title, it's just not going to flow with the actions here. Three is your magic number. Be cautious of the height, especially when this is gonna be fixed. This is gonna take real estate as a user goes through your application, you may also have a tab bar here at the bottom right. So you're, you're, you're, you're limiting your viewable content here by just this section here. So be cautious of the height of this bar and you don't want to or for your title bar and you don't want it to be too tight, too high that again, it constricts the content below and doesn't give it enough space for that content. There we go. There's tab bars and tidal bars. I'll see you on the next video where we'll cover accordions and tabs. I'll see you there. 12. Accordions and Tabs: All right, Let's go and talk about accordions and tabs. Accordion menu is a vertically stacked list of headers that can be clicked, tapped, to reveal or hide important details of a section. The accordion term comes from the musical instrument in which the primary function is expand and contract. So that's where we got that from. It's a menu that expands to show information and then contracts to hide information. You'll see him use for like FAQs where the question is the header or the headline and then you open it and you see the answers to those questions. You'll see it for event listings where the event is the header. And then you'll tap and it will expand and show the details of that event. We've used recently on a car application where you're able to open up the accordion to see add-ons and select what type of add-ons you wanted to say for stereo or rems or the interior of a car. They looked like this. This is the default state where it contains the parent level information. You have. The headers here. As a user taps on it, we make sure to highlight the header so the user knows what the child level of information pertains to or relate to. And also the arrow here, it goes a 180 degrees to further convey that this header is open. Again, we have the default state, we have the active state. And the really important function of a, an accordion is that when the user taps on Wi-Fi is slow, what happens is that closes the headline that is currently open, open, and then it reveals the child level information on the headline that the user had just tapped on or clicked. It closes, pay my bill, pay my bill goes to the default state and in Wi-Fi is slow, goes to the active state and it reveals the child level information. Based off that parent level. The pros and cons for these is the process that helps users find content that are that they're looking for by just categorizing headers. They can just skim through all the headers, find the one they look for and open it up. It makes it easy to scan that parent level information and again, dive deeper into the child level information. And it's a useful tool when you have a lot of content. And you want to hide certain content, making the set of content more digestible at a glance. And then the user can decide which one they want to dive deeper into. The con is try not to use them for more than ten options because they jump around a lot and try not to have too much child level information that causes the next header to go below the fold meeting, below the viewing area that the user is looking at, then they cannot see the parent level option. If you have a lot of child level options that pushes everything, all the other parents down. And the user has to go pretty far down to go find another parent level, or they have to tap back on that parent level header here. So if the user tap back on, pay my bill again, it will close. So pay my bill here, open, tap pay my bill here closes as well. But if you have a lot of parent level information or sorry, child level information, it pushes all these headers all the way down below the fold like that. When opening and closing different headers, they tend to bounce around and not stay consistent in location. And this is the advantage that I'll talk to you about tabs. As tabs don't jump around, they stay in position when the user taps on them. But accordions, you know, as you, as you are looking at pay my bill and you tap Wi-Fi is slow, it closes, pay my bill and Wi-Fi jumps up here so they bounce around in that sense. You can also use plus buttons rather than the arrows. And then on the active state, the plus button buttons go to minus. You can use them in combination with checkboxes as well. You can see here we have tech features you tap. We're actually showing a number, so you have 0 selected, we have four options. The user can easily tap in C, the four options they want. We have the checkboxes here on the right first with the price based off of each feature. And they can select any of these features that we have that also grows the number here from two out of four options. Just have this parallel level the user can see. They may have to. We wouldn't make this a different color. We would make this something like blue, like that. But at the parent level, they can see how many upgrades they've already selected based off of tech features or audio or speaker upgrades. We'll options as well get them 20 twins, I'm saying. Alright, cool. So remember to keep the child level content. That's the content inside that relates to the parent level. Keep that content short and sweet. Then remember, don't use, avoid using lots of child level content. You can see like if I said pay my bill and I open this up, I'm like, whoa, that's a lot. That's where if you have this according, it's not the best mechanism. You may want to just take the user to a separate page. Or I have a video here on modals and drawers. And this would be a perfect option to show a chore row just takes the full real estate and the user can close back out and end up back here. If you have that problem, this isn't the best pattern for that. If you have a lot of child information, this isn't the best pattern for that. I've seen this one time and this is super weird. Don't place an accordion within accordions. Like accordions shouldn't have a parent, a child, and a grandchild level. It's just parent and child. So I saw this one time and it was super weird and it bounced around. I got really lost on which one was open, which one was closed? So again, note no accordions within the accordion itself. Then remember, if a user goes to tap on another option, close the one that was already open. Don't let the user open up more than one option at a time. Then also make sure you have clear distinctions between the headers. You can see here we use the lines on this one here and see these little lines here, these gray lines, they help give the sections. And so when you don't have those sections and you open up the accordion, It's hard to see where the child level information ends and where the next parent headline enters. That's accordion. So let's go talk about tabs. Tabs are one of the most common ways to present sections of categories. And they allow a user to click and tap into each category, see the content change based off their selection. Again, they're very similar to the tab bar that we spoke about. They just show up at the top of websites and they usually don't show up on the bottom if they shut up on a button on the bottom or you need bottom navigation, then go use the rules that pertain to the Tab Bar. There are called tabs because the origin of it, it relates back to the office file cabinet. And you can notice the tabs sticking out like these parent level of information. And then you could dive into these, open them up and see that they're relevant child level information here so you can see how it kind of goes back to that information architecture I spoke about in the last video. These are commonly used for food ordering menus. You use tabs for breakfast, lunch, desert, or different types of food categories like Chinese food or pizza, Italian burgers. They're great for dashboards, they're great for analytic tools. Navigation bars on Android devices use them a lot. Google search results, I can think about all images, etc. Many, many, many use cases for tabs. They're much more common than accordions. Can see tabs for mobile, again, tab bar should always be fixed and at the top, never put these at the bottom. Because if you're going to use these for the bottom, go pick up a tab bar and use those set of rules. There's a different set of rules applied to tab bars then just tabs. You can use up to five options max, without horizontal swiping, meaning the user on a tablet or phone device can horizontal swipe different tabs. That's really the clear distinctions between a tab bar and tabs is that tab bars are at the bottom and tab bars never ever have horizontal swipe. There are only five options, max and tabs. These can live always at the top of a site, and they can have horizontal swipe, which means they can have more than one option. But they usually stay at the top because they're global settings there again, similar to destinations. And you can have much more than five with horizontal swiping. You can see here we have the title bar at the top with the logo and our profile menu here. Then we have a secondary tab bar menu at the top, it's 90 pixels tall. We got the texts that all caps here, 11 pixels height with two pixel letter spacing again, so it all caps little bit of letter spacing. You can see how this works as a user I just tap on to. And I could see item isn't content that relates to the item two here. And if I tap back to one, tasting back over to one, if I tap on three, takes me back over to three. Here's some examples of tabs for the web. We have more than five options here as long as we fit on web accordingly. And again, the user can tap into these different tabs. This kind of mimics that file structure of the cabinet. When you think about this type of information, this is similar to that where you're clicking into different tabs to reveal the parent level information. And apparently information could have buttons and text and photos and illustrations and icons. Here's a top tab style navigation. You can use this for web. Then you have a side level tab navigation that you can use for web, but you can use it for tablet only. But we don't have enough with real estate for mobile devices. For this. If this was a mobile device, you're really only looking at something like that much real estate, right? So they're better off for web and tablet devices. And if you click on item two here, it opens up item two and you can see the idea clicked on item one goes to item one. Okay, let's go look at horizontal swiping. So you can see here we have a tab system at the top that has more than three options here we don't actually know how many options they are. But we do a little explicit technique is we want one of the options, say this option for here to be cut off to the right. What this does is this is conveyance. It conveys to the user that there are more options hidden for them to go and swipe. Where if you just had it, where it was just the three options and they were neatly equally spaced here, like this. That doesn't convey horizontal swiping. So we always want to cut one of these off just to give that visual cue that hey, user on the option number four and I'm over here, Come, come get me. Kind of thing. Just remember, this horizontal swiping should only be used for tablet and mobile devices. Never use horizontal scrolling for web. Nobody wants to scroll horizontally with like the, the navigation bar on web like that's just too much. Unless you're doing a spreadsheet, if you're designing a system on a desktop device that is a spreadsheet then yeah, you may use horizontal scrolling, but not here. Example of the application that I'm currently working on here. You can see, you can see the tabs here, day, month, and year. You can horizontally swipe for more options. And again, we intentionally made this one bill cycle one off to the right just to inform the user that there's more here that you can swipe. Again, these stay in position. You can go to month, you can go to year and see how easy and smooth you can transition those. Doordash has the same example here, so it has the tabs here. If you tap and pull and push, right, you'll see more of the tab. Examples come in and they're cutting off a little bit of the gifts. And I'll show you this is what it looks like on their mobile site. Little bit of cutoff happening here. You can see the same system here used for web, but they don't do horizontal scrolling. They give you these little arrows and they'll allow you to go back and forth. It's still cutting off some of these topics here in these tabs. But this is how it works. And if you go into Gifts, then it's going to inform all gift related content. You can see how that works. And then going back now, this is on a mobile device, you'd be able to do it on web. But if it says on my mobile device, I'd be able to swipe these categories, looking at how keith, this is these little hover. See that they all have little illustrations to it. Super cute. Let's get into some best practices for tabs. Always take the full width. Even if you have two items, take the full width. Don't do just like a proportional width for mobile, like this empty space here. Never do one tab. If you have one tab, you don't need to. Like if only have one level of information, you don't need a tab, just like get rid of it. You use horizontal swipe on mobile tabs. If you do keep it at the top, and then never put horizontal swiping at the bottom here. And the reason why is it's very strange for your thumb to go through and swipe these different items here. And if you just want, just give it a shot, go on your phone and just with your thumbs start swiping to the left and it hurts like it will become extraneous after awhile. Like our fingers are more adapted to swiping up and down and not left and right. Okay, cool. That was accordions and tabs in a nutshell, and I hope you enjoyed that one, will see you over at tooltips and shadows on the next video. 13. Tool tips and Shadows: All right, Welcome to the next topic where we're going to talk about tooltips and shadows. Tooltips. It's an affirmative, helpful additive message that appears when a user interacts with an element or a piece of content. And tooltips are usually initiated through a mouse click or tap on a mobile device. And again, they're informative. They shouldn't be instructions. They should just be a little bit of additional information if a user wants to find out a little bit more about a specific piece of content that they're looking at. They looked like this. Let's say you had, here's an example of a question mark icon example where you have CVE number and if it users not sure what a CVE number is on their credit card, they can hover or tap on this icon. And then this would give you a little bit of information about what the CVE number is. And again, if you make this hover, just remember that you can click out of this when r, If you click on this, you can click out of it to close it. If it's on hover, this will close automatically with your mouse moving away. And then for mobile devices you can have it hover for web. And then for Mobile make it where a user taps on it to open it and they tap off of it, then it closes. You can also use the other common one which is a info icon. Instead of a question that info icon, same kind of principle here this little tool tip shows up and again, this is the tooltip. It's this little this little box here that's the tooltip usually has a little arrow pointing at something, but you don't have to have that. But it's again, a little additive piece of information. You can use it to clarify an action example here. So if you have send options or button that may not be all that clear for user when they hover there, mouseover, it gives you a little bit more descriptive text of what that button does. You can do it the same for icons. You have this icon here, this shows up. But just remember if this is your primary way of educating a user of what these actions do, and this user experience is going to live on tablet and mobile products than this isn't, this isn't good enough because there is no there is no hover on mobiles products and tablet devices as well. So just better off maybe adding some text over here to say duplicate versus just an icon. If that's the case. If it's only a web application, then yeah, you can do something like this and utilize hover to give this. I'm gonna go open up my email real quick and you can write some of the emails for me. I'm just kidding. You could see how on Google they do it. Like What's this little question? Oh, it's support. What's this little icon? Oh, it's settings. What's this? Oh, it's Google Apps. They did the same thing here for this as well. Again, when you, when you use a tool tip and you're not sure based off the information you're working with. If you need a tool tip, just ask yourself this, like look at that information and go, is this information you want to put in a tool tip necessary or important for the user to complete their task. If it's yes, then show the information. Don't hide it in a tooltip. If it's not, it's not necessary, it's just helpful text or helpful content, then yeah, you can put it in a tooltip. I've used this one on a product to edit, performed very well, is that you have this set of form fields here. From the default state. They're just these gray boxes. But as soon as a user hovers their mouse into one of these form fields, this information changes and it's based off of the form that you're filling out. If you're not sure what an electric meter number is on your home. Once do you get to this and you hover your mouse over or you're clicking into this form field. This tool tip will change to give explicit information about what this electric meter is. A little picture here, went along with it to show how to find it. This is called an inline tooltip, meaning that it shows up when the user is inline or in focused or hovering on one of these elements here. We had the same box here that related to the electric service states. So when the user was in the service date or hovered their mouse over this section, this tool showed up or this tool tip showed up to give an explanation of what this was and what this type of content was. I love these. I think these are super smart ways to do it. And if you remember the first video, I talked about only doing one column form layouts like this pairs well with the empty space for a one-column layout, a little bit more tricky if it's on mobile. Mobile platforms, but for web that we're really great. Let's get into some do's and don'ts remember, don't put too much content. Too much. It should just be a helpful little bit of most like three or four lines of text messages just shouldn't be like just a sentence. Remember, don't use hovers, your primary tool for communications. Especially if this is going to live on a desktop or a tablet or mobile product, add contexts if it's for mobile user, like put the word duplicate here. And you can also do the same thing and over-communicate for web when the user hovers over that. Don't put important information in a tool tip. If you're having somebody put in a password and there's password requirements, don't have them in the tooltip better to do it here. You can also fail what we call inline validation, which I talked about earlier. You can give green and red indications on if there are retyping their password or setting a password here that is passing this criteria. We're seeing that the password can't be the old password. They were saying, Oh, you looks like you didn't put a capital, at least a lowercase letter. You got good. You got eight more characters. You've got at least two letters and another failure, we need at least one number to make a proper password, right? So you don't want this stuff hidden in a tooltip. This is important information for the user to complete their task. We should expose it. Let's go over shadows. Number one rule is don't just use a default shadow, never. Just whatever the shadow default state is, don't use it. You've got to add to it. So here's the steps. You have the default shadow here I have this little card with a little cute little ice cream icon. I want to add a default shadow to this. Right here. It's going to give us four pixels on the y-axis. So down and 0 on the x, really nothing on the x over here, Blair is going to be four. We got here at twenty-five percent opacity. So the next step here in step two is to add more to the x and the y-axis. So we gave 55 at this point. Now I can see a little bit more shadow on the vertical line here on the x-axis. The next step, the most important one is add some blur. We went from four to 35 pixel blur on it. And you can see the shadows too sharp there, it's too harsh. Like I remember in the buttons video, we were saying looking at button shadows and don't be too hard with the shadows like there should be soft and subtle. Then you can go the extra mile here. You can add a little bit of color into the shadow. I usually like to use a bluish-gray, not too blue, not too gray, just kind of right in the middle there. We'll make this look very modern. Very clean. Gives you this nice looking shadow versus this hard edge default. Default here, starting to get a little better with the blur. And then it's just the subtle, nice gray that just makes this really nice. You can also use an inner shadows. This helps create depth here so you can see no inner shadow here. And now that we have the inner shadow for this, this progress circle or pie circle here. And it creates a set of depth that this is being filled. That inner shadow helps a lot and it's the same principles with the inner shadow. Not too harsh. Again, should just be, give it some, give it some nice blur, some nice color. Some do's and don'ts. And then I'm gonna, I'm gonna actually just do some quick shadows for you so you can see, don't put shadow on the text. If you have a photo here and you're like, Oh man, my text doesn't read, well, don't solve it by putting a shadow. What you need to do is adjust the photo so you can see here we've added a darker overlay over the top of the photo and then put the text on top for it to stand out. When I was in design school for all the years I was there, there was in San Francisco at the Academy of Art University. There was a woman named Mary Scott for the whole four years and the whole program, even even if you went on a masters, she said chewed and it was adamant. I'd never want to see shadow on a text ever. And then it was funny because we just never put shadow on texts. And one day I had my first job. One of the creative director comes over because I make that text pop, put a nice little shadow on it. I'm like, okay, cool. So again, it's about knowing the rules, but it's also about knowing when to break these rules. But pretty hard rule here that you could follow is just don't put it, don't solve texts being an legible over a photo with a shadow like you've got to manipulate the photo. Don't make your shadows too strong. Like this is way too strong. You can see the one on the right. This one has a nice, just little subtle taste of a shadow. What's fun is you can make the shadow go darker in that color and opacity on the hover. Remember the philosophy of a good hover is that it comes to life. It's like engage with me. Here you can see this is a great technique for a nice shadow and then we'll get a little darker. The color, the opacity for the hover. It really creates the sense of depth where this thing is like a little bit taller than the one below it are the one here. So again, nice, nice, subtle use of a hover there. And then normal. Don't put too much color in the shadow. Like this is way too much Like this is okay. This is too much. Don't use these hard edges. Keep the edges soft. Let's go ahead and just do a quick shadow. I'm going to copy this circle over here. Again, we're trying to get to this sort of function here, but we'll have some fun. We have the white card I'm gonna tool called Figma. I'll have a little projects at the end of the videos that will go through and we'll actually build out some of these design patterns that you're seeing here as well. But before we get there, you can just see how a shadow works within the tool figma. We'll pull this over a little bit. Okay, so I'm gonna add an effect here. And we've got our drops, drop shadow here. Here's the variables. So here's my x, here's my y again to want to do 55. All right, so we got our x and y-axis going. What's the next thing you do? What do we do again? Air and we're supposed to do blur. Oh yeah, that's right, blur. Let's blow this thing up. 35. That alone already looks really good. And then again, we'll go add some bluish gray to the shadow. Boom, there you go, That's great. The great look. Ashanti ran out those edges a little bit. That looks good. Let's go look at the inner shadow. Same kind of principle here we just add a shadow, Omeka, inner shadow. The only difference with the inner shadows you want little bit, not as much blur. Same principle though. 55 here, the hard edges are still showing up. We just want to smooth out those edges. So usually like 15 will be good. You don't need to go to like 35 because what happens is just fills the whole shape. Just 15 is good. Again, we want to do a little bit of the blue. You can add a little bit of color in here if you wanted to as well. There you go. That's a nice shadow. Cool. So there's tooltips and shadows, and I'll see you on the next class. We will talk about thumbnails and carousels. See you there. 14. Thumbnails and Carousels: All right, Welcome to the next class. We're going to talk about thumbnails and carousels. Thumbnails are pretty simple there, there little small images that give a user an overview of multiple pictures. It's sort of a sneak peek of what's coming next. They're also usually paired with a master larger image. And when the user clicks and taps or taps on a thumbnail, the master image will then reveal will show up as the same image, what was in the thumbnail at that point. Usually you can mark them as about a 100 pixels tall by a 100 pixels wide. They're really great for showing different photos of products. Also helps load images quicker since the browser doesn't need to load all the full-size images, I can just load the little thumbnails and only load one full-size full rendered image. It's also great if users want to. It allows users to browse quickly through collections of images. And this is very similar to the photo library on your mobile device. These are all little thumbnails here. Some do's and don'ts. Again, thumbnail should fill the space of the equal size. And you can see the ones here where these thumbnails aren't filling the space. They're just they might be different pictures sizes of some may be horizontal. Picture Format, some may be like portrait or landscape versions. You can see this one's landscape here, this one's portrait. But again, these should all fill this space. So that way you have this nice field image, you don't have these weird white, inconsistent spacings. You can see this a lot. I really like Nike's thumbnails here. There. You can have a little video of this guy showing off his shoes here. And then again, you can click on these little thumbnails to the right here, and it'll show up over here. Pretty cool. I think really good job of master images and thumbnails happening over here. I'm like He's website. Let's go move over to carousels. So carousels are, they pretty much allow multiple pieces of content to occupy a single-space. The user engages with a lot like a presentation, like I like, like a slideshow presentation. And sometimes a carousel can autoplay, which really looks at like an autoplay of a presentation where each piece of content will show itself for a brief period of time. And then another piece of content will jump in for the same amount of time and it will carousel throughout that type of content. That's kinda why it's called a carousel. It's like a you're like I'm moving carousel with horses. Like one. Each thing kind of plays at a time. If you wanted to do a website like this where you have image here, image one, a call to action text. And then this stays for a period of time. And then another image comes in and you've got an image to, another image becomes an imagery of you plan on doing that. Stop. Especially if this is the hero image of a website. Definitely don't do that. This is sort of an anti-pattern for care cells. So what we want is as soon as a visitor comes to your website, they should be able to tell what your business is all about. That means having a single clear message and piece of content that's easy to understand. If you're replacing that single clear message or content with multiple ideas and messages, it increases the risk that people really will understand what your company does. And worse, it will decrease your conversion rates. Some do's. You can use it when information is simple and doesn't require much focus. Again, never use it for heroes sections. But you can see how we've used it for a site here. This is what we have now for the hero section. We have it here for you. It's easy and fast to customize your book, upload your book and you can click on these. It will stay once the user starts clicking. Click mode now. And I think it will stay for awhile and then it will go back to auto playing. Yeah, there you go. Then again over here we use it for creative services. You can see this shows illustrations and copy editing and book cover design and services like that. Just to compliment our communication over here. You can use it a lot for a carousel without the auto-play, which is most common. And you give the user control over it. This is what's go look at. Apple has a pretty nice one where they show their AirPods here. And they have this little pagination. I have a whole talk on pagination. At the end of the class to that you can check out and we'll talk about this. But you see I have a right arrow. I can tell there's three different sections in this carousel. Each three has one of these has three products. So I'm assuming there's gonna be nine total products dot with this pagination. And I can go back, I can go forward. Hey, look, there's only one here. But essentially this is the carousel. It's without the autoplay giving the user control. Colas, that's what we have here. Giving you can combine it with thumbnails is as you want to hit the thumbnails. And then you also have user control here, these arrows to help flip through each one of these thumbnails. This is where autoplay is great. If you go onto smart television services, they have carousels. You'll see this hero image here, the pagination. There's gonna be five of these. And this will auto-play. You kind of watch as these new series come in. Be careful on your autoplay, shouldn't, it shouldn't be too quick. Just a long enough for the user to get the point. And then the next one comes in. Yeah, this design pattern, although it doesn't work, it doesn't work for websites, like the communication goal is, becomes inconsistent because it keeps switching on the user. But when you're in Browse Mode coming to your television and you want to brow something. This is where it helps. It's a good pattern here. Okay, cool. That was thumbnails and Carousels. I'll see you in the next one, we'll talk about modals and light boxes. See you there. 15. Modals and Lightboxes: Alright, let's talk about modals and pop-ups. A modal or a pop-up is a window element that sits on top of an application screen. And it creates a mode that disables the main screen, like the parents screen, but keeps the mainstream visible in the background. When viewing outside of the modal window, users must interact with this modal before they can return back to that main screen or parents screen, either by clicking or tapping outside of the modal and closing the modal. And again, it goes back to that basic information architecture, right? Where you have that parent level, which is the main screen, and then you have that child level, which is the modal or the pop-up. Their main value is that it allows a user to easily view additional context, our content, without losing the context of the main screen. That has to do a lot with location. Like they get to see additional information, but they don't lose the context of their current location. The con of modals is that they can be very intrusive. And it's mostly guaranteed that your user will see the modal, but makes sure to use for something that's valuable and not advertising. Intrusive add pop-ups that come out of nowhere can disrupt your users focus and create distrust in your product or UX. Let me show you one here. Here's kind of what we're talking about. I was on this site here just looking around, reading news articles all day and this thing just pops up out of nowhere for a histogram video tutorials. Like No, I'm good on Instagram tutorials. It's intrusive, it definitely stays there. I have to interact with this. And I'm gonna go ahead and close it and go back to my reading material here. I'll see you later. Just kidding. Okay, So that's kind of what you want to avoid, that type of ad modal like popping up. I thought this was funny too. This was like, Here's the Sun and here's mercury. And then here's my finger. And here's the clothes Add button, like we've all seen on those models, the ad, but the close button is like so, so small you can barely fit my finger on it. But that that was kind of funny. All right, so let's talk about when to use a modal here. So it's great when it grabs the user's attention. So use it when you want to interrupt the user's current task and catch the user's full attention for something super important. Let's say you need user input. This is the way to get information from your user, like in this example where you're ready to purchase an item, you click the Checkout button, and then a mobile, a modal appears asking you to log in with your email and password and form fields. It doesn't lose the location of the user. They didn't go off into another navigation or destination on the site. You'll probably also want to add like, don't have an account sign-up or continuous guests prompt as well. It's great if you want to show additional information without losing the context of the parent page. So an example here is showing larger images, clicking on an image and seeing it larger or clicking on a video, saying the video are showing additional information like Learn More or FAQs Frequently Asked Questions. You can show information that's not essentially directly related to the parent page. Things like notification or marketing opportunities like invite five people and earn $500 or Welcome content or even share functionalities. Then you could show, use the model to show information that is directly related to the parent page. Things like a success message or loading errors. Or if you go to click on something that's impactful from the user, we can throw a Ru sure. And they can choose yes or no, or you have something just happened in our database while you were trying to edit something or do something, We can throw a modal up to just says, you know, something went wrong. You may have to refresh or close the modal and start, start again because our database center received the information, things like that. A couple of examples here, I'm going to just show you the live example for this modal here. This is for a site we worked on, and that's pretty cool. As a user, you can go and click on, these are for home batteries. These batteries will charge your home and supply power to your homes. As a user, you can go through and click on what type of appliances you'd want this battery to power if you were in a power outage. And then you can see it shows you how many hours one battery would be able to charge your house if you had all of these appliances turned on. As we're educating a user about energy use, home usage and appliances and how much energy they use. We added this little energy chart here that opens up a modal. That modal is a child level information that relates to the parent. And this shows information about what type of appliances caused the most used the most energy, and what that equates to also like a higher electricity bill. So if you're running a C all day or electric cars and lights, those contribute a lot to higher energy consumption. Again, the user can just close this out. Back to the parent page. So that's a good use case for a modal. Another one in the application that we work on is in this mobile lab. If this is an app that monitors your solar system on your home. And if something goes wrong on the solar system, we flag a little warning here that you can see as an exclamation mark and a little speaker bubble. And if the user taps on that modal, we just let them know that something happened and they should contact us so we can look into the issue. Also know that it's good to put the x for mobile devices at the top-left, especially for people that are right-handed because you'll be holding your phone here with your right hand and you can use your left hand to easily control that, to close that x. That's a pretty common placement for the x. If you're on a mobile device and you can see this one in action here. Right here. The user clicks on this exclamation point here. You'll see the modal go into play and then you can close it here as well. So pretty simple example of that, like boop, something went wrong. Try again. And you can also use for mobile devices and on tablet and web, you can do what's called a full-screen modal where it takes the whole screen. And so the user doesn't see the parent page in the background, they just see the X. And if you've noticed, see if you have any device, the native notification screens, those are modals like this is a modal as well. Here's an example of something that doesn't necessarily tie to the parent page. We have a referral system and one of the applications we are that we manage and design for. And if you can refer people to the service, and if somebody actually signs up and completes their project, then you'll earn $500. And so this modal will, will show up at anytime during the user experience. It also triggers an email to a user, but if they can come in from the e-mail, but it also will show up if you're just in the application doing something, this will just fire up and it's intrusive. But look how that's a great intrusive. It's like you just got $500, like go ahead and claim your earnings were gonna send you a check for 500 bucks. This is an example here of an RU. Sure. If you delete an account here, you're going to remove a lot of information that ties to that account. And we fire this to just remove accidents on something impactful. If you are a user and you went to go and click on something and delete it. We'll just do one more step ahead on something that is account related and just let them know, like are you sure you really want to delete this account? There's a lot of work, a lot of reports tied to this. And again, if it was an accident, they can cancel out. If it's a delete, they can delete out. Here's one that ties to the parent level page. Here is editing your account level information. You press the edit button shows a modal, enter the account information. And these are great because your fork in your user, you're saying you're either going to update this information or you're gonna cancel or close. There's no other way out of this. You can't be halfway through and then go somewhere else. Like you got to either finish or complete. And that's the nice thing about these models to, as it really does, fork your user into viewing this modal and then either completing the task or closing the task. I personally love full screen search modals. If you click on the Search icon here in this site, it opens up a full-screen search modal. The background is a little bit darker. It's about 90% opacity. You can still barely see the parents screen behind it. But it's super slick because it feels like you're, you're engaging within the interface, like you're, you're in the interface and it doesn't feel small or weak, it actually feels super modern and slick. And as you're typing into the search field here you'll see search results. Again, you can close this with the x or you can go find your search results like Erin Anderson here and go over to Aaron Anderson site. I personally love these. I think these are great and great use cases for fullscreen modals. Let's get into some do's and don'ts. So again, one modal at a time. And this is a very hard rule for applications don't do modals on top of modals like this here. Like you've got a modal here and you got a modal here, that's not good, That's no Bueno. It's okay. If you have like operating system like I'm on my computer, I could go into my finder. That's technically a modal. I have another one like that's okay when you're doing an operating system like a computer like this. But for software and user experiences, avoid these. Another one that I saw here is on my credit application. And I go look at my credit report and get notifications like your credit score went down for no apparent reason, which I'm like, What did I do? I even do anything and it goes down. But you can see what happens here. It says see your new score and it opens up a modal. This is one modal. And I click the X and it closes me and goes back. And if I add tap on this little three dot thing, look what happens. It opens another modal on top of a modal. Now I'm looking at two Xs and like, well, which one is the x? So this is what you want to avoid this modal on modal interaction. Remember like modals are great, they only do parent level and child level. You can't throw another modal on top of this to do a grandchild level of information architecture. But they are very well for this parent and child level relationship. Like 70 or 90% opacity for the background color here you can see and avoid doing like very low background opacity, like you want it the user to be focused on the task at hand. In this case, I'm giving, giving us feedback in the application. This way There's not focused, there's, there's not enough capacity. There's too much capacity in the color and the background here, and there's a lot going on. It's not creating the focus that we need for a modal. Also modal should fit on the screen, mostly for desktop. And you can scroll within this modal. Like I'd be able to put my mouse in and scroll through this information. I don't make the modal too long that it goes outside of the window here, right? Like you want to be able to fit right into the window of your desktop application. Okay, let's go look at light boxes. Light boxes are pretty much the same interaction as a modal, the differences the lightbox refers to a photo gallery. It's all you need to know. Same principles apply to modals as well as thumbnails as well that apply to the lightbox, right? So let me show you an example of that. So if you remember, we have this side I worked on and built. We have these thumbnails, right? So the same rules that apply to those thumbnails talk that we did apply to these thumbnails. And when you see the lightbox come in, you can see it's pretty much a modal. And the difference is it has some more functionality built within it. I can still close this image. It's a pretty image here. But I can navigate back and forth through these modals. And the lightbox is pretty much that, That's the term is used just for the modal. It's like creating a box to see your image. And the background is still viewable from the gallery here, but it's essentially the box coming out from the light. You're seeing your image and then you put it back into the photo gallery here by closing it. When do you use these? Use if you have a lot of photos to fit on one page, again, they're great for showing different product shots of like an e-commerce site or a photo library and apps that integrate with your camera photo photo library. This site here was more for a photographer. And you can go check it out here. Here's the URL as well if you need to. Yes. So just remember within the lightbox modal, there can be descriptions like we just saw. You can have the pitcher count here, eight out of 25. You can not have a description as well. It's not mandatory. You can move back and forth on the buttons. You can close it. Remember the buttons have a hover state as well. You can see here. You can move through those photos. Okay, cool. If that was modals and pop-ups, and I'll see you on the next video. We'll talk about menus and drawers. 16. Part-1 Menu and Drawers: All right, Let's talk about menus and drawers. Menus are a list of content, categories or features typically presented as a set of links within the navigation bar, went on web, or can be grouped together within an icon like a hamburger or a kebab when on mobile and tablet devices, I'll show you a bunch of examples of those. Menus are super high priority UX pattern because they help users navigate throughout your service user experience or application. And again, you can have the most valuable features, most compelling content, it's awesome, but it's useless if people can't find it. Menus or source there. So important that you'll find them on every website, every piece of software you ever will counter. It's very critical to understand how these menus work. Not only for software and applications, but responsive websites. That's where they really come in handy, and that's where this combo of menu and drawers really come in handy is for responsive websites that they have a certain look to them on web, and then they respond to fit their content and their navigation needs for wet, for mobile and tablet applications. Let me show you a quick example of that. So here's the Nike website, here's their menu for web desktop devices. And you can see this is whole thing is going to change when I go to tablet. And you can see they use the hamburger menu here. And then when I go over here to a mobile device, they use the hamburger menu to house that type of information. That's a responsive website. And again, the drawer is the most commonly used to how the different elements like menu links. But it can also be used to help other, how's other types of information and UI and content that relates to the application. Again, the drawer is this warehouses all the links. You have the Menu icon here, and then you have this drawer that slides in like that. And so that drawer, It's great to house navigation, menus and links, but it also can be used as a separate interaction to show child level information based off of any content or actions that a user has done on your site. I'll show you examples of how to just use the drawer. But you'll see this a lot as a combo. The menu and the drawer combo. Again, that drawer refers back to dresser drawers. The dresser drawer here houses information you can open and close it. That's kind of where the origins of the drawer comes from. Here's our menu navigation here for web, we have our four options for our user. We have our search bar. Then you could see the same navigation style here. For mobile applications where we put the menu or the hamburger menu up. And we house all of the links and navigation needs within that hamburger menu. Here's the example where the menus on the top right. And I'll show you some examples here, here in a second how this works. Here's an example of the hamburger menu on the left. Then here's the example of the full screen drawer that comes into place that the user can X out at any point. Let's go look at those real quick. Here's the one that's on the left. You can see that slide in close. You tap outside of this closes. Here's the one that's on the right. And tap on. This one comes in from the right. If your menus on the right, make sure it comes in from the right. That's on the left. Makes sure that drawer comes in from the left. We also have the full screen here. So you can see how it takes the full screen. Then we'll have to have an x here because we've got to have a way for our user to get out. They can also tap on the home screen. It would do that as well. Okay, so let's go look at a lot of this menu and navigation and drawers. They have a lot to do with information architecture and understanding what levels of information that you're designing for and what levels of navigation your users are gonna need to go through throughout your website, your web application, or your mobile and tablet application as well. You can see here with Nike's website here is they have this parent level. New releases, men, women, kids, and sell. That's the parent level information. Then you could see the menu drop-down show up and this has the child level and the grandchild level. This also refers to, as we call it as a mega menu. It's like a huge menu packed full of lots of stuff. You can see the parent level was the new releases, the child level was new and featured. And then you have the grandchild level, all of the things that relate to the new and feature and featured. You can see how this works for a mobile device. They have the hamburger icon, opens up the parent level information. And then if you tap on new releases that goes to the child level information, and then it gets over into the grandchild level information. They're using a drawer, but you can see how flexible this drawer is. It can have multiple levels of content within this drawer. You can also click on or tap on the logo. In a lot of cases will be used to allow your user to go back to the home screen or the master screen. Let's go look at that live. So before we get into the next example, so here's your parent level, grandchildren, child level, and you can see how this changes based off of the responsive or adaptiveness of this website. So now we're on a tablet mode, and now we're gonna get into the non-modal. You click here new releases. Now I'm at the child level and now met that grandchild level and I can go back, back and close. All right, So pretty effective, simple but effective. You can see another example here of a menu that's commonly used, which is right drawer menu. You can see on Web we don't hide all this information within a hamburger menu. We expose it. And same on the tablet. It's exposed here on the left. And then when we get to the mobile view, we actually use the menu, hamburger, menu icon, and drawer combo, right? So if we have the real estate on web, don't show the hamburger menu, like show all of the information because it goes back to that statement again, user affordance. The less clicks and taps it takes for somebody to do something and complete their task on your website, the better. Let's go look at Shopify as example. So you can see their menu here on the left, I'll expose for web, you get to the tablet. Nothing changes. Then we get into the mobile view and here's their hamburger menu drawer combo, right? Cool. Thank You. Get the picture. Let's go look at different types of menus. You can see here is on Android has two very common menus. It has the hamburger menu. And again, that hamburger houses mastered navigation links like parent level navigation links. Then you have what's called the kebab or the overflow menu. And this menu is usually meant to house the actions that don't fit on this title bar here. So as actions, as this title bar gets smaller and smaller and smaller, the overflow, which is exactly why they call it overflow. Whatever menus that overflow get tucked into this. Again, this kebab interaction here is common on Android, but it's not too common on Apple interfaces or Apple products. Some other common ones just get the hamburger menu because it looks like a hamburger. We have the Bento menu here. This one looks like a bento box, and this is usually the show different applications that you as a company have. Like if you have Google, you have a lot of different applications like Drive and Google and calendar. So this shows different apps within one service. You have the kebab menu because this looks like a ship Khabbab. And then you've got the meat ball menu here because it looks like meat balls. And they usually this one's more for settings and in the kebab menu is more for overflow. Sections also can be used for settings. I've seen the overflow menu be used for settings as well. 17. Part-2 Menu and Drawers: You can see how this bento box menu type of thing is used on different types of products to show their applications, right? So you'll see this a Microsoft Outlook. If you click on that Bento menu here, it shows all of their products that they offer, Outlook and PowerPoint, old man PowerPoint and Word and Excel and some of the other things there. And then same with Google that has the Bento box here at the top. And if you click on the Bento box menu kind of thing, it will show all of their other applications. They have YouTube and calendar and some other things. I want to show you a really super valuable little tip that you can. You can use drawers for, that. You can house for more than just menu options and drawers when you're thinking about a responsive site. Drawers or your best friend. They're super, super great. They're really handy. And I'll point out why here once I give you this example. So here's an example where we have a map interface and the user taps on this specific landmark here. And we open a drawer. More details related to what the user is just looking at. They press the X and it takes them back to the map. Now let's go look at this interaction from an iPad. Same deal here the user taps on the map here, sees this relative information shows up. It's the same interaction as web. It just takes maybe a little bit more real estate than it would on web. This drawer here, and you can close, it still works. It's a great interaction and keeps the user focused on. And then you can see how the same interaction works for the mobile case. You tap on this item here in the map and it takes the full screen real estate, you can close with the X and go back. The benefit of this system using drawers is that this interaction model works the same and it's the same functionality, whether it's desktop, tablet or mobile devices. So what that means is you can engineer this one time, and it works for all three different types of platforms. This interaction model works great for everything. Let's go look at it in action here on a real product. Here's a solar product we're working on. These are your customer, these are your solar panels here in blue. And if you want to learn a little bit more about your panel, hear or see the production of that solar panel, you tap on it. We highlight it and we throw up a drawer. And the drawer here has the x, you can close it. And then you see information related to that specific area of a specific panel here and solar panel that they tapped on. Now let's go look at that on the iPad. Same functionality. Tap on the solar panel, get the drawer. You can swipe on this drawer, you can see more information related to it. Then you can see the same thing here. Being used for the mobile application. Tap on the drawer, gives the full-screen modal full-screen drawer here and closes it. All right, So that's a great parent-child level relationship. And the benefit too is that the drawers, Unlike modals, you can't have a modal. On a modal. The drawers can have more information within it. You can see this one here has, we're using accordions within this this drawer here for our FAQs are frequently asked questions. So these are taps, this that opens up the answer for this question, right? So then we have three levels of information architecture. We have the parent level screen, we have the child level screen for this drawer, and we have the grandchild level screen for the accordion within this drawer here. You can see that's a very handy interaction and interaction model and UI real estate for different types of architecture needs like that. Let's get into best practices here. So remember to put menus at the top because they fit at a global or master level of information architecture. These, this menu navigates the entire site so they demand the space they should be usually at the top. Plus users are just used to seeing these either in the left or the right of the navigation bars. And then tell your users where they are at when they go off into different parts of your UX. You could use the title section in your title bar here to show and highlight the menu sections are on. On desktop. We have an active state for the menu. This is the home goods. And then for mobile, you'll see the user goes into the menu, may tap home goods, and we'll use the title here to remind them where they're on. Remember to keep menu's fixed like they stay in one place when the user scrolls. Makes it easy for the user to go and navigate out of any situation or any destination they are in and not have to go all the way back up to the page. Then don't forget about how your user is going to go back to the home screen. If you don't have home in your drawer and the user gets into like jewelry here. How did they get back to the home screen? You don't have the logo anymore because we replaced the logo with the title. Remember that kind of interaction here. And if you need to add the home screen, add the home screen and take the user back. You could use that. Remember that menu drawer combo, menu dropdown combo here to fit parent-child and grandchild navigation needs. You could use the same thing for mobile devices that we saw. Again, think about these mega menus here, like home goods as the parent, you got pillows, art, prints, clocks, wall clocks, blankets like these relate to the home goods as the child level. And then we're in pillows here we see a bunch of pillows. That grandchild level. We saw the same for Nike. For responsive websites, if you only have three or four menu links for your mobile device. Here we have like clothing and jewelry and home goods. We can switch to a secondary tab bar instead of the hamburger menu icon. And again, this has to do with afford inch. Like these menus are now exposed and the user can with one tap, easily navigate throughout all three of these menu or destination items versus having to go back into a menu, select the item and menu out. If you only have 234 tops of these, you can use the tab bar as long as it will fit. Okay, So if you have for web and you have the real estate expose all of your navigation needs. There's no need for a menu, a hamburger icon on web here. You can just see if you have the real estate. If you have the real estate, go take all these items out of the hamburger menu and put them over here for the user doesn't have to click multiple times into those navigation needs. When these hamburger menus first came out. This is around when the iPhone was just released. There was a lot of pushback with the UX community community about using these hamburger menus. And what it was is it wasn't that they're not super valuable. You'll see, you can see them obviously in every most common services and big applications that we use, it was that they were being used wrong like this. People were just using them when they obviously had the real estate for all of the information here. So that's kinda where all that came from and the backlash. But still there are an essential role to navigating and destiny people throughout your website. Last but not least, remember if you have a menu item on the left, open the drawer from the right or from the left as well, where the doors are open, wherever the menu is. Don't do this. Where the menus on the left and the drawer comes in from the right. Okay, cool. That is menus and drawers. I'll see you all the next video. We'll cover wizards, breadcrumbs and pagination. 18. Wizards: Welcome to wizards, breadcrumbs and pagination. I'm gonna break this one up into three different videos. We'll do one video for each one of these topics. So let's start with Wizards. A Form Wizard is a user-interface design pattern that enables untrained or new users to achieve a goal through a series of steps. And the user enters information in each step and then proceeds to the next step until completions. And wizards help break up what could look like a long daunting tasks to complete in order into small digestible steps. And studies have shown that if you make the first step of the wizard easy to complete, it's more likely that the user will complete all the steps in your task. You can see here we have the credit check application here. Again, we made it really easy for the review step. We add it pretty simple for the disclosure step. And then we made the real meat here is on your info. We have to put some information into to run this credit check. And then it's also good to make the last steps super easy as well. You don't want people falling off when they get, They've already went through three steps when they get to the last step, if it's even more information than they might, you might risk the risk of them falling out at that point because they're like, I just don't want to keep doing this. The first step super easy to make the last step super easy as the best approach here. This is a really good interaction, not only to break up long daunting process until the little bite-sized steps. But wizards also convey three very important things that are core to user experience. The first thing is expectation. It gives a high level of what the entire process looks like, as well as how many steps there are. And it gives that second part right location whereas the user at, in these steps and at anytime during this process, then it also allows them to see time. So how many steps or less, or progress, how many steps have you completed and how many are left? When to use these, use these when your user needs to perform a task or a goal that has a lot of information, action or data entry. Again, these tasks are easier to achieve by splitting this process up into smaller, little simple steps. And an example is like filling out tax information which requires a lot of information. And that information should be grouped into different categories, sections like personal information, employer information, financial information. In confirmation steps there. Use this when the user needs guidance, the user wants to achieve an overall goal, but may not be familiar with the steps needed to reach each one of these goals are information. The tax example is great because tax, there's people that their whole job is to do people's taxes because it's complicated, right? So these are great ways to sort of break that complexity up into steps and guide your user through each step without feeling like you need to know everything at once. When certain information or categories of information are dependent on each other. So in the case, if the information needs to be reviewed or checked at each step to receive a final outcome. So this is great when we had a running for this model here on the left where we had to use this for a credit check here. The reason why we broke it up into a wizard is that the users, before we even get information from them, they have to agree to our terms and conditions that we're gonna use their information to run a credit check, hit the credit bureau and get a credit credit check for them. Before we even get their information. By law, we need to have them agree to these terms. And then second, we got the information and then the third is the result of the credit check. Like they most of the time get approved, but sometimes they get rejected. You can see that second part here is when we had it, send that information quickly to our database, run the credit check, and then give the result back. So the third step is dependent on the second step. There are also great for Onboard boarding flows were users need to enter a set of information to start using your application like username or profile pick or select categories of interests, that kind of thing. Let's go look at a steps in creating a good wizard here. So first thing you're gonna wanna do is to break down all the information you need to have user input. And our select, we're going to use this ice cream example, like we definitely know people want, we need people to select their ice cream size one scoop to scoop, three scoops of ice cream flavors. Here we get the chocolate, chocolate chip pages, the pinup, rocky road, then rehab payment info, name delivery address, phone number or credit card number, expiration dates, CVE number and billing address, right, so that's pretty much going to complete some of our workflow here. Okay, so then you'll want it to find the order of information hierarchy that, that matches to the current mental model of the customer. This is really keen. So the mental model is an understanding of how a user orders or organizes information or system. Most often this model comes as an artifact or an outcome of doing user research. And so when you think about ice cream in the current system or convention and the way people mental model or organize ice cream information. The users tend to come in and they order ice cream sizes first. What's the size? They don't start with toppings. So you can see that order happening now. You start with the size and then you make it the flavors. And then you may get the size determines how many scoops that you get. And then the number of scoops determines how many flavors you'll get. And then based off those flavors, you may want certain toppings. You can see that that's a mental model. That's how your customer thinks about or organizes this information. And I really good book here is, if you go to the design of Everyday Things by Don Norman here, he talks a lot about mental models in this book. And it's super good. If you want to get really, if you're just anyway, doing UX or UI like this is a foundational read here. So if you haven't read it, just pick it up as a great book. He talks a lot about doors, one of my favorite chapters and he just goes, he just goes nuts on door design and how you design handles to inform people like which way you open a doors that push or pull, That's dependent on the handle design versus a sign. So very, very interesting. Good book here, check it out. Once you have your mental model organized. The next step here is to model the information hierarchy into categories and match them to the orders and the steps of the mental model. You can see this information flowchart here we have the ice cream sizes, we have our flavors, we have our toppings, and we have to payment information here. So you can see this sort of Wizard coming out like step one, step two, step three, step four. Now that you have this, you can go create a low fidelity prototype. You could start to dive a little deeper into the content you wouldn't need like things like pictures and descriptions and form fields. And then you'd want to test this with your customers to ensure the content, the mental model, the workflow, everything makes sense and is easy to use. We just kinda roughly put up a wireframe here. You got your, your wizard here, Size, choose your size. Medium scoops, pop over to flavors, hit your flavors, and then he would go over to toppings. And then press Next press back button, and then eventually get over to being able to order multiple of your, the ice cream sizes or ice cream products here and then checkout. So let's break down what makes a good wizard here. You can see the completed step here lets the user know what's done. The orange step here lets the user know what step they're on. The step ahead here, that's just gray, that lets the user know what steps are to come. It's really always good to have a title under each one of these, again, that sets the expectation of what the user's going to expect and what kind of information is going to come next. And then each one should have a description or a call to action to tell the user what to do during this step. Then a good wizard also has the Next button allows the user to proceed going forward. It allows the user to go back as a secondary button. If they miss something in or need to change something that they just didn't. Step one or step two, they can go back. And then they let the user, let the user cancel out. So cancer, this whole, entire thing if they need to. Some do's and don'ts remember, show progress of steps. That's good. Conveyance shows time and progress done, not showing progress steps here. Like you're on your info and you don't know if you've just completed these. Show good visual states for completed steps. And the active step here, the step to come. This, we've even made this bigger, brighter color. You can see we're using the checkboxes here for completed steps and there's nothing going on for this step and the future. Just a small little gray dot. Avoid this. Like it's unclear what step on auto nowhere bolding this and making a little bit better, but be more impactful, more intentional about this. And so you can't really see that type of progress or those fundamentals of what makes a good wizard between things that had been done. Thanks for completed step that you're on, Steps to be completed. Just remember that each step should have the category of information that relates to it. So if you're saying your name or your info here, have the name, LastName. Don't use each step for specific information. I've seen this once where it was like name, email, phone, I'm like, Well, that's so easy. Why do I have to do this in a wizard? Like I could just do this all in one sitting. So that's the goal of these is a breakup the long daunting task and put it into steps where if it's just name, email, phone number, birthday, you don't need a wizard, like just it's fulfilled. So let me enter that. Remember to have a back button that allows you to easily go back into the past. But here's the kicker. Save that information. Like if the user enters information and they go back a step and they go forward a step to this step they were just on. Don't make them fill out that information again, save that and what we call it the front end. When they go back to the back, make a change, go forward again, that information should still be there. The back button is kind of important because if you let the user go back in the browser and then they go forward in the application. We may not be able to save that information they just stored. Okay, cool. Let's go. We're going to talk about breadcrumbs, but I'm gonna do it in another video, so I'll see you in the other video. 19. Breadcrumbs: Let's talk about breadcrumbs. Breadcrumbs are small list of navigation links that help the user see the hierarchical structure of a site starting from the homepage. This way of navigating the site structure is typically called wayfinding. They're pretty simply look just like this. You have the home electronics computer and speakers, and I'd be looking at speakers on the site. They're called breadcrumbs because they mimic little tiny pieces of bread that had been left on your desk. And they're really meant to just be small and never replace the top-level navigation with these, there are just additional levels of navigation used to help the user navigates very large complex sites and applications. They're super simple to design as they don't vary from this example here that I'm showing you. You'll see him a lot on large e-commerce applications. You'll see him here in Amazon. You'll see it here in Best Buy. And again, they show the hierarchy structure of a site's information architecture. You can see here I'm in Amazon right now and I'm looking at binoculars. And it's letting me know that the binoculars and looking at starts from electronics home and then camera binoculars, binoculars. But if I go back into camera photos over here, let me just scroll down and grab another one of these here. Let's go look at computers here. See how this changes for say, a monitor will look at this monitor. I'm going to find one over here and it will, it will update. Just give me a second. Let me click on one of these. Okay, so you see how it's just letting me know I'm looking at monitors, but it came from computer accessories and electronics here. It's not it's not showing me my history of where I'd bet it's just showing me the site architecture. That's the key piece for these. Let's talk a little bit about usage and best tips for them. So only use breadcrumbs for big site applications with lots of information and contact. Contact. Best for large e-commerce sites like we just saw with Amazon. They're not really meant for like parent level information architecture, like a portfolio site or like a basic Mom and Pops star website. The breadcrumbs, again never replace that global navigation. And the breadcrumbs should display the current location and the sites. Again, hierarchy structure, not the session history. That's where I think some people get this wrong. It doesn't show where I've been. It's just showing site structure. If you did show the history of where our user bin and it's quickly going to get long and confusing with a lot of repetition. Also, always include the current page as the last item on the breadcrumb trail. And that should not be a link. It should look like this. The breadcrumb trail, which is the trail that leads up to the current page that you're on. All of these pages should be parent level pages of the hierarchy structure, not grandchild level pages. These are parent level pages and the page that I'm on speakers here that's okay to show the grandchild or chat child level information architecture on the breadcrumb. Like this, this may get very granular, but these are meant to be parent level because they're showing me where this child lives or grandchild lives in relationship to the parent level information architecture. Again, breadcrumb trail should always start with a link back to the homepage or the very top level, like if you're home. Now Amazon here you can see it has electronics here. You're searching and looking from electronics. So it's starting you from the electronics here, not necessarily the homepage where you can see Best Buy here has Best Buy as the homepage. And it's going into those type, this one's better. In my opinion, you should always have the homepage at the beginning. Again. So show good link convey, conveyance, like show the user you can click on these different ones and not the one that you're on. Here's no link conveyance here. Clear conveyance of the step, the user zone, you can see speakers here is a little bit darker, or the one on the right, it's still no clear link conveyance, and it's not clear which one they use is on this. It should always be on one line. Don't break the bread trail up into two lines. If you run out of space here, just remove one of the parent level site architecture. So we don't need computers here. Just go back to home electronics and speakers. Pretty simple, That's breadcrumbs. I'll meet you over in the next video, we're gonna talk about pagination. I'll see you there. 20. Pagination: Alright, let's talk about pagination. So pagination is a page navigation UI component that helps users navigate lots of information and content that can't be displayed on one screen. And so this method divides all the content up into multiple pages and presents just enough content in a limited digestible manner per screen. There are most commonly used for search result page pages for large e-commerce sites that have a lot of content or product to offer. User that wants to browse and look at this type of these products and engage with these products. And if you plan on using a pagination component, then you must have a search function and also good filtering options to help the user narrowed down what they're looking for. They look like this. They have the list of pages that have each level of content. I'll break this down in a minute. Some of them allow you to jump ahead to a page. But the point is, is that nobody wants to go through 22 pages trying to find what they need. If you have good search and good filtering, then they can narrow down that list and be able to find what their need. Sometimes people are just shopping. I'll show you In the same, this same video, what's called infinite scroll, which is pretty much the pagination killer. It just like, Don't, you know, pretty much kills this if you're shopping for something. You'll see this also in Google. If you search a Google site and you can go into different pages here. And also you'll see him pretty simple like this where they just have arrows and the numbers. Here's an example of it. I'm gonna go look at DC shoes here. I'm gonna go look at there. Let's go look at their men choose over here. You can see there pagination at the top here. They also have it at the bottom. So I can go to the second page here. I can also do it at the top. Here's essentially the breakdown. You can always see the current page you're on represented in blue here. If you've got a number for that future page or a number one, here's the back page. The little ellipses, the three dots here, that's not engaged. He can't click on that, but it just shows that there's paint the pages in between 522. This helps give the user an indication of, wow, I got a lot to sniff through to find whatever I'm looking for. Again, you've got these arrow forward arrow back page, keys, buttons here. And then you have this goto form, which if you're trying to get to the page 17, this is a quicker way to get there. You just go in and put the page number you are in, press Enter, and then it will go over to 17 here. You'll see this too is pretty common, is the the checkbox or the drop-down here. This will give you a number of the list of content or product types that are showing per page. So you can expand this from 15 to say 50. This will show you the results. How many are being displayed at the moment, we've got one through 15 and add your search results. There are 324 products displayed throughout 22 pages with 15 products per page. That's kind of how that works. You'll see pagination a lot that's commonly used on onboarding. Onboarding is a visual way to educate your user, or sorry, your new users on how your application works or what to expect in your application. And we use this on an application I'm working on where you get a new user, they sign in. And these three little dots here that's referred to as pagination. And the user will press the next button here, tap it, and you'll see the next dot will go dark. So again, this gives the user the same thing we talked about, what wizards, it gives them a sense of expectation. How many screens are going to go through time, location, progress? And they can go through each one of these. Let's go break this down for onboarding real quick. I always include a Skip button. When you do onboarding, It's best to keep this to three to five steps. Don't make this too daunting for new, new user coming into your product that just wants to go use their product. Like just three to five steps. Keep it simple, but always keep a Skip button and usually top left or top right. And it'll allow the user to skip all these screens. Then you'll see the pagination breakdown here. So we've got five screens. Each circle represents a screen. A filled circle represents the steps that the user is on, gives us a sense of location. And the grade ones represent the screens that the user's already seen and completed. And again, that can face progress. So let's go look at infinite scrolling. Infinite scrolling is the replacement of pagination. It allows new content to load when the user scrolls down the page. And this makes it way easier to browse content rather than having to click like page by page by page. Again, like better affordance. Infinite scrolling can be addicting. You're just like keep scrolling and scrolling through new products and new products. Infinite scrolling always better than pagination period. No one wants to click through hundreds of pages to find what they need. So you can see the DC shoes here it had that pagination. Let's go look at Nike who uses infinite scrolling down, scrolling through DC shoes. And unlike us, cool, I get to bottom and I have to click and look. It's loading. Have to go back through scroll again, go back to the bottom. You can kind of get you feel this sense of it's a little daunting. It's just going back and forth, back and forth. Watch on Nike does it. Let's go look at Nike shoes. Let's go look at some Jordans, some scrolling down and watch when I get to the end. I'll actually let me, let me go. Just go to men that was, I need infinite products here. Sorry. Let's go look at choose. Okay. Now watch them scrolling down the shoes here, boom, boom, boom. See that little spin. Infinite scroll. Watches so quick. But see it, I can see my cursor on the browser here moving down. Not pretty good Internet, but you saw that little spinner there. And I'm just going to keep I can just keep going forever and ever and it's just gonna keep loading products and loading products. And I can just see here, just browse until my little heart desires and not actually buy anything, but just, I can just look at this stuff. Okay, so that's infinite scrolling in a nutshell. And then there's a site here called Gymshark, and they use a mix of both of those. If you're scrolling down shorts here. I get to the end of all the shorts here. I can do load, load more, art, could view all of them and load more. Kind of does that infinite scroll here I loads more products. It is a combination of both there you can see. Excellent summary. Always use pagination for onboarding screens. They're great. They're used when displaying lots of content and products. If you can avoid pagination, then always use infinite scroll and always make sure you have a search function and good filtering options as well. All right, cool. So we wrapped up pagination and I'll see you on the next video, the last one we will talk about icons and photos. I'll see you there. Bye. 21. Icons: All right, Let's talk about icons and photos. I'm going to split this section up into two videos. I'm going to talk about icons first and then I'll go and talk about photos. Just start. High level icons are very simple illustrations of subjects or actions. They're used everywhere. They help humans understand common points of navigation actions and contexts used by website software, operating system signs. They're great because they're universal. And again, understood by mostly anyone and they also Bridge language barriers to train an icon of a train is understood anywhere in the world. Some icons like Home Share, Print, pause, play message back next, like add close delete profiles, search. They're all so common that they don't require explanation like people know exactly what they do whenever and wherever they see them. In general, you can think of two different types of iconography. You can think of more action oriented, which is people are going to use them. You can think of more illustration oriented, which is serves communication goals. When we refer to user experience, icons were referring mostly to icons that people use. The icons that are more action-oriented are tend to be less illustrative and the ones that serve communication goals are more illustrative and those, those live more on the graphical side of things. Although many UX designers will create both types of icons to best serve the communication of a specific screen OR and the usability of an application or a website. Again, in general, It's a good practice to not make the action icons very illustrative. These icons should be very simple, easy to scan, easy to understand. Again, the benefits of icons. There are a lot easier to scan and read at a glance and actual texts goes back to that magic word affordance. There's kind of goes back to like pictures say 1000 words, same with icons. They can communicate a lot more than words. Like I said before, the universal understood by all languages. They serve as gray action targets for user interfaces. Things that people can tap on. You think about when we did the tab, tab bars. We had the fico over here to Instagram. You can see like they have five icon to the bottom for the tab bar and three up for the title bar. I said they had icons that serve as action targets throughout their application. That's great. You wouldn't be able to fit all of that with text. The icon, it's kind of speak more than a lot of cases than in text. They help us save screen real estate and space. And they're visually appealing and help convey specific brand types. You can influence your brand through the style of your icons. I put a whole bunch of common icons over here. I won't go through all of them, but just go through some more common ones. But you know, things like home and edit and search, profile and menu and pause and favorite and play and delete and add a message and errors and microphones and shopping carts, favorites, calendars, expand, delete, crop notifications. Based off all those icons you can ask yourself, what are these all have in common? And they are commonly used across multiple user experiences and applications. So if you plan on using one of these, don't, don't reinvent the wheel. Use the most popular form of that icon because it's most likely that users have already seen it and used it throughout other applications. So you can expect that they'll know it exactly how it is, or what the icon is, how to use it, and what it does in your UX. Regarding labels. If you're not sure if a user is going to understand what your icon does or know exactly what it is at a glance, then add a label to it. You can see this is a wallet. We add my wallet. This just the text alone already indicates that it's it's my it's a place for me and it's wallets where I'm gonna put my money, where this wallet might not be as specific without the text. You can also add a tool tip like we did here with the icon that over helps indicate what the icon does when you hover over it. But again, it only works for desktop devices and won't work for mobile and tablet. So it shouldn't be the main way that you communicate a abstract icon. Best practices, like I said before, don't, don't reinvent the wheel. Familiar icons work best. Use icons that are recognized and been seen before. Don't overuse them, are overly decorate with them because it may dilute their purpose. If they become more illustrative or overuse, they might not serve as action targets anymore and the user might think it's more decorative. Use the 5 second rule. That's if you, you're testing your icons and it takes somebody more than five seconds to think what an icon does or to scan the icon, then it probably won't work or isn't effective enough. Keep your icons simple. Again, don't over illustrate them. And then test your icons with users, see if you need a label or not. You just show your icon, asked you to user, what do you think that icon is at? In the second part of that question, what do you think it does? Then for mobile devices, decides needs to be at least 40 pixels by 40 pixels for a proper tap target. And let me show you the best practice for your target area using small icon. So again, we use small icons all the time because they are effective, they're easy to scan, they don't clutter your user interface. In most cases makes sure that your clip or tap target is bigger than the icon itself. This helps usually makes it easy to engage with the icon and the user doesn't have to like doubled, doubled, click or tap on it. If you have an icon here, don't just make the icon, the tap target, meaning the area that is clickable and tappable. So just the little x here. So the pink transparent rectangle or square here represents our tech target. If we put an icon here that's real small, once make the tap target at least 50 pixels by 50 pixels, the icon, it can be smaller than that, but the tap area is bigger. I see this one a lot with the students I teach. I'm the icons through their applications have different stroke thicknesses and it creates an inconsistent visual language can even make the interface look a little sloppy, my opinion. So keep the same thickness on your strokes. You can see there's a different stroke here for the message. Even I can tell there's a different stroke for the head of the profile. Or if you look over here on the right, these are all the exact same stroke width. We saw this on the best practices for the tab bars. The just remember don't mix your stroke, don't make stroke. Outline icons are stroked outline icons and filled icons. Use one of the other, but generally don't mix these because it gives it gives them more visual weight to the one that's filled versus the one that's outlined. I typically tend to use more of the stroked outlines like this one here. Just because of that reason there, these are tap targets. They're usually actionable or can serve as destinations. And we want to highlight and compliment our contact. These are just ways to navigate and do things that our application. And if they're too heavy, then they may distract from the content that's on the page. I typically like to do the outline. And they're also more common throughout user experience applications. Let's go get some do's and don'ts. Again, keep your icons consistent and you can see over here these looked like a family consistent strokes. They're all using outlined here over on the right. Doesn't look like a family. You got hard edges. You've got some icons that have rounded edges. They're filled, stroked, they're kind of all over the place. Again, keep them simple and modern. They'll look usable, but they'll also last the test of time. When you get more illustrative like this and put more color into an icon, they can look more decorative and less usable, and they'll also won't stand the test of time. Simple always works, always effective. The more you add things and you add illustrations and you add graphical elements. A lot of times our UI trends develop over time or our visual languages develop and these things can last the test of time where this arrow here, that's gonna be an arrow forever. Like a nice, clean, simple, thin arrow will last forever. Make sure your icons look the same size. And here's the real kicker visually. You can see here we've, I have this pink line here. Mostly all the icons except for the music note. They fit within this vertical space. When you look at the second one here, they look exact. They literally look evenly sized visually. Although it's not, you can see the pink lines. And if you look at the one over to the right here, we've downsized the music icon to fit the vertical height of this pink line. And when you look over at the bottom here, that music icon looks just a little bit small and a little bit higher than the other icons. And it's very, very subtle, but these things are important. These are like You should sweat the details here. Visually always is better than stray accurate. So you can look at accurate here, but thanks, should be adjusted more visually than accurately. Your best, Let's go into places to go find icons. Your best set of free of the world's largest free set of icons is called Noun Project. I have it open here. Noun Project is great. Let's go look at ice cream icons. Okay, So look how many. I'm gonna kinda zoom out a bit so you can see there's just tons of ice cream icons and you can show more. I think it was like 200 more here. All free, super easy. Let's say We'd like this little ice cream truck here. It's kind of cute. I want this icon. Basic download. Go to SVG. This site is so great and it's free. I'm like out of all the sites that I use that are free, I'm actually like I would be happy to pay Noun Project a monthly cost. I don't know, $20 or so just to use all these website, these, these icons mean it's great. I'll take it for free. Don't don't get me wrong. Um, but yeah, happy to, happy to pay these. I use this so often. You see I just downloaded the ice cream icon. I dragged it into the design tool that I'm using called Figma. I'm gonna select this icon and check it out. I can use it in my layout real quick. I'm going to go ahead and dress this up a little bit. Downsize this. This is a vector shapes, so I can go into here and I can add some color to this icon here. I don't know, let's go make it pink. Like downsizes thing here. Super cool. Give a little, little exhaust. A little movement here. Make this blue. Flip this. All right, I won't get too crazy here, but you see the idea. You can get a whole bunch of free icons here and look at that cute little ice cream truck owner. I'm going ahead and tattoo that little tattoo on my arm. All right. Some other sites you can check out is ICANN eight.com. They have a large set of free icons so that they get more illustrative here. But they're really cute and nice. You can see the ones over here. They have collections with them too, so you can click on one and you can download it. They also have HTML embedded into it as well. And then you can go check out the other collection here by this person. Then the other one that's really neat here is called, you draw or sorry, onDraw. This one is awesome. So these are all vector illustrations. And what's really cool about this one is you can search wherever you want. So I've already searched for food. I'm hoping I'm make you hungry. You can change these to any color live. I'm changing colors on the color wheel here and they're all updating. So let's go put some high pink into this. I'll look at this cute one, what the dog. Okay, and I'm gonna download the SVG, boom, downloaded, drag that into Figma. Look, I got a cute little look at this cute little dog over here. Yeah, I got this cute dog. It's eaten. I got a cute little ice cream truck over here. Let me there you go. Reposition this. Really quick. I've got delivery over to my ice cream. It's going to give my dog some ice cream and then it's going to bake for treats. Probably want to go for a walk afterwards. But yeah, you can see lots of cool on drawn is really, really cool in that sense that you can change these colors live and put your brand colors in and then go grab these icons. Okay, cool. I'm going to wrap up with icons and I'm going to do another video where we're going to go deep dive into best practices on photos and imagery and how to strategize there. And I'll see you on the other video. See you soon. 22. Photos: Let's talk about photos and imagery, and it's cliche, but pictures do speak louder than words and imagery is more than decoration. It's a super powerful tool to help you communicate your content, goals, your product and your brand. Images are used for setting up a brand's voice and building the tone of the brand. And a good photo can convey more information than paragraphs of text. Most important is that a good image can help educate or convey the communication goal much faster than having a user read. And most of the time in UX, don't assume or land on the fact that people are gonna read anything. But people don't even like reading. Maybe they like reading books, but when it comes to application, they just want to get in, do what they want to and leave. And so often or not, I'll have words on the application describing what to do and we test it. And people just like being a breeze right through, it's a good thing. We don't want them to feel like they want to stop and have to read everything and follow instructions. They just wanted to get in and do whatever the application does and leave and go on and carry on with their life. Images help a lot in that sense of setting up the communication goal or communicating something more with a photo, then a bunch of texts, again, always goes back to that magic word, affordance, time and energy spent. So let's go look at some images and the way to think about imagery or to categorize it or measure it, is that images evoke emotions and thoughts. And those emotions should be tied to some level of adjectives. And those adjectives should be used to describe your brand. If you're a bank, you may want adjectives that are alike, you know, trustworthy and calming. And if your little kids play house brand, you're going to want something fun and energetic. And there's all different ways that we can communicate those different styles where if it was calm, you want blue colors goes into some color theory. Blue colors and if it's energetic and fun, you want really bright colors and summertime pinks and stuff like that. But let's look at a couple of photos and talk about what type of emotions are coming out of these photos. The second part is that photos can spark thoughts to as well. If you look at this photo here, it has a sense of calmness to it just even being in the airport where people are scrambling. This has this real nice sense of calm and it's due to the orange color that helps calm down the photo. This person's body language looks super relaxed, just chilling on a chair, got his feet up on his luggage. It looks a little bit of boredom like he just looks like he's waiting. And also it evokes some thought around, did this person miss his flight like is that his plane leaving and you just like, oh man, I got to figure out the next flight or is he just simply got to the airport at a good time and it's just waiting. I was supposed to this photo photo. Look at these two kids and look at this little kids face like that is, that is pure joy coming out of this kid's face. He's just love it. He probably never got to do this. And then they did this photoshoot. You're like, yeah, go ahead and just take the pillows and goat Nazis, him and his friend, or maybe it's his brother, maybe his sister or something. They're having a blast. So you can think of this photo is their faces give off emotions. And it's exciting based on the body language and the movement. There's a lot of action to this photo, the time of day, maybe this is morning time or afternoon. It looks super fun based off the content. There's just been joined themselves. You can also think about this. Is this how kids play everywhere, or is this an only certain cultures? And then it brings up another point that some photos and photos we choose, they can bridge cultural norms, meaning a clear something that works in any culture. Or they don't. They only work in some cultures. When you have an international product, you have to be aware of cultural norms and things like that as well. This one's interesting here because you kind of get the sense of working from home. It's dull because the use of strong grayish colors, It's almost like mono tone. It's not really bright. It's kind of more of a tone pulled back colors, really relaxed here based off the body movement. But there's this feeling of mundane or like lack of incitement due to working from home. And evokes that type of thought is this person, are they, do they want to go out or they stuck at home? Dogs probably like as soon as you get up and leave the room, I'm going to tear this place up. But yeah, those are just some examples of how you can you can test your photos like this. Like if you're really interested in brand development, you can get photos like this and ask people what type of emotions and thoughts do they get from these photos? And see if they tied to your brand adjectives in your brand communication goals. Let's go look at some do's and don'ts best practices. So if you have a photo and again, we're thinking strategic here, like photos are here to help us communicate our goals. They're not just something we just pull out of nowhere and God, just throw a photo on the thing. You know, they're pretty meticulous. They're here to help us communicate that. And in this context here we want to communicate an online meeting. The thing you want to do is make it really easy to show the concept of your image. If you look on the left, you can tell it's an online meeting. They're doing FaceTime. There's a timer at play here. The one on the right. You have to hunt for that concept. Are they having an online meeting or does she just really liked? Got to know toothpaste and she's looking at a bunch of toothpaste is like that one for 299 is fantastic. When to order it tomorrow or something like that. But you kinda get the point here. Be cautious of using stock photos of people because you're meeting if you're gonna communicate in this case, the example is that office meeting like it should look like a real office meeting, meeting. Stock photos tend to have what can look like, not real context. Or even people that looked like actors and actresses. So the one on the left, this looks like a meeting and there's a meeting that would go into everyday. Right there. They've got some insights written on sticky notes. They're sharing knowledge is like a good UX meeting right here. Maybe this person is drawn like a dog or an ice cream cone or something. I don't know. I don't know. I've been in lots of meetings my career and I've never walked into a meeting and saw everybody do this to me. Smiling this halo, sir, you want a good, nice cup of coffee with me? This guy is smiling. You could tell it just, it looks stock. It doesn't, they're real people obviously, but it just doesn't, it doesn't look like a real meeting. It looks setup. So definitely use use real contexts and it helps to make your product fill more closer to human and more natural. All right, So my favorite one is to think about different ways to shoot your products. If you have a product that you're selling. Express personality that relates to your goal of your product. And showing personality always helps invoke that emotion. And emotion helps to create impact and meaning. And that's more genuine. You'll remember a photo that evokes emotion. And the studies have shown this deal. You'll remember things that are more unique and evoked some type of emotion, whether it's nostalgia or anything. More so than just a plain shot. Get photos of people doing interesting things with your products versus like this, boring, like, here's my makeup. On a granite countertop. Like this is awesome here. This shows FADH, it shows human personality. They're doing something unique. It just, there's a lot of great thing in this photo here for the example of a makeup line. Okay, Cool. Less is more. So here's a hot air balloon event we're doing sometimes too much content means more time. Somebody has to scan and look at all the information that's going on here. And again, that has to do with an affordance. Although this photo is cool, like look, there's this little pig one up here. It has interesting elements in it. But again, it takes more time spent looking and viewing this thing at the energizer bunny over here versus just a very simple hot air balloon. Like simplicity works best. We talked about this a little bit with buttons and also when we talked about shadows. When you put text over an image, just make sure it's legible and easy to read. Don't add shadows on the text, rather, manipulate the photo to make the texts really easy, right? So you can see without this, we have a black. It starts black at the bottom and it's 100% transparent at the top. We can position this any way we want. It can go halfway, I can cover the photo, but you can see what it looks like without it. You can't read that text. If you look at the right or just go and we'll just add a drop shadow to the texts. That doesn't work. It makes it look outdated. It's not a modern take on typography and I'm gonna type peers. I love typography. And yeah, just the general rule, never add a shadow on texts like manipulate other elements around it to make the text look good. Use good quality, but again, be cautious of the time it takes for the photo to load. So try to keep your photo size under one megabyte for the web. Again, anything more than that will delay loading time. And also make sure the photo has good resolution. So it's a balance between photo quality and loading time as well. And you can see here this is a great photo here. It's got good quality to it. And then you can see here, here's Mr. Warhol eating a cheeseburger, and that's a super pixelated photo here. So we want pictures, pictures under one megabyte for web. Yes. So one thing you can do to help with the quality and the load time is you can use a compressor site. I use this one is called compressor I0. And what it will do is they'll take a photo that has a decent amount of megabytes to it and it will downsize that significantly. So let's look at this one. It has 1.1 megabytes. All right, it looks like this photo here. Let's go drag this in and let's see how how much compression that can do. Like I took it from one megabyte to 130 kilobytes. You're probably thinking, Well, Aaron, It's probably looks like crap. Let's go compare the two. I'm going to open up another window here, go to my Downloads. Here is the one that we just downsized. It's now at a 140 gigabytes. That's great. Here is the one that's at 1.1 megabyte. You can't even tell the difference. All right, so you can always use this compressor to I use it a lot for assets before I give it to any engineering or put it into any sites that I'm working on. I'll just throw them into the compressor tool and just compress them down. Another thing is this is pretty obvious, but don't ever stretch your photos, like fill the photo instead, we've zoomed in on this photo rather than Greek crop this photo and filled it. Rather than doing something like this, all we need to fill the shapes. So let me just, let me just stretch it like this and stretch it up so you can see the one on the right looks very obviously stretch, so just avoid that. Another thing you can do that's pretty cool is you can add cover color overlays to a photo to make it more branded or to give the photo a little bit more visual treatment as well. You can use one of the photos from your brand elements here. Let's say our brand is a teal and orange, like the example here. And I'll just do it really quick. It's pretty simple. Simon Figma here. I'm just going to grab a rectangle. And let's go grab a pink. There's something you could do here. There's a, there's transparency filters that you can use. One thing I could do is I can just make the pink transparent. That's what I'm doing right now. It gets what I call starchy, where you don't get the, you start losing the pink and the photo becomes starchy or dull. And too much pink, you can't see the photo. So if you go into your opacity settings and you do a multiply over here. Multiply will bring in the photo. This is a, a 100% opacity right now. The multiply will bring in all of the colors of the photo, that darkness of the color into this pink color here. So it makes it better overlay. You can do all your photos like this. Let's just say, I don't know, you had a brand that's only black and white and you can do someone that are pink here. You can even have a little more fun. You could do like half of it's pink. You can even do photo effects where we do like something like that. Just creating visual interests with your photos. Speaking of visual interests will go to the next tip. So you can, you can mask out your photo content and the ad graphic elements to it to make it look more branding or more excited than again, this is more artistic, but look, they took this guy is photo, they've asked him out. They did somewhat color, some black and white. They had some scribbles. They put it on some textured paper, some shapes here. He was some texts and some tears. They got this guy over here on the right. I don't know. They just cut off his eyes. So that was kind of odd, but they added text and graphic elements of nature and some book illustration, book prints in the back here and scribbles and stuff. It's really nice. This is like a really nice. Almost chocolate packaging going on here. But this is another way you can treat photos. It doesn't need you to just be a square photo. You can put photos and different container shapes. They can be in any shape. You can create different shapes of the same photo. I did this before on a site look pretty cool where we had a photo here and we just copy the photo, cropped it to where it would look on the right. And we made another shape, actually added another one too. We had two rectangles here. You can add different colors. You can add in the orange and we had a little green. And so we had the live shot of the photo and we had a couple of the clips. Are the photos still showing up another shapes. And we had colors on those shapes and it made it a little bit more exciting. Same with this. You can mask out your photo and put it on top of shapes. You can see the square here in the panel sitting on top of the square. Or you can use a rectangle or a triangle shape. And again, all we're doing is we're taking a mundane, We just saw a normal photo of something. And we're making an exciting by adding these visual touches to it. Alright, cool. So let's go look at free image resources. So my favorite one is Unsplash. You can get anything here. Let's go back to our ice cream. You can go to all these images here and do that one looks good. You can grab it and you can download it for free. Download it and we'll pop it into Figma is probably going to come in pretty big here. So let me zoom out a little bit. And there's your photo. High-quality, good photo. And the best part, free, free, free. Okay, cool. Another one that you can go to is called pixels here, PEX, ELS. And again, you can search for ice cream, whole film making you hungry, all free photos. You can go download to the same thing I just did with the Unsplash. The other one is Pixabay. Same thing. You go ahead and put in some ice cream shots and bada bing, bada, boom. Then there's, when I use quite often it's called ice stock.com. It's about 12 bucks a photo. But they have photos, illustration, animations, all different types of photography and graphic elements. Again, these are professionally done, so you might find this what you're looking for in Unsplash. But sometimes you need a very targeted photo. And I stock is one of the largest providers of professionally shot photos. Real photographers come here and use this little kids eaten ice cream here. How cute. Yeah, 12 bucks isn't bad for a good photo and you're supporting somebody. There's a person behind here who upload the photo and they'll get a portion of that. So it's kind of a win-win. All right. That's a wrap. Just remember, I want to leave on a note of just language and you wrote a reminder of what kind of language we use to describe our user interfaces and some of the foundations of junior enter a good user interface. I think I started the videos this way. I'll end on this way before we go into any project work that we're gonna do here in a second. But a good interface is like a good joke and needs no explanation, needs to know direction on how to use just people use it. The way that we talk about our interfaces. It has personality, which is the brand value. But you heard me say a lot of talk about a lot about conveyance. Really good word to describe your work and the decisions around why your interface is the way it is. Remember that's because it's easy to understand information or relates to a particular task location. You heard me describe that a lot. Like these are all mechanisms that help you describe your decision, whatever choice you had helped inform the user of their location or it didn't take them too far away from their location if they were all like apparent level and went into a modal of a child level. They can still see the parent level in that model. Again, workflow and progress and controls like cancel, save back, edit, delete, confirmation and feedback. Success error loading my favorite one, affordance, easy amount, least amount of time and energy to complete a task. Information hierarchy, content order that matches your user needs. And again, when all of these are combined and taken into consideration, they interface feels very easy to use. Tom Olsen, visible to the user. And I'll kind of wrap at, use this as your visual language. Okay, cool. I hope you enjoyed the more content level of this course. We're gonna kick in a couple of projects where I'm going to show you how to take some of this content that we've done and design it within Figma. So you can kind of see how to build, how to build out a mobile, a modal and some other things. So I'll see you there and thanks again. Bye. 23. Introduction to the Project Section: All right, welcome to the project section of the class where we're going to build out some of these design patterns that we learned about in the last series of videos. I've created a Figma file for you to download, upload into Figma and we can do this together. And if you don't have Figma or don't know Figma, that's fine. You can, it's free, it's a free tool. You can download it and then you can upload this file and you can follow along together with me. Let's go take a look at everything that we're going to learn here. So we're gonna start with some web prototyping. And we're going to learn how to do the Custom radio buttons here. Pretty simple. We'll start real simple here. We'll learn how to do the menu and drawer. You see here. We're gonna do some modals. We're gonna do some accordions. We're going to do inline validation and create an account, and then change the Create button here into a spinner. And we learned that during the button video. We're going to learn how to do a drop down and then roll kick over to the mobile side. We'll learn how to do some of these on mobile devices. Say here you have a full-screen modal will do a modal version of a dropdown. So drop-downs or different from web than they are in mobile, will learn how to do a modal on. A mobile device, will do menus for mobile devices. We'll do the tab bar. I'm going to click through these tab bars here and how they stay fixed. And we'll end with little, something a little more complicated, that's fine as horizontal swiping. And each video or each section here, I've created a Figma file that has the example already built out. You can see here with the radio button that the prototype is already there. So you can open this up, you can pick apart, you can view how this works. Then we have the section that says you do. And we're going to do this together. We're gonna go through each one of these build-out and menu in a drawer and a modal, and there's always the example there. So in case you get stuck or anything, or you want to just pick this apart, you can use it and then you can follow along in the video and we'll go through each one of these and build it. Awesome. And we can also see I've done the same for the mobile devices as well. Super fun. Okay, cool. So I'm gonna go ahead and make another video for instructions on how to download this file and open it into Figma. And I'll see you there. Bye. 24. Project File Upload: All right, so let's go ahead and download the Figma file. And on this video will show you how to open the file. Once you have the file downloaded, it should look like this. It's a Figma class working project. Dot ZIP. All you gotta do is double-click or triple-click on that file. And that's going to unzip it. And now you'll have a folder called Figma class working project file here. Well, you got to do is go into this folder. I have left you file instructions just in case, but I'm gonna go through these in the video here. But if you want to go through the instructions, It's the same thing I'm going to show in the video here. But really all it is is that you can't triple-click on this file to open it in Figma. If I triple-click here, you see I get this error. Again, I'm on a Mac. What you gotta do is you've got to go to Figma. You got to go within your drafts. And your drafts may look a little different from mine because I just have I have tons of files here. Yeah. You'll want to go to your drafts sections here at the top left. And what you'll want to do is just drag this file into your Figma application. Within the draft folder. You'll see I'm gonna drag and you'll see I'm getting a blue outline. Once you get the blue outline, That's good. Just drag it and you'll see this may take a second, but you'll see the new file open up here, go ahead and press Done. And your file should look something like this on the left. Pretty easy. Now all you need to do to get into that file is just double-click. And now you're in the file, you are ready to go. All right, I'm gonna go in the next video and we'll kick this off. I'll see you there. 25. Create - Web -Radio Buttons: Alright, let's go ahead and kick off and have some fun and build out some of these components and learn how to build out the design patterns within them. If you haven't used Figma before, it is good to do a little bit of a deep dive into Figma. But if not, it's okay too. You'll probably be able to be just fine walking through the video and doing it with me here. And I'll go I'll go pretty slow at all. I'll kind of talk through what's going on here, but I've set everything up, so it should be pretty simple. In this video, we're going to stay on the web prototype here. We'll do everything on the web, and then we'll move over to the mobile prototype here. So these are your page layers here. And if you click into any of these, these are just different art boards that you can do design work and prototype work for. But in this case, we have a web prototype and we have a modal mobile prototype. Don't worry about the cover that covers the just the cover for the Figma file here. So we're only gonna be in the web prototype and the mobile prototype as well. In this video, we're gonna do the radio buttons, the menu in the drawer, and we'll do the modal. So we'll do those three, and then we'll kick over for the next video. But let's go take a look at the radio button here. So what I'm gonna do is select this art board on the top left where it says Mac 13. I'm gonna go ahead and select that. And you can see on the top right here I'm in the Design tab. So anything design-related here? If I'm selecting a shape or an icon, That's where I can change anything here based off my selection. I've selected the art board. And what's really important here is that you go to the Prototype tab here, see where it says Design. We're gonna go in the prototype over here. You'll see this start here. One thing I'm doing is I'm pressing space bar on my keyboard and I'm holding it and I'm clicking and dragging. And that allows me to move the art board space around. Really easy. Another thing that I'm doing is I'm going Command Plus to zoom in and command minus to zoom out. And if you're on a PC, that's Control Plus and Control minus. And then the last thing is if you hold z and you click and drag z is going to give you the Zoom tool. If you click and drag into this, it zooms in. So I do a lot of zooming in and then space bar with my click and drag to move it around. I'm going to zoom back out. What's really important here is I have this little Start blue rectangle with the play button on it. That's going to start the prototype to whatever screen that this is on is going to be the first screen on that prototype. We're going to move this little star thing through each one of these sections so we can start the prototype at each one of these components that we're going to design out. Before we do that makes sure that you're looked like me here where I've had the Mac 13 selected. I'm in the Prototype tab here. And I could see the start here is on the Custom radio button. And now on the top right here, you'll see the little play button. Give you a second to go over there. That's where it says present. That's your prototype. Let's go ahead and click that. This is going to load the prototype. And again, the first screen that we're going to see here is the screen that that has to start rectangle on the other tab. You can also see it's made two tabs, right? So now I'm in a new tab at the top called web prototype. And if I want to get back to my design file, I go back over to the design file and I'm here. If you're already a pro at Figma or you used it before, then this is all preaching to the choir at ERD are probably pro here, but that's essentially very fundamentals of using Figma and it gets more advanced here, but we'll keep it pretty simple for the sake of the project. What we have here is the radio button and we're going to start really easy. And we're gonna get a little bit more complex as we go. What we're doing here is we just have our custom radio button here. And if you go to female, you're gonna see the hover state. And if I click on it, you get the active state. And if I click off of it, I'm back at the default state. If I hover my mouse over it again, I get the hover state. Click it again. Pretty simple. Let's go ahead and build that out. What we need to do here is be on the Prototype tab where you can see this little blue rectangle here. You don't want to be on the Design tab. You want to be at the Prototype tab here. And what you want to do is click that little Start blue rectangle here and click and drag it to the file here that says Max 16, the art board here you'll see a highlight, see how highlights blue like that. That's what you want. So now we're moving from the example to the one that says you do here. This row here is what we're going to build this out. Okay, so the first thing we're gonna do here is let's grab the max 16 art board here. You can see if I click within the art board, I select elements of that art board. But if I click at the top or the name of that art board is max 16. I selected that art board itself. And if I want to rename this, I can go to my layers here on the left. See where it says Matt 16. And I'm gonna name this, Let's say test. Click back out. And now you'll see it say test here. Now that we have the art board selected, let's copy it a couple of ways that you can copy. You can do Command C or Control Z, C, C as in cat. If you're on a PC, it's Control. If you're on a Mac, it is command. And then you can do a Control or Command V. If you're on a PC, it's Control V, as in Victor. And if you're on a Mac, it's Command V here. And you can see replaced it over here. That's one way to copy and paste. One that I like to do is hold option, and I'll see how my mouse goes into a double mouse here. I like to hold Option and click and drag it and copy it that way too. Okay, So at this point we want to build out the design state for the hover. What I'm gonna do is zoom in to this art board. I'm going to select just, I'm a mixture. I'm in design mode. You can see I'm in prototype mode here. So we'll do prototype mode here in a second. Let's go back over design mode. This card is grouped. So what I want to do is I want to triple-click into this card. Another thing I could do is I can right-click. Let's do this one. What's ungroup it for now? I'm just Ungroup. Now I can select the texts, I can select the icon, and I can select this little back card here. So what we want to do is select the back card. I'm in the design tab over here. I'm gonna go over to the stroke section. Add a plus, that's going to add a stroke around that card. I like to keep the strokes thick. I don't like to do just one pixel strokes in this case, let's do it like 77 is a good number. Let's go ahead and change this color here. When you go to the color selection here on the stroke, you'll see you have all of the colors ready for you here. The whole color library, all the colors in the world are here. You'll see at the document colors below here, these are some colors that already exist in this document. You could pick up the pink here by just dropping the pink. You can also just go here and take your best guess at what that pink is or where it says stroke here. I also have the style set. So there's a little like Foursquare, four dots here in a square. If you click that, that will give you styles that are associated to this project. Actually I lied, I don't have the styles here, so let's actually make one. Now that we have this a pink color here, I'm gonna select the icon real quick. Now that we have this pink color, go ahead and click back into those styles and see where it says, plus, let's make this our pink colloid, pinky, cute little pinky. Now when we go and select our stroke again, what we can do is click back on that little style and check it out. We got our pink color here. A little pinky. I'm gonna go ahead and click pinky. Okay, cool. We pretty much made the hover state. Let's go over now and let's make the next state, which looks something like this, where it's filled. Again, I'm gonna do the same thing I'm gonna cover. I'm going to select this test board here. You can either do a Control C, as in cat if you're on a PC or if you're on a Mac, it's Command C. I'm gonna move over to the right here. And then I'm gonna do Control V as in Victor, or Command V as in Victor. If you're on a Mac and I have my new art board, somebody zoom out, your board should be looking like this. We have the default state here. We've made this hover state. Now we're gonna go make the active state where if the user selected the Female Icon card here it's going to be filled with the pink color that we just made called pinky. You can see I've selected the background now. It's filled with white. Again, I can open up the fill here and I can use any color we want. Or I can go back to that style that we just created. And I can fill it with pink. And there you go. Filled the inside. But way Aaron, where did the icon go? That's here. It's just the same color as pinky. Okay, let's make this icon white. What we need to do is if you click on Pinky, it just opens up the styles here. You may not see the ones here that say sunflower color. You might just see the normal styles here. What we need to do is we need to detach Pinky. You see when we go over to Pinky and you see this little break chain link icon and it says detach style, just go ahead and detach it. That means it will no longer be pinky and it will be a free form color that we can choose. Let's go make this white. Let's go ahead and while we're here, let's go add this to our color style. Now that we have white selected, you can press the little plus, or sorry, not the plus P0. Actually, let's see it. When you press the plus, this is something that happens a lot. You want to go to your color styles, but you press Plus and see how I just added another black color at 20% opacity here. And we end up with two colors. You can just add more colors. If that happens, just press the minus. Just like that. Then you'll be back to your white. If you accidentally deleted your white to, there'll be no fill. This shape has no fill, no stroke, nothing. So again, we want to add another color. We just add a defaults to gray, clicking near color. Go make that white. Alright, we're cooking with fire. Now we want to just add this back to our color style just to make it easy for anything that's white, we can just select the color style and we don't have to go find white. Again, the four dots here where it says style, click on that. Now that we're in our color styles, the little plus icon to create a new style. Here you go. And we'll just call this one white. And boom, we got white as a color style. Let's also make the text here. Let's go make that one white as well. All right, cool. We got our active state, the state in which the user clicks on this. We have our hover state and we have our default state. Let's prototype this together. So right now we're in the Design tab. Let's go over to prototype. Make sure you have the start. Here on the one that says test that we just did. I'm going to select female. C just like that. When I'm in the prototype mode, you'll see this little plus always in the center of the object on the right. If you don't see it, you might be on the Design tab mode, right? So if you're not seeing what I'm seeing, go to the Prototype tab at the top right. Now just click and drag this. You'll see at first it's going to snap to my image, was gonna say, do you want that image and just say no, just keep moving it. No image. And go over to the next one on the right. Once you do it, you'll see the blue on the next art board highlight. That means we have a good selection. And now we have the interaction details. You'll usually have a couple, you'll have unclick drag while hovering, while pressing. And the rest of them, keyboard, mouse, enter, mouse. Don't even worry about any of these. I never even use them. I just use onclick or while hovering. Let's go make this while hovering. Boom, you got your first prototype. What we want to do here is you want to do preserve scroll position. That's if you have a long website and you've linked these art boards together, the default is if you've have a button at the bottom of your art board here, Let's say you have a long art board and you have a button at the bottom. And you want the button to hover and you stitch it over to the next art board and you don't have preserved scroll position, meaning save. Keep the user in that same position as scrolling. It will go back to the top of the next screen of that, our board. And the user at the scroll back down to see the button there. If you tap this button preserves scroll position. That means you can click through elements on all of your art board. And exactly that it will preserve wherever the user is on each one of these art boards so they don't jump to the top of every single art board. Let's go ahead and do it just for our sake. We don't have long art boards for this example, but we'll turn this on right now. Just leave it at instant. Cool. So congratulations, you've done your first prototype. And what we want to do here is just make sure the start rectangle is here on the art board. Go ahead and press play at the top. You'll see something like this for me that I'm seeing. Again, look when you hover over the female icon, you'll see that shape happened. There's no transition. It's like just often on, Let's go add a transition to this. I'm going to click where it says while hover mixture, I'm in prototype mode. And it's going to open up the interaction details where it says animation. Let's just do dissolve. That means it's going to ease in. Let's do it instead of ease out, ease in. Let's do 800 milliseconds. Then go ahead and close this and now go back to, you can press play to go back to your prototype, or you can go back to the top tabs here at the top. And you can see how now that has some nice smooth transitioning. Yeah, that's good, that's good right there. All right, so now let's go make the clicks state, such as go back over to the hover. Make sure you're in prototype mode. And again, just drag your prototype little GUI arm over to the click art board. Again, I might have done that too fast, such as follow me. See how I've stitched the hover over to the active state. We have onclick. And let's do a little faster. Dissolved 300 milliseconds. It should be fine. Or you can do instant doesn't really matter in standard resolve. It's up to you. Close that over. Now we have our hover. We have our click. That looks good. Now let's go grab the state. I'm gonna zoom out a little bit, make sure I'm in prototype mode. And I'm going to go stitch it back over to the one we just started, the very default prototype. Art board. And dissolve clicks should be fine. And I'll go back to our prototype. Click on female and move your mouse down your back. That default, we got the hover, you got the click. You got to click off if your mouse down or you'll be in hover state again. And you can see that work in there. Awesome. Hopefully that was really easy for you. And let's go ahead and move over to the menu and drawer. I'm going to make a new video that took a little longer than I expected. But yeah, I'm gonna make a new video and we'll jump over and see on the menu and drawer. I'll see you there. Bye. 26. Create - Web - Menu Drawer: All right, welcome back. Before we move over to the menu and drawer designs, remember to grab the go back into your Prototype tab, not the Design tab, but your Prototype tab at the top right. And grab the start, which will start the prototype to whatever screen this is on. This will be the first screen and the Prototype. Zoom out a little bit, click and drag this start, and drag it over to the Mac nine art board where it says Menu and drawer to the example one, not the one that you'll do, just the example because what it's going to take a look at this real quick. Okay, so just select the Mac nine art board here. Press Play. And this is what we're going to build out. The menu and the drawer. Pretty slick. It's pretty easy to. Let's go back to our project file again, I'm in the Prototype tab window at the top. What I want to do is go back over to where it says design batter patterns project file at the top-left. Grab the start, rectangle, move it down to you Do section. Okay, so we have the art board already created for this design here. Now we just need to make the art board for the menu. At Figma has art board tool and it looks like the little crop tool at the top left. Go ahead and click that. By default, it gives you a whole bunch of art board and frame sizes for different iPhone screens, tablet screens, desktop, presentations, watches, social media, all types of stuff. You can also just click and drag and make a custom one as well. Let's click and drag and make a custom one and make the shape that I'm making here just like a really long vertical rectangle. We can make it a little bit bigger than the art board on the left here. If you see I'm holding it up. Don't drag this into the other art board like this. You can do art boards within art boards, which gets a little tricky. For now. Just keep it over to the right. Pretty simple. Let's go ahead and go back to our Design tab. And let's give this a background color. So when I select the art board where it says 596, Let's rename this over in the name layers naming. Let's call this the menu. Let's call this drawer. Make it a little easier to talk through this. So you can see when I select the drawer, there's nothing, there's no design patterns in this or in any design elements in the design tab here. Once I selected, I've selected the art board because there's nothing else but art board here. The art board will have a default fill color to it as white. Let's go into the fill color. Works solid. Let's do a gradient. You'll see where it says linear. That's a linear gradient or the same thing just means a two-color transition. Let's do linear. It usually starts with white and white. The white on the left though, is 100% opacity. The white on the right is 0% opacity. And you can see there's a little opacity slider here and a opacity percentage here. So you'll see a 100% when you're selected the color on the left, and you'll see 0% on the right. What we want to do is make the color in there, right, a 100% opacity as well. Let's grab the color the left. Now. Let's make it pink on one side. And let's make it a little bit more purple on the bottom side. Yeah, that should be it should be pretty cool there. Again, you can control these. I can click over and make the gradients. Now this is all vertical, but I can do them horizontal. I can do a more angled like this. You can push one color down or up. You can play with this on your own, but we'll keep it just pretty straightforward, up and down for now. Go ahead and close this. I've added the elements here next to this drawer already that we're here in the example above. Go ahead and just select all of those and just drag them into your drawer here. Pretty easy. If you don't. One way to test this, sometimes you drag elements into an art board. You go to your prototype and you won't see them. And one way to make sure it went into the art board is to select where it says drawer. So select the actual art board and move it. Sometimes you'll see this where this will look like. It's on top of the art board. And then you go move it. The content stays, right? So what you want to do is make sure that this is in the art board itself. Another way to do that is to select all of the elements here. Press Command C, go to your art board and press Command V, and it will paste within this art board. Now I can make sure it's there. Now that we have our art board, Let's move it a little bit closer to the screen on the left. What we want to do is we want to select the menu. I've already have it grouped for you. Just go ahead and select the menu. Go to our prototype mode here. Click and drag the GUI arm over to the drawer. This is where it gets a little loved one level deep is we have it on onclick. Let's go move it to from Navigate to, to open overlay. I'm gonna do that one more time. So we had an onclick as the action and the function instead of navigating to another drawer, we want this to open and use that drawer and open it as an overlay. Open overlay. And you'll get a whole new set of interaction details based off the overlay. It will usually default is centered. And we're gonna do that here in a second. The next video for the modal. What we want here is not centered. We want at the top left gives you the most common icons here as well that you can select centered top, left, bottom. Go ahead and click the Close when clicking outside. And add background behind overlay. And let's do like 70% opacity here. Now what that will do is give you a background. Then you'll see what sleep the animation for now we're going to change this in a second. You have probably dissolve or maybe even in state here. But let's just do let's go, let's go put it as incident for now. And then we'll have some more fun. Again. We have onClick, open overlay, top-left close when clicking outside, add background behind overlaid, we have a black color here. You can change the color of the background, but just do black and 70% opacity animation instant. Go ahead and close this. Let's go press play at the top right are present. That will take us to the prototype and watch what happens. You can see it opened up the overlay. This is the 70% black. We have the menu here, but you can't get out of this right now. There's no way to get out. So let's go make the X button close and take you back to this page. So among the drawer still in prototype mode, go ahead and select the x and just drag that one back over to the Baba t art board and do OnClick navigate to is fine. Instant should be perfect. Go ahead and close that. Now let's go back and we can press play again. Go back over menu. And now when we click X, you'll see it close here. You'll see when I, when I selected the art board and press Play, it just loaded the art board here. All right, so it will also load the prototype based off of any art board you have selected. So what I did is I arrowed back over or you can come back here, go back to Imax 17, press play at the top right. There's your menu Close and that's looking good, but it doesn't have any transition and it does have any coolness to it. Let's go add some cool things to it. So at this point, what we want to do is make sure we're in prototype mode. Go grab our menu prototype here, open up the interaction details. What we want to change as the animation from instant, we want it to move in. When it moves in, you'll be able to define which direction it's going to move in from. And these are kind of fun. You can either do move in from the top, moving from the bottom, move in from the left, or move in from the right. You can mess around with these. We're gonna have more options when we get to the mobile prototypes to show how these different move-in directions and form the over the menu drawer. But in our case, we want it to move in from the left and move right so we want, and it gives you a little preview here. We want it to move right. It's going to come in from the left and move in from the right. And don't worry about the ease or anything that should be fine there. So let's go ahead and close that. And now let's go back to our prototype here. Press menu and look at that slide in. You see how that slit in. We haven't applied anything from the x yet. But it moved in. And it acted like a nice transitional menu. But boom, they cool Thich Nhat of sound effects, but rarely. Let's close this up. Now let's go grab the x here, grab that prototype. And on the Add animation, what we want is not move in. We want it to move out. We want the opposite direction, right? So we defined the menu to come in from the left and move to the right. And we want it to move out from the right to the left. And you can see it's already defaulted to the left. That's the one that we want. Let's close it. Go back to our prototype here. Move in from the left, move out, see how that worked. Sometimes what will happen is you'll end up with the x. You'll, you'll end up with not a move out, but a move in. And watch the difference here. Close the x. Was a little bit wonky. See how it kind of like not bad. But you'll notice it doesn't it doesn't move at a place like moves in and disappears. Just note that if you're looking at it, it looks a little wonky. We're talking about the drawer prototype here. If something moved in and showed the drawer and you and your closing the drawer should always be at Adam, move out and then select it back over to move out. And now you'll see the stream line move out. It's subtle but it's important. Okay, Cool. That wraps up the menu and drawer. I'm gonna make another video just to keep these short, sweet. And we'll go over to modals. I'll see you on the other video. Bye. 27. Create - Web - Modals and Accordions: All right, Welcome back. Hope you're getting pretty good and familiar with Figma. Let's go check out modals. I'm going to zoom out a little bit, just command minus or Control minus if you're on a PC. Remember, go back. If you don't see this little rectangle that says start, you might begin to design tab. So go click at the Prototype tab at the top right. Go ahead and grab this rectangle and drag it over to the modal section where we got Mac ten as the iMac ten is the layer. Let's go ahead and I'm going to hold z. So I'm holding z and I'm clicking and dragging with my magnifying glass. And I'm gonna let go and it's going to zoom in. And you get pretty good at this where you're, I'm on a Mac, remember I'm doing Command, Command Minus Command Plus Command Minus Command Plus, and then I'm holding z, not moving in. And then I'm holding spacebar with my hand to move around, so it takes a little while, but that will become very intuitive to you if it's not already. So again, we got the start prototype rectangle on the right, on the one that says example. This will again load the prototype to this section. So this will be the screen that starts first. So go ahead and go back over to your Prototype tab or on the top here, you press the Present button and now will be on the modal prototype. And if you click modal, it opens up a modal. If you press the X, that closes. Super easy. This will be fun, it'll be quick. You probably already getting really good at this. Getting the idea. I hope. Let's go grab the start. Let's go take it over to this section that says you do. You can see I've already had the elements for you here. I have the high and the x here. What we want to do first is we want to go back over to our, our frame tool here. And we want to click and drag, then just make a square or a rectangle. That's really matter the size as long as the size isn't as big as the art board here to the left, right, so we just want decent size here. It's not even the Prototype tab mode. What I want to do is get over to the design tab mode. I'm going to drag the high into this frame here. And I'm also going to drag the x into this here. My name frame 936 here, I'm going to name this one the modal, just so that it's easy to converse and talk about this. Now I'm gonna select the modal and I'm gonna move it over. If you're moving it over and the high didn't move over, it was like you didn't have the high here in the art board. So click and drag it. Wait till it highlights blue. Then you'll have it in. We have all the pieces we need. Gonna be pretty simple. Just go ahead and I'm gonna zoom in a little bit. Select the modal button. Go to our prototype mode. Drag, Don't go, don't go to that photo. We want to go over to the modal. Will blue DUE arm over to the modal. We got defaults here from the last animation that we just did. So we want onclick, but instead of navigate to, we want open overlay. Again. Onclick is good. And instead of navigate to, we want open overlay. Look at defaulted to center. That's exactly what we want. We want to close when clicking outside. And we want to add the background overlay and still do 70 per se here. We don't need a transition here, Let's just keep it instead. Okay, now let's go down. It should open up the modal. Let's select the X and let's close it. If you drag the X over here, you can do OnClick, navigate to, and don't do any move out or anything, just do it instead. In state animation, preserve scroll position is great. Close this. Let's go select the iMac 18 layer. Press present. Remember makes sure that your start is next to you. Do press the modal and there's your overlay, your little modal. Press the X and you've closed it. Let's add a little transition to this. Let's go ahead and select the modal button prototype that connects the button to the modal. And where we have animation, Let's do dissolve. And 300 milliseconds is great. Close that. We're gonna do the same thing to the x here. Go ahead and click on the x. If you're clicking on the X and you can't see the transition details. Like if you went off and clicked and like, Hey, I can't get those interaction details. You can click at the top where it says interaction, and just click there and it will open those up as well. Or you can click on the little GUI arm. And that will open it up as well. Go ahead and make it dissolve. 300 milliseconds is perfect. Now you'll see the transition dissolve a little bit. Close dissolve. Okay, cool. Let's pack two in one video here. Let's go over to accordions. I'm going to drag the get among, go back and not in Design tab but Prototype tab mode. I'm gonna grab the start, put it over to the example of the accordion. Select iMac 11. Press Play. Your should look like this accordion. Just wanted to let you know you're awesome. We love you, me and my girlfriend or my dog and my friends. And happy designing. Let's go and click on your awesome. And you see how that accordion look at that transition that was beautiful. It didn't fill. I didn't feel like a very big jump. It was a nice transition. We saw the little carrot or the the arrow go move to 180 degrees. It flipped. We saw that the active state now for your awesome, go to pink. And it revealed that child level information. And we saw the high. Okay, great, Let's go back. Let's go back into prototype mode. Let's grab this start here. Drag that over to where it says iMac 19. And the one that says you do. I've built out one of the accordion headlines here, so I'm gonna go into the tab mode. The first thing I'm gonna do if you're a paying attention is I spelled accordion wrong? I don't know if you caught that. So what we're gonna do is we're going to learn the text tool. So I can go into the text tool here. And I can select this according with the text tool. And I can make the a. I can press Escape on my keyboard to bring me out of the text tool. Or I can just triple-click into this accordion field just like so, and change it and holding shift because it's capital. And I can change this to accordion. You can see I have, you can select your awesome. You can select the, the carrot or the arrow and the background. What we want to do is we want to select all of those and we want to group them. So you've got your awesome. I'm gonna hold shift. I'm going to select the carrot here. And I'm gonna hold shift, select the background. And I can either Command G on a Mac or Control G, as in Greg. Or I could right-click. And I can group this section C where it says group. Now this will be one grouping. If I click it one time and I move it, that's what it means. It's grouped. And if I want to go in and select different areas, I can triple-click. And now I can get into the grouping and then click off or press Escape. And it will take you out of that grouping. Okay, so I'm gonna copy this, I'm gonna hold Option again, I'm on the Mac. If you're on a PC option, on my click and drag, I'm gonna hold shift as I do it. If I don't hold Shift, I get this. I'm able to move this around. If I hold shift I can. It's keeping me aligned to the object that I'm copying. I'm gonna let go here. My zoom in just a little bit. And I'm going to arrow keyboard. The second header up just a little bit, just so there's a little bit of distinction between the top one and the bottom one. My dog's name is chewy. Say chewy loves you. You can write whatever you want. Again, this is your world. You can not do, true. You can do your dog's name. I'm gonna do the same thing. I'm going to hold Option. I'm gonna click and drag down. I'm gonna hold shift, right? So I'm holding Shift. So no shift, shift. I can't really move. Go back down again. Again. I'm going to arrow on the keyboard. Perfect. Let's say we'll add this one. Loves food. Oh, she loves food. Okay, so now we have our three categories of our accordion. What I'm gonna do is I'm going to grab the chewy loves you. I'm going to hold Shift, grab the chewy loves food. These two, I'm going to group these. I'm gonna do a Command G or Control G. If you're on PC. I'll do, I'll show you the other way you can right-click do Groups section. Now what we're gonna do, I'm gonna move the high over here. We're going to copy this art board, get them holding option, and see when I hold Shift, I can do the same thing with the art board right now. No shift, shift keeps it inline. Going to move it over here. With my high over. Go back into the new one that we just selected. The ones that we grouped. Chewy loves you, chew loves food. Going to move that down. I'm gonna take your awesome. I'm going to grab that and group it as well. Now I'm going to ungroup it. I'm going to right-click. And Ungroup. Now I should be able to select the text and the arrow. Delete the arrow, delete the text. And I'm gonna stretch, select the background element, stretch it down to where it says, chewy loves you. I'm gonna move it up a little bit just to have a little space in-between the two. Now it looks good. I'm going to Command Minus out. Now I'm gonna select my Triple-click. Yeah, yeah, yeah, yeah. Yeah. I triple-click drivel Glick, Drew book legging. I'm a triple-click to grab just the rectangle where it says You're awesome. And I'm gonna go to our styles, will make that pinky, pinky over here. Perfect. I'm gonna grab the text. You're awesome. If you're not getting it, you're at the group level. Triple-click, double-click room of like, okay, now are in your awesome. We'll go to my styles here. We're gonna select the white color. Again, I'm gonna go over triple-click, triple-click, triple-click. You can also select these in the layer palette over to the left here. But I'm gonna select the arrow. And we're also going to make that white. Then what we're gonna do with this arrow is we're going to rotate it. So if I hover my mouse to the corner of the arrow, you have to zoom in for this. If you're too far zoomed out, you won't see your mouse change. You have to go like really zoomed in. And if you hover your mouse on any corner of a item or object, you can rotate it by clicking and dragging. And so we want to rotate it 180 degrees. Looking good. Let's go drab the word High School, place it into here. And now we have the open accordion. Again. Go grab iMac, 22-year layer here. Just move it to just make sure that high got there. Sometimes you'll see that the high looks like it's on top of your art board. It will look like this. Look like it's there. You'll be looking at the prototype and you'd be like, Why isn't the high there? I can see it on my design, but I can't see it on the prototype that drive you nuts. But just move the art board just to make sure that it's in there. And if they don't move at the artboard and you're not gonna see it on the prototype. I'm gonna go ahead and Command C. This select my art board Command V or Control V. If you're on a PC, we're looking good. Let's go back. Let's get into our prototype mode. Click in the top right here, makes sure we have the start rectangle next to the one that says you do. Click, you're awesome. And drag that over to iMac 22 art board. Onclick. What's due for the animation? Just do instant. We got onclick, navigate to an instant. Let's go grab the one that's active over on the right. Let's go drag it over to this art board. Same thing, onclick, navigate to instant. That should open and close. It will add some cool effects to this here in a second. Let's just go check out the prototype. I'm going to go over to the top-right. Got to present your awesome, open that up. And then click it again, restrict, close it. But there's no transition error and there's no cool things happening on it. I'll want my products, I'd be cool. We're going to add it. Hold on, just hold your horses. We're gonna make it cool. 1 second. Let's go back to our design here, and let's make it cool. We're gonna do is we're going to go to your awesome. I'm going to select the prototype here on animation. We're going to do smart animate. That's going to make it cool. Don't worry about the ease in or the time duration. Do the same thing with your awesome. Go ahead and select the prototype line here. Go to smart animate. Let's go see if everything worked out here. Click on it. It looks like a real accordion. This is so awesome. Isn't designing cool? Wow, this is like Bob Ross in the future. This is next level, Bob Ross kind of stuff right here. I can just see here and just click this for days. You know what, I'm just going to click this for a little while. Hopefully yours is looking like this. Smart animate gets pretty crazy when you do this feature. There's a reason why I had you group. The chewy loves you. And the chewy loves food. And also make sure it's grouped over here. Is that sometimes I'll see if I can reproduce this. Don't follow me. I'm just going to show you, I'm going to ungroup all of this. I have these sections here where it says Shu, He loves you, chew, loves food and all of this stuff. I have it ungrouped on that art board and I have it grouped over here. Sometimes that will make it not as slick. Was still okay. You can see there's a little bit of a lag though it didn't have the snapping is like it did when we grouped. I'm going to go back and undo this real quick. Okay, so we're back in where grouped everything was good. Go back over here one more time. Make sure this is grouped. See that, see how you get this nice smooth transition. That's because these are both grouped elements that the same elements on the art board. When you use the Smart Animate feature, make sure that whatever you don't want to animate is grouped and makes sure that grouping is the same on each one of these pages. So each one of these prototype pages, make sure those groupings are the same. It's, it's, it's an invisible thing that is within Figma. But it can drive you nuts sometimes on why your transition isn't looking as smooth and as slick. And it's usually because of the groupings. So if you're having that problem, just group elements and then work back and forth between those two pages here and make sure the same elements are grouped and it should eventually get to that point. Look just one more time, look how smooth this is. Now let's go ungroup all of this stuff here. Now watch. You didn't have that snappy genus that goodness to it. That's because it's ungrouped. All right, that wraps up accordions. I'll see you on the next class we're going to talk about our next video. We're gonna talk about account creation and inline validation, which we learned in one of the past. We learned about inline validation on the form talk that we did. I'll see you there soon. Bye. 28. Create -Web - Account Creation + Inline Validation: Okay, cool. So let's go ahead and move over from the accordions and let's go over to account creation and inline validation. Again, I'm gonna make sure I'm on the Prototype tab so I can see this little blue rectangle. If you're not, you're probably on the Design tab at the top here. Go over to prototype. Do start, go ahead and move that down over to iMac one. Now we're in the example. And let's go ahead and press play on the top-right to show the prototype. We're gonna go into the prototype here. What we're gonna do is we're going to show an account creation screen where we have our email and password. And if you click on password, one time, we have inline validation showing the password requirements are being met except for one. And when you click again, let's say you added that last number two, your password. All of your password requirements are met. You press Create. And we have a little spinner in the button to create your account. And eventually this would take you to the homepage of Bobo me site. And you'd be able to order delicious good Bobo T on delivery within ten minutes. Okay, Cool. So we learned about this button becoming a spinner. When we did the button class, I wanted to show you how to build that within a live prototype. I'm gonna go to the top left here to the different tab at the top where it says design patterns project file. Click that. I'm gonna move a little bit down from the example to the one that says you do. I'm gonna click and drag, get them on Prototype tab mode, not design mode, Prototype tab mode. Click and drag the start over to iMac 20. This will start the prototype at this page. And the best part is we don't even need to do anything on this page. We want to do is just copy it. Someone who hold Option. Click and drag. I can hold Shift to keep it aligned and copy that page over. We want to mimic this page here where we have the Create Account password that's focused and at the input state of the form. And we want to do the inline validation showing that the password requirements are being met. Let's go grab this. This is grouped already. What we can do, we can ungroup it, we're not going to do when he's smart animate stuff. So let's just ungroup it. You could right-click. You can do a Command Shift G or Control Shift G if you're on a PC or you can right-click and just do ungroup. I'm gonna select the rectangle and a mixture I want to design tab over here, right, not prototype design tab. See the stroke color. I'm gonna click on that color. And I'm gonna just make it black. Just make it black. Now I'm going to select the ghost texts. I'm going to click into this. And I'm going to do a Shift eight or sorry. Command or command Z. Command Shift, Yeah. Okay, cool. Option, sorry, option a for the bullets. And then I'm gonna do a shift hyphen at the top and go ahead and make this color here. You can see it's set to gray for Let's break that. We're going to detach it, break it. Let's make it just black. Easy-peasy. Hopefully it was Easy-peasy. Let's go ahead and select the text here where it says password requirements. I'm gonna I have the selection tool. I'm just going to triple-click into it. Got caught, caught, caught, caught, triple-click. Select at least two letters, at least all the way up to one capital letter. I'm just clicking and dragging to Juju. I'm gonna go to my colors here. I'm gonna select a nice green color. And I'm gonna turn these green. That should be good. Come on to zoom in a little bit. You see I have these little circles here. Select the circles I'm gonna hold shift. Let's remove the stroke. The stroke right now is that gray five, just remove the stroke. Let's go to the fill. And let's also make this a green. It can be the matching green or it can be a different color, green. It's okay from the text. Like candy apple green. Yeah, that's kinda cool there. Perfect. Now we're showing inline validation. We're showing the user you have a password, it's looking good, but you need to add a number. So let's zoom out a little bit. I'm going to copy this art board, iMac 23. Hold option on my keyboard, get the double arrow, click and drag bow. Got you a new art board. That's right. Okay, now we're back into the third art board. If I zoom out, go to the third one. Let's go add a couple more option eight. There you go. And see where this says at least one number. Let's go ahead and grab that. Now we'll go to Fill color, but you're like area. How do we get that green we just made. Whereas a couple of ways we can do it. We can grab the eyedropper and you can hover it over to one of the green colors. Select and you can see the eyedropper and the top right, select that color green. That's one way. But you can see it's off because it doesn't give you the exact color. That's why we do styles. The best way is select this green. Go ahead and see where it says 008937. Let's make that into a style. Go ahead and click the four little dots here style. Now do the plus sign. Let's make this one green. Okay, so now to select the text here, at least one, go to our four little dots here. You can see the green color we just made now is a Style Library. Press greenie, bang. But now let's go do the same eyedropper here with, I'm going to zoom in. I'm using, I know I did that quick. I'm using Z on my keyboard to zoom into this area. Select the last circle, see the word scrape five stroke, delete it. I'm going to go into the white. And this is where the eyedropper. Perfect. Go ahead and click the eyedropper within the color dialog window, drag it over and now grab that green. That will work. We got the state here where you have the default and you click in your type in your password, you need to add a number. You've met all their requirements. Let's copy one more screen here. I'm holding option on my keyboard and shift, I'm a copy that screen up buying. Let's go ahead and select the gray color at the top. So I'm going to click into this one. Here's our C D outline gray band. As you learn best way to reuse your colors, Let's make a style for the gray. Create a new style. Call this gray. Gray. Well, great. Well, is there Cool. Okay, cool. Let's go ahead and go into the bullets here. Delete the hyphen, the slash. Let's select just the rectangle. Let's go back into our styles. Remember the four little dots next to the stroke here. Let's make it that gray. I'll get it back at that default state. I'm gonna select this button, it's grouped. So I got to double-click, click true. All good. Okay, now I got to create, delete it. Delete on the keyboard. Boom. If you went like this, you deleted the button. That means you didn't triple-click, triple-click, triple-click, triple-click. Somebody to zoom out. I'm going to go to the one on the top here. I'm gonna select this spinner. I'm going to Command C, as in cat, or Control C. If you're on a PC, on the Mac, I'm gonna make sure I select this art board here. 25, I'm on a Mac, so I'm gonna Command V, as in Victor, and it will paste in place. If you're on a PC, you do Control V and it will paste in place. If it doesn't, that's okay. Just move it on top of that button. Grab this art board. I'm at 25. Move it. Make sure everything moves with the art board. If it doesn't, it's not in the art board, it will not show up in the prototype. All right, Let's stitch this thing together. Pretty simple stitching. Grab the creative password, go to your prototype, the top. Drag the GUI arm to that one. We want onclick, we don't want smart animate. Just do instant. Close it. Go to the next one. All we need to do is the form here. Drag it over here. Instant. All we need onclick navigate to instant. Same one here. Prototype tab grabbed a little GUI arm connected to the next screen, onclick navigate to instant. And that should be a complete inline validation with the bonus spinner on the button. Make sure you have the urine, the Prototype tab. Make sure you're next to the u du. Press the iMac 20 layer here, press play, click into create a password, Line Validation. One more time. We added that number. And we still got to do the Create. Let's go back over top-left tab and over back to our design file. You can see this screen by just selecting them. When you have the Prototype tab click, you'll see the prototype GUI arms that connected. We have this connection. We did the wrong one. That's why you can see I did the form here. You can do Command period to move the tools around as well, like to hide everything in Figma, command Period Space bar. You can see how I got this arm over to that one, the form field over here. And this one shouldn't be the form field, it should be the button. I'm gonna do another command period, or if you're on a PC control, control period. I'm going to delete this arm. So how you delete it as a couple of things you can go to interactions here at the top, I'm just press minus and that will delete it. Or you can just click the GUI arm off. Don't connect it to anything. Just let go of your mouse, clicked and dragged, just let go. And now let's go and grab the Create button and drag it over there onclick navigate to instead. Go back to our prototype here we can press play. Automatically tabs you over to the Prototype tab. Press Create. Look. Pretty awesome. I'll see you on the next video. We're going to cover drop-downs. I'll see you there. Bye. 29. Create - Web - Dropdown: All right, Welcome to the next video where we're going to cover drop-downs. Again, remember Prototype tab mode grabbed a little start rectangle. Drag this one all the way over to the example of the drop-down did That's going to start the prototype from this section here so we can see what the drop-down looks like. Go ahead and press play at the top. All right, so here's our dropdown. We want to select a state. Click on the Dropdown, the arrow goes to 100, an 80 degrees as the flip rotate. And then here's what we're going to figure out in Figma is I can scroll just within the drop-down. Like a stroll through all of this options here. And if I click on, say California, you'll see California. I click back into it. I see the drop down. I can click back out. Pretty simple, but also has some complexity to it, but should be pretty easy. Let's go back and make sure we're in prototype mode here. Grab the start arm, bring it over to you. Do. And I'm going to zoom in a little bit. I've added all the text here for all the states next to the right. Let's move that over a little bit. Just move that over. I'm gonna grab the iMac 21 art board here. Get I'm not grabbing the elements inside, grabbing the art board. I'm holding option. I'm going to copy it over to the right. We're going to get the open state for the dropdown. So first thing you can see as it's grouped, just ungroup everything, right G, Right-click ungroup. Let's select the Hope may have to ungroup that again. Let's select just the carrot or the arrow and rotate it again. You got to zoom in. I'm holding z, zooming in. Go ahead and flip that 180 degrees. Just like that. We want to do is we want to make this little white box here. I'm going to go into the rectangle tool. On the top left, you'll see you have the shape tools. You have rectangles and lines and arrows and ellipses and polygons and stars and much of other stuff. But let's go into the rectangle tool, just click it. It will default as great gray. I'm just going to click and drag in my art board. Again. Move the artboard around, make sure that that gray boxes there. Looks good. Now let's go give this gray box a shadow. But before we do that, let's make it white. So go back to our styles here. Let's grab our white. We can't see it. Let's go ahead and go to our Effects. If you're on the Design tab, just follow me here. I'm gonna go to effects. I'm going to add an effect. It's going to default to drop shadow. Remember what I said on my Shadow Class, don't want ever use default drop shadows. You can see what I did here. There's a little like, it looks like a light bulb or a sun beaming icon. It's your effects settings. We want to edit the default states of this drop shadow. So you've got four on the y, which is the bottom, the horizontal line. What's go ahead and make five on the x, which is the vertical section, five on the y. Then what do we always do? I don't know what do we do at this point error? We add blur, lots of blur. Like 30, I'm holding shift. You can just type 30. Let's just go 30. Let's go a little bit less than that. Let's do 20. Okay, cool. Now let's add a little bit of a bluish gray to the shadows too strong. That looks good like there. That's 909. You can just kinda anywhere up there. It's fine. Like this area is fine. Okay. Close this close the drop shadow dialog. Perfect. We got our drop shadow. Let's go push this up a little bit on keyboard arrows going. There you go. I'm gonna also grab the rectangle tool and click and drag and just make the little scroller arm. Again, we can't use Figma to make this scroll like it would when it was built out. But it helps to inform the user and the prototype. If we were to test this, that this information, all the states on the right here are scrollable. Or you can't make this move, right? Like when I'm in this, I can't I'm scrolling. That's another It's a little more. You can, but it's a whole another class in advance. Class and probably not even worth the effort to make this thing scroll. Little, little gray shape there. I'm going gonna grab all the texts here on the right. I'm going to drag it into my file. You can see when it goes in the file because it shouldn't pop out of the art board. I'm gonna drag into my art board. It should stand out like that. It should be cropped, right? So when I go into here and I drag it in, I want it to go in there and crop there you go, Just like that. Let's move it down a little bit here, make sure it's cropped. I'm going to zoom in a little bit. Here's the kicker here. Is that what we're gonna do is we're going to right-click on this. It doesn't matter where you position it. You can place it anywhere on the photo. It doesn't really matter for now. Let's right-click on it and go to frame selection one more time, right? It's super important. Super, super important. Right-click. And then we do Frame Selection. Okay, great. So now this has created a frame. If you look in the layers palette on the left, we have a frame. And if you click and open that, we have all the states here, you don't have to do this. I'm gonna Command Z to go back. So you can see this. See how on the layers I have all of the texts here for all of the pretty much a dialogue box for the text and all the states here. If I right-click on this, I'm going to frame it. And it almost has like a grouping. But the frame grouping is a little bit different from a group. Now what we want to do is I want to zoom out and grab the bottom of this frame. So I'm going to select it. I'm going to grab the bottom. And I'm on a Mac, I'm gonna hold Command. As I'm holding command, I'm pushing this frame up. Should look like that. If it looks like this. Yeah, you're good. Okay, so yeah, just make sure you have command. Make sure you have the frame layer. Click and drag that up. Then on the right here we have our frame section. I'm on the Design tab. Frame section. This might be a little complicated, but he's good. He's good. Well, we want to do is clip content. What's gonna do? It's gonna clip the content. This frame. See how that did that. What was going through that one more time. I'll do it quick this time. I just had my text tool. I write or just my text dialog box. I right-click frame selection. I hold command. If you're on a PC, you do control click and drag. Bring this box up. Went over to the right design area, clip content, boom. Now drag this over on top of your drop-down. And what we want to do now is hold Command or Control. Again, if you're on a PC and crop this information to fit just within the drop-down dialog box. Just like so. And then grab the top holding, again holding Command. If you're doing this, you're not holding command. Hold Command, or Control. If you're on a PC and move this to the top right. If you're not, if you're not holding that, you'll you'll you'll know because you're moving the text box. We want the frame layer command. I'm also going to bring the left a little bit out. There you go. Okay, so let's get the next state I'm going to drag. I'm gonna copy the first page here over to the right, just the default page. And let's type in California, you can put in whatever state that you want. And I'm gonna make this black. I'm gonna go back over to break the color for here on the right or the fill and just make it black. Okay, Perfect. We got this sense of the drop-down. Now let's go stitch this together against select and make sure your start is on the you do section. Go grab the state, drag this over to the next art board onclick, navigate to instant perfect. Now then select the text layer here and drag that one over to the next art board. Onclick navigate to instant perfect. Let's go look at that then we're going to add one more thing. Go ahead and go to the top right here. Press Play. Click your drop-down, and you can see it's not scrolling. There's no scrolling happening right now. Press California. Boom. Okay, that works good. What we need to do is go make this scroll. Now, let's go grab this text here. Where are we going to produce? If you have it on design, you'll see it just looks like this. On prototype mode here, see where it says overflow scrolling. So I've got this box selected, do vertical scrolling. Now let's go back to our prototypes. So it start with the beginning page. So go select iMac 21 layer. All right, so let's go back to their default page. Press Play. Present. Don't go tab over to the prototype, we need to reload it. Just go press Play here, and then click on this drop-down. You should be able to scroll within this, you can also click and drag and look, there's all of the states. Easy-peasy will click on California. Boom. Ain't that cool? Very, very cool. Let's grab the California State input. Copy that one as well. Now let's go select our dropdown. I'm gonna get out of prototype mode. I'm gonna go back to design mode. Just select all the drop-down areas. Press C or Command C or Control C if you're on a PC. And let's go select the layer we just copied. This one's iMac 25, and I'm gonna, I'm on a Mac, so Command V, if you're on a PC, Control V, paste that in place. Now let's go select the active state, right, so we just had the one that was open. You press California. We have the active state of this drop-down. Let's go connect it over to this one on click and navigate. And then this should already be hooked up to here. Great. So now you can see what it looks like if you click back into the drop-down and select California again. Okay, cool. That was a full completion of everything for web. I'll see you in the next video where we're going to go over to the mobile prototypes and we're going to prototype up some mobile interactions. I'll see you there. Bye. 30. Create - Iphone - full screen modal: Now you're probably a Figma Pro. You're getting good at Figma. We're gonna do is we're going to switch from their web prototype here. So on the top left, you should have pages here at the top. We're going to switch over to the mobile prototype, and it's the same functions here we're going to come in. I have all this pre-built out already. It should be fun. We're going to do this together. I already have. If you're on the Design tab, it will look like this. If you're on the Prototype tab again, we got that start rectangle here. I already have the first prototype ready to go here, and we'll make this one on the second one. So let's just go check this out real quick. Just press Select iPhone, the layer here. Press Play. That's going to open up a new prototype. You can do view and see how that slit up. And then the x slides back down full-screen modal with a move in that goes up and then move out if that goes down. Pretty slick. And also easy. So again, first thing I'm going to do is make sure we're in the Prototype tab at the top right, drag the start one. Go ahead and push this over here. Let's go grab a new frame tool here at the top. We did this in the last web prototype. Go grab the frame. I'm using iPhone 11 Pro X right here. With the Frame Tool selected. I clicked on the iPhone accordion here, and I did Pro X. And if you just click on that, it will drop an art board for you. Let's go over to our layers here and just name this one. Let's call this one the modal. Okay, cool. So let's go grab from this art board over here. Let's grab the high. Just go ahead and place it Command C, command V. And let's grab the x command C or Control C. If you're on a PC. Go ahead and place that over here. So we got all the pieces here. Super easy. Let's make sure this x doesn't go to this screen here. So just remove the interaction. You can grab the GUI arm and just pull it out. We're going to select a view. We're going to begin the Prototype tab. Click it over to where it says, hi, we have on tap, so it will default. This these screens are coming from, if you remember when we did the frame selection, we went over to iPhone screens. When you go into this prototype mode, now, it knows that you're on, you're using mobile devices. Instead of onClick. Now it's on top or on drag and it gives you the same functions but just changes from a onclick to a non tap. Pretty easy here. We've done this before. Instead of navigate to, let's do open. Actually keep this the same. Navigate two is the same. On tap. What we want is in the animation, animation here we want it to move in and not from the left or the right or from down. We want the up. Let's do this and we'll come back and play with this a little bit. We will make sure this is moving, not move out. And then go ahead and grab the x, drag that back to the screen we were just on and not move in. We want move out. We don't want we want down again, so move out and down. Okay, let's go select the Start screen that we have here, the artboard press Play top-right. It's gonna take us over to the prototype. We should have the same thing you're just seeing here. And the x will move down, move up, move down. So what happens here is what's interesting. You'll be able to know if I select the x and I go back over to the prototype and I don't do move out, I do move in. Watch what happens. I'm gonna go back over to our prototype here. You can just press play if you want. That look good. Now watch the x. See how the other screen like went on top of it. Watch the screen moves on top. That's a weird, you'd never have a, you'll never see that in any application, mobile application you use. That's because we felt or you didn't fail, but we forgot to put the x not in a move outs in state, but a move out state. Now let's go back. There you go. This should follow any which way the screen comes in. It should also move out the same opposite order. Moves in and moves out. Let's try another one. Let's go click the view button here just for fun z's, let's say this screen is going to come in from the left. Now let's go look at that pressing view, see how that screen went in from the left. X goes down. That was weird because the screen came in from the left. Why is it going down when it moves? Same thing we can do the X go click on either the interaction here at the top right or the GUI arm here. And instead of mixed, not, not move in, move out. And then what's going instead of coming in from the left, we want it to come in and move from the left to the right. And it gives you a little example. Figma gnosis is kind of confusing. So they said, Okay, this is what you're going to, someone's going to look like. So again, move out to the right. Now, you'll get this to slide in and the x will slide out. And usually for this interaction, you wouldn't want to actually, you'd want an arrow, like the arrow to go back and then it will go back. Then for the other one where it moved in when it was moved down and this was a move up. That's where you want the x, right? So you want slideUp X closed down. Xs is the proper design pattern for that one. Okay, cool, That was full-screen modals. Let's go do a mobile dropped down, which is different from a web drop-down on the next video, and I'll see you there. 31. Create - Iphone - Dropdown: Okay, cool. Welcome back. Again. Kind of how he started the video and make sure you're on the Prototype tab here at the top. Move that little start rectangle down to the one where it says mobile drop-down selection, bottom overlay. We have the example here. Let's go ahead and select this art board. Press play on the prototype. And you'll see we have a darker interface and a dark UI drop-down. And this is different from the drop-down we did in web. If you remember, the drop-down here in rabbit just has a little drop-down by the form fields. And you can scroll here. For mobile, it's different. It takes the full real estate of the device and it comes in from the bottom. That's a modal drop-down. It's different from a web drop-down. And let's say I select just because it's easier to scroll here. Let's say I select red. Now we have the drop-down selected. We can do another version of a drop-down where you have an x here to delete it. And there you have it. Let's go build that out. It's pretty simple. Again, as usual, make sure you're on the Prototype tab. Grab the start rectangle, move it down to where it says you do. And I pretty much have the before and after screen here. You can see where it says Select Color and the red. What we want to do here is we want to make this Drop-down section. What we're gonna do is grab the Frame Tool, go to iPhone Pro X, just click on it. It's going to drop the same art board size. I'm going to place it in-between the before the default dropdown and in-between the active default here. What I'm gonna do is just make this smaller. I'm going to click in the top and just click and drag. Just make it smaller. Okay, cool. So let's just copy some of this stuff over here. We've got select flavor. I'm going to command C or control C. Let's go ahead and paste that in command V, as in Victor or Control V. If you're on a Mac. Let's use the line tool for the rest of this stuff. Again, we're going to go to the shape tools at the top. Grab the line instead. Just click and drag. You don't have to go full art board with here yet. Just make sure it's in the art board by clicking the art board and moving it. Okay, cool. Now let's go make it full. You should see it should, shouldn't be able to see it if it's longer than the art board. If it looks like this where you can see the lines coming out of the art board. It's not in the art board and move the artboard. See. We want to make sure it's in the art board. Let's make it that black line like 10% opacity. So you can see how I did that. I won't let me paste this in real quick. We took that black line, went over to the layers where it says pass through, there's a, a 100%, just do 10% and then press Enter on your keyboard. I'm gonna grab this text and I'm going to triple-click into it right side, grab this text. I held option, clicked and dragged it down. Triple-click. We'll call it red. And now let's go. Now that we're in and we have read selected, let's go to our font layer here. Let's do like 30. There you go. Now I'm gonna make this a color, any red that you want. Let's do the next one again. Now you see how I did that. Just Option, hold, click and shift. Triple-click. Have all my text layers here. I can make left align, center align, right aligned. You can make it regular, bold, whatever you want. I'm going to keep them all consistent though. Let's make this one blue. I'm going to make any color blue here. Oops, I didn't have it selected, so triple-click, make sure you have this text selected. Go blue. Now let's go make green. Same deal. Pretty easy. I'm just going to use the green we already used. I don't know. Let's go do purple. I'm going to break the color that we just had. Go grab purple anywhere. You can do any color you want here. Okay, so let's go grab the arrows are the lines and this is pretty cool. Watch this. I'll do this. I'm going to double arrow hold option on my keyboard. Click and drag hold shift, right? So this is without shift, shift, I can't move around and just give it a good horizontal. I'm looking at 70 pixels there. You can see how my pixels there. I'm looking at 70 pixels. You can do anything, it's fine. And then let go. And then do, I'm on a Mac, do Command D, or if you're on a PC Control D and it will copy that same spacing. There you go. Now let's go fit these in. Centered within those spaces. They're purple. Okay, Cool. All right, so now we need to do is go back to our prototype, select the favorite color, click and drag it over here. And we did this before we went on tap. And here's the real one we want instead of navigate to over here in the top-right. And the interaction details, if you don't see it, just click where it says Tap. We want open overlay. And see how it defaults to centered. We want bottom center here. Do close, went outside, add background. You can do 70. Press Enter. We don't want, we want move in from the top at already knew what we wanted. Great. Perfect. Adding grab red, click it over to the next one. And we don't want anything but just an instant. On tap. Instant should be fine. Let's go press play at the top right. Here is your modal dropdown. That's cool. And select red and it goes away. Okay, let's go to the x just so we can close it and play with it. So grab the x again, this is grouped. So triple-click. Drag it over here. Instead on top. Yep, looks good. Click the X because back to the Select Color, modal, mobile drop-down, bread, X, sweet, easy-peasy. Okay, I'll see you in the next video. We're going to go over a modal pop-up should be easy as well. I'll see you there. Bye. 32. Create - Iphone - Modal, Title-Bar and Menu: All right, Welcome to the next video. We're gonna do a pop-up for or a modal on a mobile device. Super easy. We've already done this. Let's go ahead and grab this, start over here and drag it down. We did this for web. Just want to quickly do it for the mobile device. Select the art board here, press play. Again. Now we're back to a white background. Here's your button and check it out. There's your modal. Press Close. Okay, cool. Let's go check it out over here. Grabbed make sure you're in the Prototype tab. Same deal. Press the Start down over here too. You do already have all the sections here. The high and the close button. What we want to do here is go grab the Artboard tool here. Go to frame. Do the same thing. Iphone 11 Pro X on the right. Frame tool, iPhone Pro X. Now let's make it a little bit less tall, a little bit less wide. Something like that. You'll know because you can move it in here and see. Yeah. Okay. We can always adjust that later. That's just put the High in here, but the x, and let's put the x to the top-left, just make it easier for the user. If they have their right hand holding their device, they can use the left-hand and the close it at the top. We've done this many times, I think already. Go ahead and grab the text button, drag it over to this frame where it says on tap, remember we want to do, what is it? Open overlaying, open over the right. It can be once centered, close when clicking outside. Let's do 70. We can do less, we can do 50% opacity at this point. Let's do a dissolve transition here. Now let's go grab the x that closes it, drag it over to this artboard on tap. Navigate to dissolve. Should be perfect. Let's select this artboard press play. Hit the text. There's your modal. You can press X to close it. It looks a little too wide. Let's thin it out a little bit. So I'm gonna grab the art board, just kind of push it in a little bit, put this high-tech st over. I'm actually going to shrink it vertical space a little bit as well. We can also do is select the art board here and go to your design tab and where you have. So again, I'm selected the modal art board moved from prototype to design. In the frame area, There's this little icon of a corner called corner radius. You can round that. Let's do like 15. There you go. It will round the edges of that art board. I'll go back in. Let's do our prototype tab here at the top. Press Play. There you go. That's better. You can click outside of this modal and close it. Click the X to close it. Bing, bada, boom, you're a pro. You've already done this before. Let's move on. Okay, so I'm gonna grab the start here. Instead of starting a new video, we're just going to keep on going because that's how we roll. Press the Start, drag it over to the next one. This is the menu and the title bar plus the fixed and the left overlay from move in on the menu will move in from the left and we'll close it. Go back in from the right. Let's go ahead and press play on the prototype, and let's do this. We've already built out the menu, but we'll learn how to make things fixed. And you can see, I can scroll, I can click and drag, see how the menu is fixed there. And if you click the icon, slides in, closes bone, your pro at this. Okay, so let's go grab the start. Push it down over to the u du. I think I already have this title bar selected for us. So check it out. All you gotta do is select it, go to the Design tab and where you see constraints here. So again, I selected the art board. I have constraints. See where it says fixed position when scrolling. Let's go ahead and actually before we do that, go to your prototype. Just press play. Make sure you have the one that says you do. Not. The example, the one that says you do press Play and see how the tab bar and the status bar, they aren't fixed. This is what it looks like right now. Now let's select this title bar. Go back over to our Design tab on the constraints section. Do fixed position when scrolling. Center that you can put it at the top and center, center, top center. Go back over to your prototype here. Press Play. Now scroll and see how it stays in position. Super easy. Let's go just quickly bang out a menu here. So let's go ahead and go to our frame tools. Grab frame on the right here. Let's do iPhone Pro X. Let's make it a little bit less wide. And as long as the art board next to it, right? So it should be that long. Let's keep it. Go pink. We can do our pinky. Let's make it pinky. Grab our text here, place it over here into this new frame. I'm going to just name it just for the sake of naming it called the menu drawer. I'm just going to move it over just to make sure my text is in it. And we've already done this. Go ahead and triple-click trouble Glick, go into the board that has the title bar, triple-click, triple-click. Prototype, drag it over to your menu. You are already approached this on tap, not navigate to open overlay. And let's go ahead and do it from the top left. Closed and clicking outside. We can do 50% at this point if we want. Remember the animation here, we want move in, not from the left but from the right. We'll go play with this here in a second, just so you can see it. So it's good that we're doing this again because now we're gonna get a little more crazy with this. Press Play. We got to fix title bar at the top. Click the menu. Boom, clothes outside. Looking good. Let's go mess with the menu here. When we select the menu animation or interaction details from the menu. Let's do left, move in from the left. Now let's go back over. Press the top right here. You see how that was kind of weird. It came all the way in from the right. Then the same deal. You can go grab the menu, interaction details and you can play with this stuff to you on your own time as well. You can do left or you can come in from the top. I would never recommend this, but hey, whatever. That's kind of weird. Still fun. Let's just set this back over to come in from the right. And that's what it looks like. But it's fun to go play with these little prototype details and try different things. I'm going to start another video and we'll go do the bottom navigation bars. I'll see you there. 33. Create - Iphone - Tab Bar: All right, Welcome back. You know the drill Prototype tab at the top right over here. Grab that start. Move it down to the next one, which is the bottom navbar or bottom tab bar. And we're going to show how we fix this and stitch them together. We can build out that tab bar system that we learned about God and press play on the prototype, very top-right little Present button and check it out. So as I scroll, we've got the title bar stay in fixed member, and now we've got the tab bar staying fixed at the bottom. Let me say 123. If you click on pro or tap on profile 456, go back over to home 123, profile for V6, tab and back between the two. Okay, cool. So let's go drag our start back over from the example to the one that says you do press design or actually I'll keep it on Prototype. Let's select the artboard here. Press play. And look the navbars at the bottom or the tab bar, right? So it's scrolling. It should never be scrolling, should always be fixed. At the bottom, we got the title bar staying fixed or not, the tab bar. Let's go over and correct that. So go ahead and go back to your design tab. I think I already have this grouped. Yeah, Okay, it's grouped already. Remember when we can trained the title bar to the top Design tab holding, selecting the tab bar, Design tab. Do fixed position when scrolling. But at this point do the bottom, the center. Now let's go over and look at our prototype, see how now it's fixed to the bottom. Again. So one more time. Fixed position, bottom centered. What this does is it's great because you can, you can have a really long, don't follow me on this one, but you can have a really long art board. So I'm holding command and I'm stretching my art board all the way down. I'm gonna move the tab bar all the way to the bottom here. And I'm going to add more numbers for 456 because I've set this tab bar as a constraint to fix to the bottom of the screen when scrolling. And I've set this to an iPhone, it knows Figma knows that you don't want this to be at the bottom. You want it to be always fixed at the level of the iframe. Your device, your viewport of your device. So CASI scroll 456. So see how that looks. It looks weird on my design file because this is at the bottom. But I've set that constraint here on the right. And when I go to the prototype, I see the constraint by don't see it in the design mode. It looks like this and the design mode, but I see it on the prototype mode. Okay, so I'm gonna go back a little bit here. I love this font by the way, to the beautiful font called Bodoni. But don't eat poster italic font. Such a beautiful font. You get that tattooed on you if you want. Okay, cool. So let's copy this art board. I'm going to hold Option click and drag. Now I'm gonna select the menu. Again. I'm a triple-click drivel Glick, triple-click driven Glick. Just keep triple-click and until you get the menu here for the home, make this 50% opacity. I've triple-click, triple-click, triple-click. If he triple-click too much, you might get the home. That's okay. You can do this to get the home icon. See where it says layer, do 30% opacity, pressing, Enter on your keyboard. Take the text here. Triple-click, triple-click, triple-click. If you need to get that text, do regular. And what did we set this text that? Let's go ahead and grab the profile texts. Triple-click into the Fill command C. And let's grab the home here, command V, paste it. Now let's go grab the profile texts when things are grouped, you can also hold command. I'm just pressing Command or Control. If you're on a PC, I'm on a Mac, it will automatically give you a deeper selections within a group. You can hold Command and then click and not have to triple-click, triple-click, trip quick. You can just Command, Command click out. Let's triple-click in, grab that profile texts. Let's make it bold. Make it black. Make it 100% here. And then also grab the icon here. Grab the stroke, make it black as well. So now we have that default state here on the right. Active state for home. We have the active state for profile and default state for home as well. Let's triple-click into the profile till we get this selection. If you went too deep, you grabbed the icon. We don't want that just triple-click. I've already kind of grouped this in a nice section for you. Plus prototype. Drag it over here. Just on tap, navigate. Nothing fancy. Instance, perfect. Grab the home. Do the same thing. Nothing fancy. Let's go change up this text. Let's do 45. I'm just triple-click in six. Now let's go back into our prototype and look at the tab. Boom, boom, boom. So good. It's like a real app. Awesome. Okay, Cool. All right, that was a tab bar. We'll finish up with horizontal swiping. On the next video. I'll see you there. Bye. 34. Create - Iphone - Horizontal Swiping: Hi and welcome to the last one. We're gonna do horizontal swiping on a mobile device memory. Again, go to your Prototype tab at the top here, got the little start. Drag it down. I'm going to zoom in, hold Z, click and drag. Hold space-bar. Move this up a little bit. Select this artboard press Play. And here's what I'm talking about. We're going to build this interaction where you click, drag, click and drag, look at the food. One click and drag. 35. Create - Iphone Mobile Date Picker: All right. I know I said that was the last video, but I throw one more in for bonus. Okay, So we're gonna build out the mobile date picker and to view it. Again, make sure we're in the Prototype tab mode at the top right. If not, you'll, you won't see this little blue rectangle that's had start. So Prototype tab, grab that thing. Let's move it down to where it says mobile date picker. And let's go ahead and select the art board here. Press play. This is what we're going to build. So we have the date picker, you click it, it goes full screen all the way to the top, slides up. If you press the Exit, the top, it slides back down. What's cool here is if you swipe, you get all the days of the month lined up to the days of the month or each week day at the title bar. This will stay fixed and we get the Done button on the bottom as well. When you press the done button or if you pressed October 1st, then the Done button, it takes you back in your date pickers filled out. Pretty slick interaction. Let's go build that. So again, first thing we need to do is make sure we're at the prototype, the top right tab, not the Design tab to Prototype tab. So we can see this little start rectangle. Push that down to where it says You do. Get back into the Design tab here. Okay, cool. And then pretty much what we're gonna do is just copy this art board here. I'm holding space bar to get to the hand tool just easily move this around. I'm gonna select the art board, not the date picker, but the art board. Press Command C. If you're on a PC, it's Control C. And then Command V, as in Victor. Or if you're on a PC, Control V, Let's select the date board, the date picker keyboard, delete components over here, just select the title bar section, place that into your art board, and then grab the Done button. And same deal, place this into the art board. Let's put this at the bottom. Again just to make sure these elements are in your art board. Grab your art board and move it, right? So if these don't move with your art board, then these elements aren't within the art board. So just double-check that. Okay, so now what I need to do is we need to fix these elements first. So let's go ahead and select just the title bar on the top right here where we are in the Design tab. Go over to the constraints and see where it says fixed position when scrolling, just tap that, just fix it. And then same for the bottom where it says Done, select the Done button here and do fixed position when scrolling. Bought a bang, bottom boom. Okay, so let's just quickly prototype this up and get it going. We want to select the date picker on the first art board here, go to the Prototype tab. See the little prototype ui. Let's go ahead and drag it to the art board to the right. On tap as good, what we want is we don't want to incident and it may animation, we want to move in. We want this not from the left, butt from the top or from the bottom to the top. The far right here. We did the prototype on tap. We selected not instant dissolve or smart animate move in. From the top. You see the little preview here so we want. And then I'm going to drop triple-click, triple-click, triple-click to get that x here, 123. And go ahead and in the prototype mode, drag that back to this select date prototype. Here's the thing we don't want move in. We want move out and not up but down we want the exact opposite. Let's go look at that real quick. Slide up. Press the X button. Slide down. Perfect. Now that we've got the function, Let's go put in the date selections. I have this element over here to the right that has all the months on it. Again, here's the key, the key piece of this. I've already grouped all of these sections, but we'd want everything grouped as one element. And then what we're gonna do is we're going to right-click, Right-click, and frame selection one more time. Just make sure all of these elements are grouped. Select it right-click frame selection. Now this is framed. I'm gonna go back to just make sure I'm on the Design tab here, not the Prototype tab, so nothing funky happens. Now selecting this frame, Let's go over to the Layers palette on the left. Let's just call this date, name it over here. So I just double-clicked into the frame. And typed in dates. I'm gonna click off of it again. Now let's select dates, the frame, and holding Command on the keyboard. Or if you're on a PC that's Control. Grab the top and slide it all the way down. You'll still see the elements. You still see these dates like May, June, July. But let's just get it over to let's just do september here. We should just have October and December selected with the frame. Again one more time. I'll do it quickly. So holding command or control, if you're on a PC at the very top, select dates, make sure you're on the frame dates and not the grouped elements. The frame on the left you can tell because it has that little crosshair hashtag looking icon here on the layers. Hold Command M on a PC. Drag that down. We just have October and September selected on the Design tab over on the right where we have our Frame Options here. See where it says Clip content, clip the content, click that. And now you'll just see just the area in which you've, you've dragged the frame down. And now it's just clicking all the content to that individual frame. If you unclick it, it shows it shows more contact content. I'm gonna grab the date here. I'm going to drag it into my art board here. And I know it went into the art board because it went blue. If you're not sure, just grab the art board again and move it. Make sure this is here. Make sure the art board looks good. Let's go look at the prototype real quick. I'm gonna go to the top-right press, play that they're a top present. Press Select date. You can see there's no scrolling yet, right? We've got the function, you can close it. But no scrolling on the dates yet. That's looking good. Let's go select the date frame here. So you can remember I'm in the art board. I can see I've selected dates because I can see the selection on the left layer holding command. Let's drag it all the way to the top here. Just like so. And then on the bottom, Let's just make sure that it just goes to the very top of the button here. Here's the trick. So once we have this frame selection, go ahead and select just the dates. Go to prototype. And see where it says overflow, flow scrolling what we want. It's vertical scrolling here. Go ahead and click it. And now let's go back over to our prototype. I'm going to select the first art board. Press Play. We have the date picker slides up. And now when I click and drag, you can see how all of the other dates show up pretty slick. Let's go make one of the dates selections highlight to complete the user action. I'm going to zoom out a little bit, command minus or Control minus. If you're on a PC, I'm going to go ahead and copy this key, this art board here, command C, and do a Command V and place it. I've already got this 13 here as an element. So let's go grab this element. I'm going to triple-click into it. Triple, triple drip, drip, drip, drip will click, hold Shift C. You can see I've selected just the circle but not the texts 13. So I'm gonna hold shift as well and hold grab both of those. Drag it over to October first. Delete the three, should center on its own. Perfect. Let's go back and change the date here at the very top. So again, I'm just going to triple-click triple crew to prove a trip triple, triple, triple, triple-click, triple-click right here into the text here. Due Thursday abbreviated. And just 11012022. On this art board here, I'm going to go ahead and grab a square and just make a square here, just the gray. Just like that. Again, let's make this at least 45 by 45. Just give it a bigger tap area. Let's go ahead and select this square. Make sure that squares in this art board. Move the artboard around just to make sure the square is, if it's not, go ahead and place it in, put it over the one and double-click. If you can't select it, just triple-click. And now go to the prototype and drag that over to the art board. To the right. We don't want any animation, we just want, instead. It should be just instant. We want that preserve scroll position. Actually, I'm going to leave it off for now just so you can see how this works. Let's go back to the prototype mode. Cool. There's my one over there. Now. Watch without preserved scroll position, watch what happens when you tap this one? It jumped. It didn't preserve where I was at on the scroll. It just took me to the next art board and showed the art board it didn't preserve this scroll. Let's go back. Let's grab our square again. Go into the interaction details. And now let's do preserve scroll position. I'm gonna go select the Start art board. Press Play. Now watch. I'm going to scroll down a bit just, just where that square is above the Done button. Tap it and see how it didn't jump me around. Preserved where I was at in the scroll. That's what that checkbox does. Super-important. Pretty much. We're almost done. Let's go back over to our design file. Let's select this square. Let's go ahead and make the pass-through layer here 0% opacity. All right, There you go. Apologize for the sirens. There must be somebody doing something outside my house. I think they're good now. Okay, cool. So let's go ahead and make sure you can see what happened, what we just did. We selected that square and just made it what's called a hotspot. You can't see it on the prototype. But we made it where it is a transparent hotspots. Hotspot, meaning it's interaction, it's interactable. And if the user taps on it, It's gonna take you over to the selected state. Let's go ahead and select the first art board with the date. Go ahead and Command C that, and paste it over to the right. Now let's fill out the dates here. So we've got ten. We got we got 12022. And since this is an active state, Let's make the texts black. There you go. Okay, cool. So all we got to do is say at this, select the Done button here. On the prototype mixture, you're on the Prototype tab. Select the Done button, drag the prototype to the next art board here. What we want is move out and down. And then same for this Done button. What we want is to put it back to the default state here. And go ahead and make this one. Move out and down. Then now let's change this text to the text that was selected, which would be 10132022. And let's also make this black. That's a pretty much a complete date picker here, let's go test it. Suppress play the very top right. Here's your date, 1013. I could see it here if I press done and said go down, slide out. I press X such a slide out. And then watch if we scroll all the dates are here. I'm gonna select October 1st. I'll see the updated the top Thursday, 101. Press Done. And now I'm back at the date picker and it's updated the date that I have selected. Awesome. Hopefully yours works like that. If not, I always have it as the example at the top. So you can always pick apart what I've already done and see if yours is different and then make those changes. So this is in line with what you're doing. And this should be the last class. I'll see you on thank you. Video. Bye. 36. Thank You: Alright, if you're watching this class, you're awesome. That means you made it. You went to the end. Again, I just want to say thank you for taking the class. I hope you got a lot of value out of it. I hope it helped kinda give you an understanding of design patterns and whether you're just starting to design or you're qualified season veteran. I hope this gave you some value and help levels you up and design patterns. And also any of the stuff you built within Figma, hope you got a little bit of tips and tricks there. And again, regarding anything that you build, are you done? You can share your work with the class. We'd love to see it. Just post it. Yeah, posted on Skillshare here and write a comment and we would love to see what you came up with. Again. I just want to say thank you and I appreciate you a lot for taking my class. It means a lot to me and I wish you a great time designing many, many cool and valuable things by