Le Design Invité : concevoir pour des sites qu'on ne contrôle pas

1. Le site hôte est l'inconnu

Le design d'interface suppose un décor maîtrisé : on connaît la palette, la typographie, ce qui entoure chaque composant. Un widget de chat, de paiement ou de consentement ne connaît rien de tout cela. Il s'affiche sur des milliers de sites, chacun avec sa direction artistique, ses bandeaux et ses applications. La maquette ne montre qu'un cas parmi des milliers, et c'est le plus favorable.

Pour le nouveau live chat de Reponse, le prototype tenait sur quatre boutiques fictives : claire, noire, saturée, photo. Avant d'écrire une ligne de code, nous l'avons confronté à 1 000 boutiques Shopify réelles de la cible, aux États-Unis, au Canada et en France, ouvertes par un navigateur automatique sur ordinateur et sur mobile. 861 ont pu être analysées. Le terrain a aussitôt contredit la maquette.

2. Se mesurer au pire cas réel

La règle du WCAG impose un rapport de contrasteRapport entre la luminance du texte et celle de son fond, de 1:1 à 21:1. Le WCAG demande au moins 4,5:1 pour un texte courant (niveau AA). d'au moins 4,5:1 pour le texte, et on la vérifie d'habitude contre un fond. Un verre n'a pas de fond fixe : il prend la couleur de la page qu'il recouvre. Le premier prototype vérifiait la couleur d'accent contre la teinte la plus sombre du verre fumé. C'était le mauvais cas, et il mesurait 1,7 à 3:1.

Le pire cas réel est l'inverse : un verre fumé posé sur une page blanche, un verre clair posé sur une page noire. Une fois la règle corrigée, chaque cas dépasse 4,6:1, et le contraste du texte tient sur 100 % des boutiques analysées, dans les deux verres. La leçon dépasse le contraste : un composant invité se valide sur la pire page qu'il rencontrera, pas sur la plus belle.

3. Lire la page plutôt que demander des réglages

L'ancien widget demandait au marchand ses couleurs pour le thème clair et pour le thème sombre. Chaque réglage est un aveu : le design n'a pas su lire son environnement, et il délègue le problème à quelqu'un qui n'est pas designer.

Le nouveau widget lit la page. Il mesure la luminance autour de lui : verre fumé par défaut, verre clair quand la page est sombre. Sur les 861 boutiques, cette seule règle fait passer les bords trop faibles de 16 % à 6 %, à 0,2 point du meilleur choix possible boutique par boutique. Pour la couleur, il suit une chaîne de décision et garde la première couleur vraiment colorée. Si tout est noir, gris ou blanc, comme chez 45 % des marques, il se replie sur la couleur secondaire de la marque, puis sur une lumière neutre. Un seul champ reste, et il est facultatif : la couleur de marque, pour le marchand qui veut trancher.

4. La politesse de l'invité

Un invité ne parle pas plus fort que son hôte. Sur la moitié des pages, le bas de l'écran est déjà pris au chargement, d'abord par les bandeaux de consentement aux cookies : 36 % des pages, dont près des deux tiers affichent le bandeau de Shopify lui-même. Couvrir ce bandeau, c'est gêner le premier choix que la boutique demande à son visiteur. Tant qu'il attend une réponse, le widget se réduit donc à son avatar, posé au-dessus. Il remonte de la même façon au-dessus des barres d'achat collantes des fiches produit.

Même politesse envers les autres invités : 64 % des boutiques ont déjà un chat, Gorgias sur 41 % d'entre elles. Sur mobile, la barre se raccourcit pour ne jamais recouvrir leur bulle, et l'admin explique au marchand pourquoi deux chats côte à côte font hésiter ses clients.

5. N'ajouter qu'un seul objet

Dernier principe : l'invité n'ajoute qu'un objet à la page. Une barre et un panneau qui s'animent séparément se lisent comme deux éléments de plus. Le widget fait croire à un seul composant : la barre s'étire en un bloc de verre, le panneau en sort sans couture, l'avatar remonte sous le bord jusqu'à l'en-tête, et le bloc ne se sépare qu'à la fin. C'est la loi gestaltiste du destin communPrincipe de la Gestalt décrit par Wertheimer en 1923 : des éléments qui se déplacent ensemble, dans la même direction et au même rythme, sont perçus comme un seul groupe. : ce qui bouge ensemble se perçoit comme un tout.