user flow
Ergonomie (UX/UI)

Optimisez l’expérience utilisateur grâce à un user flow efficace

-

Chaque produit créé existe et a été conçu pour répondre en premier lieu aux besoins et aux problématiques auxquels fait face un client. Ce principe du commerce s’appliqué également aux applications.

Cependant, une problématique supplémentaire s’applique lorsque vous créez votre application. Car même si votre application possède toutes les fonctionnalités que demandent vos utilisateurs, si l’expérience utilisateur est mauvaise, alors vos clients désinstalleront votre application mobile.

Pour répondre à toutes ces problématiques, il est possible de créer un « user flow« , qui se présente souvent sous forme de diagramme de flux d’utilisateurs. Il montre le parcours complet d’un utilisateur lorsqu’il utilise un produit. Ainsi, le flux d’utilisateurs va décrire le mouvement de l’utilisateur à travers le produit d’un point d’entrée jusqu’à l’interaction finale, en définissant correctement toutes les étapes intermédiaires.

Dans cet article, nous allons donc :

  • Définir ce qu’est l’user flow et l’UX,
  • Voir pourquoi il est important d’utiliser l’user flow pour son application et,
  • Nous verrons un exemple d’user flow réussi !

Qu’est-ce que l’user flow?

Lorsqu’un utilisateur utilise un site ou une application mobile, ce dernier peut passer par différentes voies pour atteindre un objectif. Ainsi pour matérialiser le parcours de l’utilisateur, les développeurs et chargés de projets peuvent faire appel au user flow.

Le User Flow est donc une représentation graphique, qui peut être écrite ou numérique, des chemins qu’un utilisateur peut emprunter lorsqu’il navigue sur un site Internet ou une application.

À savoir que cette représentation s’étend d’un point d’entrée par exemple d’une landing page (page d’accueil) vers la page du site web pour créer un compte ou commander un produit par exemple.

Pour arriver du point de départ au point d’arrivée, l’utilisateur a une multitude de choix et d’options qui s’offrent à lui. Par exemple, si je souhaite créer un compte, je peux très bien le créer à partir de la landing page comme passer d’abord par la page décrivant les services de l’entreprise pour par la suite m’inscrire.

Ainsi, tous ces cheminements différents (qui sont appelés points de contact) sont représentés par un nœud dans la cartographie du user flow.

Pour synthétiser la notion de user flow, voici un exemple concret. Prenons l’exemple d’un site internet sous forme e-commerce qui vend des chaussettes. Dans un monde idéal, voici à quoi ressemblerait l’user flow du site web :

  1. L’utilisateur arrive sur la page d’accueil,
  2. Il se dirige vers la catégorie des chaussettes « hautes en coton »,
  3. Depuis la page catégorie « chaussettes hautes en coton » il choisit le modèle noir
  4. Sur la page produit « chaussette haute en coton noir », il commande 3 paires
  5. Il paye.

Cet User Flow est une version très simplifiée. Car en réalité l’utilisateur va très probablement aller sur d’autres pages avant d’acheter un produit.

Cela s’explique très facilement parce que l’utilisateur reste un consommateur avant tout et il souhaitera comparer toutes les offres avant de passer à l’achat. Par conséquent il conviendra, dans l’user flux, de matérialiser les différents choix possibles par des nœuds.

Pourquoi utiliser l’user flow

L’User Flow est utile dans 3 situations bien précises, pour :

  1. Optimiser des plateformes existantes,
  2. Créer une interface intuitive et,
  3. Matérialiser un projet/produit plus facilement.

#1 Pour optimiser des plateformes existantes

La première situation dans laquelle l’user flow est utile est l’optimisation de plateformes (sites web ou applications mobiles) déjà existantes.

En effet, lorsque l’on développe une application ou un site web, la première version publiée est souvent perfectible. On attend soit les retours des utilisateurs ou soit on tient à minimiser le budget par peur que le site web ou l’application mobile ne rencontre pas son public.

