Conception

User flow

Chemin écran par écran, décisions, cas d'erreur, états vides.

Quand. Les cas d'erreur et les états vides représentent la moitié du travail de dev. Le flow les fait apparaître avant le sprint.

Durée
2 h
Participants
Design + tech
Livrable
Flow complet avec cas limites
Stade
Idée · Pré-PMF · Post-PMF · Scale-up · Mature
EntréeÉcran ADécision ?Erreur / é…Écran BSuccès
Ouvrir dans FigJamTrouver la bonne séquence

Dans FigJam : Fichier → Dupliquer dans tes brouillons, puis garde la section de cet atelier. Récupérer le fichier sur Figma Community

Exemple rempli

EntréeLéa appuie sur'Clôturer le job'dans le formulaireLe téléphone n'a pasde réseauÉcran ARécapitulatif despièces, du temps etde 4 photosZone de signaturegrisée : 'Signaturedisponible en ligne'Décision ?Le client est-ilencore là ?Oui : enregistrer,demander lasignature plus tardNon : enregistrer,marquer 'signaturemanquante'Écran BJob enregistré enlocal, icône horlogedans la listeToast : 'Serasynchronisé auretour du réseau'SuccèsDe retour à lacamionnette, la 4Grevient, la file sesynchroniseMarc voit le jobterminé à 14h12L'export facturationde Sophie l'inclutle jour mêmeErreur / état videLa sync échoue 3fois : badge rouge,bouton 'Réessayer'Photo trop lourde :compresséeautomatiquement,aucune erreur pourJob supprimé parMarc entre-temps :conservé en'orphelin', support

Données d'exemple. Fieldnote est une entreprise fictive qui sert à remplir les 61 boards, pour que les exemples racontent une seule histoire.

Post-PMF, Ana et Tom tracent le chemin de Léa quand elle clôture un job dans un sous-sol sans réseau.

Ce que l'équipe en a tiré

Le flow a révélé le cas orphelin auquel personne n'avait pensé : Marc qui supprime un job que Léa saisit hors ligne. C'est devenu une story de la release 2 au lieu d'un ticket support.

Comment l'animer

Préparation

Déroulé

  1. 10 min
    Fixer les extrémités
    Confirme l'entrée et l'état de succès. Demande 'comment l'utilisateur sait qu'il a réussi ?' et écris la réponse dans la forme de succès. Si personne ne peut répondre, arrête et règle ça d'abord.
  2. 25 min
    Chemin nominal
    Dessine le chemin le plus court de l'entrée au succès, écran par écran. Un rectangle par écran, un verbe sur chaque flèche. Pas de décision pour l'instant : le chemin nominal n'a pas d'embranchement.
  3. 25 min
    Décisions
    Parcours le chemin nominal et à chaque écran demande 'que peut choisir ou rater l'utilisateur ici ?' Ajoute un losange pour chaque vraie bifurcation. Écris la question dans le losange, les réponses sur les flèches.
  4. 30 min
    Erreurs et états vides
    Pour chaque losange, dessine la branche Non jusqu'au bout : un écran d'erreur, une nouvelle tentative, ou une impasse. Pour chaque liste ou tableau de bord, ajoute l'état vide. C'est là que le tech lead justifie sa présence.
  5. 20 min
    Vérification des données
    Le tech lead marque sur chaque écran les données nécessaires et d'où elles viennent. Tout écran qui a besoin de données que le produit n'a pas reçoit un drapeau rouge et un responsable.
  6. 10 min
    Compter et clôturer
    Compte les écrans et les branches d'erreur. Dis le chiffre à voix haute : c'est la vraie taille de la story. Numérote les écrans dans l'ordre du flow et exporte.

Pièges

Ensuite

Le flow devient la liste des écrans pour les wireframes et les critères d'acceptation de la story. Chaque losange devient un cas de test. Épingle le flow à côté de la tranche de story map à laquelle il appartient.

Ateliers liés

Retour à la boussoleTous les ateliersEnglish version