{"id":11527,"date":"2022-06-21T09:21:17","date_gmt":"2022-06-21T07:21:17","guid":{"rendered":"https:\/\/www.sortlist.fr\/blog\/?p=11527"},"modified":"2024-03-07T17:35:08","modified_gmt":"2024-03-07T16:35:08","slug":"user-flow","status":"publish","type":"post","link":"https:\/\/www.sortlist.fr\/blog\/user-flow\/","title":{"rendered":"Optimisez l\u2019exp\u00e9rience utilisateur gr\u00e2ce \u00e0 un user flow efficace"},"content":{"rendered":"\n<p>Chaque produit cr\u00e9\u00e9 existe et a \u00e9t\u00e9 con\u00e7u pour r\u00e9pondre en premier lieu aux <strong>besoins<\/strong> et aux <strong>probl\u00e9matiques<\/strong> auxquels fait face un client. Ce principe du commerce s&rsquo;appliqu\u00e9 \u00e9galement aux applications.<\/p>\n\n\n\n<p>Cependant, une probl\u00e9matique suppl\u00e9mentaire s&rsquo;applique lorsque vous cr\u00e9ez votre application. Car m\u00eame si votre application poss\u00e8de toutes les fonctionnalit\u00e9s que demandent vos utilisateurs, si l&rsquo;exp\u00e9rience utilisateur est mauvaise, alors vos clients d\u00e9sinstalleront votre application mobile.<\/p>\n\n\n\n<p>Pour r\u00e9pondre \u00e0 toutes ces probl\u00e9matiques, il est possible de cr\u00e9er un \u00ab\u00a0<strong>user flow<\/strong>\u00ab\u00a0, qui se pr\u00e9sente souvent sous forme de diagramme de flux d&rsquo;utilisateurs. Il montre le parcours complet d&rsquo;un utilisateur lorsqu&rsquo;il utilise un produit. Ainsi, le flux d&rsquo;utilisateurs va d\u00e9crire le mouvement de l&rsquo;utilisateur \u00e0 travers le produit d&rsquo;un point d&rsquo;entr\u00e9e jusqu&rsquo;\u00e0 l&rsquo;interaction finale, en d\u00e9finissant correctement toutes les \u00e9tapes interm\u00e9diaires.<\/p>\n\n\n\n<p>Dans cet article, nous allons donc :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>D\u00e9finir ce qu&rsquo;est l&rsquo;user flow et l&rsquo;UX, <\/li><li>Voir pourquoi il est important d&rsquo;utiliser l&rsquo;user flow pour son application et,<\/li><li>Nous verrons un exemple d&rsquo;user flow r\u00e9ussi !<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u2019est-ce que l&rsquo;user flow?<\/h2>\n\n\n\n<p>Lorsqu\u2019un utilisateur utilise un site ou une application mobile, ce dernier peut passer par diff\u00e9rentes voies pour atteindre un objectif. Ainsi pour <strong>mat\u00e9rialiser le parcours de l&rsquo;utilisateur<\/strong>, les d\u00e9veloppeurs et charg\u00e9s de projets peuvent faire appel au <strong>user flow<\/strong>.<\/p>\n\n\n\n<p>Le User Flow est donc une&nbsp;repr\u00e9sentation graphique, qui peut \u00eatre \u00e9crite ou num\u00e9rique, des chemins qu\u2019un utilisateur peut emprunter lorsqu&rsquo;il navigue sur un site Internet ou une application.<\/p>\n\n\n\n<p>\u00c0 savoir que cette repr\u00e9sentation s&rsquo;\u00e9tend d&rsquo;un point d&rsquo;entr\u00e9e par exemple d&rsquo;une landing page (page d&rsquo;accueil) vers la page du site web pour cr\u00e9er un compte ou commander un produit par exemple.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1.png\" alt=\"\" class=\"wp-image-11537\" width=\"407\" height=\"287\" srcset=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1.png 1856w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-768x543.png 768w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-1536x1086.png 1536w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-50x35.png 50w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-288x204.png 288w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-576x407.png 576w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-339x240.png 339w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-678x479.png 678w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-373x264.png 373w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-746x527.png 746w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-691x488.png 691w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-1382x977.png 1382w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-973x688.png 973w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-1048x741.png 1048w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-478x338.png 478w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-956x676.png 956w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-516x365.png 516w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-1032x730.png 1032w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-680x481.png 680w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-1-1360x961.png 1360w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/figure>\n\n\n\n<p>Pour arriver du point de d\u00e9part au point d&rsquo;arriv\u00e9e, l&rsquo;utilisateur a une multitude de choix et d&rsquo;options qui s&rsquo;offrent \u00e0 lui. Par exemple, si je souhaite cr\u00e9er un compte, je peux tr\u00e8s bien le cr\u00e9er \u00e0 partir de la landing page comme passer d&rsquo;abord par la page d\u00e9crivant les services de l&rsquo;entreprise pour par la suite m&rsquo;inscrire.<\/p>\n\n\n\n<p>Ainsi, tous ces cheminements diff\u00e9rents (qui sont appel\u00e9s <strong>points de contact<\/strong>) sont repr\u00e9sent\u00e9s par un <strong>n\u0153ud<\/strong> dans la cartographie du user flow.<\/p>\n\n\n\n<p>Pour synth\u00e9tiser la notion de user flow, voici un exemple concret. Prenons l&rsquo;exemple d&rsquo;un site internet sous forme e-commerce qui vend des chaussettes. Dans un monde id\u00e9al, voici \u00e0 quoi ressemblerait l&rsquo;user flow du site web :<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>L\u2019utilisateur arrive sur la page d\u2019accueil,<\/li><li>Il se dirige vers la cat\u00e9gorie des chaussettes \u00ab\u00a0hautes en coton\u00a0\u00bb,<\/li><li>Depuis la page cat\u00e9gorie \u00ab\u00a0chaussettes hautes en coton\u00a0\u00bb il choisit le mod\u00e8le noir<\/li><li>Sur la page produit \u00ab\u00a0chaussette haute en coton noir\u00a0\u00bb, il commande 3 paires<\/li><li>Il paye.<\/li><\/ol>\n\n\n\n<p>Cet User Flow est une version tr\u00e8s simplifi\u00e9e. Car en r\u00e9alit\u00e9 l&rsquo;utilisateur va tr\u00e8s probablement aller sur d&rsquo;autres pages avant d&rsquo;acheter un produit.<\/p>\n\n\n\n<p>Cela s&rsquo;explique tr\u00e8s facilement parce que l&rsquo;utilisateur reste un consommateur avant tout et il <strong>souhaitera comparer toutes les offres <\/strong>avant de passer \u00e0 l&rsquo;achat. Par cons\u00e9quent il conviendra, dans l&rsquo;user flux, de mat\u00e9rialiser les diff\u00e9rents choix possibles par des n\u0153uds.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pourquoi utiliser l&rsquo;user flow<\/h2>\n\n\n\n<p>L&rsquo;User Flow est utile dans 3 situations bien pr\u00e9cises, pour : <\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Optimiser des plateformes existantes,<\/li><li>Cr\u00e9er une interface intuitive et,<\/li><li>Mat\u00e9rialiser un projet\/produit plus facilement.<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">#1 <strong>Pour optimiser des plateformes existantes<\/strong><\/h3>\n\n\n\n<p>La premi\u00e8re situation dans laquelle l&rsquo;user flow est utile est l&rsquo;optimisation de plateformes (sites web ou applications mobiles) d\u00e9j\u00e0 existantes.<\/p>\n\n\n\n<p>En effet, lorsque l&rsquo;on d\u00e9veloppe une application ou un site web, la premi\u00e8re version publi\u00e9e est souvent perfectible. On attend soit les retours des utilisateurs ou soit on tient \u00e0 minimiser le budget par peur que le site web ou l&rsquo;application mobile ne rencontre pas son public.<\/p>\n\n\n\n<p>Mais une fois la premi\u00e8re version r\u00e9alis\u00e9e, l&rsquo;heure est souvent au perfectionnement de l&rsquo;outil d\u00e9velopp\u00e9.<\/p>\n\n\n\n<p>Ainsi, le user flow vous permettra de visualiser les <strong>points de d\u00e9crochage<\/strong> dans le flux utilisateurs de votre site ou application mobile.<\/p>\n\n\n\n<p>M\u00eame si cette \u00e9tape est tr\u00e8s chronophage, elle vous sera utile sur plusieurs aspects. En identifiant les points de d\u00e9crochage, vous dirigerez le flux utilisateur vers le point d&rsquo;arriv\u00e9e souhait\u00e9 ce qui vous permettra par exemple, pour un site e-commerce de booster vos ventes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#2 <strong>Cr\u00e9er une interface intuitive<\/strong><\/h3>\n\n\n\n<p>Le user flow peut-\u00eatre aussi d\u00e9ploy\u00e9 lors de la conception m\u00eame d&rsquo;un site web ou d&rsquo;une application mobile.<\/p>\n\n\n\n<p>Cela va avoir <strong>deux impacts significatifs<\/strong> sur la performance de votre site web :<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Vous obtiendrez un outil pr\u00eat et optimis\u00e9 d\u00e8s le jour de sa publication. Ce qui peut \u00eatre tr\u00e8s utile pour engranger un nombre d&rsquo;utilisateurs important tr\u00e8s rapidement ou avoir un chiffre d&rsquo;affaires cons\u00e9quent tr\u00e8s rapidement.<\/li><li>Faciliter le travail des d\u00e9veloppeurs et surtout des UX designers. La relation entre client et d\u00e9veloppeur peut \u00eatre difficile car il est parfois compliqu\u00e9 de se faire comprendre sur ses volont\u00e9s. Ainsi en r\u00e9alisant un user flow, vous donnez aux professionnels qui vous entourent sur votre projet des informations qui les aideront \u00e0 comprendre votre vision pour arriver au livrable souhait\u00e9.<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>#3 Pr\u00e9senter un projet de produit digital \u00e0 vos clients\/coll\u00e8gues<\/strong><\/h3>\n\n\n\n<p>Pour finir, les user flows repr\u00e9sentent \u00e9galement un excellent outil de communication lorsqu\u2019il s\u2019agit de pr\u00e9senter la maquette d\u2019un produit digital \u00e0 des tiers comme des clients ou des coll\u00e8gues.<\/p>\n\n\n\n<p>Cela permet de donner des informations et un point de vue global sur la fa\u00e7on dont l&rsquo;interface est cens\u00e9e fonctionner.<\/p>\n\n\n\n<p>Le user flow peut donc aider votre \u00e9quipe de designers \u00e0 visualiser comment les utilisateurs vont se d\u00e9placer \u00e0 l\u2019int\u00e9rieur de la plateforme et garantit donc que toutes les parties prenantes sont sur la m\u00eame longueur d\u2019onde ce qui g\u00e9n\u00e8re un environnement de travail plus productif et gratifiant.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Comment construire un user flow<\/h2>\n\n\n\n<p>Construire un User Flow requiert premi\u00e8rement de comprendre ce que veulent les utilisateurs et ce dont ils ont r\u00e9ellement besoin. Il convient donc de se poser les questions suivantes :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Que souhaite un utilisateur lorsqu\u2019il utilise votre plateforme ?<\/li><li>Quels sont les points de d\u00e9crochage identifi\u00e9s ?<\/li><\/ul>\n\n\n\n<p>Pour cela, vous pouvez donc vous aider d&rsquo;autres outils comme les <a href=\"https:\/\/www.sortlist.fr\/blog\/heatmap\/\" target=\"_blank\" rel=\"noreferrer noopener\">heat maps<\/a> ou demander des feedbacks \u00e0 vos utilisateurs.<\/p>\n\n\n\n<p>Une fois les besoins de vos cibles clairement identifi\u00e9s, il est temps de r\u00e9aliser le User Flow en suivant ces trois \u00e9tapes :&nbsp;&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Cr\u00e9ez un diagramme qui sera le squelette de votre user flow. Son r\u00f4le est de retranscrire visuellement les actions et mouvements des utilisateurs sur une plateforme,<\/li><li>Mat\u00e9rialisez le parcours utilisateur. Vous pouvez vous aider de croquis, de <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/fr.wikipedia.org\/wiki\/Wireframe_(design)\">wireframes<\/a> ou tout simplement de captures d&rsquo;\u00e9cran si votre site ou application existe d\u00e9j\u00e0.<\/li><li>D\u00e9taillez les actions des utilisateurs. Listez tout ce que doit faire un utilisateur pour atteindre l&rsquo;objectif souhait\u00e9.<\/li><\/ol>\n\n\n\n<p>En principe, les user flows sont synth\u00e9tis\u00e9s durant les \u00e9tapes de planification du travail de design, qui viennent apr\u00e8s&nbsp;les d\u00e9marches de recherches concernant les utilisateurs.<\/p>\n\n\n\n<p>Pour savoir quand est-ce que votre user flow est fini, il suffit de pouvoir compter et d&rsquo;identifier clairement le nombre d&rsquo;actions et lesquelles pr\u00e9cis\u00e9ment pour que l&rsquo;utilisateur arrive au point final.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div id=\"module_call-to-action--block_62b17039a226b\" class=\"sl_custom_module module_call-to-action align_text_left\">\n    <div class=\"module_call-to-action__wrapper\">\n        <h4 class=\"js-texte-typing\">Vous cherchez             \n                <span data-text=\"une agence de design web ?|un design de site web ?|\u00e0 concevoir une page d'accueil ?\" class=\"js-texte-typing-text\"><\/span>\n                <span class=\"cursor\">|<\/span>\n                    <\/h4>\n        \n        <p>Parmi 32 000 agences, nous s\u00e9lectionnons celles qui vous correspondent. <br \/>\r\n<br \/>\r\nSans engagement, totalement gratuit.<\/p>\n\n        \n            \n                <span class=\"js-ga-gutenbergBlock-callToAction btn btn-blue\" target=\"_self\" rel=\"nofollow noopener\" data-o=\"aHR0cHM6Ly93d3cuc29ydGxpc3QuZnIvcHJvamVjdC9uZXc\/YXV0b2xvYWQ9dHJ1ZQ==\">Montrez-moi les agences<\/span>\n\n            \n            <\/div>\n<\/div>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les outils \u00e0 votre disposition<\/h3>\n\n\n\n<p>Pour cr\u00e9er votre user flow, vous pouvez vous aider de n&rsquo;importe quelle plateforme wireframe, dont voici une s\u00e9lection :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Wireflow<\/h4>\n\n\n\n<p><a href=\"https:\/\/wireflow.co\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Wireflow<\/a> est une solution gratuite et open source qui permet de concevoir simplement et rapidement l\u2019<a href=\"https:\/\/www.sortlist.fr\/blog\/arborescence-site-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">arborescence d\u2019un site web<\/a> ou d&rsquo;une application mobile.<\/p>\n\n\n\n<p>Son fonctionnement est tr\u00e8s facile et il ne n\u00e9cessite pas de comp\u00e9tences techniques particuli\u00e8res. Avec un simple clique, vous pouvez ajouter un mod\u00e8le de page sur l&rsquo;espace de travail et ainsi cr\u00e9er un diagramme simplement.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Microsoft Visio<\/h4>\n\n\n\n<p>Microsoft <a href=\"https:\/\/www.microsoft.com\/fr-fr\/microsoft-365\/visio\/flowchart-software\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Visio<\/a> est un outil payant (5$ par mois) et d\u00e9velopp\u00e9 par le g\u00e9ant am\u00e9ricain Microsoft. Son point fort est qu&rsquo;avec le menu d&rsquo;\u00e9dition professionnel, vous aurez acc\u00e8s \u00e0 un large choix de mod\u00e8les pour cr\u00e9er des diagrammes complets.<\/p>\n\n\n\n<p>L&rsquo;un des avantages de Visio est aussi les similarit\u00e9s qu&rsquo;offre son interface. Il est facile de se familiariser avec le logiciel car il est similaire \u00e0 Microsoft Office.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">OmniGraffle<\/h4>\n\n\n\n<p><a href=\"https:\/\/www.omnigroup.com\/omnigraffle\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">OmniGraffle<\/a> est un logiciel disponible sur Mac ainsi que sur iOS et qui est relativement facile d&rsquo;utilisation. Le logiciel propose est une solution payante de 12,49$ par mois.<\/p>\n\n\n\n<p>L&rsquo;avantage de ce logiciel est le grand nombre d&rsquo;outils de base tels que des outils de stylet, de ligne, de forme et de texte qu&rsquo;il propose.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">LuicidChart<\/h4>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.lucidchart.com\/pages\/fr\">LucidChart<\/a> est un outil assez complet qui combine trois fonctionnalit\u00e9s : <\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Cr\u00e9ation de diagrammes, <\/li><li>Visualisation des donn\u00e9es, <\/li><li>Collaboration. <\/li><\/ol>\n\n\n\n<p>Le logiciel propose une solution payante, \u00e0 partir de 7,95$ par mois.<\/p>\n\n\n\n<p>LucidChart est aussi compatible avec la solution Google suite. Il est possible d&rsquo;importer directement ses digrammes depuis LucidChart vers un Google Docs par exemple.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Exemple d\u2019un user flow<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/sites\/3\/2022\/05\/number-2.jpg\" alt=\"exemple user flow \" class=\"wp-image-11538\" width=\"429\" height=\"473\" srcset=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-2.jpg 753w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-2-50x55.jpg 50w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-2-288x317.jpg 288w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-2-576x635.jpg 576w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-2-339x374.jpg 339w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-2-678x747.jpg 678w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-2-373x411.jpg 373w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-2-746x822.jpg 746w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-2-691x762.jpg 691w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-2-478x527.jpg 478w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-2-516x569.jpg 516w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/05\/number-2-680x750.jpg 680w\" sizes=\"auto, (max-width: 429px) 100vw, 429px\" \/><figcaption><meta charset=\"utf-8\">Voici un exemple d&rsquo;un user flow r\u00e9alis\u00e9 par Riley Pelosi sur <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/dribbble.com\/shots\/5537047-User-Flow-for-Health-App\">Dribble<\/a>.<\/figcaption><\/figure>\n\n\n\n<p>Sur cet user flow, qui prend l&rsquo;exemple d&rsquo;un utilisateur appel\u00e9 Alex, il est facile de discerner le point d&rsquo;entr\u00e9e situ\u00e9 en haut \u00e0 gauche de l&rsquo;image. Ce dernier se mat\u00e9rialise par une inscription \u00e0 une plateforme via Facebook, un email ou via un login.<\/p>\n\n\n\n<p>Par la suite le cr\u00e9ateur de l&rsquo;user flow a cr\u00e9\u00e9 les points de rupture avec des rectangles bleus. Souvent l&rsquo;utilisateur a deux choix, soit de r\u00e9aliser l&rsquo;action soit de passer. Nous distinguons aussi facilement le point final situ\u00e9 en bas de l&rsquo;\u00e9cran \u00e0 gauche.<\/p>\n\n\n\n<p>Ce diagramme est un exemple plut\u00f4t r\u00e9ussi de user flow. Car le concepteur est parti d&rsquo;un point de d\u00e9part, a mat\u00e9rialis\u00e9 pour chaque \u00e9tape du flux utilisateur les choix possibles sous forme de n\u0153ud pour finalement arriver au point d&rsquo;arriv\u00e9e.<\/p>\n\n\n\n<p>Le seul b\u00e9mol de ce diagramme est qu&rsquo;il est appliqu\u00e9 \u00e0 une seule personne, Alex. Alors que le but d&rsquo;un user flow est de raisonner d&rsquo;un point de vue plut\u00f4t global.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Diff\u00e9rence entre user flow et parcours utilisateur<\/h2>\n\n\n\n<p>Le&nbsp;parcours utilisateur&nbsp;aussi appel\u00e9 \u00ab\u00a0User Journey\u00a0\u00bb en anglais est une&nbsp;repr\u00e9sentation visuelle (comme le user flow), de la relation qu\u2019un utilisateur entretien avec un produit, dans le temps et sur diff\u00e9rents canaux par exemple :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Un site web, <\/li><li>Une application, <\/li><li>Une boutique physique\u2026<\/li><\/ul>\n\n\n\n<p>L\u2019User Journey se base sur les personas des utilisateurs et elle prend en compte les \u00e9l\u00e9ments environnementaux contextuels et ext\u00e9rieurs \u00e0 un produit. Par exemple le lieu, l\u2019heure ou le contexte dans lequel le produit est utilis\u00e9.<\/p>\n\n\n\n<p>La diff\u00e9rence entre l&rsquo;user flow et le parcours utilisateur est que le parcours utilisateur&nbsp;prend en compte le <strong>ressenti de l\u2019utilisateur<\/strong>, appel\u00e9 \u00ab\u00a0<strong>mindset<\/strong>\u00a0\u00bb en anglais.<\/p>\n\n\n\n<p>Ainsi, on oppose l&rsquo;user flow et le parcours utilisateur sur les points de vue utilis\u00e9s. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Le parcours utilisateur sera utilis\u00e9 pour se positionner du point de vue de l&rsquo;utilisateur alors que l&rsquo;user flow sera utilis\u00e9 pour un point de vue global et impersonnel.<\/p><\/blockquote>\n\n\n\n<p>Toutefois, ces deux outils restent semblables dans leurs finalit\u00e9s. S&rsquo;interroger sur les motivations de l&rsquo;utilisateur, les difficult\u00e9s rencontr\u00e9es par ce dernier \u00e0 chaque \u00e9tape ou sur les diff\u00e9rents canaux, constituent un excellent moyen d&rsquo;<strong>am\u00e9liorer le parcours et la satisfaction de ses clients<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Lorsque l&rsquo;on sait l&rsquo;importance de l&rsquo;intuitivit\u00e9 d&rsquo;une plateforme web ou mobile, il est essentiel de trouver les bons outils pour optimiser au mieux son projet et l&rsquo;User Flow en fait partie !<\/p>\n\n\n\n<p>En effet, lorsqu&rsquo;une interface est facilement compr\u00e9hensible, vous augmentez la probabilit\u00e9 que l&rsquo;utilisateur reste sur votre plateforme. Ce qui de facto permet d&rsquo;<strong>engranger plus de ventes<\/strong>.<\/p>\n\n\n\n<p>Il est possible de cr\u00e9er votre user flow lors de la cr\u00e9ation de votre plateforme. Mais aussi une fois d\u00e9j\u00e0 d\u00e9velopp\u00e9e dans une optique d&rsquo;optimisation du flux d&rsquo;utilisateurs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Chaque produit cr\u00e9\u00e9 existe et a \u00e9t\u00e9 con\u00e7u pour r\u00e9pondre en premier lieu aux besoins et aux probl\u00e9matiques auxquels fait face un client. Ce principe du commerce s&rsquo;appliqu\u00e9 \u00e9galement aux applications. Cependant, une probl\u00e9matique suppl\u00e9mentaire s&rsquo;applique lorsque vous cr\u00e9ez votre application. Car m\u00eame si votre application poss\u00e8de toutes les fonctionnalit\u00e9s que demandent vos utilisateurs, si [&hellip;]<\/p>\n","protected":false},"author":84,"featured_media":12211,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_sb_is_suggestion_mode":false,"_sb_show_suggestion_boards":false,"_sb_show_comment_boards":false,"_sb_suggestion_history":"","_sb_update_block_changes":"","content-type":"","om_disable_all_campaigns":false,"footnotes":""},"categories":[55],"class_list":["post-11527","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ergonomie-ux-ui"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Optimisez l\u2019exp\u00e9rience utilisateur gr\u00e2ce \u00e0 un user flow efficace<\/title>\n<meta name=\"description\" content=\"L&#039;user flow permet d&#039;optimiser des plateformes existantes, de cr\u00e9er une interface intuitive et ... d\u00e9couvrez la troisi\u00e8me raison ici !\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.sortlist.fr\/blog\/user-flow\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimisez l\u2019exp\u00e9rience utilisateur gr\u00e2ce \u00e0 un user flow efficace\" \/>\n<meta property=\"og:description\" content=\"L&#039;user flow permet d&#039;optimiser des plateformes existantes, de cr\u00e9er une interface intuitive et ... d\u00e9couvrez la troisi\u00e8me raison ici !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sortlist.fr\/blog\/user-flow\/\" \/>\n<meta property=\"og:site_name\" content=\"Sortlist Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-21T07:21:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-07T16:35:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/06\/user-flow.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1748\" \/>\n\t<meta property=\"og:image:height\" content=\"1240\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Lucas Gravier\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lucas Gravier\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/user-flow\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/user-flow\\\/\"},\"author\":{\"name\":\"Lucas Gravier\",\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/#\\\/schema\\\/person\\\/b4bb6a116323f9bd11adb69c705bf9a7\"},\"headline\":\"Optimisez l\u2019exp\u00e9rience utilisateur gr\u00e2ce \u00e0 un user flow efficace\",\"datePublished\":\"2022-06-21T07:21:17+00:00\",\"dateModified\":\"2024-03-07T16:35:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/user-flow\\\/\"},\"wordCount\":2120,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/user-flow\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.blog.production.sortlist.cloud\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2022\\\/06\\\/user-flow.png\",\"articleSection\":[\"Ergonomie (UX\\\/UI)\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/user-flow\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/user-flow\\\/\",\"url\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/user-flow\\\/\",\"name\":\"Optimisez l\u2019exp\u00e9rience utilisateur gr\u00e2ce \u00e0 un user flow efficace\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/user-flow\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/user-flow\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.blog.production.sortlist.cloud\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2022\\\/06\\\/user-flow.png\",\"datePublished\":\"2022-06-21T07:21:17+00:00\",\"dateModified\":\"2024-03-07T16:35:08+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/#\\\/schema\\\/person\\\/b4bb6a116323f9bd11adb69c705bf9a7\"},\"description\":\"L'user flow permet d'optimiser des plateformes existantes, de cr\u00e9er une interface intuitive et ... d\u00e9couvrez la troisi\u00e8me raison ici !\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/user-flow\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/user-flow\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/user-flow\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.blog.production.sortlist.cloud\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2022\\\/06\\\/user-flow.png\",\"contentUrl\":\"https:\\\/\\\/cdn.blog.production.sortlist.cloud\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2022\\\/06\\\/user-flow.png\",\"width\":1748,\"height\":1240,\"caption\":\"user flow\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/user-flow\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimisez l\u2019exp\u00e9rience utilisateur gr\u00e2ce \u00e0 un user flow efficace\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/\",\"name\":\"Sortlist Blog\",\"description\":\"Guides, e-books, interviews &amp; articles d\u2019experts pour vous lancer dans le marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/#\\\/schema\\\/person\\\/b4bb6a116323f9bd11adb69c705bf9a7\",\"name\":\"Lucas Gravier\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/blog.production.sortlist.cloud\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/avatar_user_84_1625153043-96x96.jpg\",\"url\":\"https:\\\/\\\/blog.production.sortlist.cloud\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/avatar_user_84_1625153043-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/blog.production.sortlist.cloud\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/avatar_user_84_1625153043-96x96.jpg\",\"caption\":\"Lucas Gravier\"},\"url\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/author\\\/lgravier\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Optimisez l\u2019exp\u00e9rience utilisateur gr\u00e2ce \u00e0 un user flow efficace","description":"L'user flow permet d'optimiser des plateformes existantes, de cr\u00e9er une interface intuitive et ... d\u00e9couvrez la troisi\u00e8me raison ici !","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.sortlist.fr\/blog\/user-flow\/","og_locale":"fr_FR","og_type":"article","og_title":"Optimisez l\u2019exp\u00e9rience utilisateur gr\u00e2ce \u00e0 un user flow efficace","og_description":"L'user flow permet d'optimiser des plateformes existantes, de cr\u00e9er une interface intuitive et ... d\u00e9couvrez la troisi\u00e8me raison ici !","og_url":"https:\/\/www.sortlist.fr\/blog\/user-flow\/","og_site_name":"Sortlist Blog","article_published_time":"2022-06-21T07:21:17+00:00","article_modified_time":"2024-03-07T16:35:08+00:00","og_image":[{"width":1748,"height":1240,"url":"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/06\/user-flow.png","type":"image\/png"}],"author":"Lucas Gravier","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"Lucas Gravier","Dur\u00e9e de lecture estim\u00e9e":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.sortlist.fr\/blog\/user-flow\/#article","isPartOf":{"@id":"https:\/\/www.sortlist.fr\/blog\/user-flow\/"},"author":{"name":"Lucas Gravier","@id":"https:\/\/www.sortlist.fr\/blog\/#\/schema\/person\/b4bb6a116323f9bd11adb69c705bf9a7"},"headline":"Optimisez l\u2019exp\u00e9rience utilisateur gr\u00e2ce \u00e0 un user flow efficace","datePublished":"2022-06-21T07:21:17+00:00","dateModified":"2024-03-07T16:35:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.sortlist.fr\/blog\/user-flow\/"},"wordCount":2120,"commentCount":0,"image":{"@id":"https:\/\/www.sortlist.fr\/blog\/user-flow\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/06\/user-flow.png","articleSection":["Ergonomie (UX\/UI)"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.sortlist.fr\/blog\/user-flow\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.sortlist.fr\/blog\/user-flow\/","url":"https:\/\/www.sortlist.fr\/blog\/user-flow\/","name":"Optimisez l\u2019exp\u00e9rience utilisateur gr\u00e2ce \u00e0 un user flow efficace","isPartOf":{"@id":"https:\/\/www.sortlist.fr\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.sortlist.fr\/blog\/user-flow\/#primaryimage"},"image":{"@id":"https:\/\/www.sortlist.fr\/blog\/user-flow\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/06\/user-flow.png","datePublished":"2022-06-21T07:21:17+00:00","dateModified":"2024-03-07T16:35:08+00:00","author":{"@id":"https:\/\/www.sortlist.fr\/blog\/#\/schema\/person\/b4bb6a116323f9bd11adb69c705bf9a7"},"description":"L'user flow permet d'optimiser des plateformes existantes, de cr\u00e9er une interface intuitive et ... d\u00e9couvrez la troisi\u00e8me raison ici !","breadcrumb":{"@id":"https:\/\/www.sortlist.fr\/blog\/user-flow\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sortlist.fr\/blog\/user-flow\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.sortlist.fr\/blog\/user-flow\/#primaryimage","url":"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/06\/user-flow.png","contentUrl":"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2022\/06\/user-flow.png","width":1748,"height":1240,"caption":"user flow"},{"@type":"BreadcrumbList","@id":"https:\/\/www.sortlist.fr\/blog\/user-flow\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.sortlist.fr\/blog\/"},{"@type":"ListItem","position":2,"name":"Optimisez l\u2019exp\u00e9rience utilisateur gr\u00e2ce \u00e0 un user flow efficace"}]},{"@type":"WebSite","@id":"https:\/\/www.sortlist.fr\/blog\/#website","url":"https:\/\/www.sortlist.fr\/blog\/","name":"Sortlist Blog","description":"Guides, e-books, interviews &amp; articles d\u2019experts pour vous lancer dans le marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sortlist.fr\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/www.sortlist.fr\/blog\/#\/schema\/person\/b4bb6a116323f9bd11adb69c705bf9a7","name":"Lucas Gravier","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/blog.production.sortlist.cloud\/wp-content\/uploads\/2021\/07\/avatar_user_84_1625153043-96x96.jpg","url":"https:\/\/blog.production.sortlist.cloud\/wp-content\/uploads\/2021\/07\/avatar_user_84_1625153043-96x96.jpg","contentUrl":"https:\/\/blog.production.sortlist.cloud\/wp-content\/uploads\/2021\/07\/avatar_user_84_1625153043-96x96.jpg","caption":"Lucas Gravier"},"url":"https:\/\/www.sortlist.fr\/blog\/author\/lgravier\/"}]}},"_links":{"self":[{"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/posts\/11527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/comments?post=11527"}],"version-history":[{"count":28,"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/posts\/11527\/revisions"}],"predecessor-version":[{"id":12218,"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/posts\/11527\/revisions\/12218"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/media\/12211"}],"wp:attachment":[{"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/media?parent=11527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/categories?post=11527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}