4 techniques d'onboarding

14 Novembre 2019 UX

Quand un visiteur découvre pour la première fois votre application c'est comme quand on rentre dans un endroit que l'on ne connait pas. On regarde partout et on cherche des repères.

On peut facilement faire le parallèle avec un restaurant, un bar ou une boutique physique. Dans un restaurant, il y a en général une personne pour nous accueillir et nous dire quoi faire, le plus souvent s'installer à une table précise et lire le menu.

Sur une application c'est pareil sauf que l'utilisateur est seul face à son écran !
Il faut donc soigner cette étape et c'est là que les techniques d'onboarding interviennent.

En général un onboarding contient 2 types d'actions :

des actions de configuration, que la personne ne fera qu'une fois. Chez Blog4ever, c'est la configuration de l'image de couverture. Chez MédecinDirect, c'était le remplissage des infos de santé.
des actions que l'utilisateur fera régulièrement afin d'obtenir ce qu'il attend du produit. Chez Blog4ever c'est l'ajout d'article, chez MédecinDirect c'est la demande de téléconsultation, chez Evaneos c'est l'échange de message avec l'agent local.

Exemples d'onboarding

La checklist avec Sendinblue

Sendinblue est un service d'envoi d'emails. L'onboarding consiste à plusieurs étapes de configuration (profil, IP dédiée...), l'import de contacts si on a déjà une liste d'emails et enfin l'action récurrente qu'est l'envoi d'une newsletter.

Pour guider les nouveaux, ils ont fait le choix de la checklist sur la page d'accueil :

Onboarding sous forme de checklist

Les avantages :

c'est très visible
c'est fixe : on peut très bien aller explorer certaines fonctionnalités et revenir ensuite sur l'accueil, on retrouvera cette checklist
l'ordre est libre : on peut commencer par l'étape qui nous convient le mieux

Les inconvénients :

une fois toutes les actions réalisées, cette checklist disparait et on risque de ne pas savoir retrouver la fonctionnalité souhaitée
il faut comprendre que cette checklist est présente sur le tableau de bord si on veut y revenir

Le mini tutorial animé avec Trello

Trello est un logiciel en ligne connu pour son interface "Kanban" sous forme de colonnes. Pour bien faire comprendre ce concept aux nouveaux, ils ont créé un tutorial guidé juste après l'inscription :

Onboarding sous forme de tutorial pas à pas

Les avantages :

on découvre les fonctionnalités clés de Trello : les tableaux, les colonnes, les cartes, les checklists
utilisation de placeholders pour ne pas trop réfléchir
l'aperçu en live permet de bien comprendre

Les inconvénients :

on est obligé de réaliser l'onboarding, même si on connait déjà Trello
techniquement j'imagine que ça a été pas mal de travail !

L'élément de démonstration avec Bear

Bear est un logiciel de prise de notes minimaliste et basé sur le Markdown. C'est une excellente alternative à Evernote.

Ici l'onboarding est fait sous forme d'une note pré-existante avec un double usage :

le contenu de la note explique l'interface
la forme montre comment structurer une note, ce qui est l'un des principaux avantages de l'outil

Les avantages :

non bloquant : on peut garder la note sous le coude et y revenir quand on veut, comme un modèle
bien intégré dans l'interface

Les inconvénients :

nécessite que l'utilisateur soit habitué à ce type d'interface car elle n'est pas vraiment présentée. Par exemple le bouton pour ajouter une note est tout petit, il faut le trouver.
Mais Bear s'étant positionné comme un challenger des leaders comme Evernote, ils touchent surtout une population qui connait déjà ce genre de logiciel

La boite flottante avec Blog4ever

Chez Blog4ever nous avons estimé que les premiers pas d'un blog étaient :

2 actions de configuration : l'image d'en-tête et la page d'accueil
1 action récurrente : l'ajout d'article

Sachant que le titre du blog et le nom d'utilisateur sont choisis dans le formulaire d'inscription.

Etant donné qu'il y a plusieurs pages sur l'interface, nous avons fait le choix d'une boite flottante.
Nous avons également choisi de montrer ou étaient les fonctionnalités plutôt que d'y mener directement, ainsi l'utilisateur devient "autonome" même quand la boite disparaît.

Lors des premiers tests utilisateurs, les nouveaux arrivaient bien à aller sur la page concernée (ex : Apparence) mais avaient ensuite du mal à trouver l'élément exact à modifier (l'image de couverture). Nous avons donc rajouté un popover dans la page.

L'inspiration de cette boite est flottante est venue d'une des versions de l'onboarding Gmail :

Un autre avantage d'un onboarding part étapes est la possibilité de reprendre ces étapes dans des emails envoyés quelques jours après l'inscription, idéalement en personnalisant le contenu en fonction des étapes déjà réalisées.

Et vous, quelles méthodes d'onboarding préférez-vous ?