Phase 2 — Card Sorting
Principe clé
« Les utilisateurs n'ont pas la même logique que vous. »
Le Card Sorting (tri par cartes) permet de structurer l'information selon la logique de vos utilisateurs, pas selon la vôtre.
Le principe
Chaque page ou fonctionnalité du site est écrite sur un post-it. Vous demandez à quelqu'un de les regrouper comme il le sent. C'est aussi simple que ça.
Les 3 types
| Type | Principe | Quand l'utiliser |
|---|---|---|
| 🟢 Ouvert | L'utilisateur crée ses propres catégories | Début de projet — découvrir |
| 🔵 Fermé | Catégories prédéfinies | Validation d'une architecture existante |
| 🟣 Hybride | Catégories de base + libres | Affinage |
Pour un projet scolaire, le tri ouvert est recommandé : il révèle la vraie logique des utilisateurs sans les influencer.
Méthode en 4 étapes
Étape 1 — Préparer les cartes
- 10 à 20 cartes pour un projet scolaire (30-60 en pro)
- Un concept par carte
- Termes compréhensibles par tous (pas de jargon technique)
Exemple — 15 cartes pour Pizza Mario
| Carte | Ce que ça représente |
|---|---|
| Page d'accueil | Première impression, résumé |
| Menu des pizzas | Liste avec prix et photos |
| Menu des boissons | Accompagnements |
| Commander en ligne | Formulaire de commande take-away |
| Mon panier | Résumé avant validation |
| Nos ingrédients | Origine et qualité |
| Allergènes | Liste par pizza |
| Horaires | Quand la pizzeria est ouverte |
| Nous trouver | Adresse + plan |
| Notre histoire | Comment Mario a créé sa pizzeria |
| Contact | Téléphone + formulaire |
| Avis clients | Témoignages |
| Pizza du mois | Spécialité temporaire |
| Offres / Promos | Réductions en cours |
| FAQ | Questions fréquentes |
Exemple — 7 cartes pour un portfolio développeur
| Carte | Ce que ça représente |
|---|---|
| Page d'accueil | Présentation courte, photo |
| Mes projets | Galerie des réalisations |
| Détail projet | Description, captures, lien GitHub |
| Compétences | Technologies maîtrisées |
| Formation | Parcours scolaire |
| Contact | Formulaire + GitHub/LinkedIn |
| CV téléchargeable |
Exemple — 9 cartes pour une boutique artisanale
| Carte | Ce que ça représente |
|---|---|
| Page d'accueil | Mise en avant des nouveautés |
| Catalogue | Tous les produits par catégorie |
| Fiche produit | Photos, prix, matériaux, taille |
| Panier | Résumé de la commande |
| Paiement | Finaliser l'achat |
| Notre démarche | Histoire de l'artisan, valeurs |
| Livraison et retours | Délais, frais, politique |
| Contact | Formulaire + réseaux |
| CGV | Conditions générales |
Étape 2 — Recruter 5 participants
Minimum 5 personnes avec des profils variés :
- 🎯 Cible principale — vos futurs utilisateurs (prioritaire)
- 👥 Camarades ou proches — perspectives différentes (âges, niveaux techniques)
Étape 3 — Animer la session
Comptez 15-30 minutes par participant.
| Action | Durée |
|---|---|
| Lecture des cartes | 2-3 min |
| Tri et regroupement | 10-15 min |
| Discussion (« pourquoi ce regroupement ? ») | 5-10 min |
| Photo + notes | 2 min |
Instructions à donner
« Voici des cartes représentant les parties d'un site web. Regroupez celles qui vont ensemble selon vous, donnez un nom à chaque groupe. Pensez à haute voix. Il n'y a pas de mauvaise réponse. »
N'influencez pas
Donnez les cartes mélangées et ne donnez aucune indication sur la structure que vous aviez en tête. La tentation est forte de dire « celle-là va plutôt là... » — résistez !
Étape 4 — Analyser
Identifiez les patterns sur l'ensemble des sessions :
- Cartes toujours regroupées → elles vont dans le même menu
- Cartes qui posent problème (placées différemment) → à clarifier
- Noms de catégories récurrents → utilisez-les dans la navigation
Avant / après — Pizza Mario
Avant — la structure imaginée par le développeur
├── 🏠 Accueil
├── 📄 Pages
│ ├── Menu, Histoire, Ingrédients
├── 🛒 E-commerce
│ ├── Commander, Panier
├── 📋 Informations
│ ├── Horaires, Allergènes, FAQ, Contact
└── 📍 LocalisationAprès — la structure validée par les utilisateurs
├── 🏠 Accueil (+ pizza du mois + promos)
├── 🍕 Menu (pizzas + boissons + allergènes)
├── 🛒 Commander (+ panier + suivi)
├── 📍 Nous trouver (horaires + adresse + contact)
└── ℹ️ À propos (histoire + ingrédients + avis)Ce qui a changé :
- « Allergènes » rejoint le « Menu » — logique : on vérifie en choisissant sa pizza
- « Horaires » et « Contact » fusionnent dans « Nous trouver » — logique : « je veux y aller »
- 5 catégories avec sous-menus → 5 pages claires : la logique des utilisateurs simplifie toujours
Exercice pratique
Exercice — Réalisez un tri par cartes avec votre projet.
Remplir ma fiche Card SortingMatériel : post-it, stylo, table. Pour un projet scolaire, les cartes papier suffisent — meilleure interaction qu'un outil en ligne.
Outils en ligne (alternative)
| Outil | Prix | URL |
|---|---|---|
| OptimalSort | Payant (essai gratuit) | optimalworkshop.com |
| Maze | Freemium | maze.co |
| UXtweak | Freemium | uxtweak.com |
| Miro / FigJam | Freemium | miro.com · figma.com |
Checklist de la Phase 2
- Cartes préparées (une carte = un contenu/fonctionnalité)
- Termes compréhensibles (pas de jargon)
- Au moins 5 personnes ont participé
- Profils variés (cible + camarades + proches)
- Regroupements récurrents identifiés
- Architecture de navigation documentée
Prochaine étape
L'architecture est définie. Passez à la Phase 3 — Design et identité visuelle.