Redirecting Dead-ends in App Development and Beyond

Onboarding, or getting new users familiar with your application, is one of the most critical steps to an app’s success or failure. A confusing or boring onboarding process can alienate users before they even start. Therefore, a key part of the development of new apps needs to be designing an engaging onboarding process.

Understanding Onboarding

Successful onboarding has many factors. It generally follows an 80/20 rule. That is, it should quickly and effectively explain the small subset of popular features that users will spend 80 percent of their time using. Onboarding can take several forms, include:

• Introductory videos or tutorial slides
• Basic tips for using the program
• A tour of the application
• Samples of content
• Explanation of user interface elements

A successful onboarding program can use one of the formats listed above, or merge two or more into a hybrid process.

Embrace the Emptiness

One key facet of the onboarding process is overlooked more than any other—empty states. Empty states are what the user sees on the screen when there is no information to display. There is no information in an empty state because the user only just began using the app, he or she deleted the information, or there was an error.

Because an empty state is one of the first things new users will see when starting an app, it is important to design a useful, pleasing empty state screen. Different applications have various ways of making empty states helpful to users. For instance, Google’s Gmail application sends new users more information about the app as a series of emails. This means that users never face a truly “empty” empty state.

Process Street’s empty data page invites users to create their first template. This is a simple technique used by many applications on their empty states for new users—giving users a simple option to create data when there is none.

Error pages also are empty states, because they show up when a user’s request returns no information. Many companies make the mistake of having a very boring and unhelpful error page. Eventbrite uses a simple cartoon of a surprised cactus and an invitation for users to try searching a different area. An error page that is amusing and helpful prevents the error from discouraging users.

Filling the Emptiness

Now that we know what an empty state is good for, how do we create one? There is a simple formula to remember when trying to create a good empty state page—it should answer “what,” “why,” and “how”:

• What is the empty page for?
• Why is the user seeing the empty page?
• How can the user fill the empty state?

Empty states that answer these questions will engage or re-engage users with your app.

Answering “what” is very easy. Simply title the page according to what it is—your documents, user profiles, art projects, etc. However, telling a user what an empty page is for is nice, but not telling them anything else isn’t helpful.

You can answer “why” with a simple message on the page, informing users that they haven’t created anything yet.

If an empty state answers only “what” and “why,” it can frustrate users, because it tells them what is wrong but not how to fix it. Telling users “how” to fill an empty state is the last, and arguably most important, question a helpful empty page needs to answer. The answer is a simple call to action, a button on the page that says, “Start here.” Once an empty state answers these three questions, users will find it helpful.

Empty states are one of the most important pages in an application in regard to onboarding new users and retaining old ones. An application with an empty state that fails to answer “what,” “why,” and “how” is not helpful. It may even drive users away. Many application developers underestimate the importance of these pages, but now you know why they shouldn’t.

This article has been brought to you in part by the SAP HANA cloud platform. Please visit the SAP HANA cloud platform to find the latest in software and services to power your business.

photo credit: Budgets Hero Image via photopin (license)