Back to all posts

The Role Of Empty States In User Onboarding

The first set of screens with which users interact, set the expectations of the app. To make sure your users don’t delete your app after the first use, you should teach them how to complete key tasks and make them want to come back for more. In other words, you need to successfully onboard and engage your users during those first interactions.

The onboarding process is a critical step in setting up your users for success with your product. You only get one chance to make a first impression. In this article, we’ll provide some tips on how to approach onboarding using a simple pattern called “empty states.” 

What Is An Empty State? 

Content is what provides value for most apps. Whether it’s a news feed, a to-do app, or system dashboard, it’s why people use apps – for the content. This is why it’s critical to consider how we design empty states; those moments in a user’s journey where an app might not have content for a user yet.

An app screen whose default state is empty and requires users to go through one or more steps to populate it with data, is perfectly suited to onboarding. Besides informing the user about what content to expect on the page, empty states also teach people how to use your app. Even if the onboarding process consists of just one step, the guidance will reassure users that they are doing the right thing.

5
The empty state in Expensify6 app reassures users by telling them how to get started.

The Value Of An Empty State During Onboarding

Consider a “first-use” empty state as part of a cohesive onboarding experience. You should utilize the empty state screen to educate and engage your users. Use this screen as an opportunity to turn a moment of nothing into something.

Educate Users

First and foremost, the empty state screen should help users understand the context. Setting expectations for what’ll happen makes users get comfortable. The best way to deliver this information is a show-or-tell format: show the user what the screen will look like when it’s filled with content or tell them with a clear instructions.

Prompt to Action

Most empty states will tell you what they are for and why you’re seeing them. But, effective empty states will take this even further and tell you what you can do next. Educating your users is important, but true success in your first empty state means driving an action. Think of this empty state as a starting point and design it to encourage user activity.

Create a Pleasurable User Experience

While your app should be functional (it should solve a problem for your users) and usable (it should be easy to learn and easy to use), it should also be pleasurable. Empty states are an excellent opportunity to make a human connection with your users and get across the personality of your app.

How To Design An Ideal Blank State

Despite the fact that empty states can engage users, they’re often overlooked during design and development. This happens because we normally design for a populated interface where everything in the layout looks well arranged. However, how should we design our page when the content is pending user action? Empty state design is actually an amazing opportunity for creativity and usability.

Avoid Dead-Ends

The absolute worst thing you can do with an empty state is to drop your users into a dead-end. Dead-ends create confusion and lead to additional and unnecessary taps. Consider the difference between the following two examples from Modspot’s Posts screens. The first image is Modspot’s current screen for first-time users; a useful and smartly crafted empty state reduces friction by guiding users along to an action that will get them started.

7
Modspot’s view effectively leverages the empty state to guide users.

The second image is a fake version of the same screen that I’ve created to demonstrate an ineffective empty state that provides no guidance, no examples – only a dead end.

8
A dead-end version of the same screen clearly demonstrates why it’s critical to completely avoid empty states.

Keep Empty States Visually Simple

The beauty of a great empty state design is its simplicity. You should use a minimalist design approach in order to bring the most important content to the forefront and minimize distractions. Thus, only include well-written and easily scannable copy (clear, brief descriptions or easy-to-follow instructions) and wrap it together with good visuals.

9
Dropbox10 for iOS

Make Empty States Intuitive

Don’t forget that empty states aren’t only about visual aesthetics. They should also help users understand the context. Even if it’s meant to be just a temporary onboarding step, you should maximize its communication value for users and provide directions on how to change an empty state to an active one.

Let’s take an empty state screen from Google Photos as an example. Visually it looks great: a well-composed layout with beautiful graphics. However, this empty state simply doesn’t help users understand the context, and doesn’t provide an answer on following questions:

  • What is a collection?
  • How can I get one?
11
Google Photos12 for iOS.

Let Personality Shine

A good first impression isn’t just about usability, it’s also about personality. Personality is what makes your app memorable and pleasurable to use. It may not seem like much, but if your first empty state looks a bit different from similar products, your users will notice and expect the entire product experience to be different, as well. For example, below you can see how Khaylo Workout uses its empty states to convey personality and tone.

13
Khaylo Workout14 for iOS.

Encourage Users to Act

Your primary goal is to persuade your users to do something as soon as possible so that the screen won’t be empty. To prompt action on an empty state don’t just show users the benefit they will receive when they interact with your app, but direct them to the desired action as well.

Let’s examine the install screen of Facebook Messenger. When users arrive at this screen, they are met with encouragement – the screen lets users know the benefits of the product (a user can take pictures or record video using Messenger) and tells them how many of their Facebook friends are already using the app. The ‘Install’ button guides users onto the next step necessary to clear up the empty state. Users simply have no other option than to touch install.

15
Facebook for iOS16

If Possible, Provide Content That’s Personalized

