User flow, User Journey, Quelle est la différence ? Ça sonne pareil, mais ce n'est pas pareil.

User stories & User flows, deux concepts similaires mais bien différents. Leurs objectifs commun: faciliter la conception, la compréhension et la planification d’un produit ou service.

Démêlons ensemble ce sac de nœud, chacun a son rôle à jouer.

User Journey

L’User Journey, aussi appelée customer journey est une série d’étapes détaillant les différentes actions qu’un utilisateur doit effectuer pour utiliser notre produit ou une partie de notre produit. Elle se base sur les personas des utilisateurs types.

L’User Journey prend en compte les éléments environnementaux extérieurs et contextuels à notre produit, par exemple le lieu, l’heure ou une condition d’utilisation comme du temps à tuer dans les transports publics.

Formellement ces recherches se traduiront par une User journey map, une carte chronologique des actions de l’utilisateurs intra et extra produit afin de découvrir les points bloquants du parcours de l’utilisateur.

On cherchera à définir entre autre pour chaque étape de l’utilisateur son état émotionnel, ses aspirations, ses besoins pour découvrir les points de frictions et nos potentielles opportunités.

Les points importants à développer seront:

  • Les actions de l’utilisateur.
  • Ce que pense l’utilisateur.
  • L’état émotionnel de l’utilisateur. Les points de frustrations sont les points les plus intéressants car ils sont sources d’améliorations et d’opportunités.

Grâce au mapping nous avons maintenant une bonne idée des motivations et actions de notre utilisateur cible. Il est temps de rentrer dans les détails de notre produit, it’s User Flow time baby !

User flow

L’user journey et son mapping nous ont permis de définir (ou redéfinir) le chemin de l’utilisateur ainsi que ses besoins et ses désirs. L’User Flow va se charger de découper chaque grande étape en petites actions nécessaires à l’utilisateur pour achever l’étape de la journey.

L’user flow se concentre uniquement sur les actions utilisateurs à l’intérieur de notre produit et se traduit sous la forme d’un flow chart, une carte des chemins empruntables par l’utilisateur dans notre produit pour accomplir son objectif.

Cette méthode aidera grandement à définir quelles informations et actions seront nécessaires sur chaque écran pour que l’utilisateur avance sans friction.

Une fois défini, un user flow est tout naturellement un très bon outil pour nous aider à définir et planifier les features ou modules à développer afin d’obtenir un produit intuitif et agréable à utiliser.

Ce qu’il faut garder en tête:

  • L’objectif du flow. Il faut se focaliser sur une action précise de l’utilisateur afin de rester clair et précis.
  • Le contexte. Comment l’utilisateur entre dans l’application (email, publicité, etc.), l’action principal qu’il veut effectuer, il peut être défini par une User Story map et les personas.
  • Les informations et points d’action. On définira ce que l’utilisateur peut trouver sur chaque écran pour avoir une vision claire des possibilités de notre produit.

En Résumé, l’User Journey et l’User Flow ont des fonctions distinctes mais sont tous les deux des outils très utiles pour comprendre notre utilisateur et notre produit.
Ce sont également d’excellents véhicules pour communiquer et fédérer autour de vos idées en interne comme en externe.

Bonne journey ! 

 

Micro-interactions: Des animations dans nos UI Donnez un petit coeur à notre interface

Que cherchons nous d’une application ou d’une page internet ?

Certes oui, une information ou une fonctionnalité, quelque chose qui va nous faire avancer dans une démarche, mais pour cela, nul grand besoin d’interfaces léchées, quelque chose de simple et fonctionnel devrait suffire.

Et pourtant l’humain est attiré par l’émotionnel, il a besoin d’être captivé, de se sentir en phase avec ce qu’on lui propose. Cela passe par une partie de design statique qui donne le ton, mais on peut aller plus loin et ajouter de l’animation dans ses interfaces c’est ce qu’on appelle les micro-interactions.

Nous allons voir que ces micro-interactions peuvent remplir différentes fonctions mais toutes ont une chose en commun, l’idée de connecter l’utilisateur à son interface.

1. Feedback

