Empty states are messages that appear whenever an element has no content to display to the user.
Example
Usage
Make sure the message, call to action, and illustration work together. Don’t reserve fun for illustrations—convey it through writing too. And if an image changes, work with any writers involved to keep image and text in sync.
Rules
An empty state serves as a way to communicate to users that the view is empty and without content. It should tell them the purpose, why they are seeing it, and suggesting potential next steps.
Examples
Button colors should match their intended meaning, indicating the action they perform. However, it's crucial to remember that color perception isn't universal, as different individuals may have varied associations and interpretations of specific colors.
Microcopy guidelines
Keep message global
Say what is happening and what can be done about it. Do not use 'Your'. Be general. Example: Use 'There are no goals created yet' insdtead of 'You have no goals created yet'.
Ensure that body text is concise yet informative, effectively communicating the ongoing situation to the user while maintaining a consistent tone.
Learn more about microcopy
Read our articles on best practice for writing text for UI and learning more about our language.