Contenu et navigation
Slides
Cahier des charges, cours 3 : définition du contenu, par G. Barmarin (PDF)PDF
Objectif : choisir le ton du site, faire l'inventaire de son contenu avec le client, puis organiser ce contenu en pages et en menu.
Ce chapitre continue avec l'exemple de La Bécane, l'atelier de réparation de vélos.
1. Le contenu d'abord
« Le contenu précède le design », écrit le designer Jeffrey Zeldman. Sans contenu, une maquette n'est qu'un décor.
Une maquette dessinée avec du faux texte paraît toujours réussie. Le jour où les vrais contenus arrivent, le titre fait trois lignes au lieu d'une, il manque deux photos sur six et la page « Services » compte onze services au lieu de quatre. Tout est à refaire. Tu évites cela en sachant ce que le site contiendra avant de le dessiner.
2. Type de site, signature, tonalité
Trois décisions courtes cadrent tout le reste. Tu les écris dans la rubrique 7 du canevas.
Le type de site. Site vitrine, site commercial, site d'association ou de club, site événementiel, portfolio, site à contenu spécialisé. Un site a souvent un type principal et un type secondaire. La Bécane est un site vitrine avec une prise de rendez-vous.
La signature. C'est le slogan, le message essentiel en une phrase. Le visiteur doit le saisir au premier coup d'œil. Pour La Bécane : « Votre vélo réparé pour lundi ». Si ton client ne veut pas de slogan, fais-lui quand même résumer sa philosophie en une phrase. Tu ne l'afficheras pas, mais elle te guidera.
La tonalité. C'est l'ambiance : professionnelle, chaleureuse, ludique, haut de gamme, artisanale, militante. Le graphisme, les textes, les images et même la navigation en dépendent.
Les trois doivent s'accorder entre elles et avec l'objectif du chapitre précédent. Une banque dont la signature serait « La banque qui vous simplifie la vie », avec un menu de quarante entrées, se contredit toute seule.
3. Ce que font les autres
Avant de décider ce que contiendra le site, il faut savoir ce que font les concurrents de ton client. Cette analyse occupe la rubrique 5 du canevas et a son propre chapitre, « Analyser la concurrence ». Tu la mènes seul, sans ton client.
Tu y relèveras les rubriques des menus des concurrents, leurs slogans, les contenus que tous proposent et ceux qu'aucun ne propose. Tu reviendras alors sur ton inventaire et sur ton arborescence.
4. L'inventaire du contenu
Trois questions, dans cet ordre. De quoi le client dispose-t-il ? Qu'est-ce qui ira sur le site ? Où ?
Commence par tout lister, sans trier : textes, photos, vidéos, logo, dépliants, tarifs, horaires, avis de clients, publications sur les réseaux sociaux. Trie ensuite. Certains contenus sont à reprendre tels quels, d'autres à réécrire, d'autres à créer, d'autres à laisser de côté.
| Contenu | Existe déjà ? | À faire | Qui le fournit | Pour quand |
|---|---|---|---|---|
| Texte de présentation de l'atelier | un paragraphe sur Facebook | à réécrire, plus court | la cliente, relu par toi | 15 janvier |
| Tarifs des réparations | une feuille affichée dans l'atelier | à recopier et à classer | la cliente | 15 janvier |
| Photos de l'atelier | quatre photos au téléphone | à refaire | un photographe | 1er février |
| Avis de clients | une vingtaine sur Google | en choisir cinq | toi, validés par la cliente | 1er février |
Les deux dernières colonnes comptent autant que les autres. Un site prêt à temps mais vide, parce que les textes ne sont pas arrivés, est un retard classique. Écris qui fournit quoi, et pour quand.
Les textes. Ceux que tu recevras seront souvent trop longs. Sur le web, on écrit court : une idée par paragraphe, l'essentiel en premier, des mots simples. Prévois dans le cahier des charges qui réécrit, et qui valide.
Les images. Pose quatre questions pour chacune. Existe-t-elle ? Sa qualité suffit-elle ? Le client a-t-il le droit de l'utiliser ? Dit-elle la même chose que le texte ? Un restaurant « convivial » dont toutes les photos montrent une salle vide se contredit. Une image trouvée sur un moteur de recherche n'est pas libre de droits pour autant. Une image générée par IA se choisit avec le même soin, et ton client doit savoir qu'elle l'est.
5. Organiser le contenu
Une fois la liste triée, il faut la ranger. L'architecte Richard Saul Wurman distingue cinq façons d'organiser de l'information.
| Façon de ranger | Quand elle convient | Exemple |
|---|---|---|
| Par catégories | des contenus qui se ressemblent | réparations, entretien, accessoires |
| Dans le temps | une histoire, une marche à suivre | les étapes d'une prise de rendez-vous |
| Par lieu | ce qui dépend d'un endroit | les points de dépôt dans la région |
| Par ordre alphabétique | quand le visiteur connaît le nom de ce qu'il cherche | les marques réparées |
| Par ordre de grandeur | du moins cher au plus cher, du plus simple au plus complet | les forfaits |
Un menu range presque toujours par catégories. Les quatre autres façons servent surtout à l'intérieur des pages.
Travaille avec des post-it : un contenu par papier, puis regroupe ceux qui vont ensemble. Chaque groupe reçoit un nom. Ces noms sont tes futures entrées de menu. Fais-le sur une table, c'est plus rapide qu'à l'écran.
6. L'arborescence
L'arborescence est le schéma des pages du site et des liens entre elles. Elle part de l'accueil et descend par niveaux.
flowchart TD
A[Accueil] --> R[Réparations]
A --> E[Entretien]
A --> T[L'atelier]
A --> V[Prendre rendez-vous]
A --> C[Contact]
R --> R1[Tarifs]
R --> R2[Vélos électriques]
E --> E1[Forfaits]
Le pied de page porte les liens vers les mentions légales et la politique de confidentialité.
Trois règles la tiennent en place.
- Peu de niveaux. Les pages importantes s'atteignent en deux ou trois clics depuis l'accueil. La Bécane tient en deux.
- Un menu court. Six ou sept entrées au maximum : un menu plus long ne se lit plus d'un coup d'œil.
- Les mots du visiteur. « Réparations » plutôt que « Nos prestations ». Relis les missions de tes personas : chaque mission doit trouver son chemin dans le menu.
Fixe la navigation avant de commencer le design. Elle prend de la place à l'écran, elle impose ses mots, et le graphisme se construit autour d'elle. La changer une fois la maquette terminée revient presque à refaire la maquette.
7. Les appels à l'action
Un site dit au visiteur quoi penser du client. Il lui dit aussi quoi faire. Un appel à l'action est l'élément, souvent un bouton, qui invite le visiteur à l'action attendue : réserver, téléphoner, s'inscrire, acheter, demander un devis.
Reprends ton tableau des publics cibles. Sa dernière colonne contient déjà tes appels à l'action. Il reste à les classer et à décider sur quelles pages ils apparaissent.
| Appel à l'action | Pages | Public |
|---|---|---|
| Prendre rendez-vous | toutes, dans l'en-tête | les personnes qui vont travailler à vélo |
| Demander un forfait famille | Entretien, Forfaits | les familles |
| Téléphoner | Vélos électriques, Contact | les propriétaires d'un vélo électrique |
Un seul appel principal par page. S'ils sont trois de même taille côte à côte, le visiteur hésite.
8. Exercice en classe : ton arborescence
Durée : 25 minutes, seul, puis à deux.
- Sur des post-it ou une feuille, écris tous les contenus que tu imagines pour le site de ton TFE. Un contenu par papier. Cinq minutes.
- Regroupe-les, nomme les groupes et dessine l'arborescence. Vérifie les trois règles. Dix minutes.
- Liste tes appels à l'action et place-les sur les pages. Cinq minutes.
- Montre ton arborescence à ton voisin. Donne-lui la mission de ton persona principal et demande-lui par où il passerait. S'il hésite, un nom de page est à revoir. Cinq minutes.
9. À faire avec ton client
Le reste ne se fait pas sans lui. Prends rendez-vous cette semaine.
- L'inventaire du contenu. Remplis avec lui le tableau « Ce qui existe déjà » de la rubrique 9, avec les colonnes « qui le fournit » et « pour quand ». Repars avec les fichiers qu'il possède déjà : logo, textes, photos.
- La tonalité. Fais-lui choisir une signature et une tonalité, pour la rubrique 7.
- Les personas. Montre-lui tes trois fiches et corrige-les avec lui.
Mets ensuite au propre, dans la rubrique 9 de ton canevas, l'arborescence, le contenu de chaque page et les appels à l'action.
À retenir
- Le contenu se rassemble avant que le design commence.
- La signature, la tonalité et le type de site s'accordent avec l'objectif.
- L'inventaire dit pour chaque contenu qui le fournit et pour quand.
- L'arborescence garde peu de niveaux et un menu court, écrit avec les mots du visiteur.
- Chaque page porte un appel à l'action principal, choisi pour un public précis.
Ce chapitre s'appuie sur le cours « Cahier des charges » de Gérard Barmarin (IFOSUP Wavre, 2023-2024), utilisé avec son accord.