Un diagramme de parcours utilisateur décrit les étapes que l’utilisateur suit pour atteindre un objectif spécifique au sein de votre application. Contrairement aux organigrammes centrés sur les systèmes ou aux diagrammes de séquence, les parcours utilisateurs se concentrent sur les actions humaines, les étapes du flux de travail et le suivi de la satisfaction de l’utilisateur au fil du temps.
Structure de syntaxe de base
Chaque parcours utilisateur commence par la déclaration journey déclaration, suivie d’un titre et de sections séquentielles qui décomposent l’expérience utilisateur.
journey
title Parcours utilisateur exemple
section Nom de l'étape
Nom de la tâche : Score : Acteur1, Acteur2
Référence de syntaxe
Le tableau ci-dessous détaille les éléments principaux utilisés pour construire une carte de parcours utilisateur dans Mermaid.js.
| Composant | Description | Exemple de syntaxe |
|---|---|---|
| Déclaration | Initialise le rendu du diagramme de parcours utilisateur. | journey |
| Titre | Définit le titre principal ou l’objectif utilisateur en haut de la carte. | title Flux de connexion |
| Section | Représente une phase ou un stade de haut niveau du parcours utilisateur. | section Phase de découverte |
| Tâche | Une action spécifique effectuée par l’utilisateur au sein d’une section. | Parcourir la documentation |
| Note de satisfaction | Un entier compris entre 1 et 5 qui représente le plaisir ou les difficultés de l’utilisateur. | : 4 : (4 sur 5) |
| Acteurs | Liste séparée par des virgules des rôles impliqués dans la réalisation de la tâche. | Utilisateur, Système |
Maquette du monde réel : Expérience de paiement en ligne
Cette maquette met en évidence un parcours utilisateur complet, suivant l’expérience d’un client lors de l’achat d’un article en ligne, en repérant les points de douleur émotionnelle (faibles notes) et les moments de plaisir (hautes notes).
parcours
titre Parcours d'achat en ligne
section Découverte du produit
Rechercher un article : 4 : Utilisateur
Comparer les prix : 3 : Utilisateur
Visualiser les images du produit : 5 : Utilisateur
section Funnel de paiement
Ajouter l'article au panier : 4 : Utilisateur
Créer un compte : 2 : Utilisateur, Système
Saisir les coordonnées de livraison : 3 : Utilisateur
Traiter la carte de crédit : 1 : Utilisateur, Passerelle de paiement
section Après l'achat
Recevoir la confirmation par e-mail : 5 : Système
Suivre la livraison du colis : 4 : Utilisateur, Logistique
Astuce de syntaxe :Les notes de satisfaction sont automatiquement colorées par le moteur de rendu. Une note de 1 ou 2 met en évidence des frictions opérationnelles (rouge/orange), une note de 3 est neutre (jaune), et les notes de 4 ou 5 représentent des interactions fluides et réussies (vert).
Concept avancé : Parcours impliquant plusieurs acteurs
Dans les flux de travail complexes, les tâches sont rarement réalisées par une seule personne. Mermaid vous permet d’attribuer plusieurs acteurs à une même tâche en séparant leurs noms par des virgules. Cela est utile pour montrer où une interaction client nécessite un support côté serveur ou une automatisation provenant d’un système.
parcours
titre Exemple de support impliquant plusieurs acteurs
section Cas de support client
Soumettre un ticket de problème : 3 : Client
Affecter le ticket à un agent : 4 : Système, Administrateur du support
Investiguer un bug technique : 2 : Développeur, Testeur QA
Résoudre le problème et informer : 5 : Administrateur du support
Péchés courants de syntaxe
Lors de l’écriture de cartes de parcours utilisateur, de petites erreurs de formatage peuvent provoquer une erreur dans le moteur de rendu. Gardez ces trois règles de formatage à l’esprit pour vous assurer que votre diagramme se construit correctement :
- La règle des deux points doubles : Chaque ligne de tâche doit suivre exactement la structure de
Description de la tâche : Note : Acteur. Oublier le deuxième deux-points avant la liste des acteurs est la raison la plus courante pour laquelle un diagramme de parcours ne parvient pas à se charger. - Restrictions sur la plage des notes :Les notes de satisfaction doivent être un entier compris entre 1 et 5. Passer une note de 0 ou un nombre supérieur à 5 rompra les paramètres de mise en page.
- Indentation : Bien que Mermaid soit souple concernant les espaces, garder vos tâches indentées sous leurs sections respectives rend vos fichiers texte bruts bien plus faciles à lire et à maintenir à mesure que les fonctionnalités de votre produit évoluent.