How to design empty states with Justinmind
Use empty states in your design to delight users and leave a lasting impression. Here’s how to design your own in 5 simple steps
Hunting for opportunities to boost the user experience of a website or mobile app can have big payoffs.
From useful microcopy to a reassuring confirmation email, there are myriad ways for UX designers to create an environment where users feel comfortable, safe and ready to achieve their goals.
When designer’s pay attention to these seemingly small details, users will be less likely to encounter frustration. And when users don’t feel frustrated, they might just repeat the experience.
Empty states are an opportunity for UXers to capitalize on rare screen real estate to enhance the user experience of their web and mobile apps. They are screens in the UI which don’t have content on them yet. Eventually, when the user interacts with the app, these pages will be populated with content chosen by the user. Until that point, the screen is empty hence empty state.
Think about when you have no emails in your inbox (when does that ever happen?) or a favorites page with no favorites added yet. Both are great examples of empty states.
In this post, Justinmind will walk you through 5 simple steps to design your own empty state.
Step one: Download Justinmind and create a new prototype
To start designing your own empty state, like the one above, download Justinmind.
After you download Justinmind, open it and create a new mobile prototype.
Now you should have a blank canvas in front of you ready to design your empty state.
Step two: Create your header and navigation
It’s time to make our header and navigation. To make life easier, we can save time by replicating our content.
Our app is going to have the same header and navigation throughout so we can create a Template in the Templates palette, on the right of the workspace. Templates speed up your design process.
From the widgets palette on the left hand side, drag a Status Bar Dark widget and place it at the top of the canvas.
We can create our header below the Status Bar Dark widget you just placed on the canvas.
When you create your header, drag and select all the UI components, right click and choose “Group in Dynamic Panel”. In the Properties tab, click “Display pin position options”. There should now be a drop down menu with “Pin to top” as an option under Margin Y. Click that and your header will be in place.
Our app uses tabbed navigation on the bottom, which is a conventional navigation pattern. You can create your own tabbed navigation using the same method you used to make the header.
At this point, we have both our header and our navigation elements in place. We can reuse these as many times as we want because we made them into a Template.
Step three: Define your empty states
In our post on all things empty states, we mentioned that there are a lot of opportunities for UXers to design empty states.
In our example, we’ve designed a recipe app for iOS but this can be done with Android too. In the app, users can save, favorite, share and create their own recipes. These screens offer the opportunity to flex our UX muscles and design awesome empty states.
We decided that users will see empty states in our app when:
- The user hasn’t added any recipes
- The user hasn’t added any favorites
Our recipe app has an empty state on the recipes screen. To engage our user, we’re going to encourage them to add their own recipe using the empty state.
Step four: Add illustrations and relevant copy
Many empty states use illustration to complement the copy. You can add your own illustrations using the icons that are already pre-built in Justinmind, under the iOS Icons widget group. These illustrations are SVG which means they are scalable and zoomable: they never lose their quality.
Alternatively, there are websites where you can find free and customizable illustrations like Noun Project or unDraw.
If you don’t have any illustrations to use or simply you’d rather continue creating your prototype without one, you can use the Picture widget from the Mobile Wireframing library which will act as a placeholder.
Likewise, you can opt to write in fitting copy or use a placeholder.
Here are 10 examples of microcopy that can inspire and help you with your empty state design.
Step five: Encourage users to explore your app
In addition to cool copy and helpful illustrations, you can make your empty state more engaging with different UI patterns.
We want to encourage users to engage with the app. With our first empty state in the favorites screen, we decided to add a carousel which shows other users’ recipes that the user can add to their favorites.
To do the same, use a Dynamic Panel and make sure that in the Properties tab Horizontal Overflow is set to “Scroll auto”. Within the Dynamic Panel, you can create cards to represent the recipes.
We want to also add an empty state for when the user hasn’t added any recipes of their own yet.
Using the Template from earlier, this is easy. All you need to do is repeat step four. Then add a Pinned Layer widget to represent a floating action button.
How to design empty states — the takeaway
Empty states are chance for UI designers to create more meaningful moments for their user. They provide additional contextual information which can make their experience using your app easier, fun and more engaging.
In the image above, you can see the difference between a blank empty state and a design that uses the empty state as a UX opportunity. It’s clear as day that the empty state on the right encourages the user to explore the app and add their own recipes, creating a more meaningful experience.
Next time you’re designing an app, think of the empty state. Is a blank screen helping your user or could that extra real estate be put to better use?
