À propos de ce cours
Cette leçon explique comment dessiner un parcours utilisateur (user flow) avec ses écrans, ses décisions et ses chemins alternatifs, puis comment réduire ses frictions (supprimer, fusionner, raccourcir, anticiper) sans retirer les frictions utiles. Elle présente les types de navigation (globale, locale, contextuelle, utilitaire, fil d'Ariane), les trois questions auxquelles chaque écran doit répondre et les mesures d'un parcours (réussite, étapes, temps, égarement, entonnoir). Trois activités portent sur le parcours de commande de CantineCampus.
| Durée | Niveau | Prérequis | À la fin de la leçon |
|---|---|---|---|
| 1 heure 15 (cours et 3 activités) | Débutant, chapitre « Architecture de l'information et parcours utilisateur » | Hiérarchiser l'information et la visibilité des contenus | Vous savez dessiner un parcours, repérer ses frictions, choisir les types de navigation et mesurer l'effet de vos améliorations |
-
Objectifs
- Dessiner un parcours utilisateur (user flow) avec ses décisions et ses chemins alternatifs.
- Repérer et réduire les frictions d'un parcours.
- Choisir les types de navigation adaptés.
- Vérifier qu'un écran répond aux trois questions de la navigation.
- Mesurer un parcours avant et après optimisation.
-
Parcours et navigation
- Un parcours utilisateur (user flow) est la suite d'écrans, d'actions et de décisions qu'un usager traverse pour atteindre un objectif : commander un repas, recharger son compte.
- La navigation est l'ensemble des moyens qui permettent de se déplacer : menus, onglets, liens, boutons « retour ».
- Le parcours répond à « comment l'usager atteint son objectif ? »; la navigation à « comment il se déplace et se repère ? ».
- À ne pas confondre avec la carte d'expérience (vue dans un chapitre précédent), qui décrit les émotions et le contexte ; le user flow décrit précisément les écrans et les décisions.
-
Dessiner un parcours
- Partez d'un point d'entrée (notification, accueil, lien) et d'un objectif (commande confirmée).
- Représentez les écrans et actions par des rectangles, les décisions par des losanges (« Solde suffisant ? »), le début et la fin par des ovales.
- Dessinez d'abord le chemin heureux (tout se passe bien), puis les chemins alternatifs: erreur, solde insuffisant, plat épuisé, connexion perdue.
- Chaque chemin alternatif doit revenir vers l'objectif ou proposer une sortie claire : un parcours ne finit jamais dans une impasse.
- Outils : papier, ioDraw, FigJam, ou la page « Parcours » de votre fichier Figma.
-
Réduire les frictions
- Une friction est tout ce qui ralentit ou bloque l'usager : une étape inutile, une saisie répétée, une information manquante, un temps d'attente.
- Supprimer: une étape qui n'apporte rien (se reconnecter à chaque commande).
- Fusionner: deux écrans qui peuvent n'en faire qu'un (choisir l'heure dans le panier).
- Raccourcir: un accès direct pour l'action la plus fréquente (commander le plat du jour depuis l'accueil).
- Anticiper: vérifier ou proposer avant que le problème arrive (le solde est vérifié avant le paiement, une heure est proposée par défaut).
- Attention : une friction utile doit rester (confirmation avant d'annuler une commande payée).
-
Les types de navigation
- Globale: présente partout, elle mène aux rubriques principales (barre d'onglets, menu principal).
- Locale: à l'intérieur d'une rubrique, elle mène aux sous-parties (jours de la semaine dans « Menus »).
- Contextuelle: des liens dans le contenu, vers des contenus liés (« Voir aussi », « Plats similaires »).
- Utilitaire: des outils transverses (recherche, notifications, compte).
- Fil d'Ariane: la position dans l'arborescence, et un moyen de remonter (surtout sur ordinateur).
- Sur mobile, la navigation globale se fait le plus souvent par une barre d'onglets de 3 à 5 entrées, toujours visible.
-
Les trois questions de la navigation
- Sur chaque écran, l'usager doit pouvoir répondre à trois questions :
- Les trois questions :
- Où suis-je ? Titre de l'écran, onglet actif, fil d'Ariane.
- Où puis-je aller ? Liens et boutons visibles, étiquettes claires.
- Comment revenir ? Bouton retour, onglet, logo vers l'accueil.
- Un écran qui ne répond pas à l'une de ces questions crée de l'égarement, mesurable lors des tests (TP 6).
🍽 Exemple : CantineCampus
- Le parcours « Recharger » passait par Compte › Paramètres › Paiement › Recharger › Montant › Carte › Valider: huit étapes.
- Le solde est maintenant affiché sur l'accueil ; en le touchant, on arrive directement sur « Recharger » avec des montants proposés et la carte enregistrée. Trois étapes.
-
Mesurer un parcours
- Taux de réussite: la part des usagers qui atteignent l'objectif.
- Nombre d'étapes: écrans et actions du chemin heureux.
- Temps: durée moyenne pour finir.
- Taux d'égarement: écrans vus rapportés aux écrans nécessaires.
- Abandon par étape: l'entonnoir (funnel) montre la part d'usagers restant à chaque étape et désigne celle qui fait fuir.
- Mesurez avant et après: une optimisation non mesurée reste une hypothèse.
⚠ Piège : raccourcir un parcours en cachant des informations utiles (le prix total, l'heure de retrait) ne le rend pas plus simple : l'usager devra revenir en arrière, ou il fera une erreur.
-
Aide-mémoire
-
Activités
Activité 1Dessiner le parcours « Commander » · ⏱ 20 min
- Dessinez le parcours « Commander le plat du jour » de CantineCampus : écrans, actions, décisions.
- Ajoutez trois chemins alternatifs : solde insuffisant, plat épuisé, heure complète.
- Vérifiez qu'aucun chemin ne finit dans une impasse.
📁 Résultat attendu : le user flow complet.
Activité 2Chasser les frictions · ⏱ 15 min
- Comptez les étapes du parcours de l'activité 1.
- Pour chaque étape, demandez-vous : la supprimer ? la fusionner ? la raccourcir ? l'anticiper ?
- Dessinez le parcours optimisé et indiquez le gain d'étapes. Quelle friction utile gardez-vous ?
📁 Résultat attendu : le parcours avant / après et la liste des frictions traitées.
Activité 3Les trois questions · ⏱ 15 min
- Prenez trois écrans de CantineCampus.
- Pour chacun, répondez aux trois questions de la navigation et notez ce qui y répond (ou ce qui manque).
- Proposez une correction pour chaque réponse manquante.
📁 Résultat attendu : un tableau écran × trois questions, avec les corrections.
-
Erreurs fréquentes
| Symptôme | Cause | Solution |
|---|---|---|
| Parcours dessiné sans les erreurs | Seul le chemin heureux | Ajouter les chemins alternatifs |
| Écran sans retour possible | Impasse | Toujours une sortie : retour, onglet, accueil |
| Barre d'onglets de 7 entrées | Navigation globale surchargée | 4 à 5 entrées, le reste dans « Plus » |
| Confirmation supprimée « pour aller plus vite » | Friction utile retirée | Garder les confirmations des actions irréversibles |
| « C'est plus rapide » sans chiffre | Pas de mesure | Étapes, temps et réussite avant / après |
-
Bilan
- Un parcours se dessine avec ses écrans, ses décisions et ses chemins alternatifs.
- On réduit les frictions: supprimer, fusionner, raccourcir, anticiper, en gardant les frictions utiles.
- Les types de navigation (globale, locale, contextuelle, utilitaire, fil d'Ariane) répondent à des besoins différents.
- Chaque écran répond aux trois questions: où suis-je, où aller, comment revenir.
- On mesure avant et après : réussite, étapes, temps, égarement, abandon.
Le meilleur parcours n'est pas le plus court sur le papier : c'est celui où l'usager ne se demande jamais « et maintenant ? ».