Actualités

[08/09/2017] Breaking news ! Smile décroche le label Happy Trainees 2018

Après le label HappyAtWork, Smile s’offre celui décerné par ses stagiaires et alternants !

[21/07/2017] Smile lance les premiers vélos solaires connectés à l’occasion du Sun Trip Tour 2017

Smile, leader des solutions IoT et open source, confirme sa solide expertise sur le marché de l’embarqué en participant activement à la course de vélos solaires du Sun Trip Tour.

[03/07/2017] Smile remporte le Drupagora d'Or 2017 du meilleur site e-commerce

Le vendredi 30 juin, la 3ème édition des Drupagora d'Or s'est déroulée à Paris.

Toutes les actualités picto
       

Vous avez besoin de mettre à jour votre Lecteur Flash Flash 7

Guillemet ouvrant l'actualité des solutions
et des technologies open source Guillemet fermant
picto

Onboarding : une méthode UX (plutôt) simple et très efficace

Attirer un visiteur sur votre site, c’est bien, mais le transformer en utilisateur satisfait, c’est obligatoire pour faire tourner la boutique.
Pour ça, il faut l’onboarder - “l’embarquer” en français - en lui expliquant à quel point vous avez tout fait pour répondre à ses besoins (mais attention, ça doit être vrai).

Un peu de théorie

L’onboarding, c’est "la somme des méthodes et des éléments qui aident un nouvel utilisateur à se familiariser avec un produit digital" (Renz, J., Staubitz, T., Pollack, J., Meine, C., 2014). Par extension, l'onboarding peut aussi être utilisé pour la présentation de nouvelles fonctionnalités.

