Design efficace :
7 principes qui convertissent

Une déficience de la vision des couleurs dans l'axe rouge-vert touche environ un homme sur douze et une femme sur deux cents. Sur une file d'attente de trente personnes, cela fait statistiquement une ou deux qui ne distinguent pas les deux états — et qui ne le diront pas, parce que la plupart du temps elles ne savent même pas que l'information existait.

La correction ne demande ni compétence ni budget, seulement de ne pas faire porter le sens à la couleur seule :

• Ajoute un mot ou un symbole. « Épuisé » à côté du rouge, une coche à côté du vert. La couleur reste utile pour aller vite ; elle cesse d'être le seul porteur du message.
• Joue sur la luminosité, pas seulement sur la teinte. Deux couleurs de luminosité proche se confondent aussi en photo, à distance et sous un éclairage jaune — donc pour tout le monde, pas seulement pour une minorité.
• Vérifie en niveaux de gris. Une capture d'écran passée en noir et blanc sur ton téléphone répond à la question en dix secondes : si les deux états deviennent identiques, ils l'étaient déjà pour une partie des gens.

Le même raisonnement vaut au-delà du rouge-vert : tout écran lu de loin, de biais ou sous une lumière de mauvaise qualité perd de la nuance. Ce qui aide les personnes concernées améliore la lisibilité générale, ce qui est rarement le cas des ajustements d'accessibilité.

Le test en niveaux de gris est le seul de cette page qui prend dix secondes et se fait sur le contenu que tu as déjà. C'est aussi celui qui révèle le plus souvent quelque chose.

La hiérarchie n'est pas une question esthétique, c'est un ordre de lecture. Sur un écran vu de la rue, il n'y a de la place que pour trois niveaux :

• Un élément qui se lit à cinq mètres. Un seul. C'est ce que la personne emporte si elle ne regarde qu'une fraction de seconde, et c'est presque toujours un prix, un plat ou une heure.
• Deux ou trois lignes qui se lisent à deux mètres. Elles complètent le premier et ne le répètent pas. Si elles disent la même chose autrement, elles ne servent qu'à rendre le tout plus petit.
• Le reste, qui n'a pas besoin d'être lu. Le logo, les mentions, la décoration. Petit, en bas, et volontairement discret.

Le test qui règle la question en dix secondes : recule jusqu'à ne plus pouvoir lire que la plus grande chose de l'écran. Ce qui reste lisible à cette distance est ce que ton écran dit réellement. Si à ce moment-là tu vois trois choses, tu n'as pas de premier niveau — et si tu n'en vois aucune, tout ton contenu est au deuxième.

Il y a une conséquence pratique qui simplifie beaucoup la fabrication : choisir le message principal se fait avant d'ouvrir quoi que ce soit. En une phrase, à l'oral. Les mises en page qui posent problème sont presque toujours celles où cette phrase n'a jamais été prononcée, et où la hiérarchie s'est décidée toute seule au fil des ajouts.

Impose-toi une règle simple pour un mois : un seul élément en gros par écran. C'est frustrant la première fois et c'est la modification qui change le plus la lisibilité, bien avant le choix des couleurs ou de la police.

Les deux publics d'un même commerce n'ont rien en commun sur ce plan. Le passant a deux secondes, parfois trois, et il regarde en marchant : ce qu'il peut absorber tient en cinq ou six mots, un chiffre et une image. La personne qui attend son tour en a dix ou quinze, assise, disponible, et elle relira volontiers un texte plus long parce qu'elle n'a rien d'autre à faire. Une même vue conçue pour les deux échoue avec les deux : trop longue pour l'un, trop pauvre pour l'autre. C'est le cas typique où la solution n'est pas de mieux rédiger mais de séparer — par zone si les deux écrans existent, par plage horaire s'il n'y en a qu'un.

La longueur de la boucle obéit à une autre logique, et c'est celle qu'on se rate le plus souvent. Si l'attente moyenne est de quatre minutes et que la boucle dure quarante secondes, la personne voit six fois la même chose. La première fois elle lit, la deuxième elle vérifie, et à partir de la troisième elle regarde son téléphone — et ce qui passe ensuite ne sera plus jamais vu, quelle que soit sa qualité. Une boucle doit être plus longue que l'attente qu'elle accompagne, ou assez variée pour que la répétition ne se remarque pas. Compter le nombre de vues et le multiplier par leur durée prend une minute, et c'est une minute que presque personne ne prend.

Les transitions, elles, coûtent bien plus cher qu'elles n'en ont l'air. Un fondu d'une seconde sur une vue de quatre, c'est un quart du temps de lecture consacré à ne rien montrer de lisible — et sur une boucle entière, cela représente parfois plus de temps que la vue la plus importante. La règle simple, et elle est aussi valable pour l'animation en général : plus la vue est courte, plus la transition doit être brève ou inexistante. Ce qui bouge attire l'œil, mais l'attirer pendant que le texte n'est pas encore lisible revient à le dépenser pour rien.

Et il reste le cas particulier qui justifie à lui seul de réfléchir à tout cela : l'information qui n'a pas le droit d'attendre son tour. Un changement d'horaire, une caisse fermée, une salle déplacée. Si elle est noyée dans une boucle de trois minutes, elle arrive en moyenne une minute et demie trop tard pour la moitié des gens. Ce type de message ne se programme pas comme les autres : il se met sur toutes les vues, en bandeau, ou il remplace la boucle. C'est une décision de mise en page autant qu'une décision d'exploitation, et elle se prend une fois, calmement, pas le jour où la caisse tombe en panne.

Aucune de ces quatre décisions ne demande d'outil particulier. Elles demandent d'aller se mettre à la place du client, montre en main, une fois — ce qui est exactement le même geste que reculer de quatre mètres pour vérifier un corps de texte, appliqué à l'autre dimension de l'écran.

En toute honnêteté : nous ne rédigeons pas tes contenus et nous ne mesurons pas ton temps d'attente à ta place — l'écran affiche ce que tu saisis, avec les durées que tu choisis. Ce que nous t'enlevons, c'est le coût d'essayer : changer une durée ou l'ordre des vues se fait depuis le téléphone, ce qui rend l'ajustement possible au lieu de théorique.