Tape à l’oeil, quelles améliorations avec cette nouvelle version ?

Cette semaine, en me baladant sur Twitter, je suis tombé sur une news qui a aiguisé ma curiosité, la refonte du site eCommerce de Tape à l’oeil. En 2012, j’avais écrit un article avec quelques hypothèses d’optimisations de leur fiche produit. 1 an plus tard, l’enseigne refond son site internet en partenariat avec l’agence SQLI.

Je suis donc retourné lire mon vieil article pour voir comment a évolué cette fiche produit, est-ce que d’autres points peuvent être améliorés ? Pour vous faciliter la comparaison à l’ancienne version, je résumerai rapidement ce qui avait été dit l’année passée en suivant la même structure.

Un call-to-action toujours timide

Ce qui avait été dit : Le bouton acheter se fait très, trop discret; impossible de le voir du premier coup d’oeil ! La couleur est identique à beaucoup d’autres éléments de la page, et surtout ne fait pas partie du bloc gris qui rassemble les informations nécessaires à l’achat. Ce bloc rassemble les informations de tailles, de couleurs, de prix, mais pas le bouton d’achat.

Peu de changements, ce nouveau bouton reste toujours aussi discret. Pire, il est entouré de nouveaux éléments qui peuvent perturber l’utilisateur dans sa prise de décision. Par exemple, la carte membre doit-elle être si visible ? Est-elle indispensable pour acheter le produit ?  Même chose pour les réseaux sociaux, incitent-ils à acheter ? Je ne pense pas.  Pour finir les informations de contact au-dessus du prix restent très obscur ! Qui va-t-on avoir au bout du fil ? quel service ? pour quelle raison ? (On y reviendra).

Un bouton qui manque de contraste par rapport au reste de la page

La visibilité du bouton d’ajout au panier n’est donc pas meilleure, voici la fiche produit floutée. Quels éléments sont les plus visibles d’après vous ? Vous pouvez faire cet exercice sur vos pages, avec un flou de 5px sous Photoshop par exemple.

verification-contraste-bouton-action-fiche-produit

Le tiercé gagnant de mon point de vue  :

  1. Le chat, en bas à droite.
  2. Les réseaux sociaux
  3. La carte membre

Je ne suis pas convaincu que ce trio soit la combinaison la plus performante pour inciter l’utilisateur à l’achat. Il est très facile de corriger cette perception et d’augmenter le taux de mise au panier avec un peu de couleurs, ainsi qu’une réorganisation de la hiérarchie des éléments.

Un guide d’entretien pour simplifier la vie

Ce qui a été dit : Un excellent point pour TAO est d’indiquer les informations relatives à l’entretien d’un vêtement. Ça peux être un argument de choix entre 2 vêtements pour un utilisateur. Le problème est qu’il n’y a aucune information disponible sur ces symboles, et il faut trouver un guide beaucoup plus bas sur la fiche produit pour en savoir davantage.

Cette idée d’aide à l’utilisateur est toujours aussi bonne, malheureusement aucune évolution n’est visible, les symboles sont identiques et aucune information est disponible. Certains utilisateurs allergiques à la machine à laver (non, non, on ne pense pas aux jeunes papas !), peuvent être perturbés par ces pictogrammes et des questions peuvent venir à l’esprit : Est-ce que ce pantalon sera facile à laver ? Est-ce qu’on peut le mettre dans le lave-linge ?

conseil-fiche-produit-tape-a-loeil-optimisation-conversion

L’ancienne version proposait un guide d’entretien via une popup (ci-dessous). Encore une fois l’idée est sympathique, dommage de ne pas aller jusqu’au bout :

entretien-TAO-fiche-produit-optimisation-ergonomie

Zoom sur l’image produit

Ce qui a été dit : Impossible d’accéder au zoom en cliquant sur l’image produit, et pourtant le pointeur de la souris semble indiquer une action possible. Cette façon d’accéder au zoom est aujourd’hui un standard du web, mais ici il faut cliquer sur le bouton « zoom » à gauche pour accéder à une image plus détaillée. Une fois le zoom ouvert, c’est la déception! Impossible d’avoir une image détaillée et en zoomant on aperçoit une image pixelisée qui ne met pas en valeur le produit.

