6 Advanced UI Design Tips (Deep-dive)

alright so in this video hello yes I'm recording the video right now and you should definitely watch this video tonight because we're covering six Advanced UI design tips that I don't think many people talk about and these tips are actually going to make you better more experienced and probably get you that pay rise that you've been wanting alright well I hope you enjoy the video so let's go ahead and dive into the very first Advanced UI design tip so the first one is around considering all user roles so when we are designing applications we generally just think about the first one which is the first time user it's generally the most common scenario that most designers design for and think about but there are two other scenarios that you should also consider in your workflow as well repeat user and the super user so this first time user is a person who just opens up the app for the first time then you have the repeat user so someone who maybe has made a first purchase and is returning for the second time then you have the super user someone who maybe has purchased 50 or even 100 times through the platform and they really understand what the application is about and as you can see all three user roles will have three different levels of expectations so if we think about this in the context of ubereats now this screenshot as you see on the screen was screenshotted just a few days ago but the first time user as you can see it's summarized as we don't know anything about this user right it's their first time using the application now the questions they they might be asking would be that how do I use this app and what food choices are available now obviously they'll be asking many other questions but these are two just to help paint the picture so first time user comes into the app and as you can see with ubereats that at the top they have a nice search bar to encourage search they also bring through some key categories it's like restaurants grocery convenience alcohol and ride so they're trying to encourage them to explore the app then they have a big banner around service fees and then at the bottom you have a list of all the results but as a returning user and as I believe a super user when I come into the app I still see the same screen so a lot of this real estate is wasted why because as a repeat user we already know a little bit about this user so the questions I might be asking as a repeat customer is that well I don't really need to know how to use the app anymore I just want to know how do I reorder a past order because it's someone who orders through Uber Eats I generally will order from the same restaurant the same cafes and generally the same types of meals so helping them actually find their past orders and be able to reorder them quickly might be a better way to utilize this real estate so here on the right hand side you can see that I've actually changed the design a little bit without having to redesign the entire app we can maybe make it more effective for repeat customers so at the top you can see that I've actually reduced the uh the tab sizes we don't need to blast groceries and also the restaurants in their faces every single time if they're not going to click on it they're not going to click on it so we can maybe stream that down and then actually bring through some components that might actually answer some of their questions now what about the super user what do you think we can do with the super user to actually make the home screen a little bit more engaging for them so what we can do is with the super user we actually know a lot about this user because they've actually ordered a lot of stuff through the application so some of the questions that they might be asking would be how do I order my favorite meal and then the second question is well if you already know what my favorite meals are and my favorite restaurants are are there any alternatives to my favorite Cuisines or restaurants that I always order from now as you can see by just thinking quickly about the three different user roles you can come up with some very interesting designs which are going to answer some of those key questions that your users are asking so many of you guys have been asking so I am slashing 30 off everything figma Mass class course which now has over 4 200 students and five star reviews ship faster UI which is our premium figma design system with over 2 000 designers using it every single day and then we also have outline which is our wireframing kit for figma so if you want to get 30 off any of these products or courses make sure to check the link in the description there is a coupon code and it all expires on the 26th of November which is this Saturday so if you want to get it make sure to take advantage of it right now back to the video now the second Advanced UI design tip is going to be avoid conflicting copy and messaging so let's take a look at this now I saw this really great example done by Jen in ad La let's just call her gen for now and she went ahead and redesigned an error to a tooltip or error modal sorry now let's see what she did to revise this so she has stated say what actually happened so unable to connect your account then we provide reassurance of what's happened your changes were saved then we said say what happened or say why it happened but we could not connect your account due to technical issue on our end give them a way out which is to contact customer care and then help them fix it which is please try connecting again now there are two fundamental flaws that I personally see in error modal now have a think about it what do you think those two issues are and give you five quick seconds all right so what I think is wrong about this is that first there is conflicting messaging in this error modal so first we have a positive reassurance and then we have a negative reassurance so the first one is that we're saying in this actual error modal that something successful happened right your changes were saved and then right after we say well we could not connect your account due to a technical issue on our end so I think fundamentally I think there is just two conflicting uh points in this error modal okay now the second thing I believe is happening there are just way too many call to actions do I cancel do I exit do I try again do I contact customer care we haven't prioritized for the user what we believe is the best solution so here's what I would like to propose now based on the example that Jen has provided over here and obviously so kindly now the first thing I want to do is actually just remove all the ctas right and just prioritize the CTA that I believe is going to be most effective for the end user so I'm streaming everything out and I'm just doing the hard work for them and just recommending they should just try again because this just might be a once off issue okay the second thing I've done is actually taken out the your changes were saved I think that just makes it confusing now your changes were saved that is an entirely different topic I believe if changes are saved automatically I believe they should be done in the background for example figma doesn't constantly remind you things are being saved they just save save it in the background but that's a different story so with the error model I want to keep the messaging really clear right if it's an error it's an error then I want to reduce the number of ctas and just keep it to try again right we're just encouraging them to try again because we believe that it should be a one-soft issue so what happens is the user clicks try again because that's the only CTA or that could cancel we do a try again and then we actually say well we still are unable to connect your account at this time you can chat with our Live support or try again later so here we confirm that there is definitely an issue and the solution is to actually contact our support team to get this issue fixed or they can try again laid out by hitting cancel now the third Advanced UI design tip is visual reinforcement okay so let's go ahead and take a look at that design I just put together which was designed with my very own design system ship faster UI so if you do want to get 30 off for black Fridays link is in the description make sure to check it out now back to the original design so here we have unable to connect your account we have some sort of message and we have cancel and try again now in the context of visual reinforcement what do you think the problem is with this error modal have a think about it five seconds all right so there are two things now the first thing is that when you are reading this modal it's not clear immediately that it's an error right you actually have to read through the copy to really understand that there's an error that's happening okay so what I want to put forward is here's the enhanced version if it's an error we can utilize an icon right a red icon to really just indicate something warning something is happening here right pay attention so really quickly just a one click a quick glance you can see right away that there is an error right without really having to read any copy or content then the second thing is that if we have a second modal which is encouraging them to chat with support if this button or if this link is going to link them off to a different section of the website or the web application we want to let them know with a visual indication right visual reinforcement that this button is going to to take them somewhere else just in case I don't know the context of where this motor would be but if imagine it's on their edit profile they fit out all this information and if they hit chat with support and we take them right away if that information isn't saved we might frustrate the user so we just have to make sure that we let the user know that this is this button is going to take them somewhere else so with some very simple visual cues all reinforcement we can really spruce up this modal won't make it look more beautiful and second actually deliver a better experience now the fourth Advanced UI design tip that's going to get you that pay rise is around UI kits and Design Systems now the first thing I want to answer is when should you even consider using a UI kit or a design system okay so here's a very quick Matrix now on the y-axis we have deadline whether you have an extended deadline or you have a very tight and short deadline on the x-axis we have what type of application or what type of medium you're designing for so whether it's a website or if it's an application which includes web apps and mobile apps now websites are generally a little bit more creative generally and then applications are generally more focused around functionality and usability the two are similar but they also demand very different expectations from the user companies generally are a little bit more flexible in terms of what we do on the website there's a little bit more branding and Creative Flair with it so here if you have if you are working on a website and you have a very extended deadline it's a little bit orangey with a thumbs up and a down because you can choose do you want to use a design system or not or a UI kit because if you've got a lot of time you can create your own and if you're working on a website there's a bit more of creative freedom there so do you want to limit yourself to a design system or an existing UI kit all right same on the right hand side if you have an extended deadline and you are working on an application you can use a design system or you might not need to use the design system why because you have a lot of time on your hands and you can maybe create your own now when it comes to having a short deadline whether you are working on a website or an application I think it's time to consider using an existing UI kit or a design system because it would definitely help speed up your process now here's a quick example I've already connected my ship faster to UI design system and UI kit to this project now once again if you do want access to this design system and want 30 off for Black Friday check the link in the description the promo ends this Saturday so make sure to jump onto it so here I can select the screen shift I to open up my components type in header right and then I can go enter pop down a header right I can align this to the top I can also turn this entire frame into an auto layout while that is selected I can then go shift I once again maybe I want to put down a footer boom I can Chuck down a footer right and then once again I can do shift I and maybe I want to put down a contact form okay so put down a contact form and that pops it down holding down shift boom I have an entire page set up already and in here depending on what design system or UI kit you're using over in shift faster UI we have a lot of different variations so you can just pop in create whatever you want literally in seconds and that's why when I say if you're working on a project that doesn't allow you to have much time to design existing Design Systems and UI kits are going to be extremely powerful all right let's go through another example so let's go select this page shift I I might put down a header done move it to the top then shift a to make that into Auto layout I might put down a team maybe we're designing the team page and then shift I once again put down the footer and there we go once again really quickly within a couple of seconds you have a whole pretty much a whole brochure website done really quickly and you can obviously customize a little bit to bring through their brand now if you notice every component that we put down into our figma file from the actual design system is a component now when you do hand these designs over to developers it can be a little bit harder for the developer to understand what components from the design system are being utilized so here you can actually go ahead and go to your plugins download the free Zeppelin figma plugin and what you can actually do is once you open it up you can go ahead and select the designs that you want to hand over to developers right so I want to maybe sync up these two designs I can hit export I can create a new project for the web and I can actually go ahead and sync up these designs to Zeppelin now the powerful thing from here is that once these designs are synced up to Zeppelin I can go ahead and open this up in the app I can bring this over into the screen and you can see that down at the bottom if I'm going to go ahead and show components in Zeppelin it can actually detect all the different components that are being utilized in this design so if a developer wanted to understand what components are utilized in what screens and in What flows here they can actually see where they all being used now one additional benefit is that if let's say we want to understand where this header component is being utilized across the entire project the developer can click on it and they can actually see that this component is being used in two screens in this entire project if you click on this little arrow it shows you exactly where all these components are being utilized so it provides a developer a really good bird's eye view of the entire project and where exactly each component is being utilized now on to the fifth Advanced UI design tip this one is around figma design system slots now if you haven't heard about this concept I'm going to walk you through it you're going to absolutely love it now obviously design system slots aren't going to be relevant to every single designer it's probably a little bit more relevant to a designer that's working in-house in a startup or in a company that has one key product for example Shopify Spotify slack messenger or even Instagram mainly because when you are working on just one product you do want to invest a little bit more time into the design system behind it but if you're working as a freelancer or in an agency this might not be as relevant mainly because you are working on so many different projects you don't really need to build such an advanced and intricate design system because you're going to be moving on to all these different projects so let's say you are working on a project where you do need to invest into the design system and and you want to bring a little bit more flexibility in terms of how you are creating your components so here we have a modal from my shift faster UI design system so as you can see if you double click into the actual component you can see that there is really just one way of creating this modal right because this modal is the instance of a component and I can't really add anything inside it right so if I copy this content and hit command V you can't edit this modal so this model is perfect for someone who is just working really quickly on lots of different projects because they don't really need to customize it too much but if you were working on a project where maybe you are working on a Shopify right and we need a few different variations of a modal right so maybe one modal needs to have an image and one modal needs to have content inside so how do we actually go ahead and create slots in our design system so here we have all the different elements that go inside a modal right so if I show you we have an auto out component it inside the container we have all these different types of modal elements right so so we have the slot we have actions we have images we have text title and icon so the first thing we want to do is we actually want to go ahead and make sure that we have all the elements that we need I can then hit command option K and I want to turn all these elements that are going to be brought into the actual modal as a component so on the right hand side I have a new model that I'm going to create with slots so the first thing I want to do is I actually want to go and hit shift I and I want to look for my modal slot and I'll put down the slot and here I can go ahead and hit command d a few times so let's say every modal needs five slots okay we have five slots over here and what I want to be able to do is instead of defining what the modal looks like and set that in stone I just have five slots and I can replace each slot with some sort of element or another component from my design system so from here I can actually go ahead and select this slot and I can go ahead and change this slot to maybe a title right or I can actually change it to a icon to the icon then the second one I can go ahead and change this to a title I can change the third one to a to the text and that can change the last one to the actions and then the last one we actually might be able to turn that off so to really take this even further what we need to do is now we need to turn the actual modal slots that wrapping all these instances into a component Okay so by command option K I can turn this into an actual component so now this is a component what we can actually access is now component properties so if I click on a Moodle slot under the layer I can click on this little cute little icon which is to create a Boolean property and I can go mode I show modal slot we can rename that to maybe slot R1 and then we can show value is true because we are going to keep this r on so create property boom done now as you can see I've gone ahead and created multiple slots so if we now go into my components library and I type in modal slots and I bring down a instance of this modal here you can see that I can now start turning them off and on depending on which one I want so let's just say I want a modal slot one on I can then click into the slot and I can actually go ahead and change this slot to the icon right and then I can turn these ones on and then change the second one to the actual uh title we can change the second one a third one to maybe image this time and then I can change the fourth one to actions so here you can start to create multiple variations of the modal so if I go ahead and duplicate this and bring this out over here I can actually change the third one to text and as you can see you can now create multiple variations of the modal by utilizing slots now a tooth got to include the component property side to this modal so if you remember we have just allowed ourselves to create a Boolean option for our modal so you can turn things on and off depending on what we want now what if we wanted to actually be able to swap out all the components in our panel over here in the component properties what we can do is we can actually go ahead and double click on our slots we can go and enable create instant swap property which will allow us to swap components out for this component so we might call this the icon because this would be the icon at the top of the of the modal then the second one might be for title so we can create one for title then we we can create a slot for Content so in this we can create a property called content and then the last one we can maybe call this the action bar or the ctas so this could just call it CTA so now when we click on this modal you can see that we can turn things on and off as desired but depending on what type of content we want we can actually now go ahead and Swap this out for an image and we have an entirely new modal right and we can turn the image off or the action bar off sorry and then we can turn it back on we can turn off the image which is the content and this allow us to create Dynamic modals all within our panel now the final Advance UI design tip is how not to ask for UI design feedback now I'm sure this has happened to you before me so if you want to progress in your career as a UI and ux designer and actually Garner more meaningful feedback for the projects that you work on so you can actually grow learn and actually get a paid rise you want to do something like this so instead of just sending your designs out and asking what are your thoughts you want to really nail it down and get really concise on exactly what you want so here I've mapped out a template that you can use so you want to greet the person so hey Michael thank you for agreeing to take take for taking the time to provide some feedback on my latest designs you want to provide a bit of context around the project that you're working on so they understand the situation that you're in so ubereats helps people order food and have it delivered on demand we've realized 60 of our repeat users order the same meals 90 of the time so that's what's happening right now on ubereats obviously this is hypothetical then you want to provide what is the actual problem that you're working on so the problem is that because of this of this happening the problem is that our existing users need to tap four times to find their previous orders to reorder it my proposed solution is to bring forward their favorite orders to the home feed to make the purchase easier and quicker and then at the end you need to provide what do you want what's your clear request I would love to hear your thoughts on whether or not we have missed a specific use case so you don't get feedback around good not bad logo should be bigger you don't get that type of feedback because you've actually provided a clear scenario to your friend Your Design manager or the product manager and you've also provided a clear request they know exactly what you want so here's a template feel free to actually screenshot it and when you get that pay rise I wouldn't mind you gently smashing the like button for this video now once again we are running a Black Friday promo 30 off everything at the designer ship which is the figma mask class and also our design system and also our wireframing kit right now so make sure to check the link in the description now we are going to be dropping a new course soon I've been working on it endlessly so make sure to keep your eyes peeled out for that now with that said if you enjoy this video make sure to gently smash that like button subscribe for the die High fans and I will see you in another video very soon

Channel: Mizko

Views: 64,913

Keywords: ui design, figma

Id: 9jp_1gHhieA

Length: 23min 56sec (1436 seconds)

Published: Thu Nov 24 2022