Blank Slate Design pattern

Problem summary

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

Example

BlankSlate

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 example images of the 'Blank Slate' pattern

  • BlankSlate

    Blank slate at basecamphq.com.

  • BlankSlate

    Blank Slate at digg.com.

  • BlankSlate

    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.

  • beanstalkapp.com

    Blank slate at beanstalkapp.com

Be the first to comment!

Post a comment

Required. Real name or initials only.
Required. Will not be published.
Vote down Vote up
Out of 61 votes, 90.16% like this one.