General guidelines
Empty states can occur when:

  • Data is deleted, unavailable, or nonexistent.

  • A user is setting up or using the product for the first time.
Structure
1
Image: A spot illustration that relates to the message literally or as a metaphor.
2
Title: Provides a concise description of the current state.
3
Message: Describes the reason for the state and what to do next.
4
Button: Next steps or a way to dismiss the message.
DO
  • Use basic empty states for simpler situations, or secondary features, where bite-sized pieces of information are preferable.
  • Keep words to a minimum so they are fast to read and act upon.
  • Consider a text link to provide additional information if a button cannot resolve the empty state.
DON'T
  • Don't use product-specific terms that the user may not yet understand.
  • Don't include content that is about other areas of the app. Be contextual.
  • As a general rule, don't lead the user into a dead end. If there are useful next steps, include them.