1. Message

Include a clear and simple message. The empty state messaging and context of the page should communicate why there is no content.¹ Empty states always contain a header or text, sometimes both. If it’s the user’s job to take an action in order to populate content, the text should instruct the user what to do next. When a situation doesn’t have an actionable next step, use a header to communicate the state. Use a header and text together when more detail and clarity is needed.

2. Sentence Case

Use sentence case and punctuation, when necessary. Headers never have punctuation. Text has punctuation when following a header or when the message contains a comma. Follow sentence case for both headers and text. Only use title case for proper nouns, referring to other items on the page, or for acronyms. Put quotations around words that refer to buttons or links on the page.²

3. Icons

Use icons to support the messaging. For data visualizations, icons help communicate what chart will be displayed once data is populated. In other areas, icons can help direct users to an element on the page. Before including an icon, consider how many other empty states on the page may have icons and if including will help communicate necessary information, more effectively, to the user. Icons should appear above messaging.³

4. Educate

Educate and prevent confusion. A great empty state message is designed to prevent confusion and teach the user about that area of the application.⁵ Empty states can be used during onboarding, to prompt action, or to communicate when content will be available.⁶