pratique et mise en œuvre du projet

radar
le onboarding


Sur cette page, vous trouverez :
- Qu'est-ce qu'un onboarding ?
- Quelques conseils pour sa mise en forme.
- Quelques exemples de onboarding


Qu'est-ce qu'un onboarding ?

L’onboarding (embarquement in french) désigne la phase au cours de laquelle un utilisateur découvre et prend en main, pour la première fois, une application mobile. C’est une suite d’écrans (que l’on peut passer avec un swipe - geste qui consiste à balayer son écran vers la gauche - ou avec un bouton), qui s’affiche après le lancement de l’application, lors de sa première ouverture pour accueillir le nouvel utilisateur. Il lui donne des informations sur l’application et lui permet de la configurer si besoin.

Cette étape est cruciale à plus d’un titre : en effet, un onboarding raté est souvent synonyme d'une mauvaise expérience pour l’utilisateur et, au bout du compte, d’abandon et de désinstallation de l’application.

S’il y a quelque chose qu’il faut garder en tête lorsque l’on conçoit un onboarding, c’est qu’il faut être concis, aller à l’essentiel. Le but est d’apporter un plus à l’utilisateur, et non pas de lui demander un effort. N'hésitez pas à fixer un nombre d’étapes maximum (en moyenne quatre) à afficher pour ne présenter que le plus important.
La lecture d’un onboarding doit être fluide, facile et utile.


Quelques conseils pour sa mise en forme…

Un engagement graphique, une unité graphique et typographique feront la signature de votre application. Les corps typographiques utilisés doivent être bien réglés pour permettre une bonne lisibilité de vos recommandations.


Le texte

Ne faites pas l’impasse sur la façon dont vous rédigez le contenu, le wording de votre application est primordial ! Pour un texte efficace, cherchez à décrire ce que vous souhaitez dire de manière très claire et accessible pour tout le monde. Utilisez des verbes d’action pour les titres et ne rédigez pas plus de deux phrases courtes par étape.


Les visuels, les illustrations (direction artistique)

Un bon onboarding est concis, mais aussi esthétiquement agréable à regarder (beau, joli, sympa, fun…) ! Vous pouvez l’agrémenter d'illustrations, d’images ou de captures d’écran de l’interface (parfois) afin d’éclairer vos propos et habiller l’écran. Cela permet de renforcer l’identité, la signature de votre produit. Il faut toutefois que le design de ces étapes soit cohérent avec le reste de l’application.


Les fonctionnalités

1 - Indicateurs de progression
Pour que l'utilisateur·trice sache à quoi s’attendre, il est préférable d’indiquer clairement (par des pastilles par exemple, forme de pagination visuelle), le nombre d’étapes que le tutoriel de l’onboarding comprendra. Cela vous forcera également à mesurer le nombre d’informations que vous y inclurez.
2 - Passer (skip)
Vous pouvez offrir à vos utilisateurs la possibilité de passer un onboarding s’il s’agit d’un tutoriel ou d’une présentation de l’application. Il se peut que l'utilisateur·trice connaisse déjà bien votre concept.
3 - Une inscription simplifiée
À défaut de pouvoir contourner (ou retarder) l’étape d’inscription, veillez à rendre celle-ci la plus rapide et la plus simple possible. Pensez à la connexion rapide via les réseaux sociaux (comme Facebook ou Google), mais offrez tout de même la possibilité de se connecter « à l’ancienne » avec une adresse mail. Limitez toutefois les informations demandées (le formulaire d’inscription devrait tenir sur un seul écran). Vous réduirez ainsi vos chances de décourager les nouveaux arrivants, qui n’ont aucune envie de remplir un formulaire interminable pour pouvoir utiliser l’application.


Quelques exemples de onboarding


Adobe XD fixe
cliquez sur l'image pour en voir le détail

le onboarding de l'application adobe xd


ARzone fixe
cliquez sur l'image pour en voir le détail

le onboarding de l'application arzone


Decathlon fixe
cliquez sur l'image pour en voir le détail

le onboarding de l'application decathlon


Ilévia fixe
cliquez sur l'image pour en voir le détail

le onboarding de l'application ilévia


Intermarché fixe
cliquez sur l'image pour en voir le détail

le onboarding de l'application intermarché


Komoot fixe
cliquez sur l'image pour en voir le détail

le onboarding de l'application komoot


La Banque Postale v1 fixe
cliquez sur l'image pour en voir le détail

le onboarding de l'application la banque postale version 1


La Banque Postale v2 fixe
cliquez sur l'image pour en voir le détail

le onboarding de l'application la banque postale version 2


La Banque Postale v3 fixe
cliquez sur l'image pour en voir le détail

le onboarding de l'application la banque postale version 3


La Banque Postale v4 animé
cliquez sur l'image pour en voir le détail

le onboarding de l'application la banque postale version 4


Les voyages extraordinaies d'Axel fixe - Maison Tangible
cliquez sur l'image pour en voir le détail

le onboarding de l'application les voyages extraordinaires d'axel


Médiapart fixe
cliquez sur l'image pour en voir le détail

le onboarding de l'application médiapart


Netflix fixe
cliquez sur l'image pour en voir le détail

le onboarding de l'application netflix


Renault Mobility v1 fixe
cliquez sur l'image pour en voir le détail

le onboarding de l'application renault mobility version 1


Renault Mobility v2 fixe
cliquez sur l'image pour en voir le détail

le onboarding de l'application renault mobility version 2


SNCF Connect fixe
cliquez sur l'image pour en voir le détail

le onboarding de l'application sncf connect


Yuka fixe
cliquez sur l'image pour en voir le détail

le onboarding de l'application yuka