Aller au guide d’utilisation
User Flow Diagrampar Owl-Listener

User Flow Diagram Skill.

Montrez les chemins qu'un utilisateur peut emprunter pour atteindre un seul objectif.

  • Prototypage
  • Parcours utilisateur
Revue de la source · User Flow DiagramSKILL.md
Tâche Prototypage Produit • Un diagramme de parcours pour un seul objectif utilisateur. • Des décisions, déclencheurs, opérations en arrière-plan et sorties étiquetés. • Des chemins d'erreur et de récupération en plus du parcours nominal. Avant de commencer La source n'exige aucune application de diagrammes ; le format de sortie choisi doit conserver une notation claire.
Synthèse éditoriale · source consultée 2026-10-07 · pas un exemple généré

01 Fonctionnement

Cartographier les parcours, les décisions et la récupération

Un guide de diagrammes de parcours au niveau des écrans, avec éléments standard, étiquettes de déclencheurs, annotations système et branches de récupération.

Flux de travail fondé sur la sourcePas un test d'exécution

La méthode de travail

User Flow Diagram cartographie les déplacements dans un produit au niveau des écrans et des actions. Il distingue points d'entrée, écrans, décisions, actions de l'utilisateur, processus en arrière-plan et points d'arrivée, afin qu'un diagramme communique à la fois le chemin et ce qui provoque chaque transition.

La source recommande de commencer par le chemin nominal, puis d'ajouter les branches, les erreurs, la récupération et les sorties. Cet ordre garde le parcours lisible sans traiter l'échec comme un détail. Elle distingue aussi un parcours de tâche linéaire, un parcours utilisateur avec embranchements et un wire flow avec vignettes d'écrans.

Livrables attendus

  • Un diagramme de parcours pour un seul objectif utilisateur.
  • Des décisions, déclencheurs, opérations en arrière-plan et sorties étiquetés.
  • Des chemins d'erreur et de récupération en plus du parcours nominal.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Définir l'objectif et l'entrée

    Identifiez ce que signifie l'achèvement et où l'utilisateur peut commencer.

  2. 02
    Tracer le parcours principal

    Cartographiez les écrans et les actions avec une notation cohérente avant d'ajouter des branches.

  3. 03
    Ajouter décisions et récupération

    Étiquetez les conditions, événements système, délais, erreurs et sorties afin que chaque flèche ait une raison d'être.

02 Cas d’usage

Quand l'utiliser

La source n'exige aucune application de diagrammes ; le format de sortie choisi doit conserver une notation claire.

Un bon choix

  • Tâches multi-écransUtile quand les équipes doivent s'accorder sur la manière dont un utilisateur atteint un résultat à travers plusieurs écrans.
  • Flux avec embranchementsAide à révéler les différents chemins causés par les permissions, les choix ou les opérations en échec.

Limites à vérifier

  • Pas un parcours émotionnelIl ne remplace pas une carte de parcours de bout en bout des émotions et des points de contact.
  • Pas une maquette d'interfaceUn parcours peut renvoyer à des wireframes, mais il décrit surtout des chemins plutôt qu'un design d'écran finalisé.

Les éléments à fournir

  • Objectif de la tâcheIndiquez le résultat attendu et la condition d'achèvement.
  • Écrans et points d'entréeFournissez les vues connues et les endroits où les utilisateurs peuvent commencer.
  • Règles d'embranchementIncluez permissions, validation, échecs et événements côté système.

03 Décisions importantes

Les décisions qui comptent

  1. Les flèches expliquent le comportement

    Des connecteurs étiquetés rendent un parcours exploitable ; une ligne sans étiquette masque le déclencheur dont l'implémentation a besoin.

  2. Un seul objectif pour rester lisible

    Séparer les objectifs sans rapport évite qu'un diagramme devienne une carte illisible de tout le produit.

04 Exemple de brief

Essayer un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Vérifier la configuration

Utilisez la méthode d'installation documentée du dépôt et conservez tous les fichiers complémentaires référencés. Cette entrée décrit une méthode de conception ciblée, pas une application exécutable.

Fichier source en amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/user-flow-diagram/SKILL.md

La source n'exige aucune application de diagrammes ; le format de sortie choisi doit conserver une notation claire.

Commencer par un seul livrable

Adaptez la portée, les sources et les contraintes de ce brief avant d'exécuter le skill.

Exemple de brief
Utilisez user-flow-diagram pour l'invitation d'un coéquipier dans un espace de travail. Incluez l'entrée depuis les paramètres et un écran d'équipe vide, des branches compte existant et nouveau compte, des invitations expirées et des erreurs de permission. Étiquetez chaque connecteur et distinguez les actions de l'utilisateur de l'envoi de l'e-mail en arrière-plan.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

  • Chaque flèche a un déclencheur ou une condition.
  • L'achèvement et les sorties anticipées sont explicites.
  • Au moins les chemins d'échec connus ont un chemin de récupération.

OpenDesign fournit un espace de travail de conception local pour les agents de code. Cette fiche ne signifie pas que le skill est inclus, ni que ses outils externes, identifiants et dépendances logicielles sont fournis.

05 Source et licence

Source et licence

Cette page décrit la révision source épinglée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
Owl-Listener
Licence
MIT
Instantané consulté
2026-10-07 · 9a6930cf84a8
Synthèse éditoriale de la source
Un guide de diagrammes de parcours au niveau des écrans, avec éléments standard, étiquettes de déclencheurs, annotations système et branches de récupération.

Synthèse originale de OpenDesign, fondée sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Qu'est-ce qu'un wire flow ?

Il associe un diagramme de parcours à des vignettes de wireframes afin de lire ensemble le chemin et la structure approximative des écrans.

Doit-il couvrir tout le produit ?

La source recommande un parcours par objectif afin que les branches restent compréhensibles.

En quoi diffère-t-il d'une machine à états ?

Un parcours utilisateur décrit la traversée des écrans et des actions. Une machine à états spécifie les états valides et les transitions d'un comportement ciblé.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de conception ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Fichier source en amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/user-flow-diagram/SKILL.md