Un site cohérent quand pages et services se multiplient : comment utiliser des composants réutilisables

Un site qui grandit se délite par accumulation, pas par une erreur. Chaque service ajoute sa page, chaque page résout les mêmes problèmes depuis le début, et après deux ans coexistent six types de boutons et quatre manières d'intituler un service. Le coût n'est pas esthétique : c'est que chaque nouvelle page rouvre des décisions déjà prises, et plus personne ne sait quelle est la bonne version.

Un système de composants sert à clore ces décisions une fois pour toutes. Ce n'est pas un manuel graphique à consulter : c'est un ensemble de pièces déjà décidées, avec écrit quand les utiliser, ce qu'elles peuvent changer et qui en répond si elles changent.

Le symptôme n'est pas la laideur, c'est le temps

Avant de construire quoi que ce soit, mieux vaut reconnaître si le problème existe vraiment. Les signes sont opérationnels, pas visuels.

• La même information apparaît sous trois formes différentes selon qui a fait la page.
• Chaque nouvelle page commence par une discussion sur comment elle doit être faite, plutôt que sur ce qu'elle doit dire.
• Plus personne ne touche aux anciennes pages, car on ne sait pas ce qui va casser.
• Une modification banale, comme changer le texte d'un bouton partout, exige d'ouvrir trente pages à la main.

Si aucun de ces symptômes ne se manifeste, le système n'est pas encore nécessaire : il arrive quand le site commence à coûter du temps à chaque ajout.

Les quatre décisions qu'il vaut la peine de fixer en premier

On ne part pas des cas rares. On part de ce qui apparaît sur chaque page, car c'est là que l'incohérence se voit et coûte cher.

• Titres : combien de niveaux existent et à quoi ils servent. Une page a un seul titre principal ; les sous-titres décrivent le contenu de la section, ils ne font pas office de slogan. C'est la règle la plus ennuyeuse et la plus utile.
• Boutons : combien de formes existent et ce qu'elles signifient. En général, trois suffisent, à savoir l'action principale de la page, une alternative secondaire et un lien textuel. Si une page a besoin de deux actions principales, le problème n'est pas graphique : c'est que la page a deux objectifs.
• Images : proportions admises, ce que doit montrer une photo de produit, de personne ou de réalisation, et ce que l'on fait quand la photo manque. Le cas de la photo manquante doit être décidé une fois pour toutes, pas improvisé page par page.
• Formulaires : aspect des champs, signalement des champs obligatoires toujours identique, où apparaissent les erreurs, ce que voit celui qui vient d'envoyer. C'est la partie où l'incohérence ne fait pas mauvaise impression : elle fait perdre des demandes.

Commun, variante, exception : comment décider

La question qui revient n'est pas comment construire un composant, mais si une demande est vraiment particulière. Trois cas, par ordre de fréquence.

1. C'est le même composant et seul le contenu change. Aucune décision à prendre : on l'utilise.
2. C'est une variante prévisible, c'est-à-dire la même pièce avec une option déjà admise, par exemple une fiche avec image et une sans. La variante s'ajoute au composant et se documente, elle ne se recrée pas de zéro.
3. C'est vraiment une exception : elle ne sert qu'une seule fois, sur une seule page, pour une raison que l'on sait expliquer. On la fait, on note où elle se trouve, et on la réexamine après quelques mois. Si entre-temps elle a été copiée deux fois, ce n'était pas une exception, et il est temps de la promouvoir en variante.

Un petit catalogue, avec les limites écrites en face

Le catalogue utile n'énumère pas des composants : il dit quand les utiliser et quand ne pas les utiliser. Exemple illustratif pour un site d'entreprise en pleine croissance.

La colonne des limites est celle qui fait gagner du temps : elle répond à l'avance à la question « puis-je l'utiliser ici aussi ? », qui est la question avec laquelle les systèmes se délitent.

Qui décide, qui met à jour, qui peut dire non

Un système sans responsables dure aussi longtemps que la présence de celui qui l'a créé.

• Une seule personne décide si une demande est une variante ou une exception. Elle peut consulter qui elle veut, mais la décision n'est pas collégiale : sinon elle n'arrive jamais et chacun procède de son côté.
• Celui qui rédige les contenus sait quels composants il peut utiliser et avec quels textes, longueurs maximales comprises. C'est là que les composants se cassent : un titre de quinze mots dans un espace pensé pour six.
• Chaque modification apportée à un composant commun est communiquée à ceux qui gèrent les pages, car elle change partout, même là où personne ne regardait.
• L'emplacement du catalogue est écrit quelque part. S'il vit dans la tête du prestataire, au premier changement il faut tout recommencer.

Le test : une page simple et une difficile

Un système ne s'évalue qu'en montant dessus deux vraies pages, choisies exprès aux deux extrêmes.

1. Une page simple, par exemple celle de présentation de l'entreprise : elle doit se monter sans rien inventer. Si déjà ici il faut une pièce nouvelle, les fondations manquent.
2. Une page difficile : celle que le commercial utilise vraiment, avec comparaisons, preuves, pièces jointes et plusieurs actions possibles. C'est là qu'émergent les cas que personne n'avait prévus.
3. On note chaque fois qu'il a fallu forcer un composant pour le faire entrer. Cette liste est celle des variantes à ajouter.
4. On refait le test après les corrections, sur les deux mêmes pages, pour voir si les forçages ont disparu.

Ce que ce guide ne couvre pas

Il est ici question du système visuel : les pièces avec lesquelles les pages sont faites et les règles pour les utiliser. Comment organiser les sujets quand les services sont nombreux, c'est-à-dire quelles pages existent, comment elles s'appellent et comment elles se relient, est une question de structure du site et se traite avant celle-ci. Qui met matériellement à jour les contenus après la livraison, et avec quels outils, est également un sujet à part.