Les éléments combinés d’un onboarding sont de 3 types d’après Traynor, D. et al. (2016) :

  • Modèles graphiques ("UI design patterns") : se sont les éléments visuels qui vont expliquer le produit (objectifs, fonctionnalités, interface . . .)
  • Contenus contextuels ("Contextual content”) : l’affichage des modèles graphiques doit se faire au bon moment : les utilisateurs ont des besoins différents selon la fonction du produit qu'ils utilisent
  • Communications contextuelles ("Contextual communication") : tout comme l'affichage des éléments graphiques, la communication (envoi d’e-mail, apparition d’un chatbot . . .) doit être pertinente pour l’utilisateur au moment où elle est faite

La pratique

La base pour créer un onboarding ne devrait pas vous étonner : c’est la connaissance des utilisateurs, leurs besoins et leurs motivations. Votre première tâche c’est donc d’aller à leur rencontre. L’onboarding doit les aider à comprendre votre produit et donc se concentrer sur leurs objectifs, plutôt que sur vos objectifs commerciaux.

Montrez leur que vous les avez compris :

Expliquez à l'utilisateur les bénéfices qu’il va tirer de votre produit et faîtes lui rapidement utiliser les principales fonctionnalités

 Exemple : à la fin du processus d’inscription, LinkedIn amène sur la page d’accueil et met en valeur les fonctionnalités qui vont permettre d’élargir son réseau

  • Mettez en valeur les fonctions qui démarquent le produit de vos concurrents
  • Si l'utilisation du produit requiert la création d'un compte, évitez de forcer l’inscription, mais donnez envie en autorisant l’accès à d’autres fonctionnalités

 

Quelques conseils pratiques pour la conception des éléments graphiques de votre onboarding :

  • Vous pouvez présenter l’interface à l’utilisateur en utilisant des infobulles ou des overlays pour expliquer les commandes et les zones de l’interface . . .
  • . . . Mais privilégiez l’accompagnement dans la réalisation directe d'actions, en le prenant par la main, par exemple pour la fonctionnalité principale de votre produit : ça sera plus intéressant pour l’utilisateur qui apprendra mieux et se sentira plus impliqué, mais c’est plus long à développer.
  • Communiquez le nombre d’étapes d’un parcours pour guider l’utilisateur

Exemple : inscription sur Notion (workspace virtuel)

 

Le dernier aspect à travailler sur votre onboarding est déterminant car il va servir à fidéliser votre utilisateur. Voici quelques recommandations pour parler à votre utilisateur :

  • Félicitez le après la réalisation de sa première tâche, faites lui éprouver un sentiment de satisfaction d'avoir maîtrisé quelque chose de nouveau
  • Le ton des messages est très important : il doit correspondre à la personnalité que vous souhaitez donner à votre produit et être adapté aux utilisateurs. Les UX ont beau être géniaux, ils ne sont pas forcément les mieux placés pour ça, alors n’hésitez pas à faire appel à un concepteur-rédacteur ou au marketing pour savoir comment parler aux clients.

Exemple : le ton humoristique de Mailchimp sur leur site

  • Communiquez de manière régulière, notamment par e-mails, pour présenter les nouvelles fonctionnalités

 

Maintenant que vous savez ce qu’est un onboarding et comment le concevoir, la suite va vous intéresser : nous allons vous présenter un cas concret.

 

 

Pour finir : l’exemple

 

Smile Digital a récemment été contacté par une entreprise du secteur Banque, Finance, Assurance. Cette entreprise s’est alarmée de la baisse de la satisfaction client liée à une nouvelle version de sa principale plateforme dédiée à ses clients. Utilisé uniquement par des professionnels, cet outil permet d’avoir des informations financières sur des entreprises et de gérer des contrats. Après une phase d’immersion, nous avons ajusté les parcours stratégiques, optimisé les pages pour les rendre plus simples d’utilisation, et rafraîchi l’interface pour qu’elle soit en ligne avec les tendances actuelles.

 

Pour mettre en valeur les fonctionnalités principales et présenter l’interface, nous avons proposé à cette entreprise de concevoir un onboarding. Voici comment nous avons procédé.

 

1 - définir la cible et le cadre

 

L’outil était jugé complexe par une partie des utilisateurs actuels et nous l’avons donc simplifié. Il nous paraissait quand même nécessaire d’expliquer l’interface et les parcours aux utilisateurs, nouveaux comme expérimentés.

 

Nous n’avons travaillé ni sur la procédure d’inscription ni sur la communication avec les utilisateurs en dehors de l’utilisation de l’outil, pour 2 raisons :

  • manque de temps, le time to market étant une contrainte forte du projet
  • moins pertinent pour une application métier

 

2 - définir le type d’onboarding

 

Nous avons choisi de matérialiser l’onboarding sous la forme d’une succession de vignettes explicatives présentées lors du premier affichage d’une page. Pendant notre phase de conception, les 2 types d’onboarding suivants ont été étudiés mais pas retenus :

  • L’outil avait trop de fonctionnalités pour les expliquer en quelques étapes juste avant l’arrivée sur la page d’accueil.
  • Les plus braves d’entre vous qui ont lu la partie théorique savent qu’un onboarding interactif est plus efficace. Malheureusement, ce n’était pas possible à cause de données factices qu’il aurait fallu générer (techniquement compliqué), et pas pertinent pour les utilisateurs qui ont déjà des vraies données sur leurs clients.

 

Évidemment, nous avons donné la possibilité de passer l’onboarding, de revenir à l’explication précédente et de retrouver à tout moment les vignettes explicatives depuis un bouton d’aide sticky.

 

3 - contenu à expliquer et ton des messages

 

Une fois le mode d’onboarding choisi, la troisième étape a consisté au choix des pages sur lesquelles apporter des explications. Nous avons décidé d’afficher les explications lors du premier affichage des 3 pages principales d’après les utilisateurs (identifiées lors de la phase d’immersion), mais de produire des vignettes explicatives pour toutes les pages, accessibles via le bouton d’aide sticky.

 

Il a ensuite fallu rédiger les explications et définir le ton de la rédaction, en collaboration avec l’équipe marketing du client. S’agissant d’une application métier, pas de blague ni de tutoiement ni de smiley, mais un ton formel et concis.

 

4 - tests utilisateurs

 

Trois pages de l’outil avec des vignettes expliquant l’interface ont été vues par les utilisateurs, à qui nous avons posé des questions notamment sur le contenu des vignettes et leur nombre.

 

Les résultats :

  • Très bon accueil des utilisateurs sur ces explications et intérêt démontré => certains utilisateurs avec plus d’un an d’expérience de l’outil ont découvert l’existence de certaines fonctionnalités.
  • Enfin, nous avons retravaillé certaines explications en fonction des retours des utilisateurs, soit dans un souci d’exhaustivité (ajout d’infos) soit de concision (suppression d’informations jugées peu pertinentes ou redondantes).

 

 

L’onboarding est une méthode puissante et facile à mettre en place pour accompagner la prise en main et l’utilisation d’un produit. La phase d’immersion puis les tests utilisateurs nous ont permis de produire un onboarding efficace car adapté aux besoins des utilisateurs.

 

 

Jérôme Bénaud

 

Sources

 

https://www.intercom.com/blog/strategies-for-onboarding-new-users/

https://www.invisionapp.com/inside-design/ways-to-onboard-new-users/

https://www.ux-republic.com/onboarding-guider-lutilisateur-lors-de-ses-premieres-interactions-avec-lapplication/

https://medium.com/figma-africa/user-on-boarding-and-best-practices-e2673323563f

https://www.nudgetext.com/

Hulick, S. (2014), The Elements of User Onboarding, volume 1.  Useronboard.com

Jan Renz, Thomas Staubitz, Jaqueline Pollack, Christoph Meinel (2014), Improving the Onboarding User Experience in MOOCs, Proceedings of the EduLearn

Walter, A. (2011),Le design émotionnel.Paris : Eyrolles

Carlen, F. (2017), User Onboarding(Master’s thesis). Chalmers University of Technology, Gothenburg, Suède. http://publications.lib.chalmers.se/records/fulltext/252779/252779.pdf#page=100&zoom=100,0,113

Traynor, D. et al. (2016). Intercom on onboarding. https://marketing.intercomcdn.com/assets/onboarding/v2/Intercom_on_Onboarding_v2.pdf

 

 

Pour aller plus loin

 

https://www.intercom.com/blog/strategies-for-onboarding-new-users/

https://marketing.intercomcdn.com/assets/onboarding/v2/Intercom_on_Onboarding_v2.pdf

https://www.invisionapp.com/inside-design/ways-to-onboard-new-users/

https://www.ux-republic.com/onboarding-guider-lutilisateur-lors-de-ses-premieres-interactions-avec-lapplication/

https://medium.com/figma-africa/user-on-boarding-and-best-practices-e2673323563f

https://www.nudgetext.com/

 Hulick, S. (2014), The Elements of User Onboarding, volume 1.  Useronboard.com

Jan Renz, Thomas Staubitz, Jaqueline Pollack, Christoph Meinel (2014), Improving the Onboarding User Experience in MOOCs, Proceedings of the EduLearn

Walter, A. (2011),Le design émotionnel.Paris : Eyrolles

Carlen, F. (2017), User Onboarding(Master’s thesis). Chalmers University of Technology, Gothenburg, Suède. http://publications.lib.chalmers.se/records/fulltext/252779/252779.pdf#page=100&zoom=100,0,113

Jérôme Bénaud
picto

Commentaires

Soyez la premiere personne à ajouter un commentaire sur cet article.
Ecrire un nouveau commentaire