Un contour en pointillés se dessine, puis se remplit : la bouteille d’eau que tout le monde imagine.
Imaginez une bouteille d’eau. Vous voyez forcément une bouteille en plastique transparent, avec un bouchon bleu, n’est-ce pas ?
Et si c’était une canette ?
Et si je vous disais que cette canette noire, elle aussi, est une bouteille d’eau ? Ça vous perturbe ?
L’astuce de Liquid Death
C’est l’astuce de la marque Liquid Death : mettre de l’eau dans des canettes en métal, comme une boisson énergisante.
Cet exemple n’est pas une recommandation de la marque : il sert seulement à montrer comment elle se sert de cet effet.
Une anomalie dans le rayon
Au supermarché, toutes les bouteilles sont bleues et se ressemblent. Cette anomalie attire l’œil du client malgré lui : il prend la canette pour voir ce que c’est.
Plus d’un milliard en sept ans
Avec cette astuce, la marque a dépassé en sept ans à peine le milliard de dollars de valorisation : 1,4 milliard en 2024, selon RetailBoss.
Un principe : l’effet Von Restorff
La loi psychologique à l’œuvre s’appelle l’effet Von Restorff, ou effet d’isolement (Isolation Effect), décrit par Hedwig von Restorff en 1933.
Le cerveau filtre ce qui se ressemble
Quand tout se ressemble, le cerveau filtre, et ne se concentre, malgré vous, que sur l’élément qui casse le motif.
En pratique, dans Figma
Voyons comment appliquer cette loi en UX, pour faire grimper la conversion.
Règle 1 · Le 60-30-10
Première règle, le 60-30-10 des couleurs : dans toute interface, 90 % de l’écran doit rester calme, entre le fond (60 %) et les éléments secondaires (30 %). La couleur d’accent, elle, ne dépasse jamais 10 %.
L’accent pour un seul bouton
Gardez l’accent pour le seul call-to-action principal, avec un contraste d’au moins 4,5:1, le seuil AA des Web Content Accessibility Guidelines : l’œil y va droit.
Règle 2 · La hiérarchie spatiale
Deuxième règle, la hiérarchie spatiale. Sur une page de tarifs par exemple, si vous posez trois offres au même niveau, l’utilisateur hésite.
Mettez en avant l’offre à vendre
Cassez cette symétrie et grandissez la carte de l’offre que vous voulez vendre : un peu d’échelle, une carte surélevée, une ombre portée et un badge. Vous dirigez son attention droit sur elle.
Règle 3 · Le bruit visuel
Troisième règle : évitez le bruit visuel (visual noise). D’après le Nielsen Norman Group, quand vous mettez trop d’éléments spéciaux sur le même écran, l’effet Von Restorff perd son impact.
Un écran, un objectif
Si tout attire l’œil, plus rien ne se voit. La règle d’or : chaque écran a un seul objectif, et un seul call-to-action principal.
La trace qui reste
En résumé, l’effet Von Restorff repose sur la trace qui reste en mémoire une fois l’application fermée.
Cet article reprend l’épisode N° 04 de notre série sur les lois UX. Prochain épisode : l’effet Zeigarnik.