Dans le cas du feedback, on utilise l’animation pour confirmer l’action d’un l’utilisateur, un changement d’état ou une évolution.

 

2. Transition / flow

Ici l’animation permet de passer d’une partie de l’interface à une autre et sert de repaire pour l’utilisateur. Il sait d’où il vient et où il est arrivé ce qui simplifie le chemin inverse.

3. Mise en lumière

Dans ce cas, l’animation sert à créer une emphase sur une partie de l’interface. Si l’on veut faire comprendre à notre utilisateur quelles sont ses possibilité ou les actions l’action la plus essentielle à effectuer.

4. Delighters

Cette micro-interaction n’a pour seul but que de créer de l’émotion et une vrai personnalité à notre produit.

 

Il s’agira ainsi de mixer les concepts pour créer une interface intuitive avec de la personnalité.

No spam please !

Bien que les micro-interactions soient délicieusement attractive pour un designer, il faut savoir se ménager et les utiliser à bon escient.

Attention à ne pas fatiguer votre utilisateur. Pensons qu’un utilisateur va probablement revenir sur notre interface plusieurs fois, il va s’habituer à nos animations et va se fatiguer de perdre du temps du temps dessus.

Il faut faire un effort pour garder nos animations:
simples, en allant à l’essentiel, pas de triple rotations ou d’effet de rebond lourdaud sur une icone.
brèves, en général on conseille un maximum de 300 – 400 ms par animation.
pertinentes, il faut toujours se mettre à la place de son utilisateur, se demander si l’interaction ne va pas le freiner au lieu de l’aider.

Pour creuser le sujet et vous inspirer dribbble reste toujours une excellente source.  Je vous conseille également d’aller faire un tour sur littlebigdetails.com qui analyse certain détails de design intéressants trouvés sur les internets, tout n’est pas animé mais le site reste pertinent.

Bonne micro-interactions !

Qu’est ce que l’user onboarding et quid de son expérience utilisateur ? Acceuillir son utilisateur en douceur.

L’user onboarding c’est l’expérience qui permet à l’utilisateur de prendre en main notre produit rapidement. C’est une étape clé qui transforme un simple visiteur en utilisateur.

En bref c’est comme un premier rendez-vous et voici quelques conseils de coach en sédUXtion pour que tout se passe bien et que l’utilisateur revienne.

Les objectifs de l’Onboarding

Faire faire à l’utilisateur la chose la plus importante que nous voudrions qu’il fasse.

Autant que possible, il ne faut pas faire de détours cela risque d’égarer l’utilisateur.  Il faut aller droit au but, à l’action la plus essentielle.

Une des premières chose que vous fait faire twitter est de nous faire suivre d’autres comptes.

Donner conscience à l’utilisateur des bénéfices à tirer de votre service.

Transformer un visiteur curieux en utilisateur ne peut se faire sans lui donner envie de revenir. Pour ce faire il faut :
– Que notre service comble un besoin du visiteur.
– Lui faire comprendre les bénéfices qu’il tirera de notre produit.

On apprend mieux quand on sait pourquoi on apprend.  

Faciliter l’appréhension de principes nouveaux pour l’utilisateur.

Pas besoin de faire perdre son temps à l’utilisateur en lui expliquant étape par étape comment fonctionne un site e-commerce classique, par contre il sera important de prendre plus de temps pour faire comprendre comment marche un principe de fonctionnement propre à notre service.

UX de l’onboarding

Pour créer une bonne expérience d’onboarding, on peut ainsi traduire les objectifs de l’onboarding en terme de conception et d’expérience utilisateur assez facilement.

Réduire les frictions au minimum. 

Il faut faire très attention à ne pas décourager le visiteur avec un onboarding trop on-boring (ahah) ! Pour cela, il faut :
– Identifier l’action principale à accomplir et se concentrer dessus.
– Créer du lien avec le visiteur, le mettre à l’aise.
– Plus le processus est long, plus il est important de rappeler au visiteur qu’il a presque fini.

Ajouter des éléments de gamification peuvent aider à faciliter l’expérience utilisateur.

Être concis et ne pas faire perdre de temps à l’utilisateur.

