How to do well in empty state design? Look at this comprehensive summary

Editor's Guide ： Empty state is important to the user experience , But in fact it is often overlooked . Good empty state design can improve the product experience , Effective retention users . Understand the concept of empty states and how to use them , It can effectively improve the characteristics and value of products . The author of this article starts from what is empty state 、 What kind of it does it have 、 Why is it easy to be ignored 、 What are the advantages of empty state 、 How to design empty state , It gives us a detailed description .

In the process of product design , Designers have many opportunities to create pleasant and meaningful experiences , One of the often overlooked experiences is the empty state . Empty status refers to a time when the user cannot display an interface when using the product , That is, there are no other elements .

Take online shopping as an example , Think back to the common empty state situation ：

• Search for a product but not find it ;
• Unable to load or error status when viewing the product ;
• The state when there are no goods in the shopping cart ;
• The receiving address in the address management page is empty ;
• Status after order submission .

A good empty state lets the user know what is happening , What happened and what to do .

Here are two examples of positive empty state design ：

When starting the product for the first time ,Dropbox Paper It provides users with a good empty state design , The prompt button on the page can guide the user to complete the next operation .

When no results are found , The page provides useful reference information , And let users know what happened .

Here are some negative empty state designs ：

This empty status only indicates some feedback information , There is no clear guide for the user or tell the user how to operate .

In this empty state design , We only see a nearly blank page with a great illustration , But it does not provide any information or instructions , Nor can it guide the user to the next step .

One 、 Type of empty state

These are four common types of empty states ：

1、 For the first time to use ： When a new product has no content to display , For example, when you open a newly registered impression note ;
2、 Content is cleared ： After the user completes operations such as clearing messages or inboxes , A blank screen will appear ;
3、 There is an error ： When the product is offline due to network problems , The use of empty state will occur ;
4、 There is no result ： If the user searches , But this happens when the query content is empty .

Former director of Google Ankit Jain mention , Users may try many APP, But in the beginning 3-7 Decide to... Within days “ Stop using ” What applications .

For those with good experience APP, Most users keep 7 Days or more , So the key to success is to be first 3-7 Try to attract users within days .

Two 、 Advantages of designing empty states

Well thought out empty states can help increase product engagement , Make users satisfied and reduce wastage .

stay 《 What do users really need 》 In a Book , Scott, a famous enterprise management expert · McCann has put forward six guiding principles for designing personalized and excellent experience for users . He wrote , User wants ：

1、 A compelling experience
2、 Personal concerns
3、 Mutual loyalty
4、 different
5、 Coordinate
6、 innovation

The application of these principles to empty state design can improve product satisfaction , Bring benefits to the enterprise . The following three aspects can also benefit from good empty state design ：

1、 Getting started with users ： In addition to enhancing the user experience , It also provides an opportunity to build deep trust and continue using the product ;
2、 brand building ： Raise awareness , Improve the company image , Promote the development of the company and increase the brand value ;
3、 Individualization ： It can be interesting 、 serious 、 The lively , Create a sense of individuality and diversity .

Well designed empty states not only help provide a compelling experience , Let users participate more in the product and make people satisfied .

3、 ... and 、 The reason why empty state is ignored

What happens when an empty state is ignored ？

Blank pages without guidance can cause confusion 、 Uncertainty and disappointment , This can lead to higher abandonment rates and lower overall product satisfaction .

Since the well-designed empty state has obvious positive results , Why do they tend to be overlooked ：

First , Designers tend to focus on the more visible parts of the design , Usually, empty state is seldom considered , So it is often ignored ;

Second, only 2-5% Of users can encounter empty states , So they are not usually considered a priority ;

Last , People do not always have a good understanding of the occurrence of empty states and how to deal with them , So they're on the second line , Switch to more popular pages .

Four 、 How to design empty state purposefully

Through the following methods , It can ensure that the design of the empty screen is useful and effective , The feedback is rich and comprehensive .

1. Empathy

Increase surprise 、 Pleasure 、 Emotion and personality are the ways to create a better experience in the process of product design . For blank pages , Empathy increases diversity , And create a more attractive personalized experience .

2. imagery

Visualize a state that reduces stress and improves attention . for example ： Adding some landscape illustrations to the empty state background of the error page can bring a more pleasant user experience .

3. Useful guidance

According to the type of product , Empty states can be used to guide users . With a new account , Guide users to get started quickly , Thus reducing the chance of giving up .

4. Introduction content

For some products , Providing good introductory content helps them visualize what is happening and what they can do next .

5. Provide operation steps

Hick's law states that ,“ The time required to make a decision increases with the number and complexity of choices ”. When the operation requires to keep at most one or two , Users may act faster .

When people just touch Instagram This platform , They haven't followed anyone yet , A good empty state design can provide them with “ Add people to follow ” Options .

5、 ... and 、 Conclusion

stay UX It is easy to ignore empty state in design , Because they seldom appear , And sometimes it's not easy to understand . But we often underestimate the value of empty state design , Because it enhances the user experience , And help create more cohesive products .