Empty State Design - What You Need to Know

One of the first design elements users meet with in an application is the so-called “empty state”. When we first open a CRM software, the list of our customers is yet empty. When we open a new document for editing, the document is plain. Traditionally, in case of a desktop/offline application, blankness is an indicator that content can be filled in there.

Still, this heuristics is not necessarily applicable on the web, because on the web a blank page often means something else. We had been working on Protopmail, an e-mail marketing software; its central element is the e-mail editor. On occasion of a user testing, a user opened the e-mail editor and was waiting… and waiting…

“I guess it’s still opening… I don’t know. I don’t see anything.”

Well yes, this is exactly the moment when a user closes a web app – if “not even the main page loads properly”, what could the user expect. The thing with web apps is that the user can never be sure why the screen is empty: is it because it is designed to be so, or because it’s not loading properly?

What’s the solution? We want to leave the screen blank, so that the editing option is obvious, but we still want to put something there, so that the user doesn’t think that the page is still loading. Riddle: what is there but still not there? Solution: the watermark!

The punchline is that by using the watermark we kill two birds with one stone: we indicate that the loading of the page is done, but also give instructions to the user.

Empty State Design Examples

Before the era of flat design, the typical indicator was depth, as if a piece of puzzle was missing from the screen.

With the arrival of the era of flat design, depth was gone and was replaced by a light-grey watermark. Regarding text, in most of the cases the application affirms that this is the empty state and the user should follow the instructions in order to proceed.

What’s even better: placing directly a link/button for proceeding in the empty state.

The initial stage for proceeding also might be shown with an arrow.

If the target audience of the software allows it, the empty state is a good place for humor or a little extra surprise for the users.

We are constantly sharing our thoughts and design tricks on this blog that help developers in creating applications. You will hear about our next article on our Facebook page.