When you personalize your app for users, you show off the value of your product even faster. The main goal of personalization is to deliver content that matches specific user needs or interests, with no effort from the targeted users. The app profiles the user and adjusts the interface – fill empty states – according to that profile.

Consider providing starter content that will allow users to explore your app right away. For example, a book reading app might provide all users with a few books based on information about a user.

17
Image credits: Material Design18

Bake Emotion Into the UI

Empty states can help you show the human side of your business or product. Positive emotional stimuli can build a sense of engagement with your users. What kind of feeling your empty state conveys, depends on the purpose of your app. An example below shows the emotional side of empty state in Google Hangouts and how it can incentivize users to get invites on Hangouts.

19
Google Hangouts20 for Android. (Large preview21)

Of course, showing emotion in design like in the example above is risky – some people don’t get it, and some people may even hate it. But, that’s OK, since emotional response to your design is much better than indifference.

Introduce Success States

The moment a first-time user completes an important task is a great opportunity for you to create a positive emotional connection between them and your product. Let your users know that they are doing great by acknowledging their progress and celebrate success with the user.

Success state is an amazing opportunity to congratulate users on a job well done and prompt them toward new interactions. For example, clearing a task list is certainly a positive achievement for Writeupp users. It’s great that the app offers a congratulatory, “Well done!” as a positive reinforcement. This success state delights users and offers next steps to keep them engaged.

22
WriteUpp23 for iOS

Dig In Deeper

The following resources can help you find user onboarding and user interface inspiration:

  • Useronboard2624 is a great resource for exploring existing onboarding experiences and reading detailed teardowns.
25
Credits: Useronboard2624 (Large preview27)
  • Uxarchive28 is another great resource that contains breakdowns of onboarding in many popular apps.
  • Ui-patterns3129 has a collection of web-app user onboarding & user interface.
30
Credits: Ui-patterns3129 (Large preview32)
  • Emptystat.es33 is a collection of empty state screenshots that has been taking user submissions since 2013. A majority of screenshots for this article were taken from this resource.

Conclusion

Your empty state should never feel empty. Don’t let the user face a blank screen the first time they open an app. Invest in empty states because they aren’t a temporary or minor part of the user experience. In fact, they are just as important as other design components and full of potential to drive engagement and delight users when they have just signed up.

Footnotes Link

  1. 1 https://adobe.ly/2jwvPi
  2. 2 https://www.smashingmagazine.com/2016/10/in-app-gestures-and-mobile-app-user-experienc/
  3. 3 https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicator/
  4. 4 https://www.smashingmagazine.com/2016/10/designing-card-based-user-interface/
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/12/1-preview-opt.pn
  6. 6 https://itunes.apple.com/en/app/expensify-expense-reports/id471713959?mt=8
  7. id="#7">7 https://www.smashingmagazine.com/wp-content/uploads/2016/12/2-preview-opt.pn
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/12/3-preview-opt.pn
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/01/4-preview-opt-1.pn
  10. 10 https://itunes.apple.com/en/app/dropbox/id327630330?mt=8
  11. id="#11">11 https://www.smashingmagazine.com/wp-content/uploads/2017/01/5-preview-opt-2.pn
  12. 12 https://itunes.apple.com/us/app/google-photos-free-photo-video/id962194608?mt=8
  13. id="#13">13 https://www.smashingmagazine.com/wp-content/uploads/2017/01/7-preview-opt.pn
  14. 14 https://itunes.apple.com/us/app/khaylo-workout/id940269385?mt=8
  15. id="#15">15 https://www.smashingmagazine.com/wp-content/uploads/2017/01/6-preview-opt-2.pn
  16. 16 https://itunes.apple.com/us/app/facebook/id284882215?mt=8
  17. id="#17">17 https://www.smashingmagazine.com/wp-content/uploads/2017/01/8-preview-opt-1.pn
  18. 18 https://material.io/guidelines/patterns/empty-states.html#empty-states-avoiding-completely-empty-state
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/01/9-large-opt.pn
  20. 20 https://play.google.com/store/apps/details?id=com.google.android.talk&hl=en
  21. id="#21">21 https://www.smashingmagazine.com/wp-content/uploads/2017/01/9-large-opt.pn
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/01/10-preview-opt-2.pn
  23. 23 https://itunes.apple.com/us/app/writeupp/id989857344?mt=8
  24. id="#24">24 http://www.useronboard.co
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/01/11-large-opt.pn
  26. 26 http://www.useronboard.co
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/01/11-large-opt.pn
  28. 28 http://uxarchive.com/tasks/onboardin
  29. 29 http://ui-patterns.com/patterns/BlankSlate/example
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-large-opt-2.pn
  31. 31 http://ui-patterns.com/patterns/BlankSlate/example
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-large-opt-2.pn
  33. 33 http://emptystat.e/
  34. 34 https://adobe.ly/2jwvPi
  35. 35 http://adobe.ly/1U9LS0
  36. 36 https://adobe.ly/2jwvPi

 

 

