Empty states: how to exploit small drawbacks to improve the user experience

Empty states occur when the content of a view cannot be shown. A list that does not contain any elements or a search that does not display any results, are examples of empty states. Although these states are not typical, they must be designed to avoid confusing users and to help them.

Normally we design an interface in which the whole layout seems to us well organized and pleasant. An empty state is the thing we usually design last, if we do it. In reality, empty states have great potential: even if they are intended to be only a temporary part of the project, they have a lot of value in communication and user involvement.

Users come across empty states mainly at first use, when launching the app, or in the presence of errors (so only in some cases). The empty states at first use provide an explanation on what kind of content there will be, an orientation to the user, an explanation of the actions that must be done for a certain view to appear.

The purpose of an empty state is to indicate the exact actions to be taken to allow the application to function as expected. So they are extremely effective, especially when you come across a problem that needs to be solved.

An empty state meets various requirements:

  • Helps in particular situations
  • Involves and retains
  • Pushes you to perform an action

The main goal is to teach you how to use your app and help you feel comfortable. You must find the right balance between friendliness and helpfulness. Especially when you show mistakes, you need to clearly explain why it occurred and how you can fix it. A pleasant app is not only a question of usability, it also involves the look and feel. Apps should not only be functional, reliable and usable, they should also be empathetic. Introducing elements of the brand, showing a sense of humour with positive emotions, greatly personalize your app and your product.

Spending design time on empty states makes your application enjoyable to use and emotional. Explain its benefits so that users know why they should use it.

Keep your views visually simple: concise copies, icons or clear illustrations and a button is usually more than enough for the purpose. If the empty state was triggered by a positive user action, press it with a positive message. Conversely, if the empty state is due to a user error, it is very important to explain in a simple way how to solve the problem.

Empty states are equally significant components in the design of a harmonious UX. User interfaces require a delicate balance of information and action, so empty states must be given a lot of attention.