“Your homescreen is the castle while the apps are the paintings”
The current Operating System for mobile applications separate every services. The users see on the home screen every apps he downloaded, without any connections between each others. I like to imagine each application as its own world, as a complete experience. The home screen is Super Mario 64 castle while the apps are the paintings, leading to the levels.
Full disclosure, I am not a big fan of this system, but those are the rules of the OS builders, so we have to stick to them.
Just like the cinematics starting a new level to reveal the new environment, when a user first launch an app, he has to be introduced to your service, your rules and quickly understand why he will love it.
Introduction to your World
Nowadays, there are so many new digital products coming out everyday that yours need to stand out during the first minutes the user will try it. Make your value understandable and create a vibe. A good atmosphere directly linked to what you want your service to feel like and in perfect harmony with your potential users.
First, the onboarding needs a good flow.
Intro pages
Here is the worst first screen your app could display :
A logo, no information at all, just buttons for me to login, without even knowing what I am registrating for. Now, if your name is Snapchat during its “ahah moment” you might have the right to do this. But I guess that you are not and even though, you should never treat a user like this. He is the one making your company valuable, so he deserves to know what he will be using before signing up.
The least you can do, is designing a beautiful first screen, semi-flat landing page style! A big background image, the logo on the top, a catchphrase in the middle and different ways to connect (with 1000px rounded buttons of course).
Those very minimal and direct introductions should not be designed. When you build an app, you want it to be downloaded, used and shared.
- The best way for it to be downloaded, is to be shared;
- The best way for it to be shared, is to be used;
- The best way for it to be used is to have a proper onboarding, explaining clearly how to use it and why I will use it.
Slideshows
It is quite hard to design a great introduction and lots of designer go for a slideshow-alike quick intro/tuto. When well designed, with nice parallax effect, animations and illustrations, it can be pretty effective and set a mood to your product.
Some of them are very basic and static, explaining the concept and showing the interactions of the app :
The good point here is seeing the actual interface thanks to an illustration. So the users will have an idea of how to use the app.
While others are very complex, with a lot of work put into it :
See how every assets are animated? With the video in background. It really is better than a poor static screen.
But still, at the end, is a connect button and I don’t actually know how to use the app nor how my life will get better using it.
There is actually a second step to the onboarding on Cirqle, using the content of the app explaining how it works.
It is interesting because the user is brought directly to the application.This second tutorial is displayed inside the content of the application so we understand a part of how the interface will work. Also it does not require extra and specific development work. Just pictures and text. ( Just like Snapchat announcing new features with video Snaps. )
But, in my opinion, the main problem of all Cirqle’s onboarding is to be very time-consuming, with a lot of content to read.
Then, when you think of the global first-time experience, the user also need to accept notifications, geolocation, and to fulfill forms to create an account. I am afraid that he get bored even before experiencing the real product.
What about the context?
Depending on the type of service you are providing, your first approach should also take in consideration different user cases and try to find the best way to explain your app while displaying content as soon as possible.
The first time I downloaded Citymapper, it was raining. I was in the street and wanted to find the easiest way to get to my friend.
Citymapper has incredible branding, with fun characters and great content. They could have done amazing animation, jokes and god knows what. But instead, in exactly 5 seconds after tapping the homescreen icon, I was able to search for a destination. No tutorial, no connection, just the classic homescreen with the first button saying “Where do we go?”.
Of course, in other user cases the experience would not have been the best. What if I had no idea what Citymapper is used for?
But you can easily correct this with a tutorial button at the bottom for completely new users.
Your app is a tutorial
Last week, someone hunted Watchbox on our beloved Producthunt.comcommenting “Has one of the nicest onboarding-flows I’ve seen”. I definitely want to experience the nicest onboarding-flows, I thought.
Here is what happened when I opened the app for the first time :
Not very nice, I thought. No catchphrase? No explanation? Look a little empty. A nice character though, and I am new here, so let’s click that flat button.
Definitely not nice. One more useless newsletter to come in my emailbox, I told myself, while giving away my personal address to an application unabled to tell me what it is used for.
But then, amazing surprise :
The application show all its features during a great flow using only the actual feature of the application. It mixes tutorial and introduction. And great bonus point for the little guy staying with you.
But what I don’t understand here is “why did not you ask me to sign up afterwards? And what happened to the catchphrase of the first screen? ” Adding these could have brought a way better experience.
Create engagement before asking to connect
When Snapchat went crazy, all my friends started downloading it and snapped everything. Here is the first image you got when you open Snapchat for the first time :
No intro, no tutorial, no catchphrase, no nothing. I really like Snapchat, I find the concept amazing, some interactions are very well thought and I think that this application radically change the way we use internet. But its onboarding is so poorly designed that I still have friend asking me
- “How do you draw on your picture?”
- “How did you get filters on your pics?”
- “You can save a snap message?”
- “Why is the button becoming blue sometimes?”
When you sign up on the service, you just have access to a snap video explaining the most basics interactions and three messages.
Now, I know that they do not need to engage users anymore nor explain the value of their app during the first launch, but here is what I would have loved to seen on snapchat first connect :
Directly on the first screen, you have one catchphrase quickly explaining the concept plus, you are managing the two main onboarding user cases :
New users / Already users.
Let’s take the tour :
Here, you directly display your main action interface. No need to signup now, we are just exploring the feature. When you go to buy a car, you want to drive it first and try it, before spending your money.
Little bonus, we can use the Snapchat gosth mascot to conduct the tour.
Also, don’t forget a “skip” or “back” button in case the user want to stop the tutorial.
Easily explain the different interactions and try to be creative :
What if during it’s guided tour of the app, Snapchat provided you some examples and help into drawing an awesome first snap? With an extra invisible layer on the photo, the user would just have to follow the line to transform its photo.
Maybe it seems a little childish, with the ghost and everything, but what is happening here?
You just tricked your user into trying your product, understanding the concept and spending time on it.
What will happened next?
Now is the perfect timing to ask for personal information. Why? Because the user just spend maybe 30 seconds looking on your product, playing with it and understanding it. You made him create its own first content, so he developped some sort of connection with it.
Best case scenario : he is going to sign up, add some friends and send his snap.
Worst case scenario : he is going to stop the flow and delete your app. Maybe he did not like the concept? Anyway, he is the perfect user to analyze and ask for a feedback to improve your experience.
Showing some value
In my opinion, what matter the most when onboarding new users, is treating him with respect by thinking the best flow possible and giving a taste of what is your service. If something is amazing, I will definitely sign up and share it, looking for social recognition. But do not race through stages.
Useronboard published an awesome picture :
which I would like to combine with one of my favourite quote :
“Any sufficiently advanced technology is indistinguishable from magic”
Arthur C. Clark
This is exactly what I want to feel when I download a new app. I want, while entering the world of a product, think to myself “Oh My God, this is so awesome, I will be able to do so many things now! I urgently need to share it to all the people I know.”
Let’s have a look at an app like Foursquare. I followed all the updates as the good product design addict that I am, but never actually used it nor found it useful. I even found all the notifications a bit annoying and never saw value out of them. Until I read a post on Producthunt written by its CEO, explaining their vision.
Foursquare actually bring me a contextual information based on my tastes, magical!
This is awesome, you should have insisted on that during your onboarding guys.
A product is unique
Of course, there is not one good recipe, but just a lot of different spices you can try and add to your product until you find the perfect match to your experience. I deeply believe that every application is its own world and should build its on appropriate experience.