À propos de ce cours
Cette leçon présente l'architecture de l'information : organiser, nommer et relier les contenus d'une application selon le modèle mental des usagers. Elle décrit les quatre systèmes (organisation, étiquetage, navigation, recherche), l'inventaire des contenus, les schémas d'organisation exacts et ambigus, la construction d'une arborescence équilibrée et l'étiquetage. Elle explique comment concevoir et vérifier l'organisation avec les usagers grâce au tri de cartes et au test d'arborescence. Trois activités portent sur 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 » | TP 12 : Concevoir les interactions et la mise en page responsive d'une application | Vous savez inventorier les contenus d'une application, les organiser en arborescence et vérifier cette organisation avec les usagers |
-
Objectifs
- Définir l'architecture de l'information (AI) et son rôle.
- Connaître ses quatre systèmes: organisation, étiquetage, navigation, recherche.
- Réaliser un inventaire des contenus et choisir un schéma d'organisation.
- Construire une arborescence équilibrée et des étiquettes claires.
- Utiliser le tri de cartes et le test d'arborescence.
-
Qu'est-ce que l'architecture de l'information ?
- L'architecture de l'information consiste à organiser, nommer et relier les contenus et les fonctions d'une application pour que les usagers trouvent ce qu'ils cherchent et comprennent où ils sont.
- C'est la structure invisible de l'application : l'usager ne la voit pas, mais il la ressent dès qu'il cherche une information et ne la trouve pas.
- Elle se conçoit avant les écrans : les wireframes et la navigation reposent sur elle.
- Une bonne AI suit le modèle mental des usagers (la façon dont ils se représentent le service), pas l'organigramme de l'organisation. Les usagers ne savent pas que le paiement dépend du service comptable : ils veulent « recharger leur compte ».
-
Les quatre systèmes
- Organisation: comment on regroupe et classe les contenus (rubriques, catégories).
- Étiquetage: comment on nomme les rubriques, les liens et les boutons.
- Navigation: comment on se déplace d'un contenu à l'autre (menus, onglets, liens).
- Recherche: comment on trouve sans parcourir (champ de recherche, filtres).
- Ce découpage vient de l'ouvrage de référence de Louis Rosenfeld et Peter Morville, Information Architecture for the World Wide Web, surnommé « le livre à l'ours polaire ».
-
Commencer par un inventaire
- On ne peut pas organiser ce qu'on ne connaît pas. L'inventaire des contenus liste tout ce que l'application contient ou contiendra : pages, fonctions, informations, documents.
- Pour chaque contenu, notez : sa source (besoin observé, demande, obligation), sa fréquence d'usage, son importance pour l'usager, son propriétaire (qui le met à jour).
- L'inventaire révèle les doublons, les contenus orphelins (que personne ne met à jour) et les contenus sans usager, qu'on peut supprimer.
-
Les schémas d'organisation
- Schémas exacts: chaque contenu a une seule place. Alphabétique (annuaire), chronologique (actualités), géographique (restaurants par campus). Faciles quand on sait ce qu'on cherche.
- Schémas ambigus: un contenu peut appartenir à plusieurs groupes. Par thème (entrées, plats, desserts), par tâche (commander, payer, suivre), par public (étudiants, personnels). Plus utiles quand on ne sait pas exactement ce qu'on cherche, mais ils exigent un très bon étiquetage.
- Une application combine souvent plusieurs schémas : une navigation principale par tâche, et dans « Menus », un classement chronologique (jours de la semaine).
-
Construire l'arborescence
- L'arborescence (ou plan de l'application) représente la hiérarchie des rubriques et des écrans, du niveau 1 (rubriques principales) aux niveaux inférieurs.
- Profonde et étroite: peu de choix à chaque niveau, mais beaucoup de niveaux. L'usager se perd et multiplie les appuis.
- Large et peu profonde: beaucoup de choix d'un coup. Plus rapide, mais un menu de 15 entrées devient illisible (loi de Hick).
- Repères pour une application mobile : 4 à 5 rubriques principales (la barre d'onglets), 3 niveaux au plus.
- Un contenu très demandé peut avoir un raccourci sur l'accueil, sans quitter sa place dans l'arborescence.
-
Nommer : l'étiquetage
- Une étiquette est une promesse: l'usager doit deviner ce qu'il trouvera derrière avant de toucher.
- Utilisez les mots des usagers, relevés pendant les entretiens et le tri de cartes, et validés au test des mots (leçon sur le vocabulaire).
- Évitez le jargon interne (« Prestations », « Module de restauration »), les étiquettes vagues (« Divers », « Services ») et les doublons de sens (« Mon compte » et « Profil »).
- Gardez une forme cohérente: des noms (« Menus », « Commandes ») ou des verbes (« Commander », « Payer »), pas un mélange.
-
Concevoir avec les usagers
- Le tri de cartes (card sorting) : chaque contenu est écrit sur une carte ; les participants les regroupent comme ils le veulent et nomment les groupes. C'est le meilleur moyen de découvrir le modèle mental des usagers.
- Tri ouvert: les participants créent et nomment les groupes (pour construire). Tri fermé: les groupes sont imposés (pour vérifier). Cinq à quinze participants suffisent pour voir les tendances.
- Le test d'arborescence (tree test) vérifie l'arborescence sans aucune maquette : on donne une tâche (« Où trouveriez-vous les allergènes du plat du jour ? ») et l'arborescence en texte ; on mesure la réussite, le caractère direct (sans retour en arrière) et le temps.
- Une tâche réussie par moins de 4 participants sur 5, ou rarement de façon directe, désigne une rubrique mal placée ou mal nommée.
🍽 Exemple : CantineCampus
- Dans le prototype initial, « Recharger mon compte » était rangé dans Compte › Paramètres › Paiement: quatre niveaux.
- Au tri de cartes, quatre participants sur cinq ont rangé « Solde » et « Recharger » ensemble, dans un groupe nommé « Argent » ou « Mon argent ». La rubrique « Mon argent » est née, au niveau 1.
⚠ Piège : ne reproduisez pas l'organisation interne du restaurant (cuisine, caisse, administration) : l'usager ne la connaît pas et n'a pas à la connaître.
-
Aide-mémoire
-
Activités
Activité 1Les quatre systèmes d'une application · ⏱ 15 min
- Choisissez une application de votre téléphone (banque, transport, université).
- Décrivez ses quatre systèmes : comment elle organise, nomme, fait naviguer, fait chercher.
- Dessinez son arborescence sur deux niveaux. Combien de rubriques principales ? Combien de niveaux pour la fonction la plus utile ?
📁 Résultat attendu : la description des quatre systèmes et l'arborescence dessinée.
Activité 2Un mini tri de cartes · ⏱ 20 min
- Écrivez quinze contenus de CantineCampus sur des cartes (menu du jour, solde, recharger, horaires, allergènes…).
- Faites-les trier par deux personnes extérieures, en tri ouvert : qu'elles regroupent et nomment les groupes à voix haute.
- Comparez les deux tris : quelles cartes vont toujours ensemble ? Quels mots les participants utilisent-ils ?
📁 Résultat attendu : les photos des deux tris et la liste des regroupements communs.
Activité 3Proposer une arborescence · ⏱ 20 min
- À partir de l'activité 2, proposez une arborescence de CantineCampus : 4 ou 5 rubriques, 2 niveaux.
- Nommez chaque rubrique avec les mots des participants.
- Écrivez trois tâches de test d'arborescence (« Où trouveriez-vous… ? ») et faites-les passer à une personne.
📁 Résultat attendu : l'arborescence, les trois tâches et les résultats.
-
Erreurs fréquentes
| Symptôme | Cause | Solution |
|---|---|---|
| Rubriques calquées sur les services internes | Organisation de l'entreprise | Tri de cartes avec les usagers |
| Rubrique « Divers » ou « Autres » | Contenus non classés | Revoir l'inventaire, regrouper ou supprimer |
| Fonction utile à 4 niveaux de profondeur | Arborescence trop profonde | Remonter la rubrique ou ajouter un raccourci |
| « Mon compte » et « Profil » côte à côte | Doublon de sens | Une seule étiquette, un seul contenu |
| Arborescence jamais testée | Confiance dans son intuition | Test d'arborescence avant les maquettes |
-
Bilan
- L'architecture de l'information organise, nomme et relie les contenus : c'est la structure invisible de l'application.
- Elle repose sur quatre systèmes : organisation, étiquetage, navigation, recherche.
- On part d'un inventaire, on choisit des schémas d'organisation et on construit une arborescence équilibrée.
- Les étiquettes reprennent les mots des usagers.
- Le tri de cartes construit l'arborescence, le test d'arborescence la vérifie.
Une application bien rangée ne se remarque pas : on trouve, simplement. Une application mal rangée se remarque à chaque recherche.