Pourquoi nos yeux ne voient pas tout
Le biais de saillance décrit un phénomène simple mais aux conséquences profondes : nous accordons plus d'importance à ce qui ressort visuellement de notre environnement. Ce n'est pas un choix conscient — c'est un raccourci évolutif. Notre cerveau, bombardé de stimuli, filtre en permanence et ne retient que ce qui « sort du lot » : contraste élevé, mouvement, taille inhabituelle, couleur vive.
En neuroscience, on parle de « bottom-up attention » : une attention capturée par les propriétés physiques du stimulus, avant même que le cerveau ait eu le temps d'analyser le contenu. C'est pour ça qu'un bouton rouge sur un fond blanc attire l'œil avant qu'on ait lu le texte du bouton.
Pour un designer d'interface, ça signifie que la hiérarchie visuelle n'est pas un choix esthétique — c'est une architecture de l'attention. Chaque élément de votre écran se bat pour la saillance. Et si tout est saillant, rien ne l'est.
La hiérarchie visuelle comme système de guidage
Un bon design d'interface fonctionne comme un système de signalétique dans un aéroport. Vous ne lisez pas tous les panneaux — vous voyez celui qui est pertinent pour vous parce qu'il est plus grand, plus contrasté, mieux positionné que les autres.
Concrètement, chaque écran devrait avoir un seul élément de saillance maximale : l'action principale. Tout le reste doit être subordonné. Je structure mes interfaces en trois niveaux. Niveau 1 : le CTA principal — contraste maximal, taille dominante. Niveau 2 : les informations clés — typographie lisible, espacement généreux. Niveau 3 : les actions secondaires et le contenu contextuel — visuellement présents mais discrets.
J'ai audité une application fintech où l'écran d'accueil contenait 4 boutons de couleur vive, 3 badges de notification, 2 bannières promotionnelles et un carrousel animé. L'eye-tracking montrait que les utilisateurs passaient 8 secondes à scanner l'écran avant de toucher quoi que ce soit. Après avoir réduit les éléments saillants à un CTA principal et deux actions secondaires, le temps avant interaction est tombé à 2 secondes.
Couleur, contraste et mouvement
La couleur est le levier de saillance le plus intuitif, mais aussi le plus galvaudé. Si votre interface est déjà saturée de couleurs, ajouter un bouton rouge ne créera pas de saillance — il se fondra dans le bruit. La saillance chromatique fonctionne par contraste avec l'environnement, pas par intensité absolue.
Le mouvement est un levier plus puissant mais plus risqué. Notre vision périphérique est extrêmement sensible au mouvement — c'est un réflexe de survie. Une animation subtile (un micro-mouvement sur un badge, un léger pulse sur un bouton) capte l'attention de manière quasi-irrésistible. Mais si vous en abusez, vous créez un environnement visuellement stressant. Règle personnelle : maximum une animation d'attention par écran.
La taille et l'espacement sont les leviers les plus sous-estimés. Un élément entouré d'espace vide paraît immédiatement plus important. Les meilleurs landing pages le savent : le CTA flotte dans un océan de blanc, et c'est exactement pour ça qu'il convertit. L'espace négatif n'est pas du vide — c'est un amplificateur de saillance.
Quand la saillance dessert l'utilisateur
Il existe un revers toxique au biais de saillance : les dark patterns visuels. Rendre le bouton « Accepter tous les cookies » énorme et coloré, et le lien « Paramétrer les cookies » petit et grisé, c'est exploiter la saillance pour court-circuiter le consentement éclairé.
Le même mécanisme est à l'œuvre dans les flows de désabonnement. Le bouton « Rester abonné » est saillant, le lien « Confirmer la résiliation » est un texte gris en corps 12. L'utilisateur qui veut partir doit activement chercher la sortie.
En tant que designer, ma position est claire : la saillance doit refléter l'intention de l'utilisateur, pas la combattre. Si un utilisateur arrive sur un écran de désabonnement, c'est que son intention est de se désabonner. Rendre cette action difficile à trouver visuellement, c'est du sabotage d'intention.
Exercice pratique : auditer la saillance de vos écrans
Prenez n'importe quel écran de votre produit, floutez-le à 80 % dans Figma (filtre gaussien), et regardez ce qui reste visible. Ce sont les éléments saillants de votre interface. Est-ce que ces éléments correspondent à l'action principale de l'écran ? Si oui, votre hiérarchie est bonne. Si non, vous avez un problème de saillance.
Ce test de flou simule la vision périphérique et le balayage rapide que font vos utilisateurs quand ils arrivent sur un écran. Personne ne lit une interface de haut en bas comme un livre. On scanne, on attrape les éléments saillants, et on décide en une fraction de seconde si l'écran mérite notre attention focalisée.
Complétez ce test par un exercice de « squint test » : plissez les yeux devant votre écran. Ce qui disparaît n'a pas assez de contraste. Ce qui reste, c'est la colonne vertébrale visuelle de votre design. Si votre CTA principal disparaît quand vous plissez les yeux, il n'est pas assez saillant.