Mais une fois la première version réalisée, l’heure est souvent au perfectionnement de l’outil développé.

Ainsi, le user flow vous permettra de visualiser les points de décrochage dans le flux utilisateurs de votre site ou application mobile.

Même si cette étape est très chronophage, elle vous sera utile sur plusieurs aspects. En identifiant les points de décrochage, vous dirigerez le flux utilisateur vers le point d’arrivée souhaité ce qui vous permettra par exemple, pour un site e-commerce de booster vos ventes.

#2 Créer une interface intuitive

Le user flow peut-être aussi déployé lors de la conception même d’un site web ou d’une application mobile.

Cela va avoir deux impacts significatifs sur la performance de votre site web :

  1. Vous obtiendrez un outil prêt et optimisé dès le jour de sa publication. Ce qui peut être très utile pour engranger un nombre d’utilisateurs important très rapidement ou avoir un chiffre d’affaires conséquent très rapidement.
  2. Faciliter le travail des développeurs et surtout des UX designers. La relation entre client et développeur peut être difficile car il est parfois compliqué de se faire comprendre sur ses volontés. Ainsi en réalisant un user flow, vous donnez aux professionnels qui vous entourent sur votre projet des informations qui les aideront à comprendre votre vision pour arriver au livrable souhaité.

#3 Présenter un projet de produit digital à vos clients/collègues

Pour finir, les user flows représentent également un excellent outil de communication lorsqu’il s’agit de présenter la maquette d’un produit digital à des tiers comme des clients ou des collègues.

Cela permet de donner des informations et un point de vue global sur la façon dont l’interface est censée fonctionner.

Le user flow peut donc aider votre équipe de designers à visualiser comment les utilisateurs vont se déplacer à l’intérieur de la plateforme et garantit donc que toutes les parties prenantes sont sur la même longueur d’onde ce qui génère un environnement de travail plus productif et gratifiant.

Comment construire un user flow

Construire un User Flow requiert premièrement de comprendre ce que veulent les utilisateurs et ce dont ils ont réellement besoin. Il convient donc de se poser les questions suivantes :

  • Que souhaite un utilisateur lorsqu’il utilise votre plateforme ?
  • Quels sont les points de décrochage identifiés ?

Pour cela, vous pouvez donc vous aider d’autres outils comme les heat maps ou demander des feedbacks à vos utilisateurs.

Une fois les besoins de vos cibles clairement identifiés, il est temps de réaliser le User Flow en suivant ces trois étapes :  

  1. Créez un diagramme qui sera le squelette de votre user flow. Son rôle est de retranscrire visuellement les actions et mouvements des utilisateurs sur une plateforme,
  2. Matérialisez le parcours utilisateur. Vous pouvez vous aider de croquis, de wireframes ou tout simplement de captures d’écran si votre site ou application existe déjà.
  3. Détaillez les actions des utilisateurs. Listez tout ce que doit faire un utilisateur pour atteindre l’objectif souhaité.

En principe, les user flows sont synthétisés durant les étapes de planification du travail de design, qui viennent après les démarches de recherches concernant les utilisateurs.

Pour savoir quand est-ce que votre user flow est fini, il suffit de pouvoir compter et d’identifier clairement le nombre d’actions et lesquelles précisément pour que l’utilisateur arrive au point final.


Vous cherchez |

Parmi 32 000 agences, nous sélectionnons celles qui vous correspondent.

Sans engagement, totalement gratuit.

Montrez-moi les agences

Les outils à votre disposition

Pour créer votre user flow, vous pouvez vous aider de n’importe quelle plateforme wireframe, dont voici une sélection :

Wireflow

Wireflow est une solution gratuite et open source qui permet de concevoir simplement et rapidement l’arborescence d’un site web ou d’une application mobile.

Son fonctionnement est très facile et il ne nécessite pas de compétences techniques particulières. Avec un simple clique, vous pouvez ajouter un modèle de page sur l’espace de travail et ainsi créer un diagramme simplement.

Microsoft Visio

