La puissance du user flow au sein d’un produit digital

Avez-vous déjà entendu parler du flow? Permettez-moi de vous faire un petit récapitulatif à ce sujet. Ce terme, créé par le psychologue Mihaly Csikszentmihalyi, désigne l’état mental d’une personne lorsqu’elle est complètement plongée dans une activité nécessitant une concentration maximale. Ce terme s’utilise dans de nombreux domaines comme l’éducation, le sport ou encore la musique, mais saviez-vous que le flow d’un utilisateur a son importance dans la conception d’un produit digital? Cela s’appelle l’UX flow, plus connu sous le nom de user flow.

Concrètement, qu’est-ce qu’un user flow ?

L’objectif d’un user flow est d’établir les étapes de un ou plusieurs parcours au sein de votre produit. Les avantages de le créer sont les suivants :

• Il permet une meilleure compréhension de l’outil s’il est existant
• Il facilite la création d’un parcours fluide, cohérent et intuitif pour l’utilisateur
• Il met en lumière toutes les possibilités de parcours car il existe mille et une manières d’accéder à une fonctionnalité
• C’est un gain de temps considérable lors de la conception des maquettes
• Vos Développeurs pourront visualiser l’ensemble des parcours existants (ou à établir) de manière plus concrète sur votre produit

Il faut bien prendre conscience que si on permet à l’utilisateur d’effectuer une action spécifique, nous devons anticiper les pages qu’il va devoir parcourir sur l’ensemble du produit. Dans le cas contraire, si votre utilisateur effectue un parcours parsemé d’embuches et d’incohérences, il aura moins de chance d’atteindre son objectif avec sérénité.

Donc avant de passer à l’étape des maquettes, posez-vous la question suivante : quel parcours mon utilisateur doit-il suivre pour qu’il puisse réaliser une tâche spécifique et ce, de manière intuitive ? C’est en créant le user flow de votre produit que vous allez trouver la réponse à cette question.

Maintenant, la question est de savoir à quoi ressemble un user flow.

Exemple d’un user flow pour la réservation d’un hôtel

Voici un exemple type pour que vous puissiez mieux comprendre comment est constitué un user flow.

Vous souhaitez réserver un hôtel sur une application, les actions qu’un utilisateur pourra effectuer seront les suivantes :

• L’utilisateur arrive sur l’accueil de l’application
• Il inscrit les dates et la ville où il souhaite réserver son hotel
• Plusieurs hôtels lui sont proposés
• L’utilisateur accède à la fiche d’un hôtel et il parcourt les informations qui l’intéressent
• Il clique sur le CTA “Réserver”
• Il remplit les informations concernant sa réservation, ainsi que des informations complémentaires sur une inscription rapide
• Un écran lui affiche un résumé de sa réservation avant le paiement
• Il est redirigé vers une page de confirmation

Le fait de textualiser un parcours utilisateur vous permettra de mettre le doigt sur les étapes que vous devez mettre en place, et accessoirement, retirer celles qui ne semblent pas indispensables.

Bien sûr, il y a différentes manières d’établir les étapes et c’est à vous de les déterminer avec votre équipe et vos utilisateurs.

De plus, un user flow se doit d’être graphique et compréhensible. Je vais vous partager différentes manières d’illustrer un user flow pour que vos parcours soient compris par tous.

Quelles sont les différentes formes de user flow ?

Un user flow possède différentes formes et le choix dépendra de comment vous souhaitez imager les étapes d’un parcours utilisateur. Il est important de pouvoir créer un parcours compréhensible que l’on peut concevoir et valider rapidement. Voici les différents types de user flow.

Le flow chart pour illustrer l’entièreté des parcours

De manière générale, il est possible de créer un user flow afin de répertorier l’ensemble de tous les parcours existants de votre produit. Il est plus complet et permet d’ajouter de nouveaux parcours si besoin.

La meilleure façon d’illustrer l’ensemble d’un parcours complet est d’utiliser un diagramme de flux, communément appelé flow chart.

Cas d’exemple pour l’utilisation du template d’un flow chart sur FigJam.Source :

On utilise plusieurs formes pour illustrer les actions possibles, les 3 principaux sont les suivants :

• Un rectangle aux bords arrondis désigne le départ ou la fin du parcours. Seule la couleur change pour distinguer le début de la fin.

• Un rectangle désigne les actions réalisables dans le parcours.

• Le losange illustre une condition ou une décision qui doit être effectuée par l’utilisateur ou le produit. Par exemple : “est-ce que l’email de l’utilisateur est valide ?” Deux chemins sont généralement proposés : Oui, alors … / Non, alors …

De nombreux symboles peuvent être mis en place dans la création d’un user flow à travers un flow chart, l’objectif est de faciliter la compréhension du parcours utilisateur. Faites en sorte de simplifier le flow chart en y ajoutant des détails et des explications pour que l’ensemble soit compréhensible par tous.

Exemple de symboles issus du template d’un flow chart sur FigJam.Source :

Le task flow pour illustrer un parcours unique

Le task flow illustre un parcours unique et commun à tous les utilisateurs (donc obligatoire). Il n'inclut pas l’ensemble des autres parcours du produit. C’est généralement la forme la plus simple pour créer un nouveau parcours afin d’y répertorier toutes les actions possibles.

_Exemples de plusieurs taskflow très simples sur une application d’analyse de plantes. Nous avons une tâche pour se connecter, faire une recherche, analyser une plante via une photo importée …_Source : Behance @Kavana Gangulli

Le wireflow pour illustrer le parcours avec des wireframes

