top of page

Empty Inside: Writing Empty States

Is it fair to expect much from an empty state that, by definition, has nothing to show?


Actually, yeah. Empty states have the ability to inspire action, explain the situation, and explain what can be expected. Take some of the most common types of empty states:


Type 1: Nothing Yet

"Nothing yet" empty states show up, for example, when you select the notifications tab, only to see you don't have any. This doesn't mean anything's wrong, and there's not much you can do to change it. Instead of displaying an extra screen, a simple explanation can tell you what you'll find there later on.


Let the user know the state of things ("No notifications," "0 Notifications Yet," etc.). Note that the copy here will depend upon whether it's a first-time empty state or a returning one.

empty state from slate.com


Take this empty state from Spark, an email software. I don't want to told I have "No emails yet" every time I clear my inbox; they know that, and instead congratulate me on staying on top of my communications. (Though I appreciate the sentiment in suggesting I tweet about it, I don't think any of my followers really care about the status of my inbox.


These "Nothing yet" empty states are often used as a place where UX writers can get creative. If your company's tone and voice allows for that, great. But make sure it's appropriate situationally: no one wants to open their bank app to a joke about how their account is at $0.00.


Type 2: The Nudge Let's say you're preparing to write a blog post: your first one, at that. When you first open your blogging app, you know that there will be no already-published posts ready to greet you.


Empty states such as these often contain a CTA. No published posts yet? Draft your first one.


empty state from wix.com

This is an old empty state from Wix Groups that I worked on about a years ago. It was attached to a new feature that allowed group owners to act as a bouncer, asking potential members questions before admitting them.


The formula here works: the title lets the user know what they can do, while the subtitle mentions why the feature is worth using at all. If I were to redo this empty state now, I'd tweak a few things: make the title and CTA match, provide a clearer picture in the subtitle about how questions are done.


Either way, empty states that arise when things really shouldn't be empty are the perfect place to inspire action.


Type 3: Nothing Found

You filter your coworkers by who's online and get no results. You search for tacos in your neighborhood and, sadly, find that none are within 50km from you.


These "Nothing found" empty states are different because there's nothing the user can do to change the outcome of their specific inquiry.


When I search for filters at Barista, a coffee supply store, I get no results: because I've limited my search to the knock box category. Of course I won't find filters there; though the site does make the suggestion of "clear all," it's much less prominent than the main message of "Your search returned no results."


Another issue here is that this isn't really an empty state; they've elected instead to use an element that looks more like an error message or info banner. Imagine how less jarring this would be if there was a simple but explanatory message that suggested widening the search criteria, or searching by another term. If the software's advanced enough, and you know exactly what the user is searching for but don't have it, suggest a similar item.


Even the best UX will never eradicate the need for "Nothing found" empty states, and though they can be a source of frustration and disappointment for the user, they don't have to be. Use them to be clear about what you/the system/the company don't have, and if possible, suggest alternative options.


Never Empty

To summarize: empty states are opportunities. Though your course of action will largely depend on the type of state you're writing for, always let the user know what's going on, and what they can do, if anything, to change it.

コメント


Thanks for subscribing

bottom of page