App Design and User Onboarding - The Bread and Butter of UX

Thursday, November 26, 2015 1:00 PM

Well designed onboarding and blank states are your app's built-in tech support mentor.

Well designed onboarding and blank states are your app's built-in tech support mentor.

Upon logging into a new app, you're usually met with some variation of a blank screen that usually (hopefully) includes a message/graphic detailing what will be there, and how to achieve that content creation.

So many processes go into app design, but as with all web-based development it is the more carefully planned details that can make or break user experience upon your app's first use. The process of user onboarding is absolutely crucial in transforming a new user from a tentative first-timer to a dedicated operator. Realizing the power of blank states is key to making this transformation, and truly developing an application with a top notch first impression to engage and inform new users from their first click.

An empty state is when a user sees that there is no data to display on the screen. There are three types of blank states, as follows:

  1. First Use - when you first sign up for an app, there is no data to display yet
  2. User Cleared Data - for example, when you have cleared all messages from your e-mail inbox
  3. Errors - any issue the app may encounter, most commonly a lack of internet connection

First Use

When someone first downloads or signs up for your app, they usually go into it knowing the basis of what your app does. What they don't know is how your app is going to accomplish this. Upon logging into a new app, you're usually met with some variation of a blank screen that usually (hopefully) includes a message/graphic detailing what will be there, and how to achieve that content creation. This empty state is the perfect opportunity to communicate the app's personality with aesthetically pleasing graphics and conversational language, while guiding the user via some gentle hand-holding.

A great example comes from social photo-sharer Snapchat. Upon initial log-in, if you have not added any friends yet, the app provides an impossible-to-miss 'Add Friends' button to go about doing so. They also tell you what will be here - shared stories from your friends. Alongside this button the user gets acquainted with Snapchat's signature ghost mascot and a bevy of woodland animals, communicating their young and fun brand image.

User Cleared Data

I had no idea what the app pictured below, called Buffer, did, but from this user-cleared empty state alone, I can tell it sends out updates of some sort from a queue. Being able to tell so much about an app's functionality from a blank screen is a sure sign that you're doing empty states right. It turns out Buffer is a social media management tool, who have mastered their user cleared data screen.

When a user has cleared all data from an app, the most unhelpful thing a developer can do is leave them with a blank screen. This always begs the user to question - do I not have new information... or was there an error? There needs to be a distinction to make it clear whether something is good, bad, wrong or right with the way someone is using the app. A simple 'No new messages' message in an inbox, or as seen below, 'Looks like we have sent all of your updates' (with the option to immediately compose more), both informs the user and guides them to their next step.

Errors

Having an in-app error every now and then is essentially unavoidable. How your UX reflects those errors, therefore, is crucial! The worst recent example is definitely Windows 10's 'Something happened' message that was widely shared and criticized on social media for being entirely unhelpful. An error message is an unfortunate reality, so making the most of it and telling users what went awry goes a long way.

Timehop does a fantastic job at conveying a connection error. Their little astronaut-awry graphic paired with text 'Time Travel Failed' and an option to retry is inviting, funny, and puts the user at east knowing what the issue is. There's no need to get into the nitty gritty of why an error occurred - the user only wants to know how to remedy it and move on. Remember: nothing in your app should be a dead end.

A poor or incomplete onboarding experience makes every part of your company have to work harder: marketing teams have to work to acquire more and more visitors to keep filling a 'leaky funnel', and sales/support teams have to tirelessly hand-hold and guide confused new users instead of scaling things out for the whole user base. Well designed onboarding and blank states are your app's built-in tech support mentor - cover all your bases and your users will be sailing smoothly in no time, ensuring continued use and a fabulous UX.

All photos from http://emptystat.es - a huge collection of successfully designed empty app states.

Bridget VanWart

Bridget VanWart

Bridget VanWart is Div1's newest addition, joining the team after graduating with a Bachelor of Business Administration from the University of New Brunswick. When she's not serving as Div1's client liaison and administrative assistant, she can be found Instagramming pretty things she stumbles upon around the city.

comments powered by Disqus