User Experience: Seven Empty State Best Practices for UX Design

Similar to a map, empty states -- instructional direction on a web page or in software -- guide the user on a journey through your website or software. Imagine trying to plan a road trip to a place you’ve never been while using a map that is missing big pieces of information. Empty states are the screens that fill in those blanks. With thoughtful design and placement, these screens can make the difference between a happy user and a frustrated one who abandons your site midway through.

According to IBM, every dollar invested in ease of use returns $10 to $100, states Megan Hartman, apprentice at UXbeginner. This ROI is just one reason to spend more time deciding which ecommerce platform is right for your business and clients. The user experience (UX) is becoming increasingly important for customer satisfaction, engagement, acquisition, and retention. Depending on how user-friendly your platform or products are, UX can make or break your client list. 

Empty states are an important concept for those who support local businesses in moving to ecommerce and digital solutions. A great user experience is synonymous with a great first impression; it’s integral to the relationship between a local business and a trusted local expert. Well-designed empty states ensure that your solutions and business website look professional. This helps to give prospective customers a positive first impression of your business, spurring trust and confidence in your ability to guide them.

Appropriate use of empty states can help you retain more clients by providing a smooth user experience. 

“Without empty states, the user doesn’t know what to do next and they can easily get lost in software or on a website. When they don’t know what to do, they will likely drop off your website and go to a different one. Empty states mitigate that drop off and allow the user to continue on the journey you’re hoping they will take,” says Loni Goff, designer, Vendasta.

This design element can have a critical impact on how a user interacts with your site. In recognizing the importance of the user experience, Vendasta UX designers are continuously adding more empty states at critical points throughout the end-to-end ecommerce platform. Social media platforms like Facebook and Snapchat use empty state screens to prompt adding “friends” to your social network. Prompts promote customer satisfaction and retention because they keep users active and engaged.

Empty states and the user experience

Empty states help users achieve their goals within the software or on a website. They can include directing new users to templates that will help them get started with the software they are using. Empty states can occur when there is an error, an incorrect URL is searched, or an old URL is used.

They can be used to collect marketing intelligence by requiring a form to be filled out before the next page populates. Companies like Hubspot use this form-fill empty state when users want to access certain content. 

These screens are used to increase engagement, prompting users to participate in the next step the designer wants them to take. They can also be used as an explanation for why something on a website isn’t responding. Yelp uses an empty state screen that has a construction visual cleverly paired with funny text that adds humor to a frustrating circumstance.

Empty state best practices

1. Guide the user experience

Take this opportunity to relay information to the user. This can include the next step they should take, a warning of a broken link, or anything to prevent a poor user experience. This guided interaction with the user can really influence their ultimate decision on whether to stay on a website. 

See the below example from Skyscanner.

Image source

2. Choose your words carefully

Phrasing the right message is extremely important in empty state software. The message should be clear so that it isn’t easily misinterpreted. The written explanation should help the user understand what they need to do next. This could be anything from creating a profile to adding other users to a network. This written guide should be concise so that the user can easily take the next appropriate step.

3. Use visual content

Engage with the user beyond just words with some well-designed visual content. This branding opportunity should include an image that matches the text. Make sure the creative is not too flashy or large and that it is a visual representation of the text in the empty state. The addition of an image makes the empty state appear more professional and appealing.

4. Include a button

Buttons are a clear prompt to guide the user to where the designer wants to take them. This engineered experience can take users anywhere on the site. It can direct them to add contacts to a client list or add a social platform to software such as in the Vendasta Snapshot Report. This report is an automated sales intelligence tool that pulls a marketing needs assessment for prospects from their available information online. 

See the progression of the below Dropbox empty state including thoughtful text, a matching image, and a button.

Image source

5. Prompt the user to click somewhere on the page 

This could be helpful when the user is just getting started on your website or within the software. Include a short description and arrows pointing to a few of the important buttons located on the screen.

Image source

6. Backlink to content

Add a backlink into an empty state that links to a piece of topical content. This best practice is a good one to follow if a content library is readily available on the website -- anything giving information about your website that might be helpful to a user. This could include a link to a demo, high-level blog, or informational how-to article.

 7. Ensure designers and developers have a good working relationship

In the case where an empty state addresses a technical issue, such as the classic “Error 404”, this generally means there is a huge disconnect in the communication between developers and designers. These unhelpful messages likely haven’t been vetted by a designer and confuse the user experience.

The Takeaway

Empty states:

  • Increase customer acquisition
  • Increase customer retention
  • Reduce website bounce rates
  • Increase customer engagement

Not only are empty states a road map within websites and software, they also tell the user the benefit of following the next steps. 

Tools like the Snapshot Report use empty states to help you increase customer acquisition by assessing prospect's digital marketing needs. For example, you’ll be able to see their performance in listings, reviews, social media, websites, digital advertising, SEO, and ecommerce, and empty states will prompt the next steps.

About the Author

Emily is a Content Marketing Specialist at Vendasta. Over her career, Emily has worked as a Marketing Strategist, freelanced as a Social Media manager, and enjoyed working events for local and national not-for-profit agencies. When she's not researching her next blog topics you can bet she's challenging a friend to a card game or planning a hike in the wilderness.

Pin It on Pinterest

Share This