Separate absence from interruption
An empty collection, a filter with no matches, and an unavailable source can all produce a blank-looking area. They are not the same event. The interface should help a person understand which situation they have encountered.
Avoid a single message that conceals the distinction. “No entries match these filters” suggests a different next step from “The collection could not be loaded.” The first invites a change of route; the second may need an explanation or a later attempt.
Describe the wait without inventing progress
A loading state can confirm that an action has started, but it should not imply a precise completion time that the system does not know. Decorative activity is not a substitute for an understandable message.
Consider what remains usable while the content is pending. A visitor may need to return to the previous view, change a choice, or read an explanation. The waiting area should not hide every route out of the page.
COLLECTION VIEW
Three entries are available.
- Layout studies
- Reading rooms
- Small interfaces
These are fictional titles used to illustrate a populated view.
Make an empty view useful
An empty state can explain the active conditions and offer a relevant next action. If filters are responsible, show them. If a collection has no published items yet, explain that situation rather than presenting it as a technical failure.
The action should do what its label promises. A control that says “Clear filters” should restore the broader view, while a link to an explanation should open that explanation. A reassuring message cannot repair an inactive control.
Write for recovery
When an action fails, describe what is known, whether anything has changed, and what the person can reasonably do next. Do not blame the visitor for an event they cannot understand or correct.
Messages should be available as text, not only through color or an icon. Where an interaction changes information on the page, consider how that change will be communicated to people who are not watching the same visual area.
Include the states in the review set
A polished content view can hide the unfinished parts of a design. Add representative waiting, empty, and unavailable states to the same review material as the ordinary view.
Specify which behavior is real and which is being demonstrated. The examples on this page switch between authored illustrations; they do not make a network request or represent the availability of a live service.
Further reading
W3C WAI — User notifications ↗This guide is a general design resource. Any assessment of a real interface needs its own defined scope and review.