[Bonnes pratiques UX en eCommerce] 11 principes scientifiques pour amĂ©liorer l’expĂ©rience utilisateur de votre boutique en ligne


SOMMAIRE


Votre eCommerce se porte bien, vous n’avez pas Ă  vous plaindre… mais votre taux de conversion stagne.

Quels que soient vos efforts pour améliorer votre stratégie de vente, il existe toujours un pourcentage élevé de visiteurs qui viennent sur votre site Web et le quittent immédiatement, sans acheter.

Et vous avez lu que la clĂ© pourrait se trouver dans l’expĂ©rience utilisateur. C’est-Ă -dire faire en sorte que les personnes qui visitent votre boutique se sentent en confiance en y naviguant.

Vous ĂȘtes sur la bonne voie, car l’expĂ©rience utilisateur est un facteur clĂ© pour la conversion.

Si celle de votre boutique est bonne, cela se traduit par :

  • Meilleur positionnement SEO : l’utilisateur passe plus de temps Ă  naviguer et Ă  interagir sur votre page. Pour Google, cela signifie que le contenu de la page rĂ©pond aux besoins de l’utilisateur et la positionne mieux.
  • Conversion plus Ă©levĂ©e : un utilisateur qui navigue aisĂ©ment dans votre boutique est beaucoup plus susceptible de finir par acheter.

Ce sont deux raisons majeures pour vous concentrer sur l’amĂ©lioration de l’expĂ©rience utilisateur de votre eCommerce. La question suivante est « comment le faire Â».

C’est ce que nous allons voir ici.

Dans cet article, nous allons vous prĂ©senter plusieurs bonnes pratiques dont il a Ă©tĂ© prouvĂ© qu’elles amĂ©liorent l’expĂ©rience de l’utilisateur en ligne, toutes basĂ©es sur des Ă©tudes et des principes scientifiques prouvĂ©s.

Enfilez votre blouse de laboratoire, c’est parti. 😉

Note : certaines de ces pratiques sont assez avancĂ©es, donc si vous ne savez toujours pas ce qu’est l’expĂ©rience utilisateur ou si vous n’avez jamais travaillĂ© sur votre site web, nous vous recommandons de lire d’abord cet autre article oĂč nous vous expliquons les bases. AprĂšs l’avoir lu, vous serez prĂȘt Ă  revenir Ă  cet article et Ă  approfondir davantage.

👉 11 bonnes pratiques en matiĂšre d’expĂ©rience utilisateur (UX) en eCommerce qui augmenteront vos ventes.

Pour simplifier l’explication, nous les avons divisĂ©es en 3 groupes en fonction de la partie de votre site Web qu’elles affectent :

  • Design.
  • NavigabilitĂ© et utilisabilitĂ©.
  • Processus d’achat.

Cela dit, voyons comment optimiser cette expérience utilisateur pour faire passer votre boutique au niveau supérieur.

✅ Les meilleures pratiques de design

Imaginez entrer dans un magasin et voir que les étagÚres sont en désordre et que le décor est affreux.

Il est probable que vous fassiez demi-tour et que vous partiez, non ?

Il en va de mĂȘme pour design de votre boutique en ligne. Si vous le nĂ©gligez, les utilisateurs auront une premiĂšre impression tellement nĂ©gative qu’ils risquent de partir et de ne jamais revenir.

Pour que le design contribue à une meilleure expérience utilisateur, voici quelques principes que vous devriez appliquer.

âžĄïž 1. Le plus simple sera le mieux (le principe KISS)

L’origine de ce principe est attribuĂ©e Ă  un ingĂ©nieur en chef de la marine des États-Unis.

KISS est l’abrĂ©viation de « Keep It Simple, Stupid Â» : (littĂ©ralement : « garde ça simple, idiot Â»).

Et, bien que cela puisse paraĂźtre un peu brutal, le message de fond qu’il transmet est le suivant : oubliez les conceptions sophistiquĂ©es et restez simple.

Car il a été prouvé que, dans la plupart des cas, un design simple est beaucoup plus efficace.

