Les ventes de commerce électronique continuent d’atteindre de nouveaux sommets en 2018. Dans le monde entier, le commerce électronique continuera d’afficher des gains solides à hauteur de 2,3 billions de dollars. Mais qu’est-ce qui fait qu’un site de commerce électronique triomphe sur un autre ?
Plusieurs facteurs déterminent le succès global d’un site Web de commerce électronique, notamment la qualité des produits, la reconnaissance de la marque, les frais d’expédition, les politiques de retour, la fiabilité et le service client. Cependant, une conception réfléchie de l’expérience utilisateur est également essentielle pour offrir aux clients une expérience satisfaisante et sans friction. Cela convertira non seulement les clics potentiels en transactions de commerce électronique réelles, mais incitera les clients à revenir encore et encore.
Voici un guide complet de conception eCommerce UX pour créer de superbes sites Web de commerce électronique, avec des exemples.

Concevoir un commerce électronique pour la confiance et la sécurité
Avant tout, il est important de concevoir un site Web auquel les acheteurs sentent qu’ils peuvent faire confiance. La plupart des acheteurs sont préoccupés par la confidentialité et se demandent si le site protégera leurs données personnelles en fournissant une transaction sécurisée. Si le site Web ne se sent pas digne de confiance, ils choisiront simplement de magasiner ailleurs.
ASOS fournit une excellente expérience utilisateur de commerce électronique en partageant des informations pertinentes sur l’entreprise et en sécurisant les paiements disponibles dans le pied de page.
Voici quelques méthodes qui communiqueront la fiabilité :
Inclure un aperçu de l’entreprise :
Fournir des informations générales
Informations de contact
Une page de questions fréquemment posées (FAQ)
Publiez les politiques du magasin et assurez-vous qu’elles ne sont pas trop difficiles à trouver :

Politiques d’expédition et de retour
Décrivez le processus de retour et quels produits peuvent être retournés
Fournir un accès facile à une politique de confidentialité qui couvre les informations personnelles et financières des acheteurs (c’est crucial)
Écrivez dans un langage simple et évitez le jargon juridique ou de politique interne.

Partagez des avis sur les produits. Fournir des avis sur les produits pour aider les acheteurs à en savoir plus sur le produit ; cela aidera à apaiser les inquiétudes qu’ils pourraient avoir et fournira une excellente expérience utilisateur de commerce électronique. Allez plus loin en proposant des avis sur les produits ainsi que des informations supplémentaires sur les examinateurs, ou en résumant les avis. Cette étape peut aider les acheteurs à tirer pleinement parti des opinions des autres.
Utilisez un serveur sécurisé. Les acheteurs s’attendent à ce que leurs informations personnelles restent sécurisées lorsqu’ils achètent en ligne. Les certificats SSL (Secure Sockets Layer) authentifient l’identité d’un site Web et cryptent les informations qui doivent rester sécurisées. C’est un signe essentiel qui indique que les caisses sont sécurisées. Assurez les acheteurs que leurs données sont protégées en mettant en œuvre SSL et en affichant des badges de certificat SSL.
Quelques exemples de sceaux de confiance à afficher pour la confiance des clients en ligne.
Ajouter des sceaux de confiance reconnus Un sceau de confiance vérifie la légitimité et la sécurité d’un site Web. Certaines sociétés de fiducie ajoutent même une couche de protection supplémentaire en offrant une assurance si la transaction s’avère frauduleuse. L’utilisation de sceaux de confiance reconnus garantit aux acheteurs potentiels un processus de transaction sécurisé, ce qui entraîne une augmentation des ventes et offre une meilleure UX de commerce électronique.
Faites preuve d’attention aux détails. Donnez au site Web une apparence légitime et professionnelle en évitant les fautes de frappe, les images manquantes, les liens brisés, les erreurs 404 (page introuvable) ou d’autres erreurs qui tuent l’UX du commerce électronique.

Considérations relatives à la conception de l’interface utilisateur de commerce électronique
L’apparence d’un site Web est le principal moteur des premières impressions. La recherche conclut que les gens détermineront s’ils aiment ou non un site Web en seulement 50 millisecondes.

