The document appears to be a presentation about designing effective onboarding experiences for first-time users. It discusses several design principles for onboarding, including presenting a clear value proposition, minimizing login/account creation, providing a simple setup process, avoiding blank slates, allowing users to immediately do something with results, importing existing user data, and orienting users with minimal demonstrations. Examples of onboarding experiences from various apps and websites are also presented.
First Impressions Matter: Onboarding for First Time Users
1. Lisa Battle
President and Principal Consultant
lisa@designforcontext.com
@design4context
First Impressions Matter:
Onboarding for
First Time Users
UXPA 2016 Conference • 1 June 2016
7. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
First-time
novice user
Engaged, active,
repeat user
9. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
Examples
SaaS Web Application
Zurb Verify
Tablet App
Evernote
Mobile App
Delectable
Digital Pen
Adobe Ink and
Slide
30. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66 30
OTHER SAAS APPLICATIONS AND ONLINE
SERVICES
Cross-channel
experiences
31. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66 31
OTHER SAAS APPLICATIONS AND ONLINE
SERVICES
32. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66 32
ENTERPRISE APPLICATIONS
Single sign on.
33. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
Minimize login
and account
creation.
2
34. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
Provide a
simple, smart
process for
setup.
3
56. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66 56
OTHER SAAS OR ONLINE SERVICES
No forwards found. No orders found.
57. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66 57
OTHER SAAS OR ENTERPRISE
APPLICATIONS
59. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
Allow the user to
immediately do
something that gets
results.
5
76. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
Allow the user to
immediately do
something that gets
results.
5
77. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
Import the user’s
existing data from
other sources.
6
84. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66 85
OTHER SAAS APPLICATIONS
APP A APP B
Launch App B
85. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
Import the user’s
existing data from
other sources.
6
86. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
Orient the
user via minimalist,
built-in
demonstrations.
7
93. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66 95
OTHER SAAS AND ENTERPRISE APPS
94. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
Orient the
user via minimalist,
built-in demonstrations.
7
105. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66 107
OTHER SAAS AND ENTERPRISE APPS
106. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66 108
OTHER SAAS AND ENTERPRISE APPS
107. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66 109
OTHER SAAS AND ENTERPRISE APPS
108. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
Instruct at the
point of use.8
109. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
Ask to use the
photos, contacts, &
notifications when
the user sees a
clear benefit.
9
118. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
Ask to use the
photos, contacts, &
notifications when
the user sees a
clear benefit.
9
119. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
Provide
preferences and
controls users can
set as they gain
experience.
10
130. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
OTHER SAAS AND ENTERPRISE
APPLICATIONS
131. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
OTHER SAAS AND ENTERPRISE
APPLICATIONS
132. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
Provide preferences
and controls users
can set as they gain
experience.
10
133. @design4context First Impressions Matter UXPA 2016http://www.uxpa2016.org/sessionsurvey?sessionid=66
Present a clear value proposition.
Minimize login and account creation.
Provide a simple, smart process for setup.
Avoid the blank slate.
Allow user to immediately do something that gets results.
Import the user’s existing data from other sources.
Orient the user via minimalist, built-in demonstrations.
Instruct at the point of use.
Ask to use the photos, location, contacts, & notifications when the user
sees a clear benefit.
Provide preferences and controls that users can set as they gain
experience.
10
1
2
3
4
5
6
7
8
9
134. Lisa Battle
President and Principal Consultant
lisa@designforcontext.com
@design4context
First Impressions Matter:
Onboarding for
First Time Users
UXPA 2016 Conference • 1 June 2016
Presentation is on Slideshare – Go to www.designforcontext.com/publications
http://www.uxpa2016.org/sessionsurvey?sessionid=66
Notes de l'éditeur
I’m Lisa Battle, president and principal consultant at Design for Context, a UX consultancy based in Washington, DC.
We’re going to talk about first impressions. You know what they say, you never get a second chance to make a first impression. Whether you are designing or evaluating a product, you should try to find out what kind of first impression it is making.
Many SaaS products offer free trials, giving users a chance to use the product for a short period. This means the first impression becomes a critical factor in the purchasing decision.
Mobile apps don’t have free trial per se, but there may be a free version and a paid version, so users try out the free one before deciding to invest.
I have seen some statistics on the internet (don’t quote me-- I’m not sure whether they are reliable) showing that although first time user experience is critical to product success, it’s not being given the attention it deserves. For example, this article from Intercom claims that 40-60% of users who sign up for a free trial use it once and never come back.
This article in Digital Trends says that most people will try out a mobile app only once or twice before eventually deleting it.
The user’s first impressions are formed during the onboarding period when they begin to interact with the product.
During onboarding, users must immediately recognize what they can do, how they can do it, and why it benefits them. Their novice questions have to be answered.
Our goal as UX designers is to make onboarding as quick and painless as possible, to help a first-time user make the transition from novice to an engaged, active and repeat user. I
I think there are some design principles for what makes the onboarding experience successful, and I think they apply whether you’re designing SaaS applications, mobile apps, wearables, or another type of digital device. These principles are based on my team’s experience as UX consultants working with clients to improve the onboarding experiences for their products. I’m intrigued by how often clients come to us because they’re concerned about first time user experience. It’s the issue that finally prompts them to look for help. In the interests of having simple, easy to understand examples, I’ve pulled examples of several types of commercial products that I think we can all relate to
SAAS application – Zurb verify, an application for creating mini surveys to get user feedback
Tablet app - Evernote
Mobile app – Delectable
Digital pen – Adobe ink and slide
I will also throw in some stories and examples of problems we solved for clients as well.
So, here are 10 design principles for great onboarding experiences that help users become productive quickly.
1. Present a clear value proposition. Focus users’ attention on the main feature and how it benefits them.
On the website before signup there are simple, clear headings statements about the value. After signup the focus is on creating a test.
----1. Present a clear value proposition. ----
On the website before signup there are simple, clear headings statements about the value. After signup the focus is on creating a test.
----1. Present a clear value proposition. ----
Once you download Evernote, it continues to show you the value even before it asks you to create an account.
----1. Present a clear value proposition. ----
Once you download Evernote, it continues to show you the value even before it asks you to create an account.
----1. Present a clear value proposition. ----
Once you download Evernote, it continues to show you the value even before it asks you to create an account.
----1. Present a clear value proposition. ----
In the app store -- Learn about any wine by taking a photo, get expert opinions
----1. Present a clear value proposition. ----
I purchase this because it looks like an interesting drawing tool and it has pressure sensitive drawing. The box has similar messages.
----1. Present a clear value proposition. ----
The iPad app that comes with it (Adobe Line) has a few pages up front about its value, starting out with this idea of “Draw with Precision”
----1. Present a clear value proposition. ----
In enterprises, presenting the value proposition starts outside of the application. Conducting user surveys, a publicity campaign to explain the changes that are coming, briefings to staff, user training. Maybe a web site where users can see updates on the changes that will affect them, eg if a longer term rollout schedule.
2. Minimize login and account creation. There should be as few barriers as possible to getting started. Logins account for a significant drop-off in users.
Signup required name, company, time zone (why?), email, password, credit card. Not awful, but I wonder why company and time zone would be needed at this point. Also I wonder if doing the password twice is becoming less relevant (the iphone apps don’t do it; forgot password is ubiquitous)
----2. Minimize login and account creation. ----
Very simple account creation. Enter email address, create a password, and go. Sign in process is the same; only required it you sign out or if you log in on another device.
----2. Minimize login and account creation. ----
Good, it allowed option to sign up using facebook or email.
----2. Minimize login and account creation. ----
Email option only asked for name, email and password (once).
----2. Minimize login and account creation. ----
Take the items out of the box. The packaging and the ease of taking things out is of course part of the first time experience.
----2. Minimize login and account creation. ----
Turn the pen on. (I was worried that it needed to be charged first, but it worked without charging.)
----2. Minimize login and account creation. ----
Then I downloaded and installed the app (Adobe Line).
It allowed me to either create an ID or sign in using an existing Adobe iD. Why does it want my country and date of birth?
----2. Minimize login and account creation. ----
We are working with a client with a SaaS application that does not have an online account setup. Accounts are created through phone.
There are times in applications when who you are matters.
In some applications – government benefits, financial information, health records – it is essential to verify the user’s identity before you show them their sensitive info. Establish barriers appropriate to the level of risk.
Does anyone have any tips to share about how you have minimized login and account creation in your products?
3. Provide a simple, smart process for setup. Ask questions to help users make the right decisions, keeping the setup process as short and streamlined as possible.
no setup
----3. Provide a simple, smart process for setup. ----
No set-up
----3. Provide a simple, smart process for setup. ----
Had only one easy question and this one was optional. It asked me what styles of wine I like, out of a list of five.
----3. Provide a simple, smart process for setup. ----
I did think it was strange these were the only options.
Discuss: recommender systems we’ve worked on, and matching your profile to other users like you
----3. Provide a simple, smart process for setup. ----
After turning the pen on….
I had to pair the pen with the app. This was a little hard to figure out, although there were instructions.
----3. Provide a simple, smart process for setup. ----
I was apparently tapping a pen icon on a different screen from where I should have been. Once I found the right pen icon, it was pretty smooth.
----3. Provide a simple, smart process for setup. ----
----3. Provide a simple, smart process for setup. ----
----3. Provide a simple, smart process for setup. ----
Example 3 (insurance): just answer 3 questions: what is your zip code? What is your age? Do you smoke?
Does anyone have any tips to share about how you have provided a simple setup process in your products?
4. Avoid the blank slate. Don’t confront the user with a blank screen. Show placeholder data or instructional info. If user comes to a part of the application they haven’t used before, provide a preview or an abstract illustration of what they will typically see there.
The welcome screen is good in this regard—it gives me easy to understand options to start with. And after I start, it fills up with my surveys.
----- 4. Avoid the blank slate. -----
You don’t see a blank slate. You are encouraged to create something immediately.
----- 4. Avoid the blank slate. -----
I did not run into a blank slate right away with Delectable, which was good. However, I did find a few of them later on.
Wishlist has a blank screen “No wines yet”. This is not as friendly as prompting me to add something to my wishlist, or showing me what a wishlist might look like in the future.
----- 4. Avoid the blank slate. -----
Similarly, Taste Insights says 0/3 and I’m not sure what’s being counted in those numbers (I’ve taken photos of at least 8 bottles by this time). It’s essentially a blank screen.
----- 4. Avoid the blank slate. -----
This had a type of placeholder data up front—some sketches drawn by other people. This gives me a preview of the kind of thing I can expect.
----- 4. Avoid the blank slate. -----
This display of a “Project” with 5 drawings was the first thing I saw after the sample drawings. It was confusing and I’m still not sure what it meant. Was this a sample project? Was it a blank project with 5 placeholder drawings?
The drawing page itself if blank, but I guess that’s ok for a canvas.
----- 4. Avoid the blank slate. -----
If no data to show, display a first timer’s orientation to help the user understand what they can do.
Start by synching or importing their data, eg if this is a SAAS application for a network administrator, don’t show them a blank screen, go directly into importing their network. If it’s an enterprise application, synchronize it with data pulled from existing sources or legacy systems.
Does anyone have any tips to share about how you have avoided the blank slate?
Example: instead of requiring users to search first, push some of the most likely data to them so they are not confronted with a blank search screen. Recognition rather than recall.
5. Allow user to immediately do something that gets results. Seeing a meaningful outcome gets the user engaged in using the product.
I like how it immediately focuses me on a few simple tests to start off (rather than the complete list which might be overwhelming). Looks like I can be productive immediately.
-----5. Allow user to immediately do something that gets results. ------
-----5. Allow user to immediately do something that gets results. ------
-----5. Allow user to immediately do something that gets results. ------
-----5. Allow user to immediately do something that gets results. ------
I’ve made my first test.
-----5. Allow user to immediately do something that gets results. ------
You create your first note as part of the “quick tour” as soon as you are welcomed into the app. Gives you an immediate feeling of accomplishment.
-----5. Allow user to immediately do something that gets results. ------
You create your first note as part of the “quick tour” as soon as you are welcomed into the app. Gives you an immediate feeling of accomplishment.
-----5. Allow user to immediately do something that gets results. ------
Then it allows you to store an item such as a business card or receipt.
-----5. Allow user to immediately do something that gets results. ------
It’s great that it immediately asks if you’re near a bottle of wine. This is a relevant, personal task and something I can do right away to get value.
-----5. Allow user to immediately do something that gets results. ------
I take the picture
-----5. Allow user to immediately do something that gets results. ------
It gives me data about that wine immediately. Great!
-----5. Allow user to immediately do something that gets results. ------
I was curious what the other first time user options were, so I started a new account to find out. If I’m not near a bottle of wine, it asks if I have photos of wine on my phone. This is another way of making it personal to me if I’ve been taking photos already. Sadly I don’t have any.
-----5. Allow user to immediately do something that gets results. ------
The third choice is to let me look up a wine I love. I go ahead and do this. I search for a Sancerre, find one I like, and pick it. Not quite as “in the moment” but still makes this feel personally relevant.
-----5. Allow user to immediately do something that gets results. ------
As soon as I got the pen paired with the app, it was very quick to draw a line using a brush style that I liked. It reminded me of sumi painting.
-----5. Allow user to immediately do something that gets results. ------
I was also able to quickly draw some circles using the “slide”. The ease of creating the circle gave me confidence even though this was an unfamiliar type of tool.
-----5. Allow user to immediately do something that gets results. ------
In enterprise apps, and some types of online services, the most reliable way to help the user get started and complete something is to guide them through it one step at a time via a wizard. Be sure to show steps in the process and give progress indicators.
Example: the first time you are uploading code you’ve written into the company repository. You’ve got to complete this task that you see as peripheral according to organizational policy. A multi step process that is easy to follow.
Does anyone have any tips to share about how you have helped the user get immediate results?
6. Import the user’s existing data from other sources. You can import from other applications, social media, and even competitor products.
Was wondering if there was a way to import my existing questions, or a list of people to send the survey to, but I don’t see it.
---- 6. Import the user’s existing data from other sources. ----
Evernote allows me to import any photos I already have. I’m guessing the useful ones would be business cards and receipts.
---- 6. Import the user’s existing data from other sources. ----
I can also upload a profile photo.
---- 6. Import the user’s existing data from other sources. ----
On the main page, it shows some featured wines, and a reminder to “Find friends” so I can share wines with them.
---- 6. Import the user’s existing data from other sources. ----
It offered the option to pull in images from various places, including my ipad, my files, market.
---- 6. Import the user’s existing data from other sources. ----
It says I can pull in my own color palettes, shapes and stamps that I’ve already created in a vector drawing format.
---- 6. Import the user’s existing data from other sources. ----
if you start the app from within Salesforce it looks at your current portfolio and uses that to refine the data it is feeding to you.
---- 6. Import the user’s existing data from other sources. ----
Use what we already know about the network environment to configure certain things for you based on where you are. Or, adopt from other users like you.
Does anyone have any tips to share about how you imported the user’s data?
7. Orient the user via minimalist, built-in demonstrations. This can be done using callouts next to primary features, mini videos, or live demos. It’s better to Show the user rather than telling them in textual instructions.
“Take a random verify test” seems like one good way to do that.
---- 7. Orient the user via minimalist, built-in demonstrations. -----
On the Create a new test page it gives a link to an example of each type of test. You can try it out to see what it’s for.
---- 7. Orient the user via minimalist, built-in demonstrations. -----
There were some instructions up front, some with built in demos. One useful up front instruction was how to erase if you make a mark you did not like. I thought this screen was useful.
---- 7. Orient the user via minimalist, built-in demonstrations. -----
Unfortunately there were several screens of instructions that I knew I would not remember. It was too much to take in up front before trying to use it.
---- 7. Orient the user via minimalist, built-in demonstrations. -----
Unfortunately there were several screens of instructions that I knew I would not remember. It was too much to take in up front before trying to use it.
---- 7. Orient the user via minimalist, built-in demonstrations. -----
Unfortunately there were several screens of instructions that I knew I would not remember. It was too much to take in up front before trying to use it.
---- 7. Orient the user via minimalist, built-in demonstrations. -----
Training videos, FAQs, customer forums and other resources help new users get up to speed quickly
---- 7. Orient the user via minimalist, built-in demonstrations. -----
Does anyone have any tips to share about how you have oriented the user with demos or training integrated with the tool?
8. Instruct at the point of use. Education should be an ongoing experience, and an interactive one, not something that has to be completed or memorized up front.
The instructions on the screen when I am creating my first survey are pretty good.
It’s trying to upsell (eg suggesting I can upgrade to the Premium plan to upload variations) but it doesn’t provide a link to more info about that. I’m not sure what it will offer me.
----8. Instruct at the point of use. ----
The create a new test page gives good instructions about each type of test. This is good because I may just learn one or two types of tests right now, and in the future I will want to try a different type. I don’t have to try to remember until I need it.
It was not obvious how to link the tests together. I was looking for a way to do that and found it under Create New test.
----8. Instruct at the point of use. ----
“Show me how” opens step-by-step instructions
---- 7. Orient the user via minimalist, built-in demonstrations. -----
Explains how to turn on the Clipper feature in your browser to save articles and images.
---- 7. Orient the user via minimalist, built-in demonstrations. -----
----8. Instruct at the point of use. ----
----8. Instruct at the point of use. ----
----8. Instruct at the point of use. ----
----8. Instruct at the point of use. ----
This was one good example of this where an instruction popped up based on what I was trying to do.
----8. Instruct at the point of use. ----
Contextual field level help
----8. Instruct at the point of use. ----
guided people to answer questions that would be improve their recommendations
In an insurance app and in a health related app
----8. Instruct at the point of use. ----
Preview the outcome before you commit the change
E.g. a scheduling application where adjusting individual things has an effect on the larger schedule. We designed the app so it shows you the outcomes before you commit to the schedule change so you can make sure it has the desired effect and does not create another problem.
----8. Instruct at the point of use. ----
Does anyone have any stories to share about instructing at the point of use?
9. Be thoughtful about where and how to ask permission to use the camera, location, contacts. Introduce these questions at the time when the application needs to do something that uses them.
When creating your first note, you have the option to tag notes with location by using location services.
-----9. Be thoughtful about where and how to ask permission to use the camera, location, contacts. -----
It asks to use the camera when getting into the app for the first time,
-----9. Be thoughtful about where and how to ask permission to use the camera, location, contacts. -----
but it tells me why – it’s to take photos of the wine I’d like the app to identify. That seems like a good reason.
-----9. Be thoughtful about where and how to ask permission to use the camera, location, contacts. -----
After I go in and select my first wine, a pop up asks if it can send me notifications when people comment on my wines. I say ok.
-----9. Be thoughtful about where and how to ask permission to use the camera, location, contacts. -----
Then it immediately pops up another request to send me notifications in general. This seems like nagging. I don’t like it. I say don’t allow.
-----9. Be thoughtful about where and how to ask permission to use the camera, location, contacts. -----
Later when I take a picture it asks if it can access my photos. I’m not sure why it wants to do that because I’m taking the pictures directly in the app.
-----9. Be thoughtful about where and how to ask permission to use the camera, location, contacts. -----
So far it has not asked me for access to any of these things. I tried uploading and it is not asking for access to my contacts. It just let me send an email. This was refreshing.
-----9. Be thoughtful about where and how to ask permission to use the camera, location, contacts. -----
if I try to insert a picture.
-----9. Be thoughtful about where and how to ask permission to use the camera, location, contacts. -----
10. Provide preferences and controls that users can set as they gain experience. Users like to have the ability to view and refine their settings to make the experience most relevant to them.
I’ve now made a number of tests, I’m on a roll, I’m wondering how to add my colleagues as users so they can access these.
---- 10. Provide preferences and controls that users can set as they gain experience. -----
I found a way to to add users to the account.
---- 10. Provide preferences and controls that users can set as they gain experience. -----
I found a way to to add users to the account.
---- 10. Provide preferences and controls that users can set as they gain experience. -----
I found a way to to add users to the account.
---- 10. Provide preferences and controls that users can set as they gain experience. -----
You can set up more advanced features, such as creating notebooks to organize your notes. And enable access to your calendar and reminders.
---- 10. Provide preferences and controls that users can set as they gain experience. -----
If I decide I want to shop for wines, I have a way to put in my address.
---- 10. Provide preferences and controls that users can set as they gain experience. -----
It has a bunch of notification settings.
---- 10. Provide preferences and controls that users can set as they gain experience. -----
It lets me turn on different types of grids, pull in my own color palettes….
---- 10. Provide preferences and controls that users can set as they gain experience. -----
And set preferences for how I hold the device to make it work better for me.
---- 10. Provide preferences and controls that users can set as they gain experience. -----
And set preferences for how I hold the device to make it work better for me.
---- 10. Provide preferences and controls that users can set as they gain experience. -----
Preferences for how my workspace is set up
Preferences for dashboards, turning columns on and off in tables