Un user flow décrit, écran par écran, le chemin d'un utilisateur pour accomplir une tâche sur un site ou une application. Définition, différence avec le parcours utilisateur, exemple e-commerce, méthode et amélioration par les tests A/B.
Un user flow (flux utilisateur en français) est le chemin, étape par étape, qu’un utilisateur suit sur un site ou une application pour accomplir une tâche précise : acheter un produit, créer un compte, prendre rendez-vous. On le représente le plus souvent sous forme de diagramme (un organigramme avec des écrans, des actions et des décisions), avant de dessiner les maquettes. Son intérêt : vérifier qu’un parcours est court, logique et sans impasse avant de payer le développement.
On voit ici ce qu’est exactement un user flow, en quoi il se distingue d’un parcours utilisateur (user journey), les différents types de diagrammes, un exemple complet sur un site e-commerce, la méthode pour en construire un, puis comment l’améliorer une fois le site en ligne grâce aux données et aux tests A/B.
- Qu’est-ce qu’un user flow ?
- Quelle différence entre user flow et parcours utilisateur ?
- À quoi sert un user flow dans un projet web ?
- Quels sont les types de user flow ?
- À quoi ressemble un user flow e-commerce ?
- Comment créer un user flow, étape par étape ?
- Avec quels outils dessiner un user flow ?
- Comment améliorer un user flow existant ?
- Quelles erreurs éviter ?
- Questions fréquentes
- Sources
Qu’est-ce qu’un user flow ?
Le Nielsen Norman Group, référence mondiale en ergonomie, définit le user flow comme « un ensemble d’interactions qui décrit la suite d’étapes typique ou idéale nécessaire pour accomplir une tâche courante avec un produit ». Autrement dit, c’est le trajet que prend un utilisateur depuis son point d’entrée (une page d’accueil, une fiche produit arrivée depuis Google, une publicité) jusqu’à l’action finale (le paiement validé, le formulaire envoyé).
Un user flow se concentre sur une tâche et sur un produit : votre site, votre application. Il détaille les écrans traversés, les actions (cliquer, saisir, choisir) et les embranchements (l’utilisateur est-il connecté ? son panier est-il vide ?). C’est un outil de conception UX : il sert à penser l’enchaînement avant de penser l’apparence.
En une phrase : le user flow répond à la question « par quels écrans et quelles actions passe l’utilisateur pour faire X, et où peut-il se perdre ? ».
Quelle différence entre user flow et parcours utilisateur ?
Les deux termes sont souvent confondus, mais ils ne travaillent pas à la même échelle. Le parcours utilisateur (user journey, représenté par une journey map) décrit l’expérience globale d’une personne pour atteindre un objectif de haut niveau, sur plusieurs canaux et sur une durée qui peut aller de quelques jours à plusieurs mois, en intégrant ses émotions et ses questions. Le user flow, lui, zoome sur une tâche précise, dans un seul produit, sur une durée de quelques minutes.
| Critère | Parcours utilisateur (user journey) | User flow |
|---|---|---|
| Échelle | Macro : plusieurs canaux (site, e-mail, magasin, téléphone) | Micro : un seul produit (site ou application) |
| Durée couverte | Jours, semaines ou mois | Minutes, parfois quelques heures |
| Contenu | Étapes, pensées, émotions, points de contact | Écrans, actions, décisions, conditions |
| Livrable | Journey map | Organigramme, wireflow, diagramme de tâche |
| Question type | Comment le client vit-il son achat de bout en bout ? | Combien d’écrans pour payer, et où bloque-t-il ? |
Les deux se complètent : la journey map identifie le moment clé (par exemple « le client compare les offres sur mobile le soir »), le user flow détaille comment votre interface l’accompagne à ce moment précis. Pour la vision globale, voyez notre article sur la cartographie du parcours client.
À quoi sert un user flow dans un projet web ?
Le user flow est la base des exigences de contenu de chaque page ou écran. Avant de dessiner quoi que ce soit, il oblige l’équipe (client, designer, développeur) à se mettre d’accord sur ce que l’utilisateur doit pouvoir faire et dans quel ordre. Pour chaque flux, posez-vous quatre questions :
- Qu’est-ce que l’utilisateur essaie d’accomplir ?
- Qu’est-ce qui compte pour lui, et qu’est-ce qui lui donnera confiance pour continuer (avis, prix clair, délai de livraison, paiement sécurisé) ?
- De quelles informations a-t-il besoin à chaque étape pour avancer ?
- Quelles hésitations ou quels obstacles peuvent le faire abandonner ?
Les réponses dictent le contenu des pages et les liens de navigation à prévoir. Un visiteur qui vient lire des articles n’a pas besoin de la même page qu’un visiteur qui veut acheter vite et repartir. Concrètement, un user flow bien fait permet de :
- repérer les étapes inutiles avant qu’elles soient développées (un écran de confirmation superflu, une création de compte obligatoire) ;
- ne pas oublier les cas d’erreur : mot de passe oublié, carte refusée, produit en rupture, code promo invalide ;
- chiffrer plus justement un projet, puisque chaque écran et chaque condition sont listés ;
- aligner l’équipe : le diagramme sert de référence commune entre marketing, design et développement.
Quels sont les types de user flow ?
Il n’existe pas de norme unique, mais on rencontre trois formats principaux, du plus abstrait au plus visuel :
- Le diagramme de tâche (task flow) : une suite linéaire d’actions pour une tâche simple, sans embranchement. Utile pour une première ébauche.
- L’organigramme (flowchart) : le format le plus courant. Des formes conventionnelles (rectangle pour un écran ou une action, losange pour une décision, flèches pour les transitions) montrent les différents chemins possibles et leurs conditions.
- Le wireflow : un mélange de wireframes et d’organigramme, où chaque étape est représentée par une vignette d’écran. Le Nielsen Norman Group le recommande particulièrement pour les applications dont le contenu change sur un même écran. Si vous en êtes à ce stade, notre article qu’est-ce qu’un wireframe vous sera utile.
À quoi ressemble un user flow e-commerce ?
Les user flows prennent des formes très différentes selon le type de site. Pour une boutique en ligne, le flux « acheter un produit » le plus simple ressemble à ceci :
- L’utilisateur arrive sur la page d’accueil.
- Il clique sur une catégorie.
- Depuis la catégorie, il ouvre une fiche produit.
- Il choisit une taille ou une couleur, puis ajoute l’article au panier.
- Depuis le panier, il lance la commande.
- Il saisit ses coordonnées et son mode de livraison.
- Il paie et arrive sur la page de confirmation.
C’est évidemment une version simplifiée. Dans la réalité, les chemins se multiplient : l’utilisateur revient à la catégorie pour comparer, passe par le moteur de recherche interne plutôt que par le menu, arrive directement sur une fiche produit depuis Google ou une publicité, ou doit se connecter à son compte avant de payer. C’est pourquoi les user flows sont modélisés en organigramme, avec un nœud pour chaque chemin important et un losange pour chaque décision :
- Le produit est-il disponible dans la taille choisie ? Si non : proposer une alerte de retour en stock.
- L’utilisateur a-t-il un compte ? Si non : lui proposer de commander en invité plutôt que de l’obliger à s’inscrire.
- Le paiement est-il accepté ? Si non : afficher un message clair et permettre de réessayer sans ressaisir l’adresse.
Le but de l’analyse du flux est d’identifier les principaux chemins et les endroits où la navigation peut être simplifiée, avant de passer au prototype. Pour une boutique, ce travail fait partie de la conception au même titre que le catalogue ; c’est ce qu’on fait en amont d’une création de site e-commerce.
Comment créer un user flow, étape par étape ?
- Définir l’objectif de l’utilisateur et celui de l’entreprise. Par exemple : l’utilisateur veut réserver un créneau, l’entreprise veut une réservation confirmée avec un numéro de contact valide.
- Identifier les points d’entrée. D’où arrive-t-il ? Recherche Google, réseau social, newsletter, lien direct. Chaque point d’entrée peut démarrer le flux à un endroit différent.
- Lister les informations nécessaires à chaque étape. Ce que l’utilisateur doit savoir (prix, disponibilité, délais) et ce qu’il doit fournir (nom, e-mail, paiement).
- Tracer le chemin idéal (le « happy path ») : le trajet le plus court, sans incident.
- Ajouter les embranchements et les erreurs : conditions, retours en arrière, messages d’erreur, abandons possibles.
- Compter et réduire. Chaque écran ou champ supplémentaire est une occasion d’abandon. Demandez-vous pour chacun s’il est indispensable.
- Faire relire et tester. Montrez le diagramme à quelqu’un qui ne connaît pas le projet, puis testez le prototype auprès de quelques utilisateurs réels.
Avec quels outils dessiner un user flow ?
Un papier et un crayon suffisent pour une première version. Pour un livrable partageable, plusieurs outils en ligne s’y prêtent :
- FigJam (tableau blanc de Figma) : pratique si vos maquettes sont déjà dans Figma, puisque tout reste au même endroit.
- Whimsical ou Miro : des tableaux blancs collaboratifs avec des formes d’organigramme prêtes à l’emploi.
- Overflow : un outil spécialisé dans les user flows, qui assemble des écrans de maquette en diagramme présentable.
L’outil compte moins que la discipline : un diagramme à jour, lisible par toute l’équipe, avec une légende des symboles.
Comment améliorer un user flow existant ?
Une fois le site en ligne, le user flow devient mesurable. En collectant des données sur chaque étape (par exemple avec les rapports d’entonnoir de Google Analytics 4 ou de votre outil d’analyse), vous voyez comment les visiteurs progressent dans votre tunnel. Par nature, un entonnoir se rétrécit à chaque étape. Les données montrent où il « fuit », c’est-à-dire où une grande part des visiteurs abandonne entre deux étapes.
Pour colmater ces fuites, cherchez les points de friction : où faut-il donner plus d’informations, où faut-il au contraire retirer des distractions ? Les cartes de chaleur (heatmaps) et les enregistrements de sessions aident à comprendre le « pourquoi » derrière les chiffres.
Exemple classique : l’analyse montre que beaucoup de visiteurs atteignent le panier sans terminer leur achat. Vous formulez alors des hypothèses. Les frais de livraison sont-ils découverts trop tard ? Le formulaire a-t-il trop de champs ? L’étape suivante est-elle claire ? La création de compte est-elle obligatoire ? Notre article dédié à la réduction de l’abandon de panier passe ces causes en revue.
Comment les tests A/B aident-ils à valider les changements ?
Une hypothèse n’est pas une preuve. Le test A/B consiste à montrer deux versions d’une page ou d’une étape à deux groupes de visiteurs comparables, puis à mesurer laquelle convertit le mieux avec des données réelles. C’est le bon moyen de vérifier qu’une modification du flux (supprimer un champ, afficher les frais plus tôt, ajouter la commande en invité) améliore vraiment le résultat, plutôt que de se fier à une intuition.
En répétant ce cycle (observer le flux, repérer une fuite, formuler une hypothèse, tester), on améliore le taux de conversion de façon continue. Le détail de la méthode est dans notre article sur l’A/B testing. Attention : un test A/B demande un volume de trafic suffisant pour donner un résultat fiable ; sur un petit site, des tests utilisateurs qualitatifs (quelques personnes à qui l’on demande d’accomplir la tâche devant vous) sont souvent plus instructifs.
Quelles erreurs éviter ?
- Ne dessiner que le chemin idéal. Les vrais problèmes se cachent dans les erreurs et les retours en arrière.
- Partir des pages plutôt que des tâches. Un user flow part de ce que l’utilisateur veut faire, pas de l’arborescence du site.
- Ignorer les points d’entrée secondaires. Beaucoup de visiteurs n’arrivent jamais par la page d’accueil.
- Confondre user flow et maquette. Le diagramme ne dit rien de l’apparence ; il fixe l’enchaînement.
- Le laisser mourir. Un user flow qui n’est plus à jour après le lancement ne sert plus à analyser les données.
Si vous préparez un site ou une application et voulez poser ces parcours avant de lancer le développement, c’est une étape qu’on intègre à chaque création de site internet. Vous pouvez nous écrire à contact@osmova.com ou passer par le formulaire de contact.
Questions fréquentes
Quelle est la différence entre le parcours utilisateur et l’user flow ?
Le parcours utilisateur décrit l’expérience complète d’une personne sur plusieurs canaux et sur une longue durée, émotions comprises. Le user flow détaille les écrans et actions nécessaires pour accomplir une tâche précise dans un seul produit.
Comment dit-on user flow en français ?
On parle de « flux utilisateur » ou de « parcours de tâche ». Dans les équipes web francophones, le terme anglais reste le plus employé.
À quel moment d’un projet faut-il faire les user flows ?
Après avoir défini les objectifs et les utilisateurs cibles, et avant les wireframes. Ils servent ensuite de référence pour les maquettes, le développement et les tests.
Combien de user flows faut-il pour un site vitrine ?
Un par tâche importante. Pour un site vitrine, c’est souvent deux ou trois : prendre contact, demander un devis, trouver une information pratique. Une boutique ou une application en demande davantage.
Quelle différence entre un user flow et un wireflow ?
Le user flow classique utilise des formes abstraites (rectangles, losanges). Le wireflow remplace ces formes par des vignettes d’écrans, ce qui le rend plus parlant quand l’interface est déjà esquissée.
