Auto-generated transcript So most designers when they're designing a UI, they imagine that it will just be filled with content by default. But that's not what always happens. Imagine opening a new app like this, and instead of all this content, you just see basically nothing, right? So here's a simple job board that I just quickly designed. We have two tabs up here, the recommended jobs and the your applications tab. And we are in the your applications tab. So we're looking at the, let's say the jobs I've applied let's say these are all the jobs that I've applied to and what happens if if I don't have any jobs that I've applied to right now and I'm just a new user on this on this job board and I haven't applied to any jobs yet if I go to the code over here and if I just comment all of this out right and just have a empty list up here and save that And now if I go back to this tab, all I have is just an empty blank screen with no feedback, no content, nothing at all. And this is no way to treat your users. And this is how a lot of designers and a lot of developers are developing their websites and their platforms and their apps. So most designers are going to design UIs under the assumption that they will always be filled with content, which is not always going to be the case, especially if you're relying on users to create their own content, which in this case we are. And the designers are going to forget to design the empty states, which is something like this. And most developers will just fetch some data from the backend or the API and just render that. And if there's no data in the backend, then there's nothing to render, which is the exact same thing that's happening over here. If, for instance, let's say this is a API request to our backend and it's returning a empty list because we haven't applied 2012 yet. All right. And if we just render that, then we get nothing because the list is empty. Now, why is this important? Because these empty screens are usually your user's first impression with your app. And we all know how important first impressions are. You know, you meet someone and they make a bad first impression, you're never going to forget that. And it's the same thing with these UIs. When a new user signs up to your platform, they don't have any content yet. They're just a new user. They haven't made any changes. They haven't added anything. So they don't have any content to display over here. And what are they going to see? They're going to be greeted by an empty screen with no content. And by the way, if your platform relies on user generated content, So if you're some like platform that completely relies on user generated content, something like, for instance, maybe Todoist or something like some app like that, where all the data comes from the user actually adding his own data, then this is extremely important for you to cover because you don't have content of your own to display here. and you need the user to display to add their own content to display here which means every new user that signs up to your platform is going to be greeted by a completely blank screen here if you don't build something else to replace this and that's what we're going to cover now so I'm actually going to do now is I actually built several of these empty state UIs already and I'm going to show you each of them and we'll go through how I built it and why I I included each element and the design decisions that I made everything else And this is how I been building my empty state UIs and I sure that once we gone through some of these UIs you'll have some pretty good ideas as well on how you can adapt this to your own project or your own platform. So first of all let me just go back over here and remove this comment right down here. So I've already designed a empty state screen for this job board. Save that. And this is what we have. So first of all, let me just go through everything that I have over here. I added a illustration that basically just kind of gives off the meaning that we are applying to jobs or we're doing something productive. and below that I have a, you can call this a headline, which just describes what the problem is and then some supporting text to tell the user to, hey, just go and browse some jobs and tap the star to save ones you like and then you can find some saved jobs here and stuff and then a clear CTA and this is probably the most important step of all. I gave them a clear CTA, which basically means a CTA is just a call to action. You're just telling your users to go do something, some action. And this is probably the most important step of creating a good empty state UI. Because on an empty screen, there's nothing to do, right? So if you can just give a clear CTA on what the next step is, then that's basically a good empty screen. because it's our job as designers to guide our users to the next step, the next one or two steps, whatever they may be. And the CTA is the best way to do that. So for this example, the next step is to probably just go and browse some jobs, send some applications and save some jobs so that we can ultimately show those jobs right here in this applications tab, right? So that's why I added this CTA button over here. What you absolutely don't want to do is show some generic message here. So if I just remove all of this and instead of that I just had some basic generic message like no application sent please apply somewhere first if I just had some generic message like this that's not fun that that doesn't look good that doesn't tell the user what to do that doesn't give him a clear next step I mean yeah it does say please apply somewhere first but like apply how apply where apply there's no like clear button or link that we can press to go somewhere to start the next step nothing like that and just gives us a boring and like generic error message here no application sent and i see way too many people doing this don't be one of them don't do this instead of that have a properly designed empty screen have a nice illustration if you want or some icon this isn't necessary this is just for like aesthetic purposes just to make things look good and clearly describe the problem clearly describe what the next step next step or steps is and give the user a clear cta or two so that they can take the next step and do what needs to be done now let's move on to the next screen if i go back over here and disable this and enable this one okay that was wrong let me uncomment all of this Comment this and go back And so we have another empty state UI here and you've probably seen this a thousand times already or you've seen some version of this in all the other apps that you use. This is actually very similar to the job board UI that we just saw previously. We have a nice cozy relaxing illustration here and why did choose this relaxing illustration because the underlying meaning that we're giving off here is that since we have no notifications we have like less stress we're more relaxed so no notifications equals less stress that's the meaning that this illustration is supposed to give off other than that we have we have a headline we have some supporting supporting text and then we have a very small minor cta down here explore topics in case our user wants to go and browse some topics or something. It's actually really similar to the job board UI that we just showed before. Now moving on from this one, if I disable that again and move on to the next one which is a no messages screen. So this is for instance if you have some like messaging app or some chat app like WhatsApp or Skype or something, you basically just have a message icon up here no messages yet we clearly describe the problem and then we describe how to fix that problem what are the next steps and then we have a clear cta here start new chat and this button could just open up a list of contacts or something that the user can use to then start new chats and then those new chats can show up over here and replace this empty screen with some content. Now this next one is going to be really important for 90% of websites and 90% of platforms I would say. This is an empty state UI for a search screen. So we have some books reading app like something like Goodreads or Amazon or something. This is just a fictional UI that I created and we're on the search page and let's say we search for some book and we don't get anything. right? We don't find anything, we don't find any search results. And so we get this nice little empty state UI up here, and also a clear CTA to either reset filters, reset all of our filters, so that we might find something that we're looking for. Or we describe here that we could search for something else up here in the search box. Now, this applies to most websites, I would say, because even whether you're relying on user generated content or you're supplying your own content in both cases if you have a lot of content you probably also have a search page or some sort of search functionality to like so like your users can like search through your website and if they search through your website and they basically just get a completely blank empty screen then that's not fun you can see like if i if i go to the code here if i go down over here and we just comment out the empty screen and save that it just doesn't look good there's nothing like there's no content to render so it's just a blank screen and we don't know what to do next our users don know what the next step is what they did wrong or anything as just a pain to deal with right So instead of that we have an empty screen So the user actually knows what went wrong And again, the concept is very similar to the previous ones that we saw. We just have an illustration here that gives off the meaning that we're looking for something. You can see these people are looking for something. And we just describe the problem, tell the user what the next steps are, and give him some sort of CTAs over here. and the underlying concept is the same. I'm just showing this to you in different scenarios so we can like get some ideas from it. So moving on from this one and then actually before we move on just to remind you most websites have some sort of search functionality. All right it doesn't rely on user generated content. Most websites have some sort of search functionality. So this one of this specific empty state UI applies to, I would say, 90% of websites. So make sure that on your search pages, you are covering for this one as well. So moving on from that, let's look at the final state that we have. And this is basically if you're using something like a cloud storage app, like something like Google Drive or Dropbox. And we basically have a search bar up here to search for files and let's say we haven't uploaded any files yet and our drive is completely empty and so we get this screen up here and what exactly have I done here it's very similar to the previous ones again I have a illustration that gives off the meaning that we're searching for something and there's nothing over here our drive is completely empty let's upload some files I describe the problem and the next steps and then I give a very clear and prominent CTA up here to tell the user to upload some files. So the user always knows what the next step is. And even after that, I also give this drag and drop box to make it even easier to upload any files. So we can just drag a file and drop it right here in this box and that's a lot easier than clicking upload, selecting the file and then uploading it. So that's the, yeah that's the last example I need to show you. All that to say the the idea is very simple and the underlying concept is also very simple. You basically just have some sort of and these illustrations are just for like design purposes, just for aesthetics, just to make things look good. The important thing is that you describe the problem, that you describe the next steps and that you show your users what the next steps are by giving them some clear CTAs down here and it's going to be buttons, This can be links, this can be pretty much anything you want, but they need to be some clear CTAs that tell the user what to do next. All right. And the idea is very simple. You want to guide your users every step of the way and always give them clear instructions and clear actions. And these empty state UIs will help you to do that when you have no other content to display or nothing else to display yet. These empty state UIs are going to help you to guide your users correctly. Anyway, that's all for this one. If you like this kind of content then subscribe for more. If you want to work with me or hire me for something then check out my website. The link should be somewhere on my channel. And thank you for watching.