Related Pages: System Errors
...
Use for a single empty state with sufficient space for displaying the illustration.
Use a an illustration relevant illustration, corresponding to the exact use case: No specific context, for example, no results found, No no <items> defined, No no items selected, Multiple items selected, or Waiting.etc.
If a certain illustration is used with animation, it should be applied consistently across an application
...
Icon
Use an icon when multiple empty states are needed in different content areas on the same screen, or where space is limited.
...
Other use cases may require a dedicated ad-hoc illustration or icon., for example:
Empty notificationsUse when a user has no new notifications to review. | Multiple/too many items selectedUse when a user has selected multiple or too many items | High request volume | Service is dwon |
|
|
|
|
Usage & Behaviour
General guidelines
...
Type | Usage | Illustration | Icon |
|---|---|---|---|
No results found | Use when a search returns no results. |  |  |
No <items> defined | Use when no items have been defined, such as an empty user list. |  |  |
Empty notifications | Use when a user has no new notifications to review. |  | N/A |
No items selected | Use when a user has selected no items. |  |  |
Multiple items selected | Use when a user has selected multiple items. |  | TBD |
Waiting | Use when an action is in progress. |  | Discuss with Asaf |
Code
...