Profile image
By SiteProNews (Reporter)
Contributor profile | More stories
Story Views

Last Hour:
Last 24 Hours:

What is an Empty State Page and How Should You Use It?

Thursday, October 6, 2016 21:15
% of readers think this story is Fact. Add your two cents.

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:

  • The user has recently signed up to a site and has yet to create any content.
  • The user has cleared the data on a page themselves.
  • An error has occurred.

“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:

  • Context has already been discussed. This informs the user why a page is empty and what could or should be there; this information could be presented in the form of text, graphics, or something else entirely.
  • A Call to Action helps users take the necessary measures to fill the page. The example given here is DropBox, whose Empty State Page allows them to either create a folder of their own or add a sample folder.

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, an archive of Empty State Pages from websites, games, applications, and more.

Closing Thoughts

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.


We encourage you to Share our Reports, Analyses, Breaking News and Videos. Simply Click your Favorite Social Media Button and Share.

Report abuse


Your Comments
Question   Razz  Sad   Evil  Exclaim  Smile  Redface  Biggrin  Surprised  Eek   Confused   Cool  LOL   Mad   Twisted  Rolleyes   Wink  Idea  Arrow  Neutral  Cry   Mr. Green

Top Stories
Recent Stories



Top Global

Top Alternative



Email this story
Email this story

If you really want to ban this commenter, please write down the reason:

If you really want to disable all recommended stories, click on OK button. After that, you will be redirect to your options page.