La nouvelle version propose un zoom au survol, on distingue la zone visualisée via un carré blanc et le zoom s’ouvre dans un bloc à droite, c’est un bon point ! L’image garde néanmoins une résolution peu élevée, toujours loin derrière les concurrents.

Zoom-produit-fiche-produit-TAO

La réassurance, où est-elle ?

Ce qui a été dit : La réassurance et les arguments commerciaux sont situés sous la ligne de flottaison même pour une résolution de 1680*1050. Même si la marque est bien connue, l’information sur les conditions de retours et de livraisons pourrait être un bon levier pour la mise au panier. C’est d’ailleurs étrange que la réception en magasin ne soit pas mise en avant sur la fiche produit, alors qu’elle est gratuite à partir de 30€. La livraison est le premier argument d’abandon de panier, alors pourquoi se priver de cet argument commercial qui peut conclure une vente, ou améliorer le panier moyen.

Ici les arguments ont été remontés au-dessus de la ligne de flottaison dans un bloc au-dessus du menu, ce qui est un bon point. J’ai eu du mal à les retrouver sur la fiche produit, cette position étant peu conventionnelle dans le eCommerce. Attention toutefois, la réassurance est présentée dans une animation qui alterne une ligne de réassurance et une ligne de fans Facebook / nombre de magasins. Alors oui cet effet attire l’oeil, mais j’ai remarqué lors de session de tests utilisateurs, que les utilisateurs ignorent complétement les éléments animés souvent assimilés aux publicités.

reassurance-ecommerce-optimiser-ajout-au-panier

La zone de contact est comment dire…synthétique ? Contact- téléphone-mail, point ! Pourquoi devrait-on contacter ces personnes ? doit-on attendre une réponse ? Sous combien de temps ? Est-ce gratuit ? Quelles sont les horaires ? Bref, beaucoup de questions du côté utilisateur, et surement peu d’appels. Le taux de contraste du numéro de téléphone, élément pourtant important, est beaucoup trop faible :

taux-de-contraste-element-fiche-produit-tape-a-loeil-refonte-sqli

La version précédente était sous la ligne de flottaison, mais à un emplacement plus conventionnel et surtout plus détaillée :

reassurance-TAO-ergonomie-UX-design-fauveaux

Et ça fonctionne sous smartphone ?

Le site web construit en responsive  est rapide, c’est un bon point. L’adaptation de la taille des éléments, ou du taux de contraste en utilisation mobile n’est cependant pas bonne. Par exemple, les libellés du menu en haut à droite ou le lien « choix des tailles » par exemple, ont une taille bien trop petite. Le taux de contraste est lui aussi trop faible, dans le cas où le soleil vient gêner la lecture.

Autre chose, le nombre de tailles affichées vient surcharger l’interface, pourquoi ne pas faire une liste déroulante ? De plus l’écart entre les boutons, ou la taille des boutons est bien trop faible :

Screenshot_2013-09-07-21-05-40

Les zones de cliques ne sont pas très large, et l’utilisateur pourrait avoir plus de confort, notamment sur les listes déroulantes « avis », « conseils » etc… Ou par exemple, essayez de cliquer sur le logo Twitter sans sélectionner un autre service :

Screenshot_2013-09-07-21-06-02

Conclusion

Cette nouvelle monture bénéficie d’un coup de pinceau plus moderne, et une adaptation aux appareils mobiles, ce qui est un bon point. Malgré tout, elle profite de peu d’évolutions profondes et il reste beaucoup d’hypothèses de tests A/B pour optimiser la conversion de cette fiche : hiérarchie de l’information, message de réassurance, offre marketing, facilité d’utilisation, conseils, couleurs etc…

2 réflexions au sujet de « Tape à l’oeil, quelles améliorations avec cette nouvelle version ? »

Laisser un commentaire

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