Le contraste

La première technique pour attirer l'attention sur un élément plutôt que sur le reste des éléments de la page est de faire en sorte qu'il se distingue de ceux-ci. En effet, l'œil est attiré par les différences, cela nous vient de nos ancêtres chasseurs-cueilleurs qui devaient scruter les bois à la recherche de baies et autres fruits souvent de couleurs vives. Ainsi, vous pouvez jouer avec les couleurs en utilisant des couleurs plus vives pour vos boutons ou pour surligner du texte. Prenez l'exemple des réductions de prix sur un site, celles-ci sont souvent marquées en rouge (avec l'ancien prix barré) ce qui contraste parfaitement avec le reste des détails du produit.

Mais le contraste ne concerne pas uniquement les couleurs, vous pouvez aussi jouer sur la taille de la police, ce n'est pas pour rien que les titres sont toujours plus grands et épais. Dans le même style, vous aurez sans doute remarqué que je surligne en gras les phrases clés de mes articles pour ces mêmes raisons. En parlant de police, vous pouvez aussi changer celle-ci, attention tout de même, choisissez-en une lisible (le style ne doit pas être au détriment de l'ergonomie).

Amazon product details

Dans cette capture d'écran sur Amazon, vous pouvez voir que le prix est en rouge pour contraster avec le reste des écritures noires. Les boutons d'achat sont d'une couleur vive. D'autres éléments ressortent aussi par leur contraste : le "En stock" et les étoiles d'appréciation du produit se distinguent par leurs couleurs plus vives que le reste. Enfin , certains éléments secondaires se détachent par leur police plus grasse ou leur taille (ex: le titre, "Livraison GRATUITE", "Belgique", ...).

Les espaces blancs

Cette technique consiste à isoler l'élément à mettre en évidence en ajoutant des espaces blancs (=des espaces vides) autour de celui-ci. Votre élément étant le seul (ou presque) dans la zone vue par vos visiteurs, il est évident qu'ils y feront attention.

L'effet de surprise

Le meilleur exemple pour illustrer l'effet de surprise est la "popup", elle a toujours l'art d'apparaitre lorsqu'on ne s'y attend pas... Et évidemment, dès qu'elle apparait, toute notre attention est portée sur elle. Vous pouvez également créer de la surprise en ajoutant des effets aux survoles de certains éléments/zones de votre site (petit exemple juste après).

Créer du mouvement

Cette technique se base à nouveau sur le comportement de nos yeux et de notre cerveau qui traitent en priorité les éléments en mouvement. Ceci est à nouveau un héritage de nos ancêtres qui devait être constamment à l'affut de proies ou prédateurs potentiels. La popup est donc un bel exemple mais vous pouvez aussi appliquer cette technique en ajoutant des effets comme le "scale up" (=agrandissement). Par exemple : un bouton qui grossit puis reprend sa taille normale ou encore un bouton qui apparait avec un léger décalage par rapport au reste lorsque vous faites défiler la page.

Images et illustrations

"Une image vaut mille mots", cette citation n'est plus à démontrer... Par contre, j'ajouterai que "une image vaut 1000ms d'attention". La raison est assez simple, il est plus facile et agréable de regarder une image que de lire mille mots, vos utilisateurs auront donc tendance à d'abord regarder vos illustrations pour se faire un avis et avoir une idée du contenu de votre site. Vous pouvez même créer des illustrations animées et ainsi utiliser le principe précédent, jackpot !

Amazon product page

Toujours sur Amazon, vous constaterez facilement que le premier élément qui attire l'attention est l'illustration du produit. D'autant plus que des espaces blancs y ont été ajoutés, presque 1/3 de la page est consacrée à cette image qui contraste donc aussi de par sa taille. Vous remarquerez aussi qu'au survol de l'image, celle-ci s'agrandit avec un effet de loupe, cela crée donc du mouvement et un effet de surprise ! L'image zoomée s'affiche par-dessus les détails du produit, elle occupe presque tout le champ de vision de l'utilisateur qui ne se laisse donc pas distraire par d'autres éléments.

Amazon product image