This article was originally posted at:
https://www.smashingmagazine.com/2017/02/user-onboarding-empty-states-mobile-apps/

Can we take you from stuck to unstuck?

We'd love to hear from you

Call to action (CTA)

A call to action is a marketing term that refers to a prompt that invokes a response leading to a sale. When referring to a call to action (CTA) in the digital design world we usually mean the interactive element that leads to the next step in the experience - something that needs to be clicked or tapped.

User testing

User testing refers to a technique used in the design process to evaluate a product, feature or prototype with real users. There are several reasons why you might want to undergo usability testing, the most common is that it allows the design team to identify friction in a user experience they are designing, so that it can be addressed before being built or deployed.

WYSIWYG

WYSIWYG (pronounced WIZ-ee-wig) is an acronym for "What You See Is What You Get". It helps identify an an interface that allows user input resulting in an output that is rendered in a similar way. For example; a word processor application interface might resemble a piece of paper,so when printed the user can see how the output will appear.

Content Management System

A content management system (CMS) is an tool that allows a website editor/administrator to manage the content that is displayed. Websites are made of HTML and CSS to create pages. Pages can be hard-coded but would require technical development skills to make changes. A CMS usually allows a person without coding knowledge to amend existing and add new content to a website using a WYSIWYG interface.

Responsive Web Design

Responsive web design refers to a web page that dynamically adapts its layout to fit the size and orientation of the device on which it is viewed. A responsive design allows for a more optimised user experience across desktop and laptop computers as well as smartphones and tablets of varying sizes.

User Stories

User stories allow the functionality of a product or service to be expressed as written descriptions of an experience as seen from the users perspective. The writing of user stories creates a list of design and development tasks to complete in order to create any required functionality.

User Interface

A user interface (UI) is a conduit between human and computer interaction - the space where a user will interact with a computer or machine to complete tasks. The purpose of a UI is to enable a user to effectively control a computer or machine they are interacting with, and for feedback to be received in order to communicate effective completion of tasks.

Personas

A persona in UX Design is the characterisation of a user who represents a segment of your target audience. On a project you might create any number of personas to be representative of a range of user needs and desires. The solutions you design must answer these needs in order to deliver value to your target audience.

Card sorting

A great, reliable, inexpensive method for discovering patterns in how users would expect to find content or functionality. Card sorting is used to test the taxonomy of data with a group of subjects, usually to help inform the creation of the information architecture, user flow, or menu structure on a project.

Brainstorming

A technique used to generate ideas around a specific topic. Often done in groups, but can be done individuals. The process usually involves writing down all ideas around a topic onto paper, a whiteboard or stickies often implying some kind of association.

Minimum Viable Product

An MVP is a product that has the minimum set of features to prove the most essential hypothesis for a product. Businesses building a new product can create a Minimum Viable Product to prove that an idea is viable and warrants further investment. A further benefit being that the next stage of development can be informed by feedback obtained from testing that MVP.

Sitemap

A sitemap is a diagrammatic representation of a hierarchical system. It usually depicts the parent-sibling relationship between pages in a website, showing how sub pages might be arranged underneath their parent groupings. This arrangement forms a map of the site.

User journey

A user journey represents a sequence of events or experiences a user might encounter while using a product or service. A user journey can be mapped or designed to show the steps and choices presented as interactions, and the resulting actions.

Prototype

A prototype is draft representation built to test ideas for layout, behaviour and flow in a system. Prototypes are an indispensable tool for resolving a large number of potential issues in a concept or business before too many resources are deployed to put a design into production.

Wireframes

A Wireframe is a visual schematic that conveys a basic level of communication, structure and behaviour during the design of a system. Wireframes are low-fidelity designs that bypass including a detailed user interface or visual design, conveying just enough to get across the core idea.

Usability

To say something is usable is a qualitative statement about how easy that thing is to use. Usability is an assessment of how learnable a system is and how easy a user finds it to use. The usability of a system or product is a key factor in determining whether the user experience is a good one.

Information Architecture

Information architecture is the design and organisation of content, pages and data into a structure that aids users understanding of a system. A more organised system enables users to more easily find the information they require and complete the intended tasks.

UI Design

User Interface Design is the discipline of designing software interfaces for devices, ideally with a focus on maximising efficiency, responsiveness and aesthetics to foster a good user experience.

UX Design

The practice of User Experience (UX) Design is the coming together of many specific design related disciplines to improve the usability, responsiveness, uptake and aesthetics of a product or service.

User Experience

A general term that covers all aspects of a user's participation while engaging with something that has been designed. Usually when talking about User Experience in the digital design field it refers to the interactions, reactions, emotions and perceptions while using an app, service, website or product.