Today, we’re going to discuss a lesser-known, but still critically-important, design element: the Empty State Page. Often an afterthought for many website designers, empty states are what a visitor to a website sees when there’s no data to display. There are a few reasons such as:
“Empty states are commonly known as first use, user cleared, and errors,” writes Invision’s Dina Chaiffetz. “But let’s think of these moments in terms of the user’s perspective: first impression, moment of success, and moment of failure. These tipping points in the user experience can lead to two very different outcomes: temporary or permanent abandonment of the app, or a higher level of engagement and loyalty.”
In other words, if you put a great deal of thought into your empty state pages, you can significantly drive engagement to your site. If, as many do, you treat them as an afterthought? Best case scenario, they’ll do nothing to help your users; worst case, they’ll actually drive down satisfaction and engagement.
They’re important, basically. So how do you design an Empty State Page that helps your users?
What’s In An Empty State?
The most important thing about an Empty State Page is that it provides the user with information. It tells them what brought them here and what they should do next. While you certainly need to do the design work to make it look great, utility should, above all else, be helpful to the user.
“A useful empty state tells you what it’s for, why you’re seeing it, and how you can fill it up,” writes TechCrunch’s Benjamin Brandall. “An empty state should be useful first, amazing second. When designing, think of those three questions (what, why and how) as the formula for re-engaging your user, but also keep in mind that it’s the bare minimum requirement for an empty state.”
Let’s talk about what else one of these pages should include.
The Power of Personality
According to hongkiat, there are two vital components to every Empty State Page:
How you structure your Empty State Page
How you present information to the user and encourage them to move forward is entirely up to you. The most important thing is that you present the information, it needs to mesh with the rest of your design. It needs to fit with the feel of your site and your brand.
In short, whatever personality you’ve injected into your site also needs to be present on your Empty State Page.
“There are two more things that there’s room for in empty states, and that is personality and benefits,” writes TechCrunch’s Benjamin Brandall. “Personality makes your [site] memorable and pleasurable to use. Benefits help communicate why your app is useful to the user, which increases retention and solves user onboarding issues.”
If you’d like a few examples of how this works in practice, check out emptystate.es, an archive of Empty State Pages from websites, games, applications, and more.
Many developers consider the Empty State Page to be an afterthought, at best. This line of thinking undercuts their true value, however. Used effectively, an Empty State Page can be just as effective a call to action as a well-crafted blog post.
AJ Morris is the WordPress product manager for Liquid Web, a fully managed hosting company. He has extensive experience both developing WordPress sites and speaking at WordPress events. AJ leads product and go to market strategy for Liquid Web’s Managed WordPress product line. Liquid Web’s Platform as a Service solution for WordPress hosting allows you to seamlessly host multiple sites and access top-quality 24/7 heroic support.
The post What is an Empty State Page and How Should You Use It? appeared first on SiteProNews.