Voici quelques conseils de conception d’interface utilisateur essentiels :
Suivez l’identité de la marque. L’image de marque doit être apparente sur tout le site Web. Choisissez des couleurs qui reflètent la marque et définissez le style afin de préciser le type de produits vendus. Assurez-vous que l’expérience de marque est cohérente sur tous les canaux, que ce soit en ligne, en magasin ou sur un appareil mobile. Cela contribuera à établir une relation marque-client solide.
Adoptez la hiérarchie visuelle. Le contenu le plus critique doit être affiché au-dessus du pli. Dans certains cas, il est préférable d’utiliser moins d’espace blanc pour rapprocher les éléments que de pousser le contenu critique sous le pli.
Ne pas trop concevoir. Limitez les formats de police tels que le type de police, les tailles et les couleurs. Lorsque le texte ressemble trop à des graphiques, il sera pris pour une publicité. Utilisez des couleurs de texte et d’arrière-plan à contraste élevé pour rendre le contenu aussi clair que possible.
Tenez-vous en aux symboles connus. Utilisez des icônes ou des symboles faciles à identifier. Les icônes inconnues ne feront que confondre les acheteurs. Un bon moyen d’éviter toute confusion possible est de fournir des étiquettes pour les icônes.
Évitez les fenêtres contextuelles. Les fenêtres contextuelles sont une distraction. Même s’ils contiennent des informations précieuses, les acheteurs sont plus susceptibles de les rejeter immédiatement. Une fois partis, même s’ils le souhaitent, il est difficile pour les acheteurs de retrouver l’information.

L’importance d’une navigation sans friction sur le site de commerce électronique
Sans friction, c’est la façon d’être. La navigation concerne la facilité avec laquelle les gens se déplacent sur le site Web, trouvent ce qu’ils recherchent et enfin passent à l’action. L’expérience d’achat en ligne doit être transparente afin que les acheteurs ne s’abandonnent pas à mi-chemin du processus.
Certains aspects clés de la conception de sites Web de commerce électronique pour une navigation facile incluent :
Catégories de produits bien définies
Le niveau supérieur de navigation doit afficher l’ensemble des catégories proposées par le site. Regroupez les produits en catégories et sous-catégories qui ont du sens. Les étiquettes de catégorie fonctionnent mieux sous forme de mots simples décrivant la gamme de produits, afin que les acheteurs puissent les parcourir et comprendre instantanément ce qu’ils représentent. Il est préférable de tester autant que possible la navigation sur le site pour une excellente UX de commerce électronique, car il s’agit d’une caractéristique clé du site.
Recherche de produit
En termes simples, si les acheteurs ne trouvent pas le produit, ils ne peuvent pas l’acheter. Créez une fonction de recherche qui les aide à trouver facilement ce qu’ils recherchent :
Rendez la recherche omniprésente. Placez le champ de recherche sur chaque page et à des endroits familiers. La boîte doit être visible, rapidement reconnaissable et facile à utiliser. Les positions standard pour implémenter le champ de recherche sont en haut à droite ou en haut au centre des pages, ou dans le menu principal.
Prend en charge toutes sortes de requêtes. Les recherches doivent prendre en charge tous les types de requêtes telles que les noms de produits, les catégories et les attributs de produits, ainsi que les informations relatives au service client. C’est une bonne idée d’inclure un exemple de requête de recherche dans le champ de saisie pour suggérer aux acheteurs l’utilisation des différentes fonctions.
Avoir une fonctionnalité de recherche semi-automatique. La fonctionnalité de saisie semi-automatique permet aux acheteurs de trouver plus facilement ce qu’ils recherchent et augmente le potentiel de vente en suggérant des éléments dans la zone qu’ils recherchent déjà.
Autoriser le tri et le filtrage des résultats. Laissez les acheteurs trier les résultats de recherche en fonction de divers critères (meilleures ventes, prix le plus élevé ou le plus bas, évaluation du produit, article le plus récent, etc.) et éliminez les articles qui ne rentrent pas dans une certaine catégorie.
Sportsgirl permet de trier et de filtrer les résultats de la recherche.
Filtrage des produits
Plus il y a de choix, plus il est difficile de choisir. Aidez les acheteurs à trouver les bons produits en mettant en place des filtres. Cela les aidera à affiner leurs choix et à accéder directement à la gamme de produits souhaitée.
Aperçu rapide du produit
Une vue rapide » réduit le temps nécessaire aux acheteurs pour trouver le bon produit en éliminant les chargements de page inutiles. En règle générale, les détails du produit sont affichés dans une fenêtre modale sur la page consultée. N’essayez pas d’afficher tous les détails du produit, incluez plutôt un lien vers la page complète du produit pour afficher tous les détails. Assurez-vous également d’inclure un bouton « Ajouter au panier » bien en vue ainsi qu’une fonctionnalité « Enregistrer dans la liste de souhaits ».
Fenêtre modale « A quick view » d’Urban Outfitters

Offres spéciales
Les acheteurs recherchent toujours des offres spéciales, des remises ou des meilleures offres. Rendez les offres exclusives visibles afin que les acheteurs les connaissent. Même si les différences de prix ne sont pas si importantes, le sentiment psychologique d’économiser de l’argent crée l’illusion d’avoir le dessus.

