10 Feb, 2022

The Most Overlook Aspect of UX and UI

Table of contents

Contributors

Denislav Jeliazkov
Founder @uilearn

Subscribe to our newsletter

Share

During a coaching session with a student last week I got reminded of the importance of using empty states to enhance the customer’s experience.

You have a lot of opportunities to create pleasurable and meaningful experiences. The most frustrating or scary places where you can do that are empty states, these are places where at first glance, there is nothing to display, but there is much more to it.

How can we prevent this?

We don’t consider these moments to provide great opportunities to improve the overall experience and amplify business opportunities.

A functional empty state will let the person using your product understand what and, most importantly, why a sure thing is happening.

 

4 Types of Empty States

First use – This occurs with a new product or service when there is still nothing to show.

User cleared – When a person completes an action such as clearing their inbox or task list, which results in an empty screen.

Error – Understandably, this happens when something goes wrong.

No result – If you perform a search and the query is empty or doesn’t match any data.

An empty state is a beneficial place that can meet both business and experience goals with proper usage.

Well-thought and functional empty states can help drive your engagement up and delight customers. This will highly decrease the chance of losing a customer to a competitor.

In the book, What Customers Really Want, the author lays out six general guiding principles of great customer experience:

  • A compelling experience
  • A personal focus
  • Reciprocal loyalty
  • Differentiation
  • Coordination
  • Innovation

 

There are three areas that designers neglect and can benefit a better empty state design:

  1. User onboarding – An opportunity to build trust and continued use of the product will elevate the overall user experience.
  2. Brand building – Generates awareness and promotes the company to build increased brand equity.
  3. Personalization – Can be playful, fun, serious, or dynamic in various states of use; creates a sense of a personal touch.

It’s tough to ignore the benefits of a well-designed empty state, they aren’t just a compelling part of the user experience but a way to keep customers happy and engaged.

But Denis, if there are such apparent positives to a well-designed empty state, why are they ignored in the first place?

To answer this, we need to understand that there are very few occurrences where this will happen compared to the total numbers of screens in your app or website, so this is why they are often neglected as they don’t see as a priority. We focus most of our time on the parts of the product that will be visible 99% of the time.

Empty states weren’t understood for the longest of times, where they occur and what to do with them, so they took a second row in favor of the more popular screens or pages.

However, if you disregard the empty state, you will end up with a blank screen with no clear guidance, leading to confusion, uncertainty, and disappointment.

How to fill an empty state with meaning?

Guidance – Depends on what is the type of your product. The empty state can be used to guide customers. Every project management application is a great example. When you log in for the first time, there are no projects yet in the product, so this is a great opportunity to help the user get started quickly, reducing the chance for abandonment.

Starter – There is more than one screen in your product that sits empty for long enough for people to get frustrated and just leave. If you provide good starter content will help them visualize what’s going on and what they can do next.

Action Step –  We don’t need to provide guidance or fill the screen with any content with some products because it wouldn’t make any sense. In these cases, designers could give an action step.

However, it’s best to keep actions to a minimum. Hick’s Law states that “the time it takes to make a decision increases with the number and complexity of choices.” which means that customers will likely be quicker to act when calls to action are kept to one or two at most.

Imagery – There is a design principle called the biophilia effect. This is a state of reduced stress and improved concentration that results from nature views.

Adding some scenic imagery (the background of an empty state error screen, for example) can result in a more pleasurable user experience.

Empathy – Adding surprise and delight, emotion, and personality are all the ways that we use to create better experiences in even the darkest corners of a product. For empty screens, empathic messaging adds variety and creates a more engaging, personalized experience.

It’s easy to overlook these screens in design because they occur very infrequently and aren’t always understood properly. Their inclusion benefits are understated because they enhance the user experience and help create a more cohesive product.

Lastest blog posts

Top 3 Mistakes holding you back from becoming a great product designer