Microsoft Visio est un outil payant (5$ par mois) et développé par le géant américain Microsoft. Son point fort est qu’avec le menu d’édition professionnel, vous aurez accès à un large choix de modèles pour créer des diagrammes complets.

L’un des avantages de Visio est aussi les similarités qu’offre son interface. Il est facile de se familiariser avec le logiciel car il est similaire à Microsoft Office.

OmniGraffle

OmniGraffle est un logiciel disponible sur Mac ainsi que sur iOS et qui est relativement facile d’utilisation. Le logiciel propose est une solution payante de 12,49$ par mois.

L’avantage de ce logiciel est le grand nombre d’outils de base tels que des outils de stylet, de ligne, de forme et de texte qu’il propose.

LuicidChart

LucidChart est un outil assez complet qui combine trois fonctionnalités :

  1. Création de diagrammes,
  2. Visualisation des données,
  3. Collaboration.

Le logiciel propose une solution payante, à partir de 7,95$ par mois.

LucidChart est aussi compatible avec la solution Google suite. Il est possible d’importer directement ses digrammes depuis LucidChart vers un Google Docs par exemple.

Exemple d’un user flow

exemple user flow
Voici un exemple d’un user flow réalisé par Riley Pelosi sur Dribble.

Sur cet user flow, qui prend l’exemple d’un utilisateur appelé Alex, il est facile de discerner le point d’entrée situé en haut à gauche de l’image. Ce dernier se matérialise par une inscription à une plateforme via Facebook, un email ou via un login.

Par la suite le créateur de l’user flow a créé les points de rupture avec des rectangles bleus. Souvent l’utilisateur a deux choix, soit de réaliser l’action soit de passer. Nous distinguons aussi facilement le point final situé en bas de l’écran à gauche.

Ce diagramme est un exemple plutôt réussi de user flow. Car le concepteur est parti d’un point de départ, a matérialisé pour chaque étape du flux utilisateur les choix possibles sous forme de nœud pour finalement arriver au point d’arrivée.

Le seul bémol de ce diagramme est qu’il est appliqué à une seule personne, Alex. Alors que le but d’un user flow est de raisonner d’un point de vue plutôt global.

Différence entre user flow et parcours utilisateur

Le parcours utilisateur aussi appelé « User Journey » en anglais est une représentation visuelle (comme le user flow), de la relation qu’un utilisateur entretien avec un produit, dans le temps et sur différents canaux par exemple :

  • Un site web,
  • Une application,
  • Une boutique physique…

L’User Journey se base sur les personas des utilisateurs et elle prend en compte les éléments environnementaux contextuels et extérieurs à un produit. Par exemple le lieu, l’heure ou le contexte dans lequel le produit est utilisé.

La différence entre l’user flow et le parcours utilisateur est que le parcours utilisateur prend en compte le ressenti de l’utilisateur, appelé « mindset » en anglais.

Ainsi, on oppose l’user flow et le parcours utilisateur sur les points de vue utilisés.

Le parcours utilisateur sera utilisé pour se positionner du point de vue de l’utilisateur alors que l’user flow sera utilisé pour un point de vue global et impersonnel.

Toutefois, ces deux outils restent semblables dans leurs finalités. S’interroger sur les motivations de l’utilisateur, les difficultés rencontrées par ce dernier à chaque étape ou sur les différents canaux, constituent un excellent moyen d’améliorer le parcours et la satisfaction de ses clients.

Conclusion

Lorsque l’on sait l’importance de l’intuitivité d’une plateforme web ou mobile, il est essentiel de trouver les bons outils pour optimiser au mieux son projet et l’User Flow en fait partie !

En effet, lorsqu’une interface est facilement compréhensible, vous augmentez la probabilité que l’utilisateur reste sur votre plateforme. Ce qui de facto permet d’engranger plus de ventes.

Il est possible de créer votre user flow lors de la création de votre plateforme. Mais aussi une fois déjà développée dans une optique d’optimisation du flux d’utilisateurs.

close

Accèdez à notre contenu exclusif !

email