Use cases for empty states of screens
- First use. Occurs with a new product or service when there is still nothing to show.
- User cleared. Occurs when users complete actions such as clearing their inbox or task list, and the result is an empty screen.
- Errors. These occur when something goes wrong, or when there are issues such as a mobile phone going offline due to network problems.
- No results/No data. Occurs when there is nothing to show. This can happen if someone performs a search and the query is empty or there isn’t data available to show (when filtering for a date-range that has no data for example).
✅ Do’s
1. Use visual content. Adding doodles to create a narrative and improve the design is key for connecting with users.
2. Guide the users to CTAs. Don’t leave users hanging.A well-designed and smartly thought out empty state screen should motivate users to continue using the product by drawing their attention to clearly visible CTAs.
3. Choose your words carefully. Phrasing the right message is extremely important in empty state screens. The message should be clear so that it isn’t easily misinterpreted. This written guide should be concise so that the user can easily take the next appropriate step.
4. Prompt the user to click somewhere on the page. Include a short description and arrows pointing to a few of the important buttons located on the screen.
5. Suggest alternatives. If a user searches for something that does exist, provide close matches to what they are looking for. We give users a chance to explore other sections when they encounter an empty state in one section.
6. Add personality. Add personality by using friendly and sometimes humorous but keep the user goal and context in mind. This doesn’t mean you should always resort to humor, a joke could be fresh today but boring tomorrow. Adding surprise and delight can transform the user experience even in empty state screens that users rarely encounter.
7. Handle failure states. If there’s an error, you must inform users what’s wrong and suggest how to resolve the error. Here’s what you can do with error empty states:
- Show non-technical copy of the error text (most people don’t know what error 404 means)
- Suggest steps to resolve the issue with the least amount of text
- Don’t use technical terms
- Allow users to reload pageÂ
⛔ Dont’s
- Don’t use technical terms
- Don’t use error 404 (most people don’t know what error 404 means)
👉 User Experience: Seven Empty State Best Practices for UX Design