eCommerce UX - Stratégies et principes de conception essentiels

Alors que le paysage global de la vente au détail continue d'évoluer et que les chaînes de magasins physiques se débattent, le marché du commerce électronique est sur le point de croître. D'ici 2021, les ventes mondiales du commerce électronique devraient atteindre plus de 4,48 billions de dollars, soit plus du double des chiffres de 2017.

Les détaillants et les concepteurs de commerce électronique qui accordent une attention particulière à l'expérience utilisateur et adhèrent à un ensemble standard de principes de conception UX de commerce électronique pour le flux d'achat des clients peuvent capitaliser sur cette croissance du marché et voir des rendements financiers tangibles.

Le flux d'achat est un parcours utilisateur général qui, lorsqu'il est correctement mis en œuvre, se traduit par davantage d'achats impulsifs, moins d'abandons de panier et une conversion globale plus élevée.

Le parcours utilisateur comprend :

• Découverte de sites Web
• Recherche et navigation de produits
• Fiche produit
• Chariot
• Vérifier
• Confirmation

Cet article couvre ces points clés du parcours utilisateur et comment les concepteurs de commerce électronique peuvent rendre l'expérience client agréable, simple et sans tracas.

Découverte de sites Web

Positionner clairement la marque

Les visiteurs forment les premières impressions d'un site Web en aussi peu que 50 millisecondes. Un site Web de commerce électronique doit attirer l'attention de l'utilisateur en montrant clairement et rapidement ce qu'il vend et où il se situe sur le marché global.

Par exemple, le site Web d'un détaillant de bijoux de luxe aurait probablement une apparence et une convivialité très différentes de celles d'un site Web d'un magasin à grande surface soucieux de son budget. Le détaillant d'électronique haut de gamme Bang & Olufsen transmet la qualité de sa marque en utilisant des polices élégantes, une palette de couleurs sophistiquée et des images de produits élégantes.

Afficher les appels à l'action pertinents

Lorsque l'utilisateur arrive sur la page d'accueil, accueillez-le avec un contenu opportun et des appels à l'action (CTA) spécifiques. Une grande image de bannière correspondant à la saison en cours ou à un événement spécifique, accompagnée d'un CTA approprié, aide l'utilisateur à passer à l'étape suivante du processus d'achat. Lors de la création d'incitations à l'action, évitez les expressions génériques telles que « commencer » qui n'indiquent pas clairement à l'utilisateur ce qui va suivre.

Polaroid a créé un CTA efficace pendant la période des fêtes en aidant les utilisateurs qui achetaient des cadeaux. Plutôt que d'utiliser une expression générique, Polaroid a utilisé "Shop Gifts", indiquant clairement que l'utilisateur serait dirigé vers une zone du site avec des suggestions de cadeaux.

Adapter les pages de destination pour le référencement

En connectant les termes de recherche de l'utilisateur à partir de moteurs de recherche tels que Google à des pages de destination spécifiques, les détaillants de commerce électronique peuvent capturer les utilisateurs qui ont pour mission de trouver un produit spécifique.

Lorsqu'un utilisateur recherche quelque chose, il y a de fortes chances qu'il cherche à l'acheter. La création d'une page de destination personnalisée pour les termes de recherche de produits courants augmente les chances d'un détaillant de décrocher une vente (et peut-être un nouveau client). L'entreprise de papeterie Papier le fait bien avec une page spécialement conçue pour les invitations de mariage qui apparaît dans les résultats de recherche Google.

Recherche et navigation de produits

Fournir une recherche sur site

Bien que cela puisse sembler assez basique, de nombreux sites n'offrent toujours pas de recherche générale sur l'ensemble du site, ou s'ils le font, il n'est pas correctement optimisé. Mais la recherche sur site est fondamentale pour une solide expérience d'achat en ligne.

Selon Invesp, 60% des achats en ligne ne sont pas impulsifs. Les gens savent souvent ce qu'ils recherchent et taper leur requête dans une barre de recherche sur un site Web de commerce électronique, comme un nom de produit ou un numéro de modèle, est beaucoup plus rapide que de parcourir les options de menu.

Des fonctionnalités supplémentaires telles que la recherche prédictive ou la saisie semi-automatique aident les utilisateurs à voir rapidement les options. Apple utilise cette tactique avec un champ de recherche qui se met à jour dynamiquement avec des liens rapides vers des produits et des suggestions de recherches populaires.

Inspirez les visiteurs en mode découverte

