Empty States
How you can leverage empty state to help users understand complex issues
Empty states are often seen as an edge case or afterthought. For neurodiverse users these moments are often memorable reminders of our disabilities. As a person with dyslexia, I often see just a screen with a large image and some microcopy. I often glance over it looking for an action but miss vital information hidden in gray text. Instead these pages can be opportunities to “help users recognize, diagnose, and recover from errors.”
Let’s talk tips and tricks for effective empty states that go further.
More can be more
Often times in design we think clean and simple is the best. But in the case of empty states I think more can be more. Often times there is not enough visual or written descriptions to communicate what a user can do to get value from these features. Some quick tips of content you might want to add.
FAQ
Longer pages (don’t be afraid of scrolling)
Multiple actions. Are there multiple things users can do to activate this feature?
Examples from Todoist, Dropbox, Shipt, Tindr
Opportunity to educate
It’s easy to just put a button, but what else do users need to know? What else do they need and want? I love these examples from Twitter, they take are not afraid of really describing what these features are, helping users understand the value here. Don’t be afraid to be verbose if it helps.
Examples from Twitter
Be helpful & factual
It’s easy to just say “NOTHING HERE” but think about what could help users. What information do they need? What CTA can we provide? Balance the needs of telling them what happened with supportive actions and copy.
Here’s a great example form Mailchimp, I love that they state the fact up front “No campaigns yet” but below there’s supportive copy to help you take action. They have even more text and actions to take below! This screen is factual but also helpful.
The Uber Explore example on the other hand doesn’t offer the user much. They state the facts “Nothing here yet” and “Go back” but they provide little action or explanation this screen unfortunately is purely factual, not helpful.
When making an empty state try your best to solve the users problem and not just present what looks like an error. Don’t be afraid to be verbose if it will help users use and activate those features, and finally a good empty state educates users, by answering questions and presenting actions.
If you like this article I would really appreciate if you would share, and thank you so much for subscribing to this newsletter, talk soon!