May 30 2011 by Marc Gayle |When I finished building my first web app (CompVersions, which allows you to collectfeedback from clients), I was surprised at the number of user interface decisions andconsiderations I hadn’t accounted for at the beginning of my journey. I’d like to share someof those things with you.Many of these design considerations might seem superficially obvious, but once you’regoing through the design and development process, it’s easy to forget about them becausethey’re like condiments — you hardly notice them when they’re there, but if they’remissing, your food just doesn’t taste right.
The blank state is how your app will look and function when the user hasn’t entered anydata yet (except perhaps their email address after signing up for an account). This is thefirst interaction and scenario that your user will encounter with your app and it can make or break their first experience and impression.This state is a critical time for retaining users, because, at this point, users haven’t hadenough invested into using the app for them to be discouraged to look for another solution.One way of dealing with the blank state is to use media to show the user how to use your interface, e.g., a video or a product tour with screenshots. For example, upon signing up for aFitbitaccount and logging in as an authenticated user for the first time, you’re presentedwith a slideshow of the different components of the app.
You can also provide your UI with cues, tips, and hints for first-time users, pointing outfeatures in-line. For example, below, you can see thatFreshBooksdisplays a message thattells you that you haven’t created any estimates yet, and then provides you with a link for creating one.For my web app, the first time you log in, you’ll see four boxes that are numberedsequentially. You can’t progress to the second box without completing the first one so thatthere’s no guessing and the user immediately knows what to do to get started. There’s alsoonly one textbox and button visible at the blank state, so there’s no ambiguity about whatthe next step should be. As users complete each step, the next box is unlocked for them, andthey can proceed.
Let’s look at a couple more examples of blank states. AtBasecamp, the first thing theyshow users is a video that gives you an overview of the way the web app works.Dropboxhas an interesting approach. They start you at a "Get Started" tab that has anumbered list of action items that steps you through what you need to do to get maximumvalue from using Dropbox.