Alors que de nombreux acheteurs ont en tête un article spécifique à acheter, tous les visiteurs ne sont pas aussi sûrs. Selon Nielsen Norman, il existe cinq types d'acheteurs de commerce électronique, dont l'un est le "navigateur". Les navigateurs ne recherchent pas nécessairement quelque chose de spécifique. Au contraire, ils regardent tranquillement autour d'eux pour voir s'ils trouvent quelque chose d'intéressant.

Les sites Web de commerce électronique peuvent aider l'acheteur en mode découverte en lui montrant les produits nouveaux ou les plus vendus et en lui permettant de voir facilement et rapidement les catégories de produits.

Etsy engage les navigateurs en leur montrant ce qui est populaire en ce moment ainsi qu'en affichant clairement les catégories générales de produits, à la fois dans la navigation et sur le contenu de la page d'accueil.

Utiliser les filtres et la recherche à facettes

La recherche à facettes utilise le filtrage et va encore plus loin en permettant aux utilisateurs de sélectionner plusieurs attributs à la fois.

Lors de la création de filtres, plutôt que de limiter les options à des critères généraux tels que la taille, la couleur ou le prix, ajoutez des filtres spécifiques pour des catégories spécifiques aux produits vendus. Ces filtres peuvent être des choses comme l'ajustement ou le tissu pour les vêtements, les polices ou l'occasion pour les invitations, et la taille de l'écran ou le processeur pour les gadgets.

Une fois qu'un utilisateur applique des filtres, il devrait être immédiatement apparent dans l'interface utilisateur quels filtres ont été appliqués. L'utilisateur doit également pouvoir supprimer facilement les filtres appliqués.

ASOS affiche une gamme détaillée de filtres pour chaque catégorie et montre clairement quels filtres ont été appliqués.

Fiche produit

Afficher en évidence les actions principales

L'utilisateur ne doit jamais se demander comment faire quelque chose d'important, comme placer un produit dans son panier. Affichez les actions principales telles que « ajouter au panier » ou « acheter maintenant » sous forme de boutons, et placez-les à un endroit bien en vue sur l'écran par rapport au reste du contenu.

Le détaillant de rénovation domiciliaire Lowe's permet à l'utilisateur de savoir comment ajouter un produit à son panier avec un gros bouton vert comme l'une des choses les plus importantes sur la page.

Fournir des informations détaillées sur le produit

Affichez des photos professionnelles de haute qualité et des descriptions détaillées pour aider les acheteurs à comprendre le produit.

Utilisez la divulgation progressive et la hiérarchie visuelle pour donner à l'utilisateur la bonne quantité d'informations dont il a besoin. Donnez-leur immédiatement les informations les plus importantes, puis ajoutez des détails plus bas sur la page pour les utilisateurs qui souhaitent en savoir plus.

Divisez les longues descriptions en sections ; par exemple, aperçu, tailles/dimensions, caractéristiques détaillées et informations d'expédition. L'utilisation de la navigation développer/réduire pour des sections supplémentaires, comme le fait Myprotein, permet d'éviter que l'utilisateur ne se sente submergé.

Bâtir la confiance des clients

Évitez de laisser les clients deviner les options d'expédition, la disponibilité des produits et les politiques de retour. S'assurer que toutes ces informations sont facilement disponibles, ce qui renforce la confiance des clients et peut aider à pousser un client incertain vers un achat. Savoir si et comment ils peuvent retourner quelque chose les aide à prendre des décisions plus éclairées.

ASOS affiche clairement les informations importantes d'expédition et de retour sur chaque page de produit à l'aide d'un modal accessible à partir d'un lien sous chaque nom de produit.

Ajouter une preuve sociale

