Augmenter le taux de clic d’un bouton (étude de cas)

Jean-Claude Grosjean (expert en methodes AGIL que je vous conseille vivement de lire) a publié, il y a peu, un article “Ergonomie Web : 8 conseils pour mieux vendre sur Internet“.

Cet article traite entre autre du guidage du regard en exploitant le diagramme de Gutenberg (tendance de lecture de gauche à droite et de haut en bas).

Je tenais à partager avec vous quelques éléments de composition d’écrans afin de vous donner l’emplacement idéal d’un bouton d’action.

Pour être très concret, j’ai décidé de comparer les deux exemples d’écrans fournis dans l’article de Jean-Claude (dailyburn.com & goodbarry.com).

Increasing clic rate - examples

Avant de construire la solution la mieux adaptée pour ces deux écrans, prenons le temps d’analyser les deux écrans actuels par le filtre de l’ErgoSuite™ (boîte à outil software de prédiction du comportement humain créée par Netway).

Pour rappel, le système visuel étant ce qu’il est, lors de la première visualisation d’un écran nous posons nos yeux sur certaines zones de l’écran. La première de ces zones est ce que l’on appelle la Netway Interface Sweet Spot Zone™, zone dans laquelle 90% des premières fixations oculaires se posent.

A partir de cette zone, le cerveau va analyser et interpréter les composants  de l’interface avec ce que l’on appelle la vision périphérique.

Increasing clic rate - peripheral vision dailyburn.com

dailyburn.com :

  • le bouton se distingue très fort et est facilement visible et identifiable.
  • le bouton est également assez prêt de la zone de vision fovéale (endroit où l’on voit net à 100%).
  • on ne sait pas lire le texte mais par contre on distingue clairement qu’il y a 3 mots dans le bouton.

Increasing clic rate - B&W peripheral vision dailyburn.com

Si nous analysons l’écran en nuances de gris (comme si on simulait uniquement la vision avec les batonnets des yeux), nous obtenons les mêmes conclusions.

Increasing clic rate - Peripheral vision goodbarry.com

goodbarry.com :

  • le bouton se dilue avec le bleu de la bande en bas de l’écran
  • le bouton n’est pas directement identifiable
  • il est impossible de distinguer le nombre de mots composants le bouton.

Increasing clic rate - B&W Peripheral Vision goodbarry.com

Si nous passons l’interface en nuances de gris, le problème s’accentue.

Le signal du bouton au niveau du cerveau sera donc beaucoup moins fort que pour le site dailyburn.com.

Une des variables de la bonne position d’un bouton sera donc sa capacité à être dissocier en vision périphérique des autres composants graphiques de l’écran.

Continuons notre analyse. Un autre facteur important est la capacité qu’à le bouton à être cliqué rapidement.

Increasing clic rate - Pointing Effort dailyburn.com

dailyburn.com :

  • peu importe où se trouve le pointeur de l’utilisateur, le bouton sera accessible avec un effort normal (rond jaune)
  • mieux, à partir des éléments visuels importants, le bouton est facilement accessible (ronds verts).

Increasing clic rate - Pointing Effort goodbarry.com

goodbarry.com :

  • si l’utilisateur a son pointeur situé sur la navigation principale supérieure, le bouton d’action sera accessible avec un effort important (rond orange)
  • à partir des composants principaux de l’écrans, le bouton est accessible avec un effort normal (rond jaune).

Une seconde variable de la bonne position d’un bouton sera donc sa capacité à être cliqué avec facilité à partir des zones de l’écran considérées comme importantes.

Pour continuer l’analyse je propose d’analyser la structure géométrique qui sous-tend le comportement visuel sur un écran.

Increasing clic rate - Geometry

Nous avons déjà vu que le Netway Interface Sweet Spot™ ainsi que la Netway Interface Comfort Zone™ sont deux éléments fondateurs d’un écran.

En fonction de la géométrie des deux sites évalués, si la première fixation oculaire se pose à 90% dans le Netway Interface Sweet Spot™, la seconde fixation va se poser dans l’une des deux zones illustrées.

Increasing clic rate - Geometry dailyburn.com

Nous voyons que dans le cas de dailyburn.com, le bouton est bien placé verticalement mais pourrait être déplacé vers la droite de quelques pixels pour avoir son centre aligné avec la seconde zone naturelle de fixation oculaire.

Increasing clic rate - Geometry goodbarry.com

