Designing empty and error states
This page is for theme designers who want the edge cases of a site to look designed. Content managed sites produce empty and error states all the time: a new folder with no children, a block whose query finds nothing, a link to a page that was moved, a visitor who is not allowed to see a page. The templates involved are documented in Error templates; this page is about what they should look like.
Contents
- One pattern for all of them
- Empty content
- Missing images and optional fields
- Error pages
- Not found
- Access denied
- Errors in forms
- An inventory of states
One pattern for all of them
Make one empty state component and one message component (alert) and use them everywhere (Component inventory). Each answers three questions in plain words:
- What happened? ("This folder has no articles yet.")
- Why, if it helps? ("You may need to sign in to see this page.")
- What can I do now? A link or a button.
Keep the tone calm and the language plain. No humor that fails in translation, no blame, no error codes as the main text.
Empty content
| Situation | What visitors see | What the design should do |
|---|---|---|
| A folder with no children | the folder's full view with an empty list | a short sentence, or nothing at all if the folder has its own text |
| A layout block whose collection is empty | an empty block | the block should render nothing, so the zone closes up |
| A related list with no relations | an empty heading | no heading, no box |
| A list filtered to nothing | an empty list | say which filter caused it and how to remove it |
The usual rule for visitors: hide empty containers. A box with a heading and nothing in it looks broken. An empty message is right only where the visitor asked for something (a search, a filter, a list they opened on purpose).
Editors are the exception: in a preview of an empty block they need to see that the block is there. Ask the developer whether block templates can show a hint in the editor's preview only (Layouts for designers).
Missing images and optional fields
Each optional field needs a design without it (Designing for editors). For images in particular, prefer a text-only variant over a gray placeholder; a grid of identical gray boxes tells visitors nothing.
Error pages
When the kernel cannot show a page it renders an error template inside your frame. The templates are numbered by the
kernel error code, under error/kernel/ (the kernel ships 1.tpl to 6.tpl and 20.tpl to 22.tpl); the
designer help lists which number means what (Error templates).
Design them as normal pages:
- the frame with header, navigation and footer, so visitors can continue;
- a clear heading and one or two sentences;
- the search field;
- links to the front page and the main sections.
Not found
The "not found" page is the most visited error page. Design it to help visitors recover, since many arrive from old links after a reorganization: search with the words from the address prefilled is one useful idea, but needs a developer to build it (Error templates).
Access denied
Two different cases need two different messages:
- Not signed in: the content may be visible after signing in. With the shipped error settings, an anonymous visitor who is denied access gets the error page with the sign-in form embedded in it, so design the access-denied page and the sign-in form together (Designing login and user pages).
- Signed in but not allowed: say so plainly and offer a way back. Do not invite the visitor to sign in again.
Errors in forms
Validation errors are a state of the form, not an error page: a summary at the top with links to each field, and a message at each field (Designing forms).
An inventory of states
Add these to your mockup list and your design QA checklist:
- To do: Empty folder, empty block, empty related list, empty filtered list.
- To do: Card and full view without image and without each optional field.
- To do: No search results.
- To do: Not found, access denied (signed out and signed in), and a generic error page.
- To do: Form with errors.
- To do: All of them in light and dark, at three widths.
Related pages
- Error templates
- Designing search results
- Designing interactive states
- Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.
Become an Exponential Partner
Partners share their information, provide funding, contribute back and develop the products with us, and that is how Exponential grows. A partner website and dashboard are planned for mid-2027: please become a partner today to speed up our growth rate and land new features faster.