Empty states of tool windows, lists, trees, tables, master-detail layouts, or other container components should be informative for the users. Fill in the empty states with the following:
The default pattern is No [entity] added. If added, created, configured, or other words act as synonyms in a particular case, use added for consistency.
Do not introduce new entities that are not used in the current context. Instead, use the terms from the current UI so that the user understands what exactly is missing:
Actions to fill the areaAn action makes it easier to understand what to start with instead of searching for the appropriate icon on the toolbar. It can also educate about the shortcut.
Use one or two actionsThree or more actions would make it harder to choose what to start from.
In rare cases, when you need to list all possible starting points, use the list layout.
If there is enough space (for example, in horizontal tool windows), you may use the table layout to place action links, shortcuts, and action descriptions:
If an action opens a toolbar menu, open it at the same position where it would be opened with the corresponding toolbar button. This would explain which toolbar icon opens the menu.
Explain what to do when there is no action`If there is no action that can be performed by clicking a link, add a text describing all the required steps:
Hide the toolbarHide the area's toolbar if it does not have the same action as in the empty state. Usually, all other toolbar actions are not relevant in this case.
Correct
Incorrect
Help topic Empty state of the master-detail layoutMaster-detail layouts include a list or a tree on the left (in the master part) and the details area on the right.
If the master area is empty, display the explanation, action, and link to the help article.
If the details area is empty, no explanations are needed. In this case, show the actions to fill in the area.
Separate sentences in the empty state with periods, but do not put a period after the action link. Use the ellipses at the end of the action link if this link opens a dialog or a popup which requires some input from the user.
CapitalizationUse sentence capitalization in the empty state texts and links.
Avoid excessive verbsIn actions, avoid words that describe physical actions like press or click â they are obvious from how the link works.
Avoid saying add new. Just use add because all that is added is new in the context of an empty UI area.
Vertical spacing:
Minimum right and left margins:
Use non-breaking spaces in the following cases:
Between action names and shortcuts
For articles and prepositions
04 July 2025
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4