Les bonnes pratiques ergonomiques en ecommerce ne manquant pas et avant de passer par une agence ux/ui, il ya déjà beaucoup de choses à faire. Cela fait quelques années que tous les grands acteurs du ecommerce mènent des tests en continu pour améliorer l’expérience client, et par conséquent le taux de conversion. Quand on débute, difficile de mener des tests en continue, mais on peut tirer profit de l’expérience de tous les autres en appliquant tout simplement toutes les bonnes pratiques qui ont fait leur preuve. Nous nous sommes inspirés de cet excellent article afin de vous présenter plus de 50 bonnes pratiques UI / UX.
Sommaire
Bonnes pratiques UX Ecommerce – Zoom sur la page d’accueil
1. Best Buy – heures du magasin dans l’en-tête
Best Buy utilise une icône de magasin dans son en-tête et me dit où se trouve le magasin le plus proche, ainsi que ses heures d’ouverture pour la journée. C’est une bonne idée pour un magasin qui vend des produits électroniques par exemple, où le client peut vouloir voir l’objet exposé avant de faire un achat.
2. AO.com – curseur de catégorie
Sur la page d’accueil d’AO.com je n’ai pas besoin de faire défiler pour trouver un bloc de contenu qui correspond à ce que je recherche (les téléviseurs par exemple), je peux simplement utiliser le slider de catégorie présent au milieu de la page.
3. Booking.com – widget de recherche
Pour un agent de voyages en ligne, la partie la plus importante de la page d’accueil est le widget de recherche que les utilisateurs utiliseront pour définir leurs vacances et trouver les résultats souhaités. Cette fonction de recherche doit être visible à tout moment. Booking.com utilise un widget de recherche fixe, qui reste épinglé en haut de la page d’accueil pendant que vous faites défiler, ce qui signifie que les utilisateurs peuvent regarder le contenu et rechercher ce qu’ils veulent à tout moment.
4. AO.com – bouton de suivi de commande dans l’en-tête
Une excellente expérience client c’est ce qu’offre AO.com. Cela va bien au-delà de la vente, avec un excellent service de livraison, la garantie des produits etc. Cela devient évident avec un bouton de suivi de commande qui a autant d’importance que le panier et le menu. La visibilité de ce bouton réduira les volumes d’appels et fidélisera le client.
5. Rentalcars – invitation à se connecter
Rentalcars fait parti du même groupe que Booking.com. Vous ne serez donc pas surpris d’apprendre que c’est un maître dans l’art de la persuasion sur une page ecommerce. La connexion est importante pour garantir que Rentalcars connaisse les adresses e-mail des clients et puissent les ajouter à leur processus marketing. Un message « ravi de vous voir » accompagné d’un appel à l’action pour se connecter. La promesse d’offres exclusives devrait également m’inciter à me connecter.
6. Rentalcars – incitation à la réservation et à la connexion
Une fois que je clique sur le bouton de connexion de Rentalcars, je reçois un autre incitatif au-dessus des champs du formulaire à compléter: « En novembre, 5 heureux gagnants remporteront une location de voiture gratuite. » Tout ce que j’ai à faire pour avoir une chance de gagner est de me connecter et de réserver …
7. Argos – bannière de proposition de valeur
Argos a sans doute la meilleure bannière dans le monde du commerce de détail quand il s’agit d’expliquer les options de livraison, de pick-up, de crédit … (une grande partie de la proposition d’Argos). Je peux voir le prix de livraison le jour même, le prix de la collection en magasin et le calendrier… Malgré la taille plus petite de l’écran, ces messages s’affichent également sur le mobile, disparaissant doucement. Cette bannière est vitale pour les clients qui ne savent peut-être pas qu’Argos offre un service aussi rapide et flexible.
8. Lush – menu d’en-tête immersif
Un menu d’en-tête peut être une chose déroutante. Pour permettre aux utilisateurs de se concentrer sur les options disponibles dans le menu, les détaillants tels que Lush utilisent un menu qui prend à peu près tout l’écran. J’aime cette conception de noir et blanc ainsi que la liste verticale des catégories.
9. Argos – Catégories promotionnelles accrocheuses
J’aime la façon dont Argos attire l’attention sur ses produits saisonniers et populaires avec ces nuances de couleur qui se trouvent au-dessus du menu. Cela est relativement discret. C’est un excellent moyen d’amener les utilisateurs sur l’ensemble du site, sans compter sur leur atterrissage sur la page d’accueil ou en cliquant sur un bloc de contenu plus bas sur la page.
10. Rentalcars – chargement informatif
L’attente sur un site Internet est quelque chose d’horrible. Rentalcars utilise une barre de chargement intelligente multi-logo, qui diminue la frustration de l’utilisateur, car ils peuvent regarder où en est le chargement en s’approvisionnant toutes les citations dont ils ont besoin.
11. AO.com – vignettes de produits populaires dans la recherche
Ce n’est rien de particulièrement nouveau pour le commerce électronique, l’utilisation de la recherche suggérée qui se met à jour au fur et à mesure que l’on écrit. Cependant, l’inclusion de produits populaires, les «meilleurs achats» qui ont un prix clair et aussi mettre à jour au fur et à mesure que mon terme de recherche change est une bonne idée.
12. RS Components – suggestions de recherche catégorisées
Pour les amateurs de recherche de produits, RS Components va vraiment vous exciter. Lorsque le fournisseur B2B a un énorme catalogue de produits cela crée des difficultés évidentes dans la recherche. Voici comment RS Components aide le client. Il sépare mes résultats de recherche (ici «LED») en catégories de produits, marques et même numéros de pièces (certains clients connaîtront le numéro d’une pièce qu’ils désirent). Il y a aussi les produits populaires, exactement comme dans l’exemple ci-dessous.
13. Airbnb – recherche en page d’accueil
Voici la page d’accueil d’Airbnb, qui comme Google est simplement une barre de recherche. Oui, il y a du contenu, et quelques petits liens en haut à droite, mais cette page d’accueil donne le ton à l’expérience et à la marque d’Airbnb. Il s’agit de rêver d’où vous voulez aller. D’accord, cela n’est peut-être pas transférable au commerce électronique dans son ensemble, mais c’est toujours appréciable.
Bonnes pratiques UX Ecommerce – Zoom sur la page des annonces produits
14. Argos – livraison le jour même en navigation à facettes
Achat tardif d’un cadeau d’anniversaire ? Argos et sa navigation à facettes vous permettent de filtrer uniquement les produits disponibles pour une livraison le jour même ou une collecte en magasin le plus rapide.
15. Rentalcars – filtre collant
Un bon moyen sur mobile pour permettre à l’utilisateur (et à son pouce) d’atteindre rapidement le bouton des filtres – Rentalcars utilise un bouton collant en bas à gauche, toujours présent lorsque je fais défiler.
16. Best Buy – « notifiez-moi »
Les listes de produits de Best Buy contiennent parfois des produits actuellement en rupture de stock, comme cette Apple Watch. Plutôt que de décevoir le client, le détaillant change son bouton «ajouter au panier» par un appel à l’action «notifiez-moi». Les clients peuvent ensuite saisir leur adresse e-mail et attendre que Best Buy leur indique quand ils sont disponibles.
17. Booking.com – Astuce de navigation à facettes
Lorsque j’ai vu cet info-bulle sur Booking.com, je me suis demandé pourquoi je n’avais pas vu d’exemples similaires auparavant. Les nouveaux utilisateurs peuvent avoir besoin d’une fonction supplémentaire pour affiner les centaines de résultats de recherche. L’info-bulle dit: «Donnez-nous vos must-have. Les filtres aident les clients à trouver l’endroit idéal pour séjourner. Cliquez sur les filtres qui sont les plus importants pour vous et nous vous montrerons ce que nous avons. »
19. Booking.com – preuve sociale en temps réel
Sur mobile, la page d’annonces de produits m’a indiqué le pourcentage de chambres réservées aux dates sélectionnées ainsi que le nombre de personnes qui consultaient cette recherche. Le petit graphique à camembert rouge des chambres réservées est tout à fait prompt pour faire monter le nombre de réservation.
20. Argos – ajouter au panier depuis la page des fiches produits
J’aime la façon dont les pages de listes de produits Argos vous permettent d’ajouter chaque produit à votre panier en appuyant une fois sur le bouton, sans avoir à cliquer sur la page des détails du produit. Ce ne sont pas tous les détaillants qui le font mais cela est très pratique.
21. Lush – Autocollants ‘Leaving soon’
Lush ajoute des autocollants noirs et blancs caractéristiques en disant «Leaving soon» pour des produits saisonniers tels que les savons d’Halloween. Ces messages peuvent aider à ajouter un sentiment d’urgence à l’acheteur qui peut être friand d’un produit saisonnier particulier.
Bonnes pratiques UX Ecommerce – Zoom sur la page des détails produit
22. ASOS – guide des tailles interactif
Trop de sites proposent des guides de tailles volumineux et potentiellement difficiles à utiliser. Pas ASOS, qui me donne cette fenêtre où je peux remplir ma taille et mon poids et comment j’aime mes vêtements (serré ou non par exemple). L’outil trouvera ensuite les tailles correctes pour moi – sans passer au crible les données.
23. Debenhams – Message «Livraison avant Noël»
À l’approche de la ruée vers Noël, les pages des produits Debenhams ont un message vert bien en vue qui me dit qu’un article est disponible pour la livraison avant Noël. Idéal pour encourager l’achat d’un produit.
24. ASOS – ‘Achetez le look’
Voici une autre caractéristique dont on a longtemps parlé dans le commerce électronique, mais rarement réalisée avec la simplicité et le succès d’ASOS. C’est une fonctionnalité très utile qui permet à l’acheteur potentiel de visualiser la photographie des produits en chair et en os. C’est une valeur ajoutée non négligeable.
25. Booking.com – carousel des avis des utilisateurs
Les avis sont extrêmement importants pour les personnes réservant une chambre d’hôtel. Alors pourquoi ne pas les rendre immanquables ? Booking.com inclut un carrousel d’avis insérés dans le carrousel de photographie de produit. De cette façon, lorsque vous examinez les photos, vous ne pouvez pas vous empêcher de remarquer des commentaires élogieux sur le service, l’emplacement et les installations.
26. Rentalcars – compte à rebours du voyage
Quelle meilleure façon d’instiller l’urgence chez le client à la recherche d’une voiture de location que d’afficher un compte à rebours jusqu’au début de leur voyage.
27. Rentalcars – ‘Enregistrer pour plus tard’
Rentalcars permet aux utilisateurs de s’envoyer un e-mail avec tous les détails utiles des produits sélectionnés. Très utile pour ceux qui ne sont pas encore prêts à réserver mais qui ne veulent pas passer un temps fou à retrouver les produits qu’ils voulaient.
28. RS Components – décompte des produits en stock
Les acheteurs professionnels peuvent avoir besoin d’un certain nombre de produits particuliers, de sorte que la société «catalogue» fournit le nombre précis de produits en stock afin que les clients sachent si leur commande peut être satisfaite.
29. Argos – vérifier le stock en magasin
Aucun détaillant multi-canal qui se respecte ne manquera pas l’occasion de laisser les clients vérifier les stock disponibles s’ils veulent acheter en magasin ou réserver un article en ligne.
30. Barnes & Noble – envoyer comme cadeau
SmartGift est un service qui permet à l’utilisateur d’envoyer un lien cadeau sur lequel le destinataire peut accepter ou échanger en ligne pour tout article identique ou moins cher. Le Gifter paiera seulement une fois que le destinataire a accepté.
31. Schuh – Photographie de produits à 360 degrés
Je peux choisir un ensemble d’images des produits sur Schuh, mais la vue par défaut est cette image à 360 degrés qui me permet de voir la chaussure dans n’importe quel angle.
Bonnes pratiques UX Ecommerce – Zoom sur le Sac / panier / chariot
32. ASOS – fenêtre contextuelle du temps restant à votre panier
Assurez-vous que les utilisateurs savent combien de temps l’article choisi sera conservé dans le panier. ASOS le fait avec un petit pop-up en me disant que je l’ai mis dans un sac et qu’il sera conservé pendant une heure.
33. Barnes & Noble – «ajouter X $ d’articles pour être admissible à la livraison gratuite»
Le chariot Barnes & Noble me dit combien je dois dépenser pour que ma commande soit expédiée gratuitement. Une belle incitation à acheter encore plus de livres.
34. Debenhams & Toys R Us – ‘Votre panier est éligible à la livraison standard GRATUITE’
Ne laissez pas un client se méfier des frais de livraison, faites-leur savoir dans le panier, avant qu’ils ne finissent à la caisse, qu’ils sont admissibles à la livraison gratuite. Debenhams le fait avec un gros message bleu comprenant le mot «GRATUIT». Difficile à manquer.
Toys R Us fait encore mieux. Le détaillant utilise sa mascotte Geoffrey pour livrer le message de livraison gratuite. Une utilisation brillante de la marque pour attirer l’attention sur un message clé.
35. ASOS – option pour la livraison le lendemain
Pourquoi Amazon devrait-il être le seul site qui accroche les clients avec une garantie de la livraison le lendemain ? ASOS offre le service pour £ 9.95. C’est un excellent moyen de satisfaire vos clients les plus fidèles.
36. AO.com – service up-sell dans le panier
J’aime beaucoup la façon dont AO.com regroupe de nombreux services avec la livraison d’un produit. Lors de l’achat d’une télévision par exemple, on m’offre l’installation d’un stand, le retrait de mon ancien téléviseur etc. Plein de services connexes qui peuvent m’être très utiles.
37. AO.com – complimenter le goût du client
Le panier AO.com comprend également ce message très simple me disant que j’ai «beaucoup de goût» et que je «reçois une ou [leur] meilleure offre». Une belle touche personnalisée. Aucune raison de ne pas commander.
38. Lush – message d’ajout au panier sur une page complète
Les espaces et les images sur le site Web de Lush font de la navigation un réel plaisir. Même cette simple notification d’ajout au panier en pleine page m’a fait me sentir spéciale.
39. AO.com – options de financement et prix initial dans le panier
Si les clients ont des doutes lorsqu’ils ajoutent un article important à leur panier, AO.com fournit un prix mensuel dans le message d’ajout au panier. Les options de financement sont affichées sur les pages d’annonces des produits et sur les pages de détails du produit, mais cela ne fait pas de mal de réitérer l’option dans ce message d’ajout au panier.
40. Taille – Sélectionnez la taille lors de l’ajout au panier
J’aime vraiment le site UX on Size sur mobile quand j’oublie de sélectionner une taille avant d’ajouter un produit dans mon sac. Cette sélection de taille très visible et qui peut clignoter, permet de sélectionner très rapidement la taille désirée.
Bonnes pratiques UX Ecommerce – Zoom sur le passage à la caisse ou check-out
41. La Trainline – jolie miniature personnalisée
Le parlement situé dans une petite vignette au moment de payer pour mon voyage à Londres sur The Trainline. Je suis déjà excité par mon voyage.
42. AO.com – plus d’anxiété avec les infos complètes de livraison
« Vous n’avez pas à rester toute la journée ici parce que … » – AO.com met en avant son excellent service de livraison. Les informations ci-dessous indiquent quand je recevrai un message texte, en combien de temps je recevrais mon colis … Je peux également suivre ma commande en temps réel.
43. AO.com – numéro de contact dans l’en-tête de la commande
Quelque chose de commun présent dans les meilleures « check-out », le numéro de téléphone de contact apparaît au centre dans le menu d’en-tête. Tous les clients hésitants peuvent appeler pour clarifier un problème plutôt que d’abandonner le panier.
44. Barnes & Noble – champs pré-enregistrés dans les formulaires
Une autre bonne pratique qui n’est pas toujours mis en œuvre. Quand je clique dans un champ du formulaire, son titre reste, se déplaçant légèrement pour me laisser taper. De cette façon, je suis moins susceptible de faire une erreur.
45. AO.com – assurance de la vie privée
Le GDPR (General Data Protection Regulation) a placé les questions de confidentialité à l’ordre du jour de nombreuses entreprises. Ce n’est qu’une petite caractéristique, mais il est de plus en plus fréquent de voir une promesse, dans un champ de numéro de téléphone par exemple, qu’une entreprise ne partagera jamais l’information du client.
46. Lush – barre de progression lors du passage en caisse
L’un des principes fondamentaux d’une caisse efficace est une barre de progression claire. Il est difficilement possible de faire plus claire que celle de Lush.
47. AO.com – conception de forme concentrée et volumineuse
Tout au long de la commande sur AO.com, les champs de formulaire sont volumineux et faciles à sélectionner, avec des boutons pertinents et très visibles. Comparez les champs avec Lush ci-dessus (qui n’est pas mauvais non plus).
48. Lush – validation du champ email
Une autre bonne pratique peu utilisée. Est-ce que vous validez les adresses e-mail avec une belle coche verte pour que les clients sachent qu’ils ont mis des points et des @s aux bons endroits ? Cela rassure fortement.
49. Debenhams – date et heure précise pour la collecte de la commande
Une des incertitudes pour les clients lorsqu’ils utilisent click and collect est de savoir si leur article arrivera à temps. Certains détaillants disent ‘1-3 jours ouvrables’, laissant l’utilisateur attendre une notification et espérant que ce sera un jour plutôt que trois. Debenhams contrecarre ce malaise en donnant très clairement au client la date et l’heure à laquelle son colis devrait être prêt pour la collecte.
50. Nike – conseils d’utilisation
Enfin, pour la dernière astuce, nous allons parler de Nike. Ils n’ajoutent pas d’informations utiles surprenantes, mais suffisamment pour aider les utilisateurs nouveaux ou incertains à être totalement en confiance.
Si le sujet du ecommerce vous intéresse, je vous invite fortement à parcourir ces articles :
Recevez nos actualités chaque semaine
En vous inscrivant vous acceptez notre
politique de protection de données
personnelles.
Aucun commentaire