Useful tips for designing an app’s onboarding

5 min reading
22 January 2020
Useful tips for designing an app’s onboarding
Useful tips for designing an app’s onboarding

BBVA API Market

Onboarding is the lesser evil of app development: all professionals engaged in mobile products understand that in an ideal world, the value of apps should be understood intuitively, but sometimes that's not possible.

Onboarding development has become one of the keys to an app’s success over the years. A bad feeling in a user’s first landing in an app may be a feeling that conditions the rest of the user experience. It is therefore one of the key elements in prototyping and phasing for the development of a product with these characteristics. The visual design and the best principles of mobile usability are elementary for its success. 

Most onboardings have several screens where an app’s creators maintain some dialog with the user: it is the most effective vehicle to explain the style of a tutorial, what an application consists of and what points of value that product brings to the lives of consumers. The onboarding of a mobile app can, generally, be formed by these types of views:

Splash screen: the initial presentation of any app. It usually consists of the app’s main white or colored background, its logo or icon and also the product name. It is common to use floating buttons and animations in the splash screen. This is the splash screen of an app as commonly used as Google Translate. 

Tutorial: may be formed by one or more views. The idea is to convey to the user what the key elements of the application are, from browsing environments to high-value features. The goal is not to be boring but convey to the user why they must have the app on their phone. Here’s the tutorial for a news app: Yahoo News Digest. 

Registro/login: in the event that the app is going to need to have personal customer data to customize the user experience. 

Notificaciones/permisos de acceso: in the same way that developers may need a registration, they may also have to request access to the camera, microphone, photo gallery or location, among others. Permissions are needed for all those that must be provided by the user, some in the actual onboarding process and others within the app. The Facebook Messenger app requests a user’s phone number in this way: 

This is intended as a list with some tips for developing a good onboarding for all profiles involved in designing an application: product, visual designers, usability, programmers

1. Onboarding, a necessary evil

Some design and usability experts have stated that the best  onboarding in the world is the one that doesn’t exist. Many of them think that if an app requires an initial tutorial to explain how it is used and the value it contributes to an app, the chances are that the product is poorly conceptualized, designed and developed.

You must discover its functionality, interest and differential value to the user for yourself while browsing through an app. Less explanatory views, and more usability supported in visual design.

The truth is that nowadays onboarding is necessary in most cases, especially in particularly complex apps that rely heavily on a user interface based on gestures. Gestures that are usually rare and on which the average user still has little knowledge. For example, the use of the  side swipe to trigger actions which depends on the use of the app, not as an alternative shortcut to activate these actions. Everyone can recognize the function associated with the typical arrow-shaped back icon, but few have integrated the swipe as a usual navigation movement.

2. Registration or login is a headache

Today user data provide the true value. You either make money by selling a product or through collecting personal consumer information. All product teams have quarrelled over the risk of losing users when requesting their personal data.

An app can be very appealing until the user has to register or login to a social network, either Facebook or Twitter. The timing of subjecting the user to that request is key to ensure retention doesn’t plummet.

So much so that some app stores reject products seeking registration and user login for no apparent reason. The request for a user’s personal data must be, therefore, linked to a value proposition to a specific functionality, which is justified for such registration and login.

There are apps that work with customizing the experience depending on the tastes of users or establishing relationships with communities in their social networks. Making the user understand that registration/login is an essential element to make full use of an app is essential. Una aplicación puede resultar muy interesante hasta que el usuario debe registrarse o hacer login con alguna red social, ya sea Facebook o Twitter. El momento escogido para someter al usuario a esa petición es clave para que la retención no caiga en picado.

3. More requests for personal information

Sometimes the user is not only prompted for a registration/login, they are prompted for other personal data that affect the user experience (age or sex, for example) or permit access to elements of the device that are required for certain features: sending notifications, access to the camera, microphone, image gallery, location, etc. It’s also interesting to see the user make access easier, you can also restrict or modify it at any time via the settings. 

4. More images than text

The idea of onboarding is that it doesn’t use up too much of the user’s time. They want to see the app as soon as possible and developers explain their value to increase retention. In the medium term it’s the key: it’s not necessary to design eternal onboardings that bore you or overuse of text for the tutorial.

Therefore the use of icons or dynamic images with transitions or animations is very common. They usually generate more commitment, are more intuitive and also more entertaining. Developing apps is providing value to the user

5. Measure, measure, measure

One thing is to have a guide with clear concepts to avoid mistakes, and another that is very different is that in that conceptualization, design and development process they are not discussed in the end. For that reason it’s important to measure, measure, measure. Before release through user testing, and then through incorporating different analytical tools in the app. 

User test tool: the goal is to move the prototype to a navigable user interface to detect usability failures or anticipate features of little value. Some interesting tools are Invision, Facebook Origami and Lookback, which are used for navigable prototyping and recording interfaces and the user’s gestures while navigating the view or using the different functionalities.

Measuring tools: this includes all kinds of platforms to create heat maps or A/B testing. Heat maps can be a great tool for making decisions about the various calls to action in a registration or login view, for example. They serve to detect whether users register more with Facebook, Twitter or email. A/B testing allows professionals to know the best option at a certain time; they can thus detect positions, colors or messages with a better click-through rate (CTR) than other alternatives. Interesting tools for A/B testing: Apptimize and Optimizely

It may interest you