Aller au contenu principal

Architecture de l’information et parcours

L’architecture de l’information organise ce qu’une personne doit trouver, comprendre et relier. Elle répond à une question simple : « si je connais mon intention, puis-je prévoir où commencer, ce que je vais voir et comment revenir ? »

Une architecture claire précède le style. Un menu bien coloré avec des noms ambigus reste un menu ambigu.

Partir des intentions

Écris les tâches dans les mots de la personne :

Je débute → comprendre par où commencer
Je cherche un rappel → retrouver une notion précise
Je veux pratiquer → suivre une mission et produire une preuve
Je reprends → retrouver mon dernier état sans recommencer

Une intention n’est pas une catégorie technique. « React », « API » et « CSS » peuvent être de bons domaines dans la bibliothèque, mais la première porte d’entrée d’un débutant peut être « comprendre », « construire » ou « corriger ».

Taxonomie et étiquettes

Une catégorie est utile quand elle regroupe des objets que la personne s’attend à trouver ensemble. Teste une taxonomie avec trois questions :

  1. Que penserais-tu trouver ici ?
  2. Où placerais-tu cet élément ?
  3. Quel autre nom décrirait mieux ce groupe ?

Une étiquette doit être courte, stable et concrète. Évite les noms internes, les synonymes qui se chevauchent et les titres qui promettent plus que leur contenu. Si deux catégories reçoivent les mêmes réponses, le problème est dans la structure, pas dans la couleur du menu.

Parcours et états

Un parcours est plus qu’une suite de liens. Pour chaque étape, note :

  • l’objectif de la personne ;
  • l’information qu’elle doit reconnaître ;
  • l’action qu’elle peut prendre ;
  • le résultat attendu ;
  • l’état alternatif : vide, erreur, chargement, refus, abandon ;
  • la sortie et le retour possibles.
Accueil
→ choisir « Je débute »
→ voir le socle et la durée
→ ouvrir la première salle
→ produire une réponse
→ recevoir une vérification
→ reprendre ou ouvrir la salle suivante

Le trajet principal doit rester évident, mais les personnes ne commencent pas toutes au même endroit. Prévois un retour vers le sommaire, un fil d’Ariane quand la profondeur l’exige et une recherche qui n’enferme pas l’utilisateur dans un résultat sans contexte.

Une navigation utile répond en permanence à trois questions :

  • où suis-je ?
  • quelles autres destinations sont pertinentes ?
  • comment revenir sans perdre mon travail ?

Rends l’élément actif visible autrement que par une couleur seule. Un titre, un fil d’Ariane, une position dans le parcours ou un indicateur d’étape peut compléter le style. Le lien « retour » doit avoir une destination compréhensible et ne pas dépendre uniquement de l’historique du navigateur.

Recherche et filtrage

Une recherche est un dialogue : la personne formule un terme, le système répond, puis la personne ajuste. Conçois au minimum :

  • un label et un exemple utile ;
  • un chargement si la réponse n’est pas immédiate ;
  • des résultats nommés avec leur domaine ou leur type ;
  • un état vide qui propose une reformulation et des portes voisines ;
  • une erreur réseau qui conserve la saisie et permet de réessayer ;
  • un filtre que l’on peut retirer et comprendre.

N’affiche pas « aucun résultat » sans expliquer ce qui a été cherché ni quoi faire ensuite. Une recherche tolérante peut aider, mais elle ne doit pas remplacer des étiquettes compréhensibles.

États de récupération

Les chemins alternatifs sont des parties normales de l’architecture :

SituationRéponse attendue
Page introuvableExpliquer, garder la navigation, proposer recherche et accueil.
Accès refuséDire ce qui manque et conserver ce qui peut l’être.
Résultat videConfirmer la requête et offrir une prochaine action.
Session interrompueMontrer le dernier état et une action de reprise.
Erreur serveurPréserver la saisie, expliquer et permettre un nouvel essai.

Un état sans sortie est une impasse. Une sortie ne doit pas supprimer silencieusement le travail de la personne.

Contenu et hiérarchie

La structure du contenu réduit les décisions simultanées :

  1. objectif et contexte ;
  2. information nécessaire à la décision ;
  3. action principale ;
  4. résultat et prochaine étape ;
  5. détails, historique ou aide secondaire.

La divulgation progressive est utile quand elle conserve une sortie vers les informations avancées. Cacher le contenu essentiel sous un accordéon ou une infobulle n’est pas une simplification ; c’est un coût de recherche déplacé.

Tester l’architecture avant le polish

Tu peux vérifier une structure sans design haute fidélité :

  • tri de cartes : voir comment les personnes regroupent les contenus ;
  • test d’arbre : demander où elles chercheraient une information ;
  • test de premier clic : observer la première destination choisie ;
  • prototype filaire : vérifier l’ordre et les sorties ;
  • test de reprise : interrompre le parcours et mesurer le retour.

Une tâche doit être formulée par le résultat : « trouve la règle pour rendre un formulaire accessible », pas « clique sur le menu UI/UX ». Sinon, tu testes la mémoire de ton vocabulaire plutôt que l’architecture.

Atelier : réparer un menu

Le menu contient « Ressources », « Méthodes », « Contenus », « Avancé » et « Divers ». Une personne cherche à reprendre une mission.

Écris :

  1. trois intentions qui pourraient structurer l’entrée ;
  2. des étiquettes que la personne peut prévoir ;
  3. le chemin de reprise ;
  4. l’état si la mission n’existe plus ;
  5. la tâche à donner à un participant pour vérifier la proposition.
Une réponse possible

Structurer l’entrée par « Commencer », « Retrouver une notion » et « Pratiquer ». La reprise devient « Mon parcours » ou un bloc « Reprendre la salle 4 — Contrôler les états ». Le chemin conserve la progression et indique une sortie vers le sommaire. Si la mission a disparu, expliquer la migration et proposer une salle équivalente, sans supprimer la trace. La tâche est : « Tu reviens après une semaine ; reprends ton travail là où tu l’avais laissé et explique comment tu sais que c’est le bon endroit. »

Checklist d’architecture

  • Les entrées commencent par des intentions compréhensibles.
  • Les catégories ne se chevauchent pas inutilement.
  • Chaque étape affiche sa place et sa prochaine action.
  • La recherche possède des états succès, vide, chargement et erreur.
  • Les pages introuvables et accès refusés ont une sortie utile.
  • La reprise conserve le contexte et la progression.
  • Le parcours principal a été testé avec des tâches formulées en langage naturel.
  • Le fil d’Ariane, le menu actif et le retour fonctionnent au clavier.

Sources sérieuses

Passe ensuite à l’évaluation et mets ton architecture à l’épreuve dans le parcours UI/UX interactif.