7 UX Design Tips for Developers

Key Takeaways

question as a developer are you able to whip up a user interface that's halfway decent because sometimes that's a really useful skill to have today i'm going to show you how to go from this to this i'm going to share 7 ux design tips with you that will massively improve the user interfaces you build even if you're working with ux designer let's dive in if you're new here you want to become a better software developer gain a deeper understanding of programming in general start now by subscribing and hitting the bell so you don't miss anything your company may have ux designer or perhaps even a whole team of them but what happens if your ux designer is on a holiday or they forgot to design a part of the application you're working on and you loathe any kind of social interaction or what if your manager wants you to build a tool for internal use only and doesn't want to spend any money on design or you're the only employee in a startup and just have to figure it all out yourself in short unless you're working on deep back-end stuff or devops only knowing a bit of ux design as a software developer is really useful this video is not so much about writing code though the code i'll be working on is available in a git repository the link is in the description i'm going to take you through an example application and improve the user interface using 7 ux design tips i'll be using typescript react and material ui but these tips apply to any kind of programming language or ui framework you can apply them immediately to the user interfaces you're working on this is not a complete list of ux design tips and principles they come from my own personal experience developing products with complex user interfaces and each of these things have made a huge improvement in the quality of my work so grab a coffee some snacks and a notebook and make sure to watch this video till the end to get the most out of it my first tip is a general one save yourself a bunch of time by relying on a design system it doesn't matter which system you choose google has material design there's bootstrap by twitter and there are others these design systems are built on decades of user interface research and because of that they provide a great starting point to develop something that looks at least decent don't try to reinvent the wheel this user interface which uses material design doesn't look half bad even though it has severe usability issues and that also highlights a limitation to design systems they don't solve everything and that's where my other tips come in let's take a look at the example so today's example is an internal tool for a company let's call that company aryan codes it has sales section marketing section finance action and an admin section of course we're most interested in the admin part of this so let's click on that and then we get this page and this is basically a placeholder page where we can add or remove some users we can send policy information about holidays salary printing those kind of stuff to our users we have a menu to export or import some data we can go back to the home page here and to the left of this page we have a menu with a couple of options like we can look at security issues in the system there are notifications and there is an option to upgrade this whole system to a premium version i didn't implement all these things obviously it's just meant as an example to discuss the design aspects of this the code is written in typescript and uses react so we have an admin component that has a left drawer it has some titles and texts and it has this policy settings part and the user table part and these are all separate components that i also put here in the code it's not really important that this is typescript and react you can basically apply these tips and ideas that i'm going to talk about to any type of code that you're working on so the second tip i want to give you is that you should make the flow of your application natural what do i mean by that let's look at this page and this is actually a tip that mainly goes back to how your users navigate through your application in this case we see we have this area on the left which is mainly used for navigation between different sub pages within this admin environment and we have the home which is kind of the overview of the different parts of the application now the thing is that often users view the way that they go through an application as going from left to right so here i'm going basically to the right and from a user perspective this page in terms of navigation is actually pretty confusing on the left you have these sub pages if you want to go back which to the user feels like going to the left you have to go click on this button that's on the right side of the screen sending policy info is something that a user feels like is okay i'm doing something i'm continuing i'm moving to the right but this is actually on the left so that feels very confusing overall you want to give your use the feeling that they're moving from left to right and back again in your application so when we start we're on the left then we move into the application to admin then we're going to add users then we say cancel we go back to the left etc etc and you want your user interface to reflect that idea to make it coherent to the user so in this case what we can do to make this better is actually move this back to home button to the left side because we're going back to the left and the same idea by the way applies to if you have like a pagination like previous next you want to put the previous button on the left and the next button on the right so let's change the code and move this home button to the left and the send policy info button to the right and you'll see it's already gonna make a big difference and now of course here on the left we don't have a lot of space so what i'm actually going to do is i'm going to move this button into this menu so let me switch back to the home page so here we have the menu on the right and that's actually a material ui list so let's add another item to this list that actually takes us back to home i'm going to add here another list item this is called home and when i click on this let's add a function here to handle going home and we're going to need the router for this that's how we go home let's see what this looks like so now we have this home button here let's clean that up a little bit we're going to add an icon and let's make this text boldface to separate it a bit from the rest of the menu and so then this is what you get we can separate it visually even a bit more for example you could add a divider and we could actually make this boldface and then this is what we get i can click here and i go back home so this feels much more natural and now we can obviously also remove that button so let's also do that that's this button here and then this is already looking a lot cleaner next step is moving this button to the right so here's that button let's add a text align style here like so and let's see what it looks like so now this is what we get it's already looks a little bit cleaner and the navigation feels more natural in this way the third tip is that colors have a meaning you need to make sure in your interface that if you use a color that you're always using it in the same way and that's actually an issue here where we have an add users button that's orange and we have a send policy info button that's yellow there's no particular reason why this button should be yellow in fact if you look at the rest of the interface you see that all the other things if they're clickable they are orange so in order to make the interface more consistent we should also make this button orange so let's change the color and then this is what that looks like this is also a bit cleaner generally when you design these kind of interfaces you often have a kind of primary color that you will use for anything that's interactive anything that's clickable and then you'll have a number of accent colors so you could for example use the yellow color as an accent color in another place for example what you could do is give this manager users message here an accent color so that it jumps out a bit more so for that i'm going back to this level so here we have this message so what you can do is give this a background color that's actually an accent color now you get this this looks pretty ugly let's add some padding now this is already a bit better then the color is a bit strong we could add some opacity to this to add a bit of opacity i'm going to use the color package that i'll import here and with the color package you can parse existing colors apply alpha values to them convert them back to string convert them to different formats and so on so that's pretty useful so let's create a color object give it an alpha value and then convert it to string so now we get is something that looks a bit better and then let's add a little icon in front of the message and then this is what that looks like so what we've achieved now is make sure that anything that's orange is clickable and the other colors are used mainly as accents in other areas of the interface for example here we're using it for the message but also the header bar and the logo has accent colors the fourth tip is that you should always have a single main action per screen on this screen it's not completely clear what you want your users to do do you want to send policy info do you want to add new users if i click on the table i get another button that also looks very similar to the other two so the first thing we need to do to fix this is to define what the main action is on the screen so let's assume that the main action is adding users in that case we need to change the style of these buttons to make them appear a bit less prominent so let's do that so i'm going back to my policy settings screen and i'm going to change the color of this sent policy button here so i'm just going to make it black i'm going to move the color here and i'm also going to change the variant and make it outlined so let's see what that looks like so then we get this so that's really nice the button is still there but it's much less prominent and we're going to do the same thing to the send email button so that's in the user table and that's here so here i'm also going to remove the color and make it an outlined button and then this is what we get so now it's much clearer this is the thing we want people to click on it looks a bit weird that this button is now to the right and this button is to the left i'm going to change that in a minute so i have three more tips for you and then i also have a bonus if you're enjoying this so far give this video a like the fifth tip is to always separate actions from navigation in this case if you look at this left menu a couple of these items are navigation items i'm navigating to home i'm navigating to different sub pages in this interface upgrade to premium is not navigation that's an action if you look at this menu there are mainly actions sharing an invite code importing or exporting user data but there's also settings which is actually navigation this is very confusing because you never know if this is going to open a dialog or if you're going to go to a completely separate page or whatever and it also doesn't make it really clear how the structure of your application is set up if you simply look at this menu we don't know that there is a setting screen but actually it's hidden behind this menu that's not a good idea so there's a couple of things you can do to improve this one thing you can do is increase consistency by moving all the navigation together in a single place so for example i can move this settings item here and put it in the navigation where it belongs an advantage of this is that as a user you always have an overview of what the structure is of your application that's really nice another way to do it is that you can also change the style of things to make them appear more separately from navigation items for example this upgrade to premium action maybe your marketing department doesn't want this to move to this action menu because they want users to upgrade to premium so it should be prominently visible in the interface what you can do in that case is change the visual style so it's clear to the user that this is not navigation but it's something else so let's move settings over to the menu here and let's change the style of upgrade to premium to solve this so first let's go into this basic menu so here we have the settings menu item and i'm just going to remove this here and i'm going to the left drawer and adding an extra menu item for settings in this place and let's also import the settings icon [Applause] and now this is what we got so we have all navigation here we moved settings from this menu so this is also a bit cleaner the only thing still left to do is update the style of upgrade to premium to something else let's turn this into a button so that it looks a bit more like this and since this is already a button this doesn't need to be a button anymore let's make it full width and change it to have a primary color and finally let's also make it outlined and then this is what it looks like so now the nice thing is that it's really clear that this is something very different from this so navigation is nicely put together here so putting an action like this in a navigation area here is not an issue what i generally avoid is put navigation into a menu so i don't put settings pages here and stuff like that because they are then hidden for the user and the user doesn't know what the structure is of your application anymore by putting settings navigation here it's clear to the user that there is an area called settings where the user can change things the sixth tip is that you should be really careful with dynamically adding and removing elements from your interface it's generally better to disable things if they're not available look at this example whenever i select one or more users i have this send email to users button obviously if i don't select any users i can't send an email because i didn't select anybody so if i remove the selection here you see the button disappears for the user this actually very confusing because when you click on things suddenly buttons appear in the interface that were not there before and it's generally a bad idea so it's much better to disable this button when you didn't select any user so let's change that as a first step so that's something i should do in this part of the code so here you can see i only display the button if there is a number of uses that i selected from the table so instead of this i'm going to use that same value to switch on or off whether the button is disabled so now you see when i haven't selected any of the users the button is disabled and let's also move this send email button to the left so that the add users is featured a bit more prominently and then this is what we get and then the final tip i have for you is that you can use space to better separate elements of your screen in this case actually it's not that bad but it's not really clear what belongs to what so in principle we have three areas in this screen we have the the top part which is the header and description then we have the policy sending parts and then we have a user table part with different actions so what you can do is add a little bit of extra space to better separate these different elements for the user and then this is what you get pretty minor change but it adds a little bit of extra separation but you can see that space actually helps here to show that this filter option here because it's very close to the table it belongs to the table similar for this send policy info button that belongs to this part so it's very close together all right then a bonus tip is to make sure that your user interface is smart and is actually aimed at making life better for the user and not making life better for the system and here's a good example of where that goes wrong so in this case for the policy sending part i can select the policy type i can put an email address and then i have to send policy info button that i can click if i click this currently there is no email address so what happens is that i get this error so what i did here is to make sure that there is not going to be some kind of crash or whatever if we try to send something to an empty email address but that's looking at it from a system point of view a user interface is not made for the system it's for the user so you should make it better for the user so that means that for a user it should always be perfectly clear what you should do in this case if i don't fill in an email address i shouldn't be able to click on this button and get an error the button should simply be disabled so let's change that in the code and this is actually pretty simple to solve so i'm storing the email address that you're typing in this variable so i'm simply disabling the button if that email address is empty like so and now default this thing is disabled as soon as i start to type an email address then it becomes enabled you could obviously do better validation here and make sure that this is actually a valid email address before you enable this button but i won't cover that in this video today so in general make your user interface smart and make it adapt to the user instead of the other way around i've seen pretty bad cases of this by the way for example i've seen interfaces where you had to press buttons in particular order for the system not to crash so you first should press a button to read something from a file then put in some parameters then press a button to process some data and then another button to export the file and if you didn't do things in that exact order the application would crash and none of these buttons were smart they were not disabled if some values were not provided etc so that's a really bad practice to do those kind of things always make sure that your interface works together with your user and in fact when you think about it this is actually the most difficult part of getting a user interface right because it requires you to really think about what your user wants to do and you need to put yourself into the mindset of your user to understand how your user interacts with your application it takes a lot of time and research to do this well but in the end the reward is also very high these tips have really helped me create better more intuitive user interfaces especially if those pesky ux designers are on a holiday again seems like they always are if you like this also check out this video where i show you a nice visual effect called glassmorphism that you can apply to user interfaces and take them to the next level the community on discord has been growing and there have been a couple of really nice discussions lately so don't miss out and come join us there thanks for watching take care and see you in the next video [Music]