Comment pouvez-vous mettre ce principe en pratique dans votre eCommerce ?

  • « Ă‰conomisez Â» les couleurs : utilisez 2 ou 3 tons simples qui se marient bien entre eux, plutĂŽt que d’encombrer votre page de couleurs.
  • Rendu clair et intuitif : dĂšs que l’utilisateur entre sur le site, il doit pouvoir identifier les Ă©lĂ©ments les plus importants (le menu, le moteur de recherche, les produits phares, etc.).
  • Attention aux CTA excessive : les CTA ou appels Ă  l’action sont des liens ou des boutons qui incitent l’utilisateur Ă  effectuer une action spĂ©cifique. Par exemple, mettre un produit dans le panier. Assurez-vous qu’il n’y ait pas trop d’appels Ă  l’action sur la page d’accueil et dans les onglets (plus de 3 appels Ă  l’action risquent de saturer l’utilisateur, qui ne cliquera sur aucun d’entre eux).

Mais le principe KISS peut Ă©galement ĂȘtre appliquĂ© au processus d’achat.

Par exemple, en simplifiant le checkout pour accĂ©lĂ©rer l’achat et rĂ©duire les paniers abandonnĂ©s (nous vous donnerons quelques conseils Ă  ce sujet plus loin dans cet article).

âžĄïž 2. La taille et la position du CTA sont importantes (Loi de Fitts).

Dans ce cas, c’est un psychologue, Paul Fitts, qui a Ă©noncĂ© cette loi. Selon ses dires, il se serait inspirĂ© de son expĂ©rience dans l’armĂ©e de l’air amĂ©ricaine pour la dĂ©velopper.

Il a démontré que plus un objet est éloigné et plus il est petit, plus il nous est difficile de le localiser.

Et bien que cela puisse vous paraĂźtre un peu abstrait pour le moment, cette loi peut ĂȘtre appliquĂ©e au domaine du design. Plus prĂ©cisĂ©ment, Ă  celui du design des CTA.

Comment ? En faisant des appels Ă  l’action qui :

  • Se dĂ©marquent des autres Ă©lĂ©ments : par exemple, si le CTA se prĂ©sente sous la forme d’un bouton, vous pouvez lui donner une couleur qui contraste avec l’arriĂšre-plan de la page.
  • Plus il est proche du above the fold, mieux c’est : le above the fold est le haut d’une page et la premiĂšre chose que l’utilisateur voit en arrivant dessus, sans faire dĂ©filer la page. Si l’on s’en tient Ă  la loi de Fitts, plus le CTA est proche de cette partie (plus haut possible dans la page), plus il est probable que l’utilisateur clique dessus.
  • Avec une apparence « cliquable Â» :c’est-Ă -dire qu’il doit ressembler Ă  un bouton ou, dans le cas d’un lien, ĂȘtre soulignĂ©. L’idĂ©e est que, dĂšs que l’utilisateur le voit, il dĂ©tecte qu’il s’agit d’un Ă©lĂ©ment sur lequel il peut cliquer.
  • AĂ©rez-le : le bouton sera beaucoup plus visible si vous laissez un espace vide autour.

À titre d’exemple, voici un bouton « Ajouter au panier Â» qui rĂ©pond Ă  toutes les exigences que nous venons d’expliquer.

ecommerce ux best practices

âžĄïž 3. Une jolie apparence gĂ©nĂšre plus de confiance (Loi de l’esthĂ©tique)

Imaginez que deux parts de gĂąteau sont placĂ©es devant vous :

  • La premiĂšre est mal assemblĂ©e, coupĂ©e n’importe comment et avec de la crĂšme Ă©parpillĂ©e un peu partout.
  • En revanche, la deuxiĂšme est joliment dĂ©corĂ©e, avec des morceaux de fruits sur le dessus et une prĂ©sentation digne d’un restaurant de luxe.

Selon vous, laquelle des deux sera la meilleure ?

