A blank screen looks broken
Faced with a blank screen, people wonder whether it is loading, broken or their fault, a failure of the visibility of system status Nielsen (1994) emphasises. Material Design distinguishes first use, user-cleared, no results and error states; each needs different copy. While data is still loading, show a skeleton screen instead so the two situations are not confused.
Three things a good empty state does
Kaplan (2021) recommends communicating system status, providing learning cues about what will appear, and offering direct pathways to act, which are Norman's (2013) signifiers and feedback. In Fogg's (2009) model, that button is the trigger. An empty favourites screen might say 'Tap the heart to save items here' with a Browse button. Empty states are therefore a natural home for app onboarding.
Copy by type and cautions
For no results, echo the query and suggest spelling checks, clearing filters or alternatives. When users have cleared everything, celebrate ('All done!'). For errors, give the cause and a retry button without blaming the user. Following patterns in Tidwell et al. (2020) and Hoober and Berkman (2011), use illustrations only to support meaning and keep the main button visible on small screens. All of this applies Nielsen's usability heuristics to empty screens.
FAQ
- What should an empty state include?
- Why it is empty, what will appear there, and a button for the next action.
- How do loading and empty states differ?
- Use skeletons or progress indicators while loading, and show an empty state only when there truly is no data.
Sources reviewed: 2026-10-27
References
- Kaplan, K. (2021, September 19). Designing empty states in complex applications: 3 guidelines. Nielsen Norman Group. Three guidelines: communicate status, provide learning cues and offer direct paths.
- Google. (n.d.). Empty states. Material Design 2. Classifies empty-state types such as first use, user-cleared and errors.
- Tidwell, J., Brewer, C., & Valencia, A. (2020). Designing interfaces: Patterns for effective interaction design (3rd ed.). O'Reilly Media. A pattern library for connecting empty screens to other interaction patterns.
- Hoober, S., & Berkman, E. (2011). Designing mobile interfaces. O'Reilly Media. A broad catalogue of mobile interface patterns.
- Nielsen, J. (1994). Usability engineering. Morgan Kaufmann. Covers visibility of system status, so empty screens do not look broken.
- Fogg, B. J. (2009). A behavior model for persuasive design. In Proceedings of the 4th International Conference on Persuasive Technology (Article 40). ACM. Frames an empty-state button as a behavioural trigger.
- Norman, D. A. (2013). The design of everyday things (Revised and expanded ed.). Basic Books. Signifiers and feedback for cueing what to do on an empty screen.