Error States and Empty States in UI Design
Every screen in your application can be in multiple states — the normal state (with content), a loading state, an empty state (no data), and an error state (something went wrong). Designing all of these states is essential for a complete, professional product.
Empty States
An empty state appears when a screen has no data to display — a new user's empty inbox, a filtered list with zero results, a dashboard before any data has been collected. Empty states are an opportunity, not a problem: they can guide users to their next action.
Good empty state design:
- Explain clearly why the screen is empty
- Provide a clear action to resolve the emptiness ("Upload your first file", "Create your first project")
- Use an illustration or icon to make the state feel considered, not broken
- Be specific: "No invoices found" not just "No results"
Error States
Error states communicate that something went wrong. Types include: network errors (cannot load data), server errors (5xx responses), validation errors (form fields), and permission errors (user does not have access).
Good error state design:
- Explain what went wrong in plain language
- Explain what the user can do (retry, contact support, check their connection)
- Provide a clear action button (Retry, Go Back, Contact Support)
- Use appropriate semantic colour (red for errors) without relying solely on colour