Web projects
Design an empty state that explains the next action
By SI100x · Published
An empty list is a normal product state. A blank area or endless spinner makes it difficult to distinguish an empty result from a failed request. Give each state a clear meaning before adding decorative content.
Try this exercise
- Sketch the list with zero items. Explain what belongs there and offer a relevant next action, such as browsing courses or creating the first item.
- Design loading and failure separately. Loading explains that a request is in progress; failure says it could not complete and offers a safe retry when appropriate.
- Test the transition from loading to empty, then loading to populated. Make sure old errors disappear after a successful retry and existing results are not unnecessarily erased.
Check your result
Someone should be able to tell whether there are no items, the request is pending or something went wrong. Avoid invented sample records that could be mistaken for the user’s actual data.
Explore your next step
Compare course curricula or try a free live demo to ask about prerequisites and practice work.