Conception de pages de produits de commerce électronique
Pour une UX de commerce électronique exceptionnelle lorsque les acheteurs trouvent avec succès le produit qu’ils veulent, laissez-les découvrir le produit. Concevez une page de produit qui crée une expérience aussi proche que possible d’une expérience d’achat en personne, en incluant de nombreuses images, des descriptions détaillées et toute autre information utile et connexe sur le produit. Voyons en profondeur ce que cela signifie.

Fournir de superbes images de produits
Avec le commerce électronique, les acheteurs ne peuvent pas toucher, sentir ou essayer le produit. Au lieu de cela, tout dépend de ce qu’ils voient en ligne. C’est pourquoi il est essentiel de fournir des images de produits qui montrent clairement tous les aspects du produit. Voici une liste de contrôle pour des images de produits parfaites :
Utilisez un fond blanc. L’arrière-plan des images de produits ne doit pas distraire ou entrer en conflit avec le produit lui-même. Un fond blanc fonctionne mieux car il permet au produit de se démarquer et fonctionne avec presque tous les styles ou schémas de couleurs.
Utilisez de grandes images de haute qualité. De bonnes images vendent le produit. Des images de haute qualité attirent l’attention des acheteurs et leur montrent exactement ce qu’ils achètent. Avoir de grandes images permet aux acheteurs de zoomer et d’examiner un produit dans les moindres détails.
Des images de produits de haute qualité sur une interface utilisateur minimaliste rendent les produits attrayants pour les clients et contribuent à une excellente UX de commerce électronique. (par Greg Dlubacz)
Utilisez une variété d’images. Présentez le produit sous différents angles et incluez des gros plans afin de donner une idée plus complète du produit. Une vue à 360 degrés, où ils peuvent déplacer le produit, est un bon moyen de fournir une expérience proche d’entrer physiquement dans le magasin et de s’y engager. VR eCommerce est la prochaine vague de cette expérience.

Utilisez la vidéo. Les vidéos ont la capacité de fournir beaucoup d’informations en peu de temps. Utilisez une vidéo pour montrer le produit en cours d’utilisation et pour fournir autant d’informations fonctionnelles que possible.
Être cohérent. Utilisez des images cohérentes sur plusieurs pages et conformes à l’apparence du reste du site Web. Cela gardera tout propre et épuré. L’image principale du produit doit être la même dans toutes les zones du site, agence web Lyon telles que les produits phares ou dans la section des articles en vedette.
Sélection des options du produit et ajout du produit au panier. (par Dannniel)
Donnez juste la bonne quantité d’informations sur le produit
Fournissez aux acheteurs des informations détaillées sur le produit afin qu’ils puissent prendre une décision d’achat éclairée. Affichez la disponibilité, les options pour différentes tailles ou couleurs, les dimensions, un tableau des tailles, les matériaux utilisés, le coût total, les garanties, etc. Moins ils ont de questions restantes sur un produit, plus ils sont susceptibles de faire un achat.

Utiliser un design persuasif
Selon le principe de rareté, les humains accordent une valeur supérieure à un objet rare et une valeur inférieure à ceux qui sont abondants. Créez un sentiment d’urgence dans le processus de vente en montrant la rareté : affichez le nombre de produits restants, grisez les tailles qui sont en rupture de stock ou affichez les délais de vente. La rareté motivera les acheteurs potentiels à agir.
De plus en plus, les entreprises utilisent la recherche psychologique avancée et, afin de susciter davantage d’engagement et d’achats, ont transformé ce qui était autrefois un art en une science. Le design persuasif dans le commerce électronique est un moyen très efficace d’obtenir plus d’achats.

Afficher les produits associés et recommandés
Affichez des produits similaires que les acheteurs pourraient également aimer et qui fonctionnent bien avec le ou les produits actuels que d’autres ont achetés. Cela peut être affiché sur une page de détail de produit ou dans le panier et aidera à guider les acheteurs vers les produits qui répondent à leurs besoins, les encourageant potentiellement à continuer leurs achats, un excellent moyen de vendre des produits connexes.
French Connection affiche des produits complémentaires et recommandés pour une excellente UX eCommerce.

