50+ exemples de bonnes pratiques UX en ecommerce

16 min de lecture
Rédigé par Franck Mairot le 14 décembre 2017
Sommaire

Partager sur :

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.

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.

store_header_best_buy

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.

mobile_home_ao.com_categories

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.

booking_homepage_search

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.

track_order_ao.com

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.

rentalcars_login

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 …

rentalcars_signin2

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.

argos_delivery_info

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.

lush

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.

xmas_whats_hot

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.

loading_rentalcars

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.

best_buys_in_search

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.

varied_search_RS

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.

airbnb_search

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.

facets_argos

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.

rentalcars_filter

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.

notify_me_best_buy

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. »

must_haves_faceted_nav_bookingcom

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.

bookingcom_reserved_percentage

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.

trolley_argos

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.

lush_leaving_soon

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.

size_guide_lightbox_asos

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.

xmas_deb

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.

asos_outfit

buy_the_look_asos

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.

reviews_inset_bookingcom

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.

trip_starts_rentalcars

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.

rentalcars_save_for_later

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.

number_in_stock_rs

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.

check_stock

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é.

smart_gift_bn

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.

drag_to_spin_schuh

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.

asos_its_in_the_bag

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.

free_shipping_eligibility_bn

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.

bag_deb

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é.

jeffrey_toys

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.

asos_premier_delivery

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.

service_options

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.

customer_compliment

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.

lush_add_to_basket

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.

finance

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.

size_select

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.

trainline_london_pic

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.

dont_stay_in

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.

phone_number_in_checkout

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.

shipping_b_and_n

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.

privacy_telephone

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.

checkout_progress_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).

chunky_checkout

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.

email_validation

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.

click_n_coll_deb

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.

tool_tips_nike

Pour aller plus loin
Si le sujet du ecommerce vous intéresse, je vous invite fortement à parcourir ces articles :

 

Recevez nos actualités chaque semaine

Entrez votre adresse email et recevez chaque semaine les actualitésde La Fabrique du Net, rédigées par nos experts.

En vous inscrivant vous acceptez notre
politique de protection de données personnelles.

Nos autre articles en liens avec Prototypage

Prototypage
8 min
Comprendre la différence entre UX et UI
Par Franck Mairot, avril 2 2019
Prototypage
6 min
Page Paiement – Les bonnes pratiques UX / UI
Par Franck Mairot, septembre 25 2018

Aucun commentaire

Historique

Nos experts mettent à jour nos articles lorsque de nouvelles informations sont disponibles.
  1. 22 janvier 2025
    Modifié par
    Franck Mairot
  2. 14 décembre 2017
    Créé par
    Franck Mairot
Voir plus