Average rating is 83% positive
83.33
12 votes
This pattern was helpful This pattern is useless

Blank Slate

Problem summary

The user needs to get started and get a feel of how the application will feel when fully in function and filled with data

Example

Example image showing 'Blank Slate'

Usage

  • Use when your application feels without life and empty before the user has started to enter data into the system.
  • Use when you want to motivate the user to start using the system.
  • Use when you want to aid the user in getting started with your web application.
  • Use when you want to show best practices of using your web application.
  • Use when you want to guide the user to get a good start with your web application.

Solution

Give an impression to the user, how the system will look once filled with data – or guide him or her to start filling it with data. You can put 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.

(Source: Getting Real by 37signals)

Rationale

The blank slate is the first screen the user is presented to when they do something new. It can be where they end up right after creating an account or start using a part of your application they haven’t used before. The blank slate tells the user how 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.

When designers create web applications, they work and play around with it with a multitude of data, why everything looks great. As designers design web pages, they always want to see how it works when there is really going something on. Everything should be tested! This is however on the expense of how the web application looks when it is not filled with data. From scratch.

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

More examples images of the Blank Slate pattern

Blank slate at basecamphq.com. Blank Slate at digg.com. When you have just created an account with Vimeo, a list of things to do to get started is listed. Once the user completes one of these "achievements", the list item is checked off.
Blank slate at basecamphq.com. Blank Slate at digg.com. When you have just created an account with Vimeo, a list of things to do to get started is listed. Once the user completes one of these "achievements", the list item is checked off.
This pattern was last updated on February 07, 2008

Post a comment

Required
Required
Will not be published
simple_captcha.jpg
Required
Type the code from the image