Conception de panier d’achat
Le panier d’achat est essentiel car c’est là que les acheteurs examinent les produits sélectionnés, prennent la décision finale et passent à la caisse. L’objectif principal du panier est d’amener les acheteurs à passer à la caisse. Vous trouverez ci-dessous des conseils sur la conception d’un panier d’achat convivial qui encouragera les acheteurs à acheter davantage.
Utilisez un appel à l’action (CTA) clair. Le principal appel à l’action sur la page du panier doit être le bouton de paiement. Utilisez des couleurs vives, de nombreuses zones cliquables et un langage simple pour rendre le bouton de paiement visible, simple et facile à utiliser.
Fournir une rétroaction adéquate. Assurez-vous que lorsqu’un produit est ajouté au panier, il est immédiatement et clairement confirmé. Les acheteurs sont troublés par des commentaires inadéquats, tels que l’affichage d’un texte de confirmation discret. Une bonne idée est d’utiliser des animations, car le mouvement attire l’œil humain.
Utilisez un mini widget de panier. Permettez aux acheteurs d’ajouter des produits à leur panier sans quitter la page sur laquelle ils se trouvent, en utilisant un mini panier. Cela leur permet également de naviguer, de découvrir et d’ajouter d’autres produits. Les mini widgets de panier doivent toujours être liés au panier d’achat en pleine page.
Afficher les détails du produit. L’affichage de détails tels que les noms de produits, les images, les tailles, les couleurs et les prix dans le panier aide les acheteurs à se souvenir de chaque produit et à comparer les produits. Reliez les produits du panier à leurs pages de produits complètes, afin que les acheteurs puissent consulter plus de détails si nécessaire.
Rendre le panier facilement modifiable. La possibilité de supprimer, d’enregistrer pour plus tard ou de modifier des détails tels que la taille, la couleur ou la quantité doit être facile d’accès.
Évitez la surprise des frais d’expédition et des taxes imprévus. Les frais d’expédition inattendus sont l’une des principales raisons pour lesquelles les acheteurs abandonnent leur panier d’achat Placez les options d’expédition et les taxes avec un calcul précis des coûts et une date de livraison prévue à l’avance.

Conception de caisse de commerce électronique
Un design élégant et tendance ne détermine pas un site Web de commerce électronique réussi et ne fournit pas nécessairement une excellente expérience utilisateur de commerce électronique. Le succès du commerce électronique ne se mesure que par le nombre d’achats effectués. Voici quelques façons de créer une page de paiement bien conçue, qui contribuera à une conversion réussie :
Offrir diverses options de paiement. Différents acheteurs ont des préférences différentes lorsqu’il s’agit d’effectuer des paiements. Offrez autant d’options de paiement que possible (en fonction du public cible) pour élargir la clientèle et permettre aux acheteurs de finaliser facilement leur commande.
Rester simple. Minimisez le nombre de champs et d’étapes pour finaliser l’achat. L’utilisation de l’adresse de livraison comme adresse de facturation par défaut est un bon moyen de minimiser le nombre de champs. Idéalement, concevez une page de paiement unique où les acheteurs peuvent voir leur panier et saisir les informations de livraison et de paiement.
Crumpler a une page de paiement unique avec une option pour faire des achats en tant qu’invité.
Rendre l’inscription facultative. Forcer les acheteurs à créer un compte avant leur premier achat les fera fuir Donnez-leur la possibilité de s’inscrire une fois l’achat terminé et mettez en évidence les avantages de l’inscription lorsque vous leur demandez de s’inscrire. Les avantages incluent un paiement plus rapide grâce à des informations personnelles telles que l’adresse de livraison enregistrée ou les informations de paiement et l’accès à des offres exclusives qui ne sont disponibles que pour les membres enregistrés.
Utilisez des indications d’erreur claires. Il n’y a rien de plus frustrant que de ne pas pouvoir faire un achat ou de comprendre pourquoi. Au lieu d’afficher les erreurs après la soumission d’un formulaire, faites en sorte que les notifications d’erreurs s’affichent en temps réel. Placez des messages d’erreur clairs et concis directement au-dessus ou à côté de l’article qui nécessite une correction, afin que les acheteurs les remarquent et les comprennent.
lululemon démontre qu’un processus en trois étapes suffit pour finaliser un achat.
Gardez les gens sur la bonne voie. Lorsque vous utilisez un paiement sur plusieurs pages, incluez une barre de progression indiquant le nombre d’étapes restantes pour terminer l’achat. Cela éliminera toute ambiguïté et assurera aux acheteurs qu’ils sont sur la bonne voie. Lorsque l’achat est terminé, affichez une confirmation de commande et l’état de la commande avec suivi de l’expédition.
Offrez du soutien. Incluez un chat en direct ou un numéro de contact tout au long du processus de paiement, afin que lorsque les acheteurs ont des questions, ils puissent obtenir rapidement des réponses plutôt que d’avoir à quitter le site et à aller ailleurs.