Page produit : agrandissez vos visuels, mais méfiez-vous de la ligne de flottaison

Parmi les tests A/B que je conduis avec Wexperience, nombreux sont ceux qui portent sur les visuels de la fiche produit avec une forte tendance à agrandir le visuel produit principal.

Pourquoi agrandir le visuel produit principal ?

Les études en eye-tracking ont déjà montré qu’il était plus facile de capter et de retenir l’attention en utilisant des grands visuels plutôt que des petits. Bien sûr, il n’est pas possible de les étirer, dans la plupart des cas, au delà de la taille maximale de l’écran, mais essayer d’utiliser un maximum d’espace pour ces visuels pourrait bien être bénéfique à votre taux d’ajout au panier, ainsi qu’à votre taux de transformation.

Attention aux effets de bords

Difficile de reprendre pour soi l’adage de notre ancien Président de la République (Chirac) en ergonomie : « Ça m’en touche une sans faire bouger l’autre. » Agrandir un élément de votre page entraînera nécessairement le déplacement d’autres éléments dans la page, à moins que vous ne disposiez auparavant de déjà suffisamment d’espace. Mais cela voudrait dire que vous n’auriez pas utilisé au maximum l’espace disponible.

Sur cet exemple, tiré d'une présentation que vous pouvez télécharger en cliquant sur l'image, les vignettes ont été remontées en haut à gauche du produit pour qu'elles ne disparaissent pas sous la ligne de flottaison.
Sur cet exemple, les vignettes ont été remontées en haut à gauche du produit pour qu’elles ne disparaissent pas sous la ligne de flottaison.

Si vous agrandissez votre visuel produit principal, méfiez-vous et faites bien attention aux éléments qui pourraient alors passer sous la ligne de flottaison (sur desktop ou tablette). Lors d’un test mené pour un de nos clients dans le domaine du textile, nous avions fait cette erreur pendant un test A/B. Dans la nouvelle version, les vignettes des différentes vues du produit disparaissaient sous la ligne de flottaison, et, en conséquence, ne recevaient plus de clic, ce qui donc dévalorisait le merchandising du produit. Et pire, nous avons pu constater par la même occasion une baisse du taux de transformation et du taux d’ajout au panier.

Une loi immuable : les internautes sont des fainéants

Cela je l’ai déjà assez répété. Mais ce test a amplement montré que tout ce qui trouvait sous la ligne de flottaison perdait énormément en attention, sans commune mesure avec la distance des objets sous cette ligne par rapport au bas de l’écran.

Lors de vos prochains tests sur une fiche produit, prenez donc garde à bien vérifier que cela n’arrive pas.

Bon weekend !

4 commentaires

  1. Merci Capitaine pour ce partage d’expérience.

    Cela signifie que les vignettes des visuels produits font partis du club très fermé des éléments qu’il faut obligatoirement positionné au-dessus de la ligne de flottaison (bouton d’action, informations sur le prix, la livraison…) ?

    C’est vraiment très intéressant de voir que le simple fait de ne pas offrir la possibilité à l’internaute de changer de visuel directement au-dessus de la ligne de flottaison impact le taux de conversion d’un site.

    Comme quoi, cela démontre une nouvelle fois que chaque millimètre d’un site se doit d’être testé afin de maximiser le taux de conversion.

    E-commerçants français, TESTEZ vos sites ! Trop peu le font !

  2. Bonjour!

    Merci pour cet article!
    Que recommandez-vous comme format optimal d’images?

    D’avance merci,
    Juliette

    1. Bonjour, c’est difficile à dire, car ça dépend vraiment de la taille d’écran, du terminal, etc. Il faut essayer de faire le plus grand possible en permettant à l’utilisateur de voir l’image entière dans son navigateur.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.

Capitaine

Article de : Capitaine

Olivier Sauvage est le fondateur de Capitaine-commerce.com et de Wexperience, agence spécialisée en expérience utilisateur digitale.