Blank State

Problem summary

The user wants to get started using the application but needs guidance in the form of an example of how the application will look, feel and behave when in full function and filled with data.

Examples

No items found.

Solution

Comfort, guide, or encourage users when there is no content to show.

Although Blank Slates aren’t typical, they are important opportunities for good design to avoid user disappointment or confusion. Make sure users feel safe and know what to do next when they use your product for the first time or have cleared all content.

Give the user an impression of how the system will look once filled with data – or guide and encourage them to start filling it with data. You can present the user with several kinds of helpful information on a blank slate:

  1. Show a sample screenshot of how the page will look once filled up with content,
  2. insert quick tutorials and help texts,
  3. explain the best ways to get started,
  4. ask questions the first-time user will ask: What is this? What do I do now?, and
  5. set expectations to help reduce frustration, intimidation, and overall confusion.

Rationale

The blank slate is generally the first screen the user is presented with when they start something new in an application. It can the screen they are directed to after creating an account or the first screen they see when using part of an application they haven’t used before. The blank slate tells the user what the page they are on will look like, once it has eventually been filled with content. Creating a blank slate sets the user’s expectations for your service.

New users are often intimidated by empty screens with little or no guidance. Guiding users with a prepopulated starting state is the best way to establish trust and gain understanding.

Make sure the first impression the user gets of your web application is positive. Let them know why they should stick around.

Resources

Do you need to use this pattern in your project?

This  and others patterns are available and ready to use in this massive Wireframe Bundle. Suitable for a wide variety of projects: Website and landing pages, Ecommerce, Dashboard, Flowchart and iOS.

Huge Wireframe Library Collection

Ecommerce
iOS
Website
Dashboard
Flowchart
VIEW BUNDLE