Exemples d'onboarding

Guider l'utilisateur dès ses premières interactions : info-bulles, tours guidés, projecteurs et états vides observés en ligne

Un bon onboarding prend le nouveau venu par la main sans jamais le retenir de force : une info-bulle qui pointe le bon bouton, un tour guidé en deux ou trois écrans qu'on peut sauter, un état vide qui explique quoi faire au lieu de rester muet. Les captures ci-dessous montrent les grands patrons à connaître avant de concevoir l'accueil interactif de votre boutique (semaine 12, volet ONBOARDING).

L'article de référence

« Onboarding : guider l'utilisateur lors de ses premières interactions avec l'application » (UX Republic) : la théorie, une galerie d'exemples mobiles et des recommandations. La lecture qui cadre tout le reste.

Article UX Republic : Onboarding, guider l'utilisateur lors de ses premières interactions
UX Republic - l'article complet en une image : définition, exemples mobiles, recommandations

Le tour guidé

Deux ou trois écrans qui présentent les fonctions clés, avec des points de progression et une sortie toujours possible.

Feedly : tour guidé, écran Save to Boards
Feedly, écran 1 - « Save to Boards », le point de progression en bas
Feedly : tour guidé, écran Add Your Insights
Feedly, écran 2 - « Add Your Insights », flèches pour naviguer, crochet pour terminer

L'info-bulle et le projecteur

Le patron le plus léger : une bulle ancrée sur l'élément à découvrir, ou un projecteur qui assombrit tout sauf la nouveauté.

Pinshape : info-bulle jaune et état vide illustré
Pinshape - info-bulle ancrée ET état vide sympathique (« Nothing to Report! ») qui dit quoi faire
EnjoyCSS : superposition sombre avec flèche vers le bouton New
EnjoyCSS - la superposition sombre et sa flèche manuscrite vers le bouton à cliquer, avec « Skip »
Google Drive : projecteur circulaire sur une nouveauté
Google Drive - le projecteur circulaire sur la nouveauté, « Essayer » ou « Plus tard »

Le dialogue au bon moment

L'accompagnement ne se limite pas à la première visite : l'application peut guider quand la situation le demande, ou demander une permission au bon moment.

Netvibes : dialogue Spring cleaning proposant de dépoussiérer le corpus
Netvibes - « Spring cleaning » : le tableau de bord propose lui-même son entretien
SitePoint : demande de permission de notifications et popup d'infolettre
SitePoint - à doser - permission de notifications, compte à rebours et popup d'infolettre en même temps : l'excès qui fait fuir
Instabug : page produit de la rétroaction intégrée à l'application
Instabug - toute une industrie : la rétroaction et l'accompagnement directement dans l'application

Captures d'écran tirées du matériel du cours, reproduites à des fins pédagogiques d'analyse d'interfaces.