Il est très difficile de garder un visiteur intéressé quand notre onboarding est trop long ou trop laborieux. Veillons donc à :
– Réduire les premiers réglages (settings) à l’essentiel.
– Minimiser le nombre d’étapes obligatoires.
– Faire tester le service le plus rapidement possible.

On apprend mieux au travers d’une expérience.

Ne négliger aucune partie de l’expérience

La première expérience d’un utilisateur ne se limite pas à notre site, elle est bien plus globale. Veillons donc à ne pas négliger l’experience de l’app store ni celui des emails ou des publicités.

Être attentif aux mots employés 

Les wordings que nous utilisons seront primordiaux pour une bonne expérience d’onboarding, n’hésitez pas à en tester plusieurs. Il faut essayer de se rapprocher dans le ton au maximum de son audience et des valeurs que nous souhaitons communiquer.

Le wording des Call to action et des titres sont particulièrement déterminants.

Apprendre et améliorer son Onboarding

Notre expérience ne sera probablement pas parfaite du premier coup, pas de problème, c’est normal ! L’important est d’itérer et de tester différentes approches. Nous pouvons avoir recours à des A/B tests pour optimiser au maximum l’activation, la conversion ou la rétention.

Gardons en tête qu’il est important de choisir les bonnes données à mesurer lors des tests. On n’effectuera pas les mêmes tests si l’on cherche à vendre un programme ou à créer un nouveau reseaux social.

Il existe différentes méthodes d’onboarding

La landing page

La landing page est notre premier outil de conversion, elle présente en priorité le produit et son bénéfice pour le visiteur.

Une fois le produit établi, on peut rentrer dans les détails pour les curieux.

Détail intéressant chez fred de la compta, une partie de la page est interactive et invite très intuitivement le visiteur à estimer sa comptabilité. Cela introduit rapidement et concrètement les bénéfices du service au visiteur.

Le slider

Sans rentrer dans des tutoriels techniques, l’application evernote nous donne rapidement une bonne idée des possibilités d’utilisation du produit et des problèmes qu’elle résout.

La vidéo (Freehand by Invision)

La vidéo permet de distiller rapidement une grosse quantité d’information en peu de temps. Le visiteur a ainsi une bonne vue d’ensemble d’un produit, attention à ne pas le perdre en allant trop vite.

Le tour interactif

Shepherd est à la fois un outil et un bon exemple de tour interactif. Lors de l’arrivée, chaque élément important est mis en valeur et expliqué.

On peut quitter le tutoriel à n’importe quel moment en un clic pour accéder à l’ensemble de la page.

 

Le setup

Étape classique dans l’inscription à un service, le setup est une demande des informations essentielles à fournir par un visiteur. Il faut essayer de rester succinct pour ne pas décourager le visiteur.

On retrouve souvent dans ces informations: le nom, l’email et si le service est payant une méthode de paiement.

Espace démo ou l’avant gout

Duolinguo met l’accent sur la facilité d’expérience en nous faisant tester directement leur système d’apprentissage très simple et très instinctif.

L’expérience se termine par une première récompense et laisse entrevoir la marge de progression puis invite à créer son profil pour continuer l’expérience

Continue onboarding, continuer à créer de l’engagement.

Une fois le visiteur transformé en utilisateur, l’onboarding peut continuer afin de le pousser plus loin dans la découverte du produit ou dans l’ajout d’informations qui enrichiraient son profil et faciliteraient l’expérience de l’utilisateur.

La homepage de malt est bourrée d’incitations, sous différentes formes, à améliorer son profil et ce pour rendre attractifs les freelancers, les aider à trouver des contrats et ainsi leur donner envie de revenir.

Tout service a besoin d’une expérience d’onboarding mais beaucoup vont différer dans leur pédagogie. On pourra mixer les méthodes afin de créer le cocktail UX parfait pour votre utilisateur.

Si vous avez encore besoin d’inspiration, je vous conseille de visiter Useronboard.com où Samuel Hulick décortique en détail différents onboardings (Paypal, united airline, dropbox et bien d’autres grands specimen de la faune internet!! ).

Bienvenue à bord !