Il est fort probable que vous pensiez Ă  la deuxiĂšme. En rĂ©alitĂ©, le goĂ»t n’a rien Ă  voir avec l’apparence (le gĂąteau le mieux dĂ©corĂ© pourrait contenir trop de sucre et ĂȘtre trop lourd, par exemple). Mais c’est ainsi que fonctionne notre cerveau.

Ce phĂ©nomĂšne est connu sous le nom de Loi de l’esthĂ©tique.

Selon cette loi, si quelque chose a une bonne apparence, nous lui associons inconsciemment des caractéristiques positives.

Cela, traduit dans le monde du eCommerce, signifie que si le design de votre boutique est attrayant, les utilisateurs vous feront davantage confiance, ils auront l’impression que vous allez leur offrir un meilleur service et que vos produits sont de meilleure qualitĂ©.

VoilĂ  pourquoi il est important que :

  • Votre site Web ait une apparence professionnelle (raison pour laquelle il est si important d’investir dans un bon modĂšle).
  • Vous utilisiez des couleurs commerciales harmonieuses.
  • Votre homepage contienne de grandes photos haute dĂ©finition de votre produit.
  • Etc.

Pour vous faire une idĂ©e, jetez un coup d’Ɠil Ă  la page d’accueil du site eCommerce Bliss, dont le design est trĂšs Ă©lĂ©gant et inspire confiance.

buenas practicas ux ecommerce

De maniÚre plus spécifique, on peut également appliquer cette loi aux fiches produits.

Pour ce faire :

  • Utilisez des photos et des vidĂ©os professionnelles : des images de bonne qualitĂ© qui permettent au client de se faire une idĂ©e de ce Ă  quoi ressemble votre produit et/ou de son fonctionnement.
  • Utilisez des images avec des modĂšles : il a Ă©tĂ© prouvĂ© que les photos montrant une personne portant l’article convertissent davantage que celles montrant simplement cet article sur un fond neutre.
  • Passez aux photos Ă  360Âș : certaines boutiques commencent Ă  mettre en place cette technologie pour montrer leurs produits sous tous les angles et susciter ainsi encore plus de confiance.

Voici un exemple provenant de la mĂȘme boutique de eCommerce ci-dessus.

Dans ce cas, ils ont Ă©galement dĂ©cidĂ© d’inclure des vidĂ©os de leurs produits dans chaque fiche. Et, comme vous pouvez le voir, le rĂ©sultat est trĂšs attrayant.

Si vous voulez en savoir plus sur la façon dont les images et les vidĂ©os augmentent la conversion sur les fiches produits, vous pouvez consulter l’article que nous avons rĂ©digĂ© Ă  ce sujet.

Note : attention, ne confondez pas le KISS avec le principe d’esthĂ©tique. Dans le cas de KISS, il Ă©tait question de mettre en place un design simple, tandis que dans le principe de l’esthĂ©tique, nous cherchons Ă  rendre le design attrayant et facile Ă  utiliser.

âžĄïž 4. Le cerveau complĂšte les Ă©lĂ©ments manquants (Loi de la continuitĂ©)

La loi de la continuitĂ© est l’une des 13 lois de la Gestalt, qui nous explique (du point de vue de la psychologie) comment nous percevons les choses en fonction des stimulations que nous recevons.

Selon la loi de la continuitĂ©, si nous voyons un Ă©lĂ©ment coupĂ© ou Ă  moitiĂ© terminĂ©, notre cerveau a tendance Ă  complĂ©ter l’information manquante.

Maintenant, vous vous demandez peut-ĂȘtre « Quel est le rapport avec mon eCommerce ? Â».

Vous pouvez tirer parti de cette particularitĂ© de l’esprit en introduisant certains Ă©lĂ©ments « incomplets Â» pour donner l’impression Ă  l’utilisateur qu’ils ne le sont pas.

Appliquez-le, par exemple, dans les carrousels de produits ou de catĂ©gories. Vous pouvez laisser la derniĂšre image « Ă  moitiĂ© cachĂ©e Â» ou en dehors du cadre, comme le montre cet exemple d’Ikea.

ecommerce ux design

