Retour sur une maquette : le goût et ce qui se mesure.

« Ça fait un peu fade » est le retour le plus courant sur une maquette, et le moins utilisable : il ne dit pas quoi changer, donc on devine, donc on recommence. Or une partie de ce qui passe pour du goût a une réponse chiffrée et publiée par le W3C. Voici ce qui se mesure, ce qui reste du ressenti, et comment écrire l'un et l'autre pour raccourcir les allers-retours.

Une maquette de site sur fond noir, un texte gris pâle entouré en cyan avec son rapport de contraste affiché à côté.

Vous recevez une maquette. Quelque chose vous gêne, sans que vous sachiez dire quoi. Vous écrivez « je ne sais pas, ça fait un peu fade ».

Une deuxième version arrive. Le sentiment n'a pas bougé.

Pourquoi un retour de ressenti tourne en rond

« Fade » ne dit pas ce qu'il faut changer. Celui qui reçoit ce mot doit deviner : les couleurs, l'espacement, la typographie, les photos, la hiérarchie des titres. Il choisit une piste, il la travaille, il renvoie. Si ce n'était pas la bonne, on recommence.

Chaque aller-retour coûte bien plus que le temps de la modification. Il coûte l'attente des deux côtés, la reprise du fil, la réunion qu'on recale. C'est là que les plannings meurent, rarement dans la production elle-même.

Ce n'est pas la faute du client. Personne ne lui a appris à critiquer un travail graphique, et le vocabulaire manque. Faute de mots, la gêne sort comme un goût.

Une partie de ce que vous ressentez est mesurable

Voilà ce que peu de gens savent, et qui change la conversation : une partie de ce qui passe pour du goût a une réponse chiffrée, publiée, et vérifiable en quelques secondes.

Le W3C, l'organisme qui normalise le web, publie des critères d'accessibilité. Deux d'entre eux couvrent une bonne moitié des gênes ressenties sur une maquette.

Le contraste. Le texte courant doit atteindre un rapport de contraste d'au moins 4,5 pour 1 avec son fond. Pour un grand texte, à partir de 18 points, ou 14 points en gras, le minimum descend à 3 pour 1. Ce fameux « ça fait fade », ou « je n'arrive pas à lire le gris », est très souvent un texte gris clair sur fond blanc qui tombe sous 4,5.

La taille des zones cliquables. Une cible doit faire au moins 24 pixels CSS sur 24, sauf à être suffisamment espacée de ses voisines. « Le bouton est petit » cesse d'être une impression.

Ces deux valeurs se mesurent sans rien installer. Les outils de développement de Chrome et de Firefox affichent le rapport de contraste directement dans le sélecteur de couleur, et n'importe quel vérificateur de contraste en ligne fait le calcul à partir de deux codes couleur.

« Le gris du texte est à 3,1 pour 1, sous le minimum de 4,5 » n'est pas un avis. C'est un défaut, et ça met fin à la discussion.

Ce que dit la loi, et pourquoi je vous en parle quand même

Autant être franc tout de suite : ces obligations ne vous concernent probablement pas.

En France, l'obligation d'accessibilité des services de communication au public en ligne vise les entreprises dont le chiffre d'affaires annuel réalisé en France dépasse 250 millions d'euros, moyenne des trois derniers exercices clos, seuil fixé par le décret du 24 juillet 2019. Et du côté de la directive européenne sur l'accessibilité, les prestataires de services de moins de dix salariés réalisant moins de deux millions d'euros n'ont aucune obligation en la matière.

Je ne cite donc pas ces critères comme une menace. Je les cite parce qu'ils forment un langage commun. Un nombre publié met d'accord deux personnes qu'un adjectif ferait discuter pendant trois échanges.

Et il y a une seconde raison, moins technique. Les gens dont la vue baisse ne sont pas une catégorie à part. Ce sont vos clients qui vieillissent, et ils lisent votre site sur un téléphone, dehors, en plein soleil.

Le reste, qui est vraiment du goût

Tout ne se ramène pas à un nombre, heureusement. Pour le reste, une seule règle vaut d'être retenue.

Ne dites pas ce que vous voulez changer. Dites ce qui vous gêne, et ce que la page doit obtenir.