Dans le cas de goodbarry.com, en plus d’être peu visible en vision périphérique, le bouton est placé trop bas et trop à droite.

Revenons à dailyburn.com. Comment pouvons-nous améliorer le positionnement du bouton?

Voici ce que cela donnerait. A vous d’évaluer le résultat 😉

Increasing clic rate - New Position dailyburn.com

Dans ce cas, le bouton est parfaitement placé pour jouer son rôle d’attracteur visuel dans le champ de vision périphérique.

Si le cerveau de l’utilisateur décide de passer à l’action, il aura pu identifier le bouton dans les quelques premières milisecondes après son arrivée sur le site.  Il sera donc aisé d’envoyer l’oeil sur le bouton.

L’effort de pointage étant facile, le cerveau placera le pointeur à proximité du bouton et lorsqu’il devra cliquer, l’acte sera aisé.

Tout cela de manière non consciente 😉

7 Comments

  • Je débute dans le domaine (ou devrais-je dire que je fais de l’ergo web comme Monsieur Jourdain faisait de la prose…) et je me sens assez déconcertée par ce type d’étude : à la fois réconfortante, la méthode est donnée, à la fois inquiétante, car à partir d’un tel système, n’est-il pas tentant de reproduire des sites aux structures interactives quasi-identiques ?

    Comment pondérer les recommandations d’emplacement par d’autres caractéristiques ?
    – attractivité du contenu (qui incite le regard à se poser de façon plus ou moins appuyée),
    – rôle de couleurs et des codes de représentation qui déterminent eux-aussi des aspects de la proximité,
    – qualité du contenu, guidage contextuel qui amène l’internaute à une bonne compréhension de la fonction du site et à devenir pro-actif dans la recherche d’action ?
    – etc…

    J’en profite pour vous remercier pour vos articles, de qualité. Bonne continuation.

  • Bonjour et merci pour cet article,

    Je trouve que la position choisie sur dailyburn.com est préférable à votre proposition.

    1- Car graphiquement c’est beaucoup plus équilibré : les alignements sont respectés, l’impression de vide dans votre proposition est dès lors très présente, et le vide génère l’angoisse.

    2- La flèche du bouton est bien positionnée, à la limite de la zone de fixation, l’oeil fuyant ensuite vers la droite. Cela incite à la rapidité du clic.

    3- Et si l’internaute ne peut fixer son oeil et qu’il ne décide pas de cliquer sur le bouton, il est ensuite attiré vers 1/5 et les flèches. Il aura donc tendance à cliquer s’il n’a pas été convaincu dès le premier écran, ce qui multiplie les chances de réussite.

    Excellente journée

  • Bonsoir,
    je n’ai aucune compétence en la matière mais éprouve un intérêt pour cette discipline et suis convaincu d’y porter une attention toute particulière, étant intégrateur xhtml.
    Je suis régulièrement en “conflit” avec le graphiste, ne pouvant lui opposer qu’un avis subjectif, des impressions, sans pouvoir étayer mes propos avec des arguments comme les vôtres.

    Cependant je suis en accord avec les propos de Bruno, notamment sur le point n°1, car la première réflexion que je me suis faite est sur l’alignement du bouton en accord avec celui du texte qui le précéde : le texte est ferré à gauche, il m’a semblé logique de ferrer également le bouton à gauche.

    Merci et bonne soirée

  • Bonjour, et merci pour cet article, c’est fascinant !

    Il est incroyable de remarquer à quel point la psychologie (cognitive, sociale, etc) peut aider un business considérablement.

    Par contre, je m’interroge sur l’idée d’analyser les sites en nb : 2 couleurs qui pourraient apparaître comme très contrastées (et donc très visibles, j’imagine ?) se confondront en n/b… Quelle conclusion tirer, et est-ce que cette analyse en n/b est vraiment pertinente au point de vue de l’ergonomie ?

  • Très intéressant, merci beaucoup !
    Mais il aurait été intéressant de connaître justement le taux de clic de ces deux sites, de ces deux boutons.
    Le connaissez-vous ?
    Le bouton de Dailyburn est-il justement plus cliqué ?
    GoodBarry ayant été rachetée par Adobe, cette société avait peut-être des résultats plus probants ? je ne sais pas.
    Merci en tout cas, je vais m’en inspirer pour la V2 de mon site, et tenter d’augmenter le taux d’inscription 🙂

Submit a Comment