Une porte à quatre poignées n’est pas quatre fois plus accueillante. On s’arrête devant, on cherche laquelle commande vraiment, et on finit par pousser au hasard.

Une page à quatre boutons produit le même arrêt. Sauf que devant une porte on insiste, et que devant une page on ferme l’onglet.

Quatre poignées, c’est zéro décision

Un bouton de plus ne s’ajoute pas aux autres, il se retranche. L’attention disponible sur un écran est une quantité fixe : la partager en quatre ne la multiplie pas, elle la dilue. Quatre actions de même poids, c’est une page qui ne sait pas ce qu’elle veut, et un visiteur qui le sent avant d’avoir lu la première ligne.

Ce n’est presque jamais lui qui a réclamé le quatrième bouton. C’est un arbitrage qui n’a pas eu lieu. Le commercial tient au devis, la communication tient à la newsletter, quelqu’un tient au lien LinkedIn, personne ne tranche, tout part en production. La page devient le compte rendu de la réunion.

Un seul bouton plein sur tout le site

Dans la feuille de styles des boutons de ce site, il existe une seule variante pleine : .pri, fond encre, texte à la couleur du fond de page. Tout le reste est un contour posé sur du vide. Ce n’est pas une palette, c’est une règle. Le bouton plein est l’action de la page, et il y en a un par page.

La page méthode en porte deux, côte à côte. Le premier, plein, ouvre le contact. Le second, en contour, renvoie vers les projets. Ils ne se disputent rien : le second n’est pas une deuxième proposition, c’est une sortie pour qui n’est pas prêt à écrire. Une hiérarchie à deux niveaux tient debout. Quatre boutons au même niveau, non.

Le bouton qui commence désactivé

La section contact fait le geste inverse de la multiplication. Elle n’a qu’un bouton, et il arrive éteint : texte en gris, cursor: not-allowed, rien ne se passe au clic. Il ne s’allume qu’une fois deux expertises choisies parmi les pastilles posées autour de la sphère.

Un bouton qui pose une question avant de partir filtre mieux que quatre qui n’en posent aucune. Le message arrive avec son sujet déjà écrit, et le visiteur a fait un premier pas au lieu de choisir une porte. Son seul défaut est de demander un effort, et c’est aussi tout ce qu’on lui demande.

La carte est le bouton

Sur les cartes de projet, « Voir le projet → » s’affiche en bas, en iris. Ce n’est pas un lien. C’est un <span> marqué aria-hidden="true", à l’intérieur d’un <a> qui enveloppe la carte entière. Rien n’est cliquable dans une carte, sauf la carte.

L’affordance reste pour l’œil et la souris ; pour un lecteur d’écran elle n’existe pas, parce que le lien s’annonce déjà. Deux cibles visibles pour une seule destination, c’est la porte à quatre poignées à l’échelle d’un composant : le clavier s’arrêterait deux fois, la synthèse vocale lirait deux fois, pour la même page.

C’est là que le focus cesse d’être une image. Au clavier, il visite un élément à la fois, dans l’ordre du document. Chaque bouton ajouté est un arrêt de plus avant le contenu. Une page qui n’arrive pas à choisir son action fait payer cette indécision à tous ceux qui ne cliquent pas à la souris.

Ce que je retiens

Un bouton ne se justifie pas par « au cas où ». Il se justifie par la question à laquelle il répond, à cet endroit de la page, pour quelqu’un qui vient d’y arriver. Sans question, pas de bouton.

Le reste tient dans la poignée. Une seule, à la bonne hauteur, du bon côté : elle dit où pousser sans qu’on ait à lire quoi que ce soit. Rien ne bouge sans raison, et un bouton non plus.