Cinq zones, deux parcours, trois états oubliés, et trois tests sur papier
Au sommaire, 7 sections
Où nous en sommes
Votre arborescence est figée. Elle dit ce que le site contient et comment on y circule. Elle ne dit rien de ce qu’on voit en arrivant sur une page.
C’est le travail d’aujourd’hui, et il se termine par le livrable de la séquence : l’arborescence et les maquettes des pages principales.
Ce que vous saurez à la fin de cette séance
- Distinguer ce qu’une maquette fonctionnelle décide de ce qu’elle laisse ouvert
- Composer une page à partir de ses fonctions, et non de ses blocs graphiques
- Maquetter un parcours, et pas seulement des pages isolées
- Tester une maquette avant qu’une ligne de code existe
1. Ce qu’une maquette décide
1.1 Une maquette fonctionnelle est grise, et c’est délibéré
Pas de couleur, pas de photographie, pas de police définitive. Des rectangles, des traits, et les vrais mots.
Ce n’est pas un manque de temps, c’est le but. Une maquette en couleur avec de belles images se discute sur la couleur et sur les images. Une maquette grise se discute sur ce qu’elle décide vraiment : ce qu’on voit en premier, ce qui vient après, ce sur quoi on peut cliquer.
1.2 Ce qu’elle décide, et ce qu’elle laisse ouvert
| Elle décide | Elle laisse ouvert |
|---|---|
| La hiérarchie : ce qui se voit en premier | Les couleurs |
| Ce que la page permet de faire | La typographie |
| L’ordre des informations | Les photographies |
| L’emplacement des actions | Les animations |
| Ce qui existe, et ce qui n’existe pas | Le ton des textes définitifs |
Deux erreurs symétriques. La maquette trop belle, qu’on n’ose plus critiquer parce qu’elle a l’air finie. Et la maquette trop vague, faite de rectangles vides marqués « contenu », qui ne décide rien.
1.3 Les vrais mots, pas du faux texte
Une maquette remplie de faux texte latin ne se teste pas : personne ne peut dire si la page se comprend.
Écrivez les vrais titres, les vrais libellés de bouton, les vraies accroches. Ce sont eux qui décident, et c’est là qu’on découvre qu’un intitulé de rubrique ne veut rien dire.
Le corps des paragraphes peut rester approximatif : ce n’est pas lui qu’on teste aujourd’hui.
1.4 Papier d’abord, outil ensuite
Au premier jet, le papier va cinq fois plus vite qu’un outil de maquettage, et il a un avantage décisif : on le jette sans regret.
L’outil vient après, quand la structure est arrêtée, pour produire une version présentable au commanditaire.
2. Les composants d’une page
2.1 Cinq zones, et elles ont chacune une fonction
La zone d’arrivée. Ce qu’on comprend en cinq secondes : ce que fait l’entreprise, pour qui, et ce qu’on peut faire ici.
La preuve. Ce qui rend crédible : une réalisation, un chiffre, un client nommé, une garantie. Sans elle, la promesse reste une affirmation.
Le contenu principal. Ce que la personne est venue chercher, dans son ordre à elle et non dans celui de l’entreprise.
L’action. Une seule action primaire par page. Les autres, s’il y en a, sont secondaires et se voient moins.
Le pied de page. Ce qui rassure et ce qui est obligatoire. Il ne porte pas le menu complet du site.
2.2 La hiérarchie se fabrique avec quatre outils
La taille. Ce qui est gros se voit en premier, et rien d’autre ne le contredit.
Le contraste. Un élément isolé sur du vide attire plus qu’un élément coloré au milieu d’autres éléments colorés.
La position. Ce qui est en haut à gauche se lit en premier dans un contexte francophone.
L’espace. C’est l’outil le plus efficace et le moins employé : ce qui est entouré de vide devient important sans rien changer d’autre.
Le piège. Si tout est gros, coloré et animé, plus rien n’est prioritaire. Le visiteur n’a alors aucun chemin, et il fabrique le sien : celui de la sortie. C’est le défaut le plus fréquent des pages d’accueil refaites « pour faire moderne ».
Atelier 1, la maquette de la page d’accueil
En binôme, sur papier A3. Quarante-cinq minutes de travail, dix de mise en commun.
- Découpez cinq bandes de papier, une par zone : arrivée, preuve, contenu, action, pied de page.
- Écrivez les vrais mots sur chaque bande : le titre exact, le libellé exact du bouton.
- Disposez-les dans l’ordre que vous jugez juste. Photographiez.
- Changez l’ordre une fois, sans discuter. Photographiez.
- Comparez les deux photographies : laquelle répond en cinq secondes ?
- Reportez la version retenue sur une feuille, au feutre, avec les proportions réelles.
- Marquez d’une croix ce que vous ne savez pas encore.
Version courte : points 1, 2, 3 et 6.
3. Le parcours, et pas seulement les pages
3.1 Une page ne vit jamais seule
Une maquette de page ne dit pas ce qui se passe avant ni après. Or c’est là que les visiteurs se perdent.
Un parcours s’écrit en quatre temps : d’où l’on arrive, ce qu’on voit, ce qu’on fait, et où l’on arrive ensuite.
3.2 Deux personae, deux parcours
Celui qui décide et celui qui utilise n’entrent pas par la même porte et ne cherchent pas les mêmes preuves.
Le parcours de celui qui décide est court : il cherche le coût, le risque, et une raison de faire confiance. Il repart avec une intention, rarement avec une action.
Le parcours de celui qui utilise est plus long : il cherche à comprendre comment cela se passe concrètement, et il revient plusieurs fois.
3.3 Trois écrans qu’on oublie toujours
L’état vide. Que voit-on quand il n’y a encore rien à voir ? Une page de réalisations sans réalisation, un catalogue sans résultat.
L’état d’erreur. Que voit-on quand le formulaire refuse ? Un message qui dit quoi corriger, pas un message rouge qui dit « erreur ».
L’état de succès. Que voit-on après l’envoi ? Une page de remerciement qui dit ce qui va se passer, et quand.
Ces trois écrans coûtent une demi-heure à maquetter et ils sont la première cause d’abandon.
Atelier 2, le parcours de vos deux personae
En binôme, sur papier. Quarante minutes de travail, dix de mise en commun.
- Tracez deux lignes horizontales, une par persona.
- Sur chacune, quatre cases : d’où il arrive, la première page, l’action, ce qu’il voit ensuite.
- Nommez la page de chaque case : elle doit exister dans votre arborescence. Si elle n’existe pas, notez-le.
- Marquez les points de sortie : à quel endroit précis peut-il partir sans rien faire ?
- Maquettez l’état de succès de l’action principale, sur une demi-page.
- Maquettez l’état d’erreur du formulaire, sur une demi-page.
- Relisez votre arborescence : ce travail l’a-t-il contredite ?
Version courte : points 1, 2, 3 et 5.
4. Ce qui se teste sur une maquette
4.1 Trois tests, et ils fonctionnent sur du papier
Le test des cinq secondes. Montrez la maquette cinq secondes, retirez-la, demandez ce que fait l’entreprise et ce qu’on peut faire ici.
Le test du premier clic. Donnez une tâche : « vous voulez savoir combien ça coûte ». Regardez où le doigt se pose en premier, sans laisser explorer.
Le test de la tâche complète. Suivez la personne sur le parcours entier, sans l’aider. Notez chaque hésitation, sans la commenter.
4.2 Ce qui se fige aujourd’hui, ce qui reste ouvert
Se fige : la structure des pages principales, l’ordre des zones, l’emplacement de l’action, le parcours des deux personae.
Reste ouvert : les couleurs, la typographie, les images, les textes définitifs. Ils se décident au développement, avec la charte du commanditaire.
Ce qui ne se rouvre plus : l’arborescence. Si le travail d’aujourd’hui l’a contredite, c’est aujourd’hui qu’on la corrige, pas la semaine prochaine.
À retenir. Une maquette testée sur papier coûte une heure. La même correction après développement coûte trois jours. C’est tout l’intérêt de cette séance, et c’est l’argument à donner à un commanditaire pressé qui veut « passer directement au site ».
Synthèse
- Une maquette fonctionnelle est grise : c’est ce qui permet de la critiquer sur ce qu’elle décide.
- Elle décide la hiérarchie, les fonctions et l’ordre. Elle laisse ouverts la couleur, la typographie et les images.
- Les vrais titres et les vrais libellés, jamais du faux texte : c’est eux qu’on teste.
- Cinq zones : arrivée, preuve, contenu, action, pied de page.
- Une seule action primaire par page.
- La hiérarchie se fabrique par la taille, le contraste, la position et l’espace. Le plus efficace est l’espace.
- Un parcours s’écrit en quatre temps, et vos deux personae en ont deux.
- Trois écrans oubliés : l’état vide, l’état d’erreur, l’état de succès.
- Trois tests fonctionnent sur du papier, avant qu’une ligne de code existe.
Sources
Séance vérifiée le 28 août 2026. Le matériel, papier A3, feutres et ciseaux, est à apporter : sans découpage possible, l’atelier 1 perd son point 4, qui en est l’essentiel.