« Mettez le bouton en rouge » est une solution. Elle a l'air précise et elle cache le problème. « En arrivant sur cette page, je ne vois pas tout de suite où cliquer » est un problème, et celui qui a conçu la maquette peut le résoudre de dix façons dont neuf auxquelles vous n'aviez pas pensé.

C'est ce que vous payez. Une solution imposée transforme un concepteur en exécutant, et vous récupérez exactement ce que vous auriez fait vous-même, en plus cher.

La relecture, en trente minutes

  • Ouvrez la maquette sur l'appareil où seront vos visiteurs, pas sur votre grand écran de bureau.
  • Écran par écran, posez une seule question : qu'est-ce que je veux que cette personne fasse ici ?
  • Sortez le vérificateur de contraste sur le texte courant, sur les liens et sur les boutons.
  • Notez vos retours en deux colonnes, mesurable d'un côté, ressenti de l'autre.
  • Pour la colonne mesurable, donnez le chiffre. Pour la colonne ressenti, décrivez le problème et l'objectif, jamais la solution.

Une page de retours écrite comme ça se traite en un aller-retour au lieu de trois. Le gain n'est pas dans la qualité du design, il est dans le calendrier, et c'est souvent ce qui manque le plus. C'est le même mécanisme que celui décrit dans ce qui bloque réellement un projet de site : ce qui coûte cher n'est presque jamais la tâche, c'est l'attente autour d'elle.

Ce que cette méthode ne règle pas

Le contraste et la taille des cibles ne font pas un beau site. Une page peut satisfaire tous les critères chiffrés et rester illisible dans son organisation, sans hiérarchie, sans respiration. Les nombres écartent des défauts, ils ne produisent pas une intention.

Passer 4,5 pour 1 ne rend pas non plus un site accessible. Les critères du W3C se comptent par dizaines et le contraste n'en est qu'un. Se déclarer accessible parce qu'on a vérifié deux valeurs serait malhonnête, et je préfère le dire ici plutôt que de laisser croire le contraire.

Enfin, cela ne supprime pas les allers-retours. Une maquette juste du premier coup, sur un projet un peu ambitieux, n'existe pas. Le but est de les raccourcir, pas de les faire disparaître.

Si vous préparez un projet et que vous voulez savoir comment il se déroule concrètement, c'est décrit sur la page offres, et la demande de devis sert aussi à poser ces questions avant de s'engager.

Questions fréquentes

Quel est le contraste minimum entre un texte et son fond sur un site ?

Le W3C fixe un rapport de contraste d'au moins 4,5 pour 1 pour un texte courant, et de 3 pour 1 pour un grand texte, c'est-à-dire à partir de 18 points, ou 14 points en gras. Un texte gris clair sur fond blanc tombe très souvent sous ce seuil. La valeur se vérifie en quelques secondes dans les outils de développement de Chrome ou de Firefox, ou avec n'importe quel vérificateur de contraste en ligne.

Une petite entreprise est-elle obligée de rendre son site accessible ?

En général non. En France, l'obligation d'accessibilité des services de communication au public en ligne vise les entreprises dont le chiffre d'affaires annuel réalisé en France dépasse 250 millions d'euros, en moyenne sur les trois derniers exercices clos, seuil fixé par le décret du 24 juillet 2019. Par ailleurs, la directive européenne sur l'accessibilité n'impose rien aux prestataires de services de moins de dix salariés réalisant moins de deux millions d'euros. Les critères restent utiles comme repères objectifs.

Comment formuler un retour utile sur une maquette de site ?

En séparant ce qui se mesure de ce qui se ressent. Pour ce qui se mesure, contraste et taille des zones cliquables, donnez la valeur constatée et le seuil. Pour le reste, décrivez le problème et l'objectif de la page, jamais la solution : « je ne vois pas où cliquer en arrivant » est exploitable, « mettez le bouton en rouge » impose une réponse et masque le problème.

Sur le même sujet : pourquoi un projet de site web bloque sur les textes, et pourquoi une petite modification n'est pas rapide.

Un retour à écrire, un projet à démarrer ?

Envoyez-moi votre maquette et deux ou trois phrases qui décrivent ce qui vous gêne. Je vous renvoie les chiffres, ce qui reste vraiment du goût, et une version de vos retours utilisable en l'état.

Les actualités de l'agence et les projets en cours, au fil de l'eau :

LinkedIn Facebook Instagram

Retour au journal