Comment créer un diagramme de flux d’utilisateurs

Imaginez votre site Web comme une maison hantée : vous devez savoir exactement comment vos visiteurs se déplacent, où se trouvent les angles morts, et à quel moment lâcher votre horde de clowns maléfiques pour obtenir le maximum de cris. Sans timing ni coordination, votre tueur à la tronçonneuse pourrait débarquer dans une pièce vide, et votre zombie vampire pourrait rater sa sortie de cercueil de quelques secondes, alors que votre groupe d’adolescentes est déjà tombé dans le bassin aux piranhas.

De la même manière, si vous ne comprenez pas le flux des utilisateurs sur votre site Web, vous n’obtiendrez pas les résultats escomptés. Rassurez-vous, appréhender le comportement de vos utilisateurs n’est pas aussi effrayant qu’il y paraît : il vous suffit d’élaborer un diagramme de flux utilisateur. 

Découvrez les raisons pour lesquelles les diagrammes de flux utilisateur sont si importants et comment vous pouvez en créer un pour votre site Web.

Qu'est-ce qu'un flux utilisateur ?

Vous avez souvent entendu le terme « parcours utilisateur », mais le flux utilisateur est un concept différent du parcours utilisateur. 

Voici la différence :

• Flux utilisateur : ce visuel illustre toutes les interactions possibles des utilisateurs sur votre site. Il met en évidence la logique sous-jacente qui sous-tend une expérience en apparence simple (comme la connexion ou le renouvellement d'un abonnement). Visualiser cette logique permet aux équipes d'identifier les conditions, les exceptions et les autres parcours souvent négligés lors des échanges.

• Parcours utilisateur : le flux utilisateur ne représente qu'une partie du parcours utilisateur. Ce dernier prend en compte l'environnement complet d'un achat, des influences hors ligne aux publicités en ligne. Le flux utilisateur ne concerne que les visiteurs une fois qu'ils ont accédé à votre site ou application. Dès qu'ils quittent votre site, vos visiteurs continuent leur parcours utilisateur.

Pourquoi utiliser un diagramme de flux utilisateur ?

Les diagrammes de flux utilisateur sont principalement utilisés par les équipes produit et UX pour déterminer le flux d'un site Web ou d'une application après avoir étudié l'expérience client et les besoins des utilisateurs. Pour mieux comprendre ces exigences et l'expérience que vous souhaitez offrir à vos clients, il est important de les modéliser et de les visualiser.

Les diagrammes de flux utilisateur vous aideront :

• À éviter de manquer des étapes importantes du processus.

• À prendre des décisions, recueillir les commentaires des parties prenantes et itérer à faible fidélité avant d'investir beaucoup de temps dans la conception.

• À réduire les erreurs de développement et les corrections en fournissant aux ingénieurs une référence partagée et facile à suivre sur la façon dont chaque partie de l'expérience s'articule.

• À faire apparaître les cas particuliers et la complexité cachée (par exemple, la logique conditionnelle, les états de compte ou les contrôles d'autorisation) qui pourraient autrement être dispersés dans les connaissances de plusieurs personnes.

• À accélérer la prise en main des nouveaux collaborateurs en remplaçant les connaissances institutionnelles et les longues explications par une source unique et visuelle de vérité.

Si vous accordez de l'importance à votre temps et à votre énergie, consacrez un peu de temps à créer un diagramme de flux utilisateur. Cela aura pour résultat de réduire les obstacles à l'avenir. 

Par exemple, supposons que vous vendiez un logiciel de suivi budgétaire. Vos clients suivront probablement les étapes SIDA sur votre site Web, selon le parcours suivant :

• Sensibilisation : le visiteur arrive sur votre page de destination « remboursez vos cartes de crédit plus rapidement ».

• Intérêt : le visiteur fait défiler la page et regarde une vidéo de témoignage sur un couple qui a remboursé la dette de sa carte de crédit de 30 000 $ (ne jugez pas : les chaussures coûtent chères).

• Désir : le visiteur clique sur une page concernant le coût de votre logiciel, en imaginant combien il sera agréable de se débarrasser de toutes ces dettes.

• Action : le visiteur achète votre logiciel.

Si vous ne comprenez pas ce que votre visiteur cherche à obtenir de chaque page du flux utilisateur, vous le frustrerez et il finira par quitter votre site. Lorsque vous avez conscience des actions de vos utilisateurs, vous pouvez concentrer vos efforts sur l'optimisation de leur expérience en ligne.

Le même principe s'applique au-delà des flux marketing. Même de simples moments liés au produit (comme la connexion) peuvent masquer des dizaines de ramifications conditionnelles. Un diagramme de flux utilisateur clarifie ces ramifications afin que l'équipe puisse les créer (ou les corriger) intentionnellement plutôt que de les découvrir par le biais de bugs et de tickets d'assistance.

Comment créer un diagramme de flux utilisateur

Ne commencez pas par créer un diagramme de flux utilisateur en vous basant sur une simple supposition. Utilisez plutôt des données pour orienter votre processus. Suivez ces étapes pour recueillir les informations nécessaires à la création de diagrammes de flux utilisateur précis.

1. Déterminez votre objectif et les objectifs de vos utilisateurs

On ne peut donner d'indications sans connaître la destination. De même, on ne peut créer un flux utilisateur sans avoir déterminé où l'on souhaite que ses utilisateurs aboutissent, et surtout, ce qu'ils attendent de l'application ou du site Web.

Vous êtes probablement conscient de l'objectif de votre entreprise, qui peut consister à convaincre les utilisateurs d'acheter un produit, de s'inscrire à une newsletter ou encore de télécharger un contenu protégé. Mais vous n'avez pas nécessairement une idée aussi claire de ce que les utilisateurs viennent chercher sur votre site.

Si vous ne l'avez pas encore fait, créez une carte de parcours client pour offrir à votre entreprise une vision commune de ce à quoi l'expérience client devrait ressembler. Ce type de diagramme permet de représenter ce que ressent un client aux différentes étapes de son parcours ainsi que ses points de contact éventuels. Un logiciel de cartographie de parcours client permet de déterminer comment vos utilisateurs accèdent à votre site, ce qu'ils font une fois qu'ils y sont et ce qu'ils font lorsqu'ils le quittent.

Insérez un modèle de carte de parcours client avec légende : ce modèle gratuit de carte de parcours client vous aidera, vous et votre équipe, à visualiser clairement le processus de l'expérience de vos clients avec votre entreprise. 

Si votre flux prend en charge des fonctionnalités complexes, comme l'authentification unique (SSO), les autorisations d'entreprise ou les états d'abonnement, définissez dès le départ les critères de réussite pour ces scénarios. Sinon, le parcours idéal peut sembler parfait, alors qu'en réalité des cas particuliers nuisent à l'expérience utilisateur.

2. Déterminez comment les visiteurs trouvent votre site Web

Si vous cherchez à améliorer un site Web ou une application existante, analysez les données. Google Analytics vous fournira les pourcentages pour chacune des méthodes d'entrée suivantes :

• Trafic direct

• Recherche organique

• Publicité payante

• Réseaux sociaux

• Sites de référence

• E-mail

Analysez ce que ces différents points d'entrée révèlent sur vos utilisateurs et comment adapter au mieux l'expérience à leurs besoins. Ces points d'entrée constitueront le point de départ de votre diagramme de flux utilisateur.

3. Identifiez les informations dont vos utilisateurs ont besoin et le moment où ils en ont besoin

Maintenant que vous savez par où commencer, déterminez les informations dont vos utilisateurs ont besoin et les actions qu'ils doivent entreprendre. Pour les convertir, vous devez leur fournir les informations appropriées au moment le plus opportun.

N'oubliez pas de vous poser des questions lorsque vous créez votre diagramme de flux utilisateur. Mettez-vous à la place de vos clients, par exemple : « Que ferais-je sur cette page si j'étais mon client ? », « Comment naviguerais-je dans le processus de paiement ? » et « Si j'étais ce client, que penserais-je de cette vidéo de témoignage ? » Réfléchissez à ce que le client attend d'une page en particulier, à ce qu'il peut ressentir et à son état d'esprit.

Si vous optimisez un site Web existant, observez les éléments qui fonctionnent actuellement. En d'autres termes, lorsque les utilisateurs achètent ou réalisent d'autres activités, quel parcours empruntent-ils sur votre site ? Ne prenez pas seulement en compte l'achat : il faut parfois plusieurs visites sur un site avant qu'un client ne valide une commande. Cependant, si un visiteur s'inscrit à votre newsletter ou à vos communications SMS via une fenêtre pop-up, vous pouvez considérer cela comme une réussite.

C'est également le moment d'inventorier les parcours moins courants mais à fort impact, tels que la réinitialisation des mots de passe, les essais expirés, les échecs de paiement, les fusions de comptes, les erreurs d'autorisation et autres exceptions. Ce sont les scénarios qui ont tendance à vivre dans la tête des gens (ou dans des notes éparses) jusqu'à ce qu'un diagramme les fasse figurer sur la page.

4. Cartographiez votre flux utilisateur

Maintenant que vous connaissez votre public, ses motivations et les parcours types qu'il suit pour accomplir différentes actions, vous pouvez commencer à créer un diagramme de flux utilisateur. Choisissez un espace de travail visuel, comme Lucidchart, où vous pouvez facilement faire glisser et déposer des formes pour illustrer votre parcours utilisateur et indiquer les moyens de satisfaire et d'informer votre client.

Commencez par représenter les points d'entrée, tels qu'organiques ou payants, avec des formes. Vous pouvez même recourir à des wireframes basse fidélité plutôt qu'à de simples formes géométriques pour donner une idée de l'apparence du site ou de l'application et de l'emplacement de vos appels à l'action.

Ensuite, déterminez le contenu de la page de destination et les décisions que votre client devra prendre sur celle-ci. Ajoutez d'autres formes et points de décision jusqu'à ce que votre flux soit complet.

Visez l'exhaustivité sans complexité inutile. Incluez tous les détails nécessaires à votre public pour prendre des décisions éclairées, mais évitez les informations superflues qui rendent la lecture difficile. Le niveau de détail que vous fournissez doit dépendre entièrement de vos parties prenantes.

• Vues d'ensemble : les dirigeants n'ont peut-être besoin que d'une vue d'ensemble du parcours utilisateur pour comprendre la logique métier.

• Spécificités techniques : les ingénieurs ont souvent besoin de détails précis, tels que les conditions du système, les requêtes ou les points de contact de l'API.

L'intégration de wireframes dans vos flux utilisateurs permet de relier l'interface utilisateur à la logique système sous-jacente, facilitant ainsi la validation de la compatibilité de chaque écran avec l'étape suivante. Dans de nombreux cas, une série de wireframes peut sous-entendre le code nécessaire, réduisant ainsi le besoin de descriptions écrites trop longues.

Toutefois, privilégiez l'efficacité à une documentation exhaustive. Si votre équipe utilise un vocabulaire standard pour les composants, nommer le modèle peut s'avérer plus efficace que d'intégrer chaque image. Ajustez le niveau de détail visuel pour que le diagramme reste une ressource utile et non une contrainte. Enfin, n'oubliez pas : votre diagramme de flux utilisateur est susceptible d'évoluer au fil du temps, au gré des changements de votre public et de ses motivations à naviguer sur votre site.

5. Recueillez les commentaires, finalisez et partagez

Si vous créez un nouveau site ou une nouvelle application, partagez votre diagramme de flux utilisateur avec les autres parties prenantes afin de recueillir leurs commentaires et de l'ajuster si nécessaire. Ce visuel est particulièrement efficace dans ce contexte, car les parties prenantes peuvent appréhender l'expérience que vous proposez d'un seul coup d'œil.

Une fois que vous avez finalisé le diagramme de flux utilisateur, partagez-le avec les designers UX, les développeurs Web, les ingénieurs logiciel et les autres collaborateurs pour leur communiquer le concept avant qu'ils ne se lancent dans la création de votre site Web ou application.

Lorsque vous concevez des flux utilisateur dans Lucidchart, il est facile d'obtenir des commentaires sur des parties spécifiques d'un diagramme. Il vous suffit de laisser des post-it ou d'étiqueter des collègues dans les commentaires pour collaborer en temps réel ou de manière asynchrone. 

De plus, Lucidchart sert de source unique de vérité depuis le début d'un projet jusqu'à la mise en production du code. Si votre équipe utilise un logiciel de gestion de projet (comme Jira et Confluence) ou des outils de partage des connaissances, pensez à intégrer le diagramme Lucidchart à ces outils pour qu'il reste facilement accessible depuis les tickets et la documentation. Grâce à la synchronisation bidirectionnelle, chaque modification apportée à vos diagrammes dans Lucidchart est automatiquement répercutée dans tous les outils où ils sont intégrés, garantissant ainsi que les équipes travaillent toujours avec les informations les plus récentes. 

Exemples de diagrammes de flux utilisateur

Inspirez-vous de ces exemples de diagrammes de flux utilisateur. Parmi eux, citons les wireflows, qui combinent des formes wireframe avec des formes de logigramme standard pour vous permettre de visualiser à la fois le design de votre site Web ou de votre application et le parcours de vos utilisateurs.

Une fois votre diagramme de flux utilisateur en place, vous disposez d'un parcours utilisateur plus concret qui peut éclairer les pratiques commerciales à l'avenir. Vous comprendrez mieux vos clients et serez en mesure de leur offrir un parcours réussi, non seulement via votre site Web ou votre application, mais aussi tout au long du cycle de vie de votre expérience produit et de votre expérience d'entreprise.