Empty States

Grace H Song
3 min readMay 17, 2016

--

Empty states occur when the user first opens a product, clears or removes data, or encounters an error. Although often designed last, empty states are rich with opportunities to engage with the user. Successfully designed empty states achieve three things:

  • Educate users
  • Delight users
  • Prompt for action

Educate users

Because they are often part of the initial product experience, it is important that empty states teach users how to use the product. Empty states provide an opportunity to onboard users by teaching them how the product works and describing the content that will fill the space.

Google uses starter content to get going quickly and demonstrate primary product features. Jobularity suggests content to help users learn what content would fill the space.

Delight users

A good first impression of a product is also in part about personality. An empty state can allow the user to enjoy their experience and have a bit of fun. This is a designer’s opportunity to stand out from the competition, express a sense of humor, and surprise and delight the user.

Gusto uses fun illustrations and copy to reward users for completing their to-do items. Workmates uses animations to create moments of delight when encountering empty states. Instead of feeling frustrated with these empty states, users feel entertained.

Prompt users for action

Educating and delighting users is important, but it is equally important that empty states prompt for action. The goal is to get users going and fill the space. Designers are tasked with the responsibility to teach, delight, and motivate the user to take the next step, and empty states present an opportunity to direct the user to take action.

Khaylo Workout directs users to tap on the + icon to get started. Droplets uses a clear call to action to prompt users to get started.

Using empty states at Practice Fusion

Crafting good empty states helps onboard users, teaches them how to use specific functions, guides them through workflows, and helps them feel excited about their success. We have many examples of empty states in our product: Tasks, Messaging, Schedule, Encounter, Labs, and more. By using empty states the design team has opportunities to improve our users’ first impressions of our product and help them be more successful.

--

--

Grace H Song

Senior Product Designer @ Atlassian, Illustrator, & Crafter