GrĂące Ă  une mĂ©thode aussi simple que celle-ci, vous incitez l’utilisateur Ă  cliquer pour voir toutes les catĂ©gories du carrousel.

✅ Bonnes pratiques de navigabilitĂ© et d’utilisabilitĂ©

Tout d’abord, soyons clairs sur les concepts de base :

  • La navigabilitĂ© d’un site Web est la facilitĂ© avec laquelle l’utilisateur navigue sur une page.
  • L’utilisabilitĂ© d’un site Web est la facilitĂ© avec laquelle un utilisateur peut interagir avec les Ă©lĂ©ments d’un site Web (si les CTA sont facilement cliquables, si les Ă©lĂ©ments du menu sont faciles Ă  faire apparaĂźtre, etc.).

Et ces deux Ă©lĂ©ments sont deux piliers fondamentaux de l’expĂ©rience utilisateur de votre eCommerce.

Voyons maintenant comment les améliorer.

âžĄïž 5. L’expĂ©rience de la recherche est essentielle

Ce n’est pas une loi en soi, mais nous le savons par expĂ©rience : le moteur de recherche interne d’un eCommerce est un Ă©lĂ©ment fondamental pour amĂ©liorer la conversion.

Mais attention ! Ne choisissez pas n’importe quel moteur de recherche.

Il vous en faudra un qui soit capable de guider l’utilisateur vers le produit qu’il recherche en toute circonstance. Cela peut paraĂźtre basique, mais ça ne l’est pas.

Pour commencer, votre moteur de recherche interne doit ĂȘtre capable de fournir des rĂ©sultats pertinents en prĂ©sence de :

  • Synonymes : peu importe si l’utilisateur tape « frigo Â» ou « rĂ©frigĂ©rateur Â». Un moteur de recherche avancĂ© affichera les mĂȘmes rĂ©sultats car il « comprend Â» que la personne cherche le mĂȘme produit dans les deux cas.
  • Erreurs : mĂȘme si la personne tape par erreur « grile-pain Â», le moteur de recherche doit afficher des rĂ©sultats pour « grille-pain Â» (ce que la plupart sont incapables de faire).
  • Recherches non liĂ©es Ă  des produits : car de plus en plus de personnes utilisent le moteur de recherche pour effectuer ce type de recherches non liĂ©es Ă  des produits. Par exemple, pour trouver les politiques de retour, les frais d’expĂ©dition, etc.

Par ailleurs, il est Ă©galement important que le moteur de recherche interne dispose d’autres fonctions supplĂ©mentaires, comme par exemple :

De cette façon, vous pouvez amĂ©liorer l’expĂ©rience de l’utilisateur et augmenter (considĂ©rablement) la conversion.

Pour vous faire une idĂ©e, les clients qui utilisent le moteur de recherche intelligent Doofinder ont vu leurs ventes augmenter de 10 Ă  20 % grĂące Ă  ces fonctionnalitĂ©s (parmi beaucoup d’autres).

>> Si vous voulez le vĂ©rifier par vous-mĂȘme, cliquez ici et essayez Doofinder gratuitement pendant 30 jours dans votre boutique en ligne.

âžĄïž 6. Une apparence familiĂšre suscite la confiance (Loi de Jakob)

Passons au principe d’utilisabilitĂ© suivant.

La loi de Jakob indique que les utilisateurs se sentent plus Ă  l’aise en naviguant sur un site Web dont la structure est similaire Ă  celle d’autres sites Web qu’ils connaissent dĂ©jĂ .

En conclusion : faites en sorte que les clients se sentent chez eux.

Comment appliquer cela ?

Notez les points communs existant dans la grande majoritĂ© des sites de eCommerce :

  • Le menu principal se trouve dans la partie supĂ©rieure.
  • Le bouton d’achat est placĂ© Ă  droite de la fiche du produit et les images Ă  gauche.
  • Le moteur de recherche est situĂ© en haut Ă  droite ou au centre du menu.

Par exemple, Amazon rĂ©unit tous ces points. Ainsi, mĂȘme si c’Ă©tait la premiĂšre fois que nous accĂ©dions Ă  son site Web, nous saurions instinctivement comment y naviguer.

