Almost every app on the market today has some sort of coach mark (a transparent overlay of UI hints) or tutorial shown on the first launch. While the presence of such screens is often unnecessary, there are times when it is helpful to the user to understand the main direction.
Look and Read Here and Here and Here
Often when you open a new app, your screen fades out a little, and a helpful tooltip or blurb pops up explaining what a certain button or field is for.
At first glance, it looks pretty good. Why could it be a bad solution? There are a few reasons for that:
- Users skip instructions. People do not launch an app to spend time learning how to use the interface, but rather to complete a task in as short an amount of time as possible, using the least amount of effort possible.
- Instructions increase users cognitive load. Even if users notice your tutorial, they usually forget everything as soon as they close the overlay. Because users cannot read the hint overlay and use the app at the same time, they are forced to memorize the instructions and then apply them. Unfortunately, short-term memory cannot retain very much information, and that information fades in about 20 seconds. As result, users usually forget everything as soon as they close the overlay.
- Lack of communication and interaction. Adding coach marks to the interface does not make it more intuitive. If you have to give your app an instruction manual, then you’re not doing a good job of communicating with your users.
Interact, Don’t Tell
The most important idea at the heart of every modern mobile devices is that they need no explanation. You pick them up and use them. The apps that run on them should be the same way: just launch them and start using using them. They should have an intuitive and self-explanatory user interfaces.
But still onboarding flow can be designed in a way that might be useful to your users.
Short and Focused Tips
It is more effective to focus on a single interaction rather than attempting to explain every possible area of the user interface. Minimizing the amount of instructions focuses the users’ attention on a single, primary action.
The less text on a page, the more likely it is that users will read it and then actually follow that instruction.
If an introductory walkthrough includes important instructions or user preferences, make sure they can get back to it at any time.
Bad example (Coach Marks): Morningstar app for iPad coach mark outlines every possible thing a user can do on the screen.
Bad example (Introductory Walkthrough): The first thing Clear app’s users come across was a static 7 screen introduction. There was no way to skip this intro and users forced to swipe through all cards before they can finally interact with the app. Such long intro encourages users to swipe quickly to get to the end.
Bombarding users with frequent hint screens causes them to dismiss hints more quickly, regardless of how helpful each may be. This can also make your app appear overly complicated to new users.
Good example (Coach Marks): YouTube, for instance, focuses each coach mark on a single interaction. These hints appear on the first launch for first-time user, as the user reaches the relevant section of the app.
Presenting tips one-by-one, at the right moment, makes it a lot easier for users to understand and learn them.
Good example (Introductory Walkthrough): Duolingo does not explain how the app works. Instead users are encouraged to jump in and do a quick test in the selected language because people learn best by doing.
- Don’t impede the user with modal instructions.
- Avoid chains of tips and long static walkthrough.
- Make hints available in help or settings.
First time user experiences should be focused. Apps should selectively showcase the primary feature and let users discover secondary features over time. You need to make sure that people who pass through onboarding have a clear sense of what to do, or where to go next.
This approach is a very context-focused and can be found in games which often deals very well with progressive disclosure, revealing game mechanics as you move further into a game.
Good example (Visual Hints): If you sit idly by when facing a new scenario in Pudding Monsters, an animated hand will appear and make a sliding motion. And it immediately becomes clear how to proceed.
Also including visuals alongside written instructions allow users to get the basic idea of what to do without reading very much. This also gives people visual/tactile feedback as they interact with elements.
- Teach people with contextual interactions and clarify the next steps.
- Show people only the most important, primary features of the app.
Before designing your coach marks or walkthrough, stop and think about what the experience of the first time users should be. Focus on the context.
When designing tips and any other types of hints for mobile applications, keep them as short as possible. Focus on primary user tasks and design for maximum interactivity by using visuals and progressive disclosure.
Lean heavily on previously accumulated user expectation and knowledge to create a dedicated and organic onboarding process.