Illustration & Inline Text work in tandem to communicate a state in a more friendly way.
- Visual: Pronounced
- Voice & Tone: Informational
- Motion: Static
- Duration: Permanent
- Audio: Soft (or Vibrate)
Illustration & inline text is used to show one of these states:
- Empty: when there is no record in the current page or there isn’t any item that needs attention.
- Informational: when system is under maintenance.
- Error: when a page is not found, user doesn’t have sufficient privilege, or other miscellaneous error (often related to inaccessible content).
Illustration & Inline Text in Context
Dos and Don’ts
- Do use illustrations to soften negative impacts on the user. When a user expects to see an item but finds out that they can’t, the experience leaves a negative impression on them—illustrations help reduce this.
- Do include actionable text to guide the user. For instance, if the user is seeing an empty list page, include a link in the accompanying text to create a new record.
- Do not use illustrations inside related lists or cards. For these, plain inline text is enough.
- Do not display more than one illustration component on a page. Illustrations should not be competing with each other for user attention.
- Do not use illustrations as feedback for direct CRUD actions. Look into toasts or popovers instead.
Variants - Component
Illustrations can either exist as a full page, in the main body, or in the sidebar.
Variants - State
In general, illustration & text show one of three states (empty, informative, or error), but the individual illustration & UI text will vary depending on the context. Below are some commonly used examples, but you are not limited to these variants.
Variants - Screen Size
- 300px max width
- 180px max height
- Smaller text
UI text can vary greatly case to case, depending on the context. The guidelines below serve as examples, but you are not limited to them.
|Empty||Collaborate with others||No updates here yet.|
|Informational||We are down for maintenance|
|Informational||You’re not connected to Google Drive|
|Error||Page not available|
|Error||You don’t have access to this page|
|Error||Page not available in Lightning Experience|
|Error||Data not available|
|Error||Walkthrough not available|
|Maximum image width||600px|
|Maximum image height||360px|
|Maximum image width||300px|
|Maximum image height||180px|