ecommerce ux case study

âžĄïž 7. La science derriĂšre le chiffre 7 (Loi de Miller))

Todos sabemos que nuestra capacidad para procesar mucha informaciĂłn a la vez es limitada.

Nous savons tous que notre capacitĂ© Ă  assimiler un grand nombre d’informations Ă  la fois est limitĂ©e.

Mais saviez-vous qu’un psychologue amĂ©ricain a menĂ© une Ă©tude concrĂšte sur ce phĂ©nomĂšne ?

Eh oui.

George Miller a publiĂ© un essai oĂč il analyse les limites de la mĂ©moire Ă  court terme. Il semblerait que nous n’ayons la capacitĂ© de garder en mĂ©moire qu’entre 5 et 9 Ă©lĂ©ments Ă  la fois (d’oĂč l’arrondi Ă  7).

Par consĂ©quent, pour amĂ©liorer l’expĂ©rience utilisateur, nous devons en tenir compte et nous dire que plus nous ajoutons d’Ă©lĂ©ments Ă  une tĂąche, plus il sera complexe pour l’utilisateur de l’exĂ©cuter.

Vous pouvez mettre cela en pratique de la maniĂšre suivante :

  • Assurez-vous que les carrousels de produits ne comportent pas plus de 7 produits Ă  la fois.
  • Si vous fournissez un numĂ©ro de tĂ©lĂ©phone pour vous contacter, affichez-le par groupes de 2 ou par nombres.

Maintenant que vous savez cela, vous allez certainement commencer à voir des groupes de 7 articles partout. 😉

Mais attention, nous n’allons pas en rester lĂ …

âžĄïž 8. Le contenu personnalisĂ© donne Ă  l’utilisateur ce dont il a besoin

Vous entrez dans une boutique en ligne de matériel de cuisine et achetez un mixeur Moulinex.

Quelques jours plus tard, vous retournez dans la mĂȘme boutique et, parmi les produits phares affichĂ©s sur la homepage, vous voyez un accessoire spĂ©cifique pour le modĂšle de mixeur que vous avez achetĂ©.

Le hasard ?

Certainement pas : il est trĂšs probable que le site en question utilise une technologie d’intelligence artificielle pour offrir un contenu personnalisĂ© Ă  l’utilisateur.

C’est-Ă -dire que le systĂšme s’est basĂ© sur :

  • Les fiches produit que vous avez consultĂ©es.
  • Les recherches prĂ©cĂ©dentes.
  • L’historique de vos achats.

Pour vous montrer des produits qui répondent à vos besoins.

Et ce contenu personnalisé ne se limite pas aux produits phares.

Si vous disposez d’un moteur de recherche intelligent (comme Doofinder) vous pouvez mĂȘme proposer des suggestions de recherche personnalisĂ©es.

Cela signifie que le moteur de recherche interne montrera à chaque utilisateur des résultats de recherche différents en fonction de son comportement antérieur.

Par exemple, si l’utilisateur a regardĂ© des vĂȘtements pour femmes prĂ©cĂ©demment, lorsqu’il tape « pantalon Â» dans le moteur de recherche, celui-ci affichera des suggestions de pantalons pour femmes, et non de pantalons pour hommes.

âžĄïž 9. Les messages clairs et directs guident l’utilisateur (UX copywriting)

LE UX copywriting est une branche du copywriting dont l’objectif est de promouvoir la navigabilitĂ© Ă  travers le texte du site Web.

Ce type de rĂ©daction se base sur :

  • L’utilisation de messages concis.
  • Que l’on comprend du premier coup.
  • Et qui indiquent clairement comment poursuivre la navigation ou l’interaction.

L’objectif est que l’utilisateur ne reste jamais figĂ©, Ă  se demander : « Et maintenant… qu’est-ce que je fais ? Â».

Vous avez par exemple la page d’erreur 404 de la boutique Natura.

ux design ecommerce