La preuve sociale est un concept qui signifie que les gens sont influencés par le comportement des autres. Le concept fait partie des principes de persuasion du Dr Robert Cialdini (un chercheur de premier plan dans la science de l'influence) et a fait ses preuves.

Les détaillants de commerce électronique peuvent renforcer la confiance des acheteurs grâce à la preuve sociale en ajoutant des évaluations, des avis et des commentaires des clients. Les produits sur Amazon ont souvent des milliers d'avis et les utilisateurs peuvent les trier par niveau d'étoiles.

Panier

Afficher un récapitulatif clair de la commande

Avant que l'acheteur ne termine son achat, montrez-lui un récapitulatif clair et concis de la commande qui comprend les articles achetés, la quantité et le prix de chaque article, ainsi que le total de la commande. Autorisez l'utilisateur à modifier tous les éléments qu'il souhaite mettre à jour ou supprimer, et évitez les surprises liées aux frais d'expédition en incluant un récapitulatif d'expédition.

Le Modist affiche à la fois un récapitulatif clair de la commande et un reçu. L'utilisateur peut facilement gérer les articles qu'il a sélectionnés (déplacer vers la liste de souhaits, supprimer, modifier la quantité) et voir à la fois un résumé et une ventilation détaillée des frais d'expédition et des taxes.

Vérifier

Autoriser les utilisateurs à payer en tant qu'invités

Les achats impulsifs représentent près de 40% de tout l'argent dépensé dans le commerce électronique. Éliminez l'obstacle supplémentaire de la création d'un compte ou de la connexion en permettant aux acheteurs de payer en tant qu'invités. Au cours du processus de paiement en tant qu'invité, une simple intégration pour créer un compte peut convertir certains invités en utilisateurs de compte.

Aesop permet aux utilisateurs de payer facilement en tant qu'invités tout en offrant la possibilité de se connecter ou de s'inscrire. Fournir plusieurs options dans un seul formulaire supprime les blocages d'achat potentiels pour ceux qui souhaitent payer rapidement, mais donne également aux utilisateurs qui souhaitent s'inscrire la possibilité de le faire.

Fournir une rétroaction visuelle pendant le processus de paiement

L'inclusion d'une barre de progression aide les clients à comprendre où ils en sont dans le processus de paiement et combien il leur reste à terminer.

Apple montre à l'utilisateur chaque étape du processus et lui permet de naviguer entre les étapes à l'aide des liens de progression. La progression est enregistrée, de sorte que l'utilisateur ne perd rien en se déplaçant entre les étapes.

Utiliser les méthodes de paiement courantes

En plus de permettre le paiement via les principales cartes de crédit, l'ajout d'autres méthodes de paiement populaires comme PayPal peut augmenter la conversion pour les acheteurs qui ne veulent pas transmettre leurs informations de carte de crédit.

Aux Pays-Bas, iDEAL est souvent utilisé pour les transactions de commerce électronique et 60 % des consommateurs néerlandais l'ont utilisé lors d'un achat récent. Le détaillant de vêtements Scotch & Soda permet aux acheteurs de payer avec iDEAL et PayPal.

Confirmation de commande

Afficher une confirmation de commande détaillée après l'achat

Une fois que le client a terminé l'achat, donnez-lui une confirmation comprenant le traitement réussi du paiement et les détails de livraison tels que l'adresse, le mode de livraison et la date de livraison prévue.

Ce concept d'e-mail de confirmation pour Amazon indique le numéro de commande, donne un aperçu des articles achetés, fournit une date d'expédition et quelques recommandations pour de futurs achats.

Envoyer des mises à jour de commande et d'expédition par e-mail

En plus de l'écran de confirmation, l'envoi d'un e-mail de confirmation permet de tenir l'utilisateur informé de l'état de son achat. Bien que tous les clients doivent recevoir une confirmation par e-mail, cela est particulièrement utile dans les cas où les utilisateurs ont payé en tant qu'invités et n'ont pas de compte sur le site Web pour vérifier leurs commandes passées.

Si quelque chose change avec la commande, comme un retard de livraison, envoyez une mise à jour. Une fois l'article expédié, envoyez une mise à jour par e-mail avec le numéro de suivi.

Sommaire

Les principes de cet article fournissent une base de référence des points de contact du parcours utilisateur que chaque concepteur de commerce électronique devrait suivre, mais ce n'est que le début. Pour en savoir plus sur l'expérience utilisateur du commerce électronique mobile, visitez eCommerce pour l'expérience mobile ou en savoir plus sur la conception de pages de destination Comment concevoir des pages de destination efficaces.

Le marché croissant du commerce électronique représente de nombreuses opportunités pour les détaillants. Ceux qui reconnaissent l'importance de l'expérience utilisateur et suivent les meilleures pratiques pour le parcours utilisateur du commerce électronique peuvent rester compétitifs et avoir un impact positif sur leurs résultats.

• • •

Pour en savoir plus sur le blog Toptal Design :

• Les principales tendances du commerce électronique et leur influence sur la conception (avec infographie)
• UX eCommerce pour l'expérience mobile
• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• Le guide ultime de la conception de sites Web de commerce électronique
• Le commerce électronique repensé : comment des modifications mineures ont apporté des améliorations majeures à l'expérience utilisateur