<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" /> Le flowchart est un livrable : un élément concret et finalisé remis à un client, à un employeur ou à une équipe une fois qu’une étape spécifique d'un projet a abouti.

</aside>

Le flowchart (ou diagramme de flux) est la représentation visuelle d’étapes et de décisions requises pour accomplir un processus ou atteindre un objectif. Il montre comment les différentes parties d'un projet se connectent entre elles.

Il est composé de boîtes ou de formes qui symbolisent des étapes spécifiques, connectées entre elles par des lignes ou des flèches. Chaque boîte peut contenir des informations importantes, comme des descriptions, des images ou des icônes.

Chaque intervenant sur le projet peut consulter le flowchart et suivre logiquement le processus du début à la fin.

<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" /> Le flowchart peut être utilisé pour présenter :

• le processus de création d’un projet, les étapes de validation par le client, l’ordre logique d’élaboration, les objectifs intermédiaires, etc.
• la progression dans une interface ou un système, la circulation d’un écran à l’autre, les choix que l’utilisateur·trice doit effectuer, etc. </aside>

Composants du flowchart

Un flowchart est composé de différents symboles, chacun porteur d’une fonction spécifique. Parmi la vingtaine de symboles existants, les quatre plus courants sont les suivants :

<aside> <img src="/icons/map-pin_lightgray.svg" alt="/icons/map-pin_lightgray.svg" width="40px" /> Symbole du début / fin

Le symbole de terminaison marque le point de départ ou d'arrivée.

</aside>

<aside> <img src="/icons/checkmark_lightgray.svg" alt="/icons/checkmark_lightgray.svg" width="40px" /> Symbole d'action ou de processus

Une boîte peut représenter une seule étape ou un sous-processus entier.

</aside>

<aside> <img src="/icons/directional-sign_lightgray.svg" alt="/icons/directional-sign_lightgray.svg" width="40px" /> Symbole de décision

Un point de décision ou d'embranchement. Les lignes représentant différentes décisions émergent des points du losange.

</aside>

<aside> <img src="/icons/sync_lightgray.svg" alt="/icons/sync_lightgray.svg" width="40px" /> Symbole d'entrée / sortie

Représente les informations qui entrent ou sortent, comme un formulaire de saisie ou un input client (entrée), ou un livrable (sortie).

</aside>

Niveau de détail nécessaire

La décision de représenter une étape spécifique dans un flowchart ou de regrouper plusieurs tâches en une seule étape dépend de l'objectif du flowchart et de la communication qui l’accompagne.

Si le flowchart doit donner une vue d'ensemble rapide, il peut être judicieux de regrouper des tâches similaires en une seule étape pour éviter d'encombrer le diagramme de trop de détails.

A contrario, si le flowchart est destiné à une compréhension approfondie, des étapes supplémentaires et des détails additionnels peuvent être nécessaires. En effet, plus le processus est complexe, plus il peut être utile de décomposer les étapes en sous-étapes pour une meilleure compréhension.

Solliciter le public-cible et recueillir les commentaires aidera à déterminer si des ajustements sont nécessaires.

Quelles applications utiliser ?

En local sur la machine

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f2720665-e4ad-4827-be82-9e9e55575b68/figma.svg" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f2720665-e4ad-4827-be82-9e9e55575b68/figma.svg" width="40px" /> Figma → FigJam

</aside>

Online

draw.io

Online Flowchart Maker. Create Flowcharts Easily | Miro

Le wireflow, un flowchart “augmenté”

Dans le domaine UX et de la création d’interfaces, les symboles du flowchart peuvent être aussi remplacés par des maquettes ou des wireframes. Le document en devient plus explicite, car utilisant des vues issues du projet.

On appelle wireflow cette fusion du flowchart et du wireframe.