C’est un parcours réalisé à partir de wireframe. Il peut être autant utilisé pour un task flow qu’un user flow complet, et possède l’avantage d’être beaucoup plus visuel qu’un diagramme.

Exemple d’un wireflow d’une application permettant delister et rappeler les abonnements mensuels à payer (électricité, internet etc).Source : Behance @Aysel Bakhshiyeva

Le UI flow pour illustrer le parcours avec des écrans finaux

Comme le wireflow, l’UI flow se réalise à partir des maquettes finales de votre produit. Il permet à votre Product Owner et vos Développeurs de visualiser l’entièreté de votre parcours sous sa forme finale. Vous pourrez décrire avec précision les actions réalisables sur chaque écran afin d’aider les Développeurs à mieux comprendre le comportement qu’aura un utilisateur lorsqu’il sera sur le produit. Il est préférable d’utiliser ce format lorsque tous vos parcours ont bien été validés.

Exemple d’un UI flow sur le transfert d’argent depuis une application bancaire.Source : Behance @Vadim Kendyukhov

À quel moment dois-je réaliser un user Flow ?

Il y a deux moments pour créer votre ux flow :

Lors de la phase de Discovery Design

Lorsque vous venez d’intégrer une nouvelle équipe d’un produit existant et qu’aucun user flow n’a été établi, vous pouvez le réaliser durant votre phase de UX discovery. Cette manière de procéder vous permettra d’illustrer tous les parcours de manière simple, ainsi que d’avoir une vision globale de l’existant. Vous pourrez facilement repérer les parcours qui méritent d’être améliorés afin d’apporter vos premières recommandations auprès de votre équipe.

Lors de la phase d’idéation pour inclure un nouveau parcours

Il est important, lors de la conception d’un nouveau parcours ou d’un produit, d’établir le user flow avant même de passer à l’étape des maquettes et du prototype. Cette étape survient lors d’un atelier d’idéation et c’est à partir de là que vous pourrez déterminer ce nouveau parcours avec les personnes concernées. Concernant les participants de cet atelier, vous pouvez inviter les membres de votre équipe ainsi que des utilisateurs qui apporteront leur vision d’un parcours réussi.

Quels outils pour créer mon user flow ?

Vous avez de nombreuses solutions pour réaliser votre user flow :

• Miro - cet outil est un incontournable et propose de nombreux templates pour travailler vos task flows. Il propose un service entrée de gamme gratuit et donne accès à la librairie complète des templates.
• Wireflow - site gratuit et comme son nom l’indique, il est parfait pour réaliser vos wireframes en plus de faire vos wireflows.
• Microsoft visio - inclus dans le pack Microsoft 365, l’outil possède une quantité importante d'organigrammes qui peuvent être repris et travaillés à votre guise.
• Draw.io est un logiciel gratuit qui vous permet de créer des diagrammes tels que des organigrammes, des structures filaires, des diagrammes UML, des organigrammes et des diagrammes de réseau.
• smartdraw est un outil de création de diagrammes en proposant des modèles prédéfinis.
• Figjam - similaire à Miro, il est inclus avec Figma et permet d’organiser des ateliers interactifs en distanciel.

Et si vous réalisez un atelier en présentiel : un tableau, des post-it et des feutres et de l’huile de coude sont suffisants. Pensez à bien prendre des photos pour conserver ce qui a été mis en place avec vos participants.

J’hésite entre deux parcours, comment je fais ?

En tant que Product Designer, le doute fait partie intégrante de notre métier. Si vous avez deux idées illustrant le même parcours et que vous avez des doutes sur le choix à effectuer, n’hésitez pas à réaliser un A/B testing pour sélectionner le parcours qui convient le mieux à vos utilisateurs.

Il sera plus aisé pour vous de modifier un parcours illustré sous la forme d’un diagramme ou wireframe que des maquettes UI qui sont déjà toutes prêtes à être intégrées.

Mais un user flow, ce n’est pas comme une User Journey ou une Experience Map ?

Étant donné que nous parlons d’un parcours utilisateur, nous sommes dans le droit de nous questionner sur la différence entre un user flow et une User Journey / Experience Map. Ces deux autres méthodes sont similaires mais possèdent leur lot de différences par rapport à un UX flow.

Une Experience Map et une User Journey mettent l’accent sur les émotions et les points de frustration qu’un utilisateur peut rencontrer dans sa journée (user journey) ou au sein d’un produit utilisé (experience map).

_Exemple d’une user journey, mettant en avant les actions d’un utilisateur ainsi que ses ressentis._Source : Behance @Lenka XIA

Dans le cas d’un user flow, on mentionne uniquement les actions possibles et réalisables qu’un utilisateur pourra faire sur notre produit. Il n’est pas question de détailler les émotions et les points de frustration. Ici, nous sommes dans du concret et sur des objectifs à atteindre sous la forme de diagrammes ou de maquettes.

En conclusion

Pour qu’un corps puisse bouger correctement, il doit posséder un bon squelette : c’est la même chose pour nos produits. Ils ont besoin d’une structure solide et fiable pour que nos utilisateurs puissent suivre le parcours sans encombre et c’est à travers un bon user flow que tout va se jouer.

• Le user flow est une méthode indispensable pour mieux comprendre et améliorer le squelette d’une application ou d’un site web.
• Vous gagnerez en confiance et en efficacité lors de l’élaboration de vos futures maquettes produits.
• Un parcours déterminé d’avance et cohérent vous assure une base solide et la satisfaction des utilisateurs qui utilisent votre produit.