Le texte informe l’utilisateur qu’il est face Ă  une page d’erreur, et lui indique en mĂȘme temps comment retourner Ă  la homepage. Tout cela agrĂ©mentĂ© d’une touche d’humour pour Ă©tablir un lien plus fort avec la personne et « dĂ©dramatiser Â» l’erreur.

✅ Bonnes pratiques dans le processus d’achat

Pour terminer, voici deux bonnes pratiques pour optimiser le processus d’achat et rĂ©duire les redoutables paniers abandonnĂ©s.

âžĄïž 10. Les tĂąches inachevĂ©es nous maintiennent en alerte (effet Zeigarnik).

Cet effet a Ă©tĂ© dĂ©couvert par le psychologue Bluma Zeigarnik, qui l’a Ă©tudiĂ© aprĂšs avoir observĂ© un curieux phĂ©nomĂšne dans un groupe de serveurs.

Ce qu’elle a vu, c’est que, alors que l’addition d’une table Ă©tait encore en attente, les serveurs se souvenaient de qui avait commandĂ© quel plat. Mais lorsque les clients ont payĂ© leur repas, ces mĂȘmes serveurs Ă©taient incapables de se souvenir du montant ou des plats commandĂ©s.

AprĂšs avoir observĂ© ce phĂ©nomĂšne, Zeigarnik a dĂ©couvert que notre cerveau se souvient mieux des tĂąches incomplĂštes, car elles nous maintiennent « en alerte Â», et Ă©carte les informations des tĂąches achevĂ©es.

Savez-vous comment tirer parti de ce phĂ©nomĂšne dans votre eCommerce ?

D’une part, vous pouvez l’utiliser avec des marqueurs de progression dans des processus Ă  plusieurs Ă©tapes, comme :

  • Le checkout.
  • Le processus d’inscription sur la plateforme. 

De cette façon, vous indiquez Ă  l’utilisateur Ă  chaque instant le temps qu’il lui reste pour terminer.

D’autre part, cela explique aussi l’impact des e-mails de panier abandonnĂ©.

Avec ce type d’e-mails, vous rappelez Ă  l’utilisateur ce processus incomplet et « activez Â» l’effet Zeigarnik dans son cerveau (il en va de mĂȘme avec les campagnes de retargeting, par exemple).

âžĄïž 11. Un checkout simple favorise la conversion (Loi de Hick-Hyman)

Et nous terminons avec la loi de Hick-Hyman.

Selon cette loi, plus vous donnez d’options Ă  une personne, plus il lui faut de temps pour prendre une dĂ©cision.

Vous vous souvenez que nous vous avons dit que plus de 3 CTA ensemble peuvent submerger l’utilisateur ? Voici le « coupable Â». 😉

Et cela peut Ă©galement s’appliquer au processus du checkout: plus vous donnez d’alternatives Ă  l’utilisateur, plus il est susceptible d’abandonner l’achat.

Mais bien sĂ»r, nous disons toujours qu’il est essentiel de proposer diffĂ©rentes options de paiement, mĂ©thodes de livraison, etc.

Comment concilier ces deux idĂ©es et donner Ă  l’utilisateur suffisamment de choix sans le submerger ?

Une bonne idée est de définir une option par défaut.

Par exemple, le paiement par carte et l’expĂ©dition standard sont cochĂ©s. Et si le client souhaite choisir une autre option, elle sera disponible pour qu’il la coche.

👉 Utilisez ces lois comme vos nouveaux commandements pour amĂ©liorer l’expĂ©rience utilisateur

Avec ce que nous avons expliquĂ©, vous avez dĂ©sormais suffisamment de matiĂšre pour optimiser l’expĂ©rience utilisateur dans votre eCommerce.

Mais attention : ce n’est pas parce qu’il s’agit de « lois Â» que ce sont des principes infaillibles.

Et comme vous le savez, dans le monde en ligne, rien n’est gravĂ© dans la pierre. L’important est que vous appliquez ces idĂ©es et que vous fassiez le suivi de vos statistiques pour voir celles qui vous conviennent le mieux.

Alors, courage et mettez ces principes en pratique. 😉

EBOOKS