Catégories
Plugin et site web

Meilleures pratiques pour la conception d'interface utilisateur de commerce électronique – Smashing Magazine

A propos de l'auteur

Suzanne Scacca est une ancienne implémentatrice, formatrice et responsable d'agence WordPress qui travaille maintenant en tant que rédactrice indépendante. Elle se spécialise dans l'artisanat marketing, web…
Plus à propos
Suzanne
Scacca

L'objectif de la conception de commerce électronique est de créer des interfaces qui n'entraveront pas l'expérience d'achat globale. Dans cet article, nous allons examiner trois éléments clés d'un magasin numérique et ce que vous pouvez faire pour les concevoir afin d'aider les clients à passer plus rapidement et sans effort à la phase de paiement.

Lorsque vous imaginez des acheteurs se déplaçant sur les sites de commerce électronique que vous créez, vous vous attendez plus ou moins à ce qu'ils suivent ce voyage:

  • Étape 1: Entrez sur la page d'accueil ou une page de catégorie.
  • Étape 2: Utilisez les éléments de navigation pour s'orienter vers le magasin et se concentrer sur les choses spécifiques qu'ils recherchent.
  • Étape 3: Passez en revue les descriptions et autres détails d'achat pertinents pour les produits qui piquent leur intérêt.
  • Étape 4: Personnalisez les spécifications du produit (si possible), puis ajoutez les articles souhaités à leur panier.
  • Étape 5: Check-out.

Il y a des écarts qu'ils pourraient prendre en cours de route (comme l'exploration de produits connexes, la lecture de différentes catégories et l'enregistrement d'articles dans une liste de souhaits pour un jour de pluie). Mais, pour la plupart, c'est la voie la plus élevée que vous avez construite et c'est celle qui sera la plus fréquentée.

Cela étant, il est particulièrement important pour les concepteurs de se concentrer sur les éléments d’interface que les acheteurs rencontrent au cours de ce voyage. S'il y a des frictions au sein de l'interface utilisateur, vous ne constaterez pas seulement une augmentation des écarts inattendus par rapport au chemin, mais également davantage de rebonds à partir du site.

C'est donc ce sur quoi l'article suivant va se concentrer: Comment garantir que l'interface utilisateur tout au long du parcours de l'acheteur est attrayante, intuitive, engageante et sans friction.

Examinons trois parties de l'interface utilisateur que les acheteurs rencontreront du point d'entrée à la caisse. J'utiliserai des sites Web de commerce électronique créés avec Shopify pour ce faire:

1. Créez une navigation à multiples facettes qui suit les acheteurs

Il fut un temps où les sites Web de commerce électronique avaient des méga menus que les acheteurs devaient trier pour trouver les catégories de produits, sous-catégories et sous-sous-catégories souhaitées. Bien que vous puissiez encore les rencontrer de nos jours, le meilleur choix est une navigation qui s’adapte au parcours de l’acheteur.

Le menu principal

La première chose à faire est de simplifier le menu principal afin qu'il n'ait qu'un seul niveau sous les en-têtes de catégorie principale. Par exemple, voici comment United By Blue procède:

Menu «Boutique» sur le site Web de United By Blue avec des catégories pour les femmes, les hommes, les sacs et accessoires, les déplacements et la vie durable
Le menu principal «Boutique» du site de commerce électronique United By Blue ne comporte qu'un seul niveau de catégories de produits. (Source de l'image: United By Blue) (Grand aperçu)

Les catégories de produits sous «Boutique» sont toutes soigneusement organisées sous des en-têtes tels que «Femmes» et «Hommes».

Les seules exceptions sont les catégories «Nouveautés» et «Masques et revêtements de visage» accompagnées d'images. C'est la même raison pour laquelle "Cadeaux" est dans une police bleu clair et "Vente" est dans une police rouge dans le menu principal. Ce sont des catégories très opportunes et pertinentes pour les acheteurs de United By Blue, elles méritent donc d'être mises en évidence (sans être trop distrayantes).

De retour sur le site, voyons comment le concepteur a réussi à organiser le site mobile:

Le site mobile United By Blue utilise une conception de menu plus adaptée aux mobiles.

Plutôt que de réduire le menu du bureau à un menu sur lequel les acheteurs devraient pincer et zoomer ici, nous voyons un menu adapté à l'écran du mobile.

Il nécessite quelques clics de plus que le site pour ordinateur, mais les acheteurs ne devraient pas avoir de problème avec cela, car le menu ne va pas trop loin (encore une fois, c'est pourquoi nous ne pouvons plus utiliser de méga menus).

Sur la page des résultats du produit

Si vous créez un site de commerce électronique pour un client avec un inventaire complexe (c'est-à-dire beaucoup de produits et de couches de catégories), la page de résultats du produit aura besoin de son propre système de navigation.

Pour aider les acheteurs à réduire le nombre de produits qu'ils voient à la fois, vous pouvez inclure ces deux éléments dans la conception de cette page:

  1. Filtres pour affiner les résultats par spécification de produit.
  2. Tri pour commander les produits en fonction des priorités des acheteurs.

Je les ai mis en évidence sur cette page de résultats de produits sur le site Web de Horne:

Conception de site Web Horne e-commerce avec filtres et tri pour la navigation interne
Le site de commerce électronique Horne utilise une barre de filtres et des options de tri pour aider les acheteurs à naviguer dans l'inventaire. (Source de l'image: Horne) (Grand aperçu)

Bien que vous puissiez stocker vos filtres dans une barre latérale gauche, la conception alignée horizontalement au-dessus des résultats est un meilleur choix.

Cette conception peu encombrante vous permet d'afficher plus de produits à la fois et constitue également un choix plus convivial pour les mobiles:

Horne comprend une barre de recherche, des filtres et des options de tri sur le site mobile pour une navigation facile dans l'inventaire
Un aperçu de la façon dont les filtres, le tri et la recherche apparaissent sur le site Web mobile Horne. (Source de l'image: Horne) (Grand aperçu)

Gardez à l'esprit que la cohérence dans la conception de l'interface utilisateur est importante pour les acheteurs, d'autant plus qu'ils sont plus nombreux à adopter une approche omnicanale des achats. En présentant les filtres / options de tri de manière cohérente d'un appareil à l'autre, vous créerez une expérience plus prévisible et plus confortable pour eux au cours du processus.

À mesure que les acheteurs se dirigent plus profondément vers un site de commerce électronique, ils peuvent encore avoir besoin d'une aide à la navigation. Il existe deux éléments de navigation de l'interface utilisateur qui les aideront.

Le premier est un fil d'Ariane dans le coin supérieur gauche des pages de produits, comme le fait tentree:

Page du produit de commerce électronique Tentree avec un fil d'Ariane pointant vers la catégorie "T-shirts et débardeurs durables pour femmes"
Un exemple de la façon dont tentree utilise le fil d'Ariane pour aider les acheteurs à naviguer à partir de la page du produit. (Source de l'image: tentree) (Grand aperçu)

Ceci est mieux utilisé sur les sites Web avec des catégories qui ont des sous-catégories sur des sous-catégories. Plus les acheteurs s'éloignent de la page de résultats du produit et de la commodité des filtres et du tri, plus le fil d'Ariane sera important.

La barre de recherche, en revanche, est un élément de navigation qui doit toujours être disponible, quel que soit le point du parcours où se trouvent les acheteurs. Cela vaut également pour les magasins de toutes tailles.

Désormais, une barre de recherche aidera certainement les acheteurs qui manquent de temps, ne peuvent pas trouver ce dont ils ont besoin ou veulent simplement un raccourci vers un produit dont ils savent déjà qu'il existe. Cependant, une barre de recherche basée sur l'IA qui peut prédire activement ce que l'acheteur recherche est un choix plus intelligent.

Voici comment cela fonctionne sur le site Horne:

La barre de recherche du site Web Horne correspond précisément à une expression saisie avec les catégories de produits et les produits
Un aperçu des fonctionnalités de recherche intelligente incluses dans le site Web Horne. (Source de l'image: Horne) (Grand aperçu)

Même si l'acheteur n'a pas fini de saisir sa phrase de recherche, cette barre de recherche commence à proposer des suggestions. Sur la gauche se trouvent les mots clés correspondants et sur la droite les produits les plus correspondants. L’objectif ultime est d’accélérer la recherche des acheteurs et de réduire le stress, la pression ou la frustration qu’ils pourraient ressentir autrement.

2. Afficher les détails les plus pertinents à la fois sur les pages produits

Vitaly Friedman a récemment partagé cette astuce sur LinkedIn:

Il a raison. Plus les visiteurs passent de temps à chercher des détails pertinents sur un produit, plus ils ont de chances d'abandonner et d'essayer un autre magasin.

L'expédition à elle seule est un énorme point de friction pour de nombreux acheteurs et, malheureusement, trop de sites de commerce électronique attendent jusqu'à la caisse pour les informer des frais d'expédition et des retards.

Pour cette raison, 63% des acheteurs numériques finissent par abandonner leurs paniers en ligne en raison des frais d'expédition et 36% le font en raison du temps qu'il faut pour recevoir leurs commandes.

Ce ne sont pas les seuls détails que les acheteurs numériques veulent connaître à l'avance. Ils veulent également connaître:

  • La politique de retour et de remboursement,
  • Les conditions d'utilisation et la politique de confidentialité,
  • Les options de paiement disponibles,
  • Options d'achat et de retrait omnicanal disponibles,
  • Etc.

Mais comment comptez-vous intégrer tout cela dans le premier écran?

Présentez la hauteur de 30 secondes au-dessus du pli

C'est ce dont parlait Vitaly. Vous n’avez pas à presser chaque détail sur un produit au-dessus du pli. Mais le magasin devrait être en mesure de vendre le produit uniquement avec ce qui se trouve dans cet espace.

Bluebella, par exemple, a un design peu encombrant qui ne fait aucun compromis sur la lisibilité:

Une description de ce que l'image montre pour le texte alternatif
La conception compacte de Bluebella fournit tous les détails du produit dont un client a besoin au-dessus du pli. (Source de l'image: Bluebella) (Grand aperçu)

Avec la galerie d'images reléguée sur le côté gauche de la page, le reste peut être dédié au résumé du produit. En raison de la taille variable des polices d’en-tête et de la structure hiérarchique de la page, il est facile à suivre.

En fonction de la façon dont cela est conçu, vous pouvez dire que les détails les plus importants sont:

  • Nom du produit;
  • Prix ​​du produit;
  • Sélecteur de taille de produit;
  • Boutons d'ajout au panier et de liste de souhaits;
  • Informations sur la livraison et les retours (qui apparaissent clairement sur une seule ligne).

Le reste des détails du produit peut s'adapter au-dessus du pli grâce aux accordéons utilisés pour les réduire et les étendre.

S'il y a d'autres détails importants, les acheteurs peuvent avoir besoin de se décider – comme des critiques de produits ou un guide des tailles – créer des liens dans la partie supérieure du pli qui les déplacent vers les sections pertinentes en bas de la page.

Note rapide: Cette mise en page ne sera pas possible sur mobile pour des raisons évidentes. Ainsi, les images du produit obtiendront la meilleure facturation tandis que le pas de 30 secondes apparaît juste en dessous du pli.

Même si vous êtes en mesure de fournir de manière concise la description du produit, des éléments de vente et de marketing supplémentaires tels que des fenêtres contextuelles, des widgets de chat et plus encore peuvent devenir tout aussi ennuyeux que de longues pages de produits.

Alors, assurez-vous de les garder à l'écart, comme le fait Partake:

Exemple de la façon dont le site Web Partake Foods inclut des widgets miniaturisés et non intrusifs pour l'accessibilité et les récompenses dans la conception de sa page produit
Partake Foods comprend des widgets non intrusifs pour les contrôles d'accessibilité et une fenêtre contextuelle de fidélité sur ses pages produits (Source de l'image: Partake) (Grand aperçu)

Le symbole rouge que vous voyez en bas à gauche permet aux acheteurs de contrôler les fonctionnalités d'accessibilité du site. Le bouton "Récompenses" en bas à droite est en fait une fenêtre contextuelle qui ressemble à un widget de chat. Une fois ouvert, il invite les acheteurs à rejoindre le programme de fidélité.

Ces deux widgets s'ouvrent uniquement lorsque vous cliquez dessus.

Allbirds en est un autre qui comprend des éléments supplémentaires, mais les tient à l'écart:

Conception de la page produit Allbirds avec une barre autocollante expliquant les retours de cadeaux et un widget de discussion collant destiné au libre-service
Allbirds déplace les informations sur les retours de cadeaux ainsi que le chat du service client hors de ses pages produits. (Source de l'image: Allbirds) (Grand aperçu)

Dans ce cas, il comprend un widget de chat en libre-service en bas à droite sur lequel il faut cliquer pour ouvrir. Il place également des informations sur sa politique de retour actuelle dans une barre collante en haut, ce qui permet aux pages produits de se concentrer strictement sur les détails du produit.

3. Rendre les variantes de produits aussi faciles à sélectionner que possible

Pour certains produits, les acheteurs ne doivent prendre aucune décision autre que: "Est-ce que je veux ajouter cet article à mon panier ou non?"

Pour les autres produits, les acheteurs doivent définir des variantes de produits avant de pouvoir ajouter un article à leur panier. Lorsque tel est le cas, vous souhaitez rendre ce processus aussi simple que possible. Il y a quelques choses que vous pouvez faire pour vous assurer que cela se produit.

Supposons que le magasin que vous concevez vend des sous-vêtements pour femmes. Dans ce cas, vous devrez proposer des variantes telles que la couleur et la taille.

Mais vous ne voudriez pas simplement créer un sélecteur déroulant pour chacun. Imaginez à quel point cela deviendrait fastidieux si vous demandiez aux acheteurs de cliquer sur "Couleur" et qu'ils devaient trier une douzaine d'options. De plus, s'il s'agit d'un sélecteur déroulant standard, les nuances de couleurs peuvent ne pas apparaître dans la liste. Au lieu de cela, l'acheteur devrait choisir un nom de couleur et attendre que la photo du produit se mette à jour pour voir à quoi elle ressemble.

C'est pourquoi vos variantes doivent dicter la façon dont vous concevez chacune.

Prenons cette page produit de Thinx comme exemple:

Conceptions de variantes de produits Thinx
Les pages de produits Thinx incluent des variantes conçues pour la variante spécifique. (Source de l'image: Thinx) (Grand aperçu)

Il existe deux variantes disponibles sur cette page:

  • le variante de couleur montre une rangée d'échantillons de couleurs. Lorsque vous cliquez dessus, le nom de la couleur apparaît et la photo du produit s'ajuste en conséquence.
  • le variante de taille répertorie les tailles de extra-extra-petit à très extra-extra-large.

Remarquez comment la taille est accompagnée d'un lien vers le «tableau des tailles». En effet, contrairement à quelque chose comme la couleur qui est assez claire, le dimensionnement peut changer d'un magasin à l'autre ainsi que d'une région à l'autre. Ce tableau fournit des conseils clairs sur la façon de choisir une taille.

Désormais, Thinx utilise un bouton carré pour chacune de ses variantes. Cependant, vous pouvez le changer si vous souhaitez créer une distinction entre les choix que les acheteurs doivent faire (et c'est probablement le meilleur choix de conception, pour être honnête).

Kirrin Finch, par exemple, place ses tailles dans des boîtes vides et ses nuances de couleurs dans des cercles pleins:

Conception de page de produit Kirrin Finch avec sélecteurs de taille carrée et sélecteurs de couleur de cercle
Les pages produits de Kirrin Finch utilisent une conception de boîte vide pour les tailles et une conception de cercle rempli pour les couleurs. (Source de l'image: Kirrin Finch) (Grand aperçu)

C’est une petite différence, mais cela devrait être suffisant pour aider les acheteurs à passer en douceur de la décision à la décision et à ne manquer aucun des champs obligatoires.

Maintenant, disons que la boutique que vous construisez ne vend pas de vêtements. Au lieu de cela, il vend quelque chose comme des lits, qui n'incluront évidemment pas de choix tels que la couleur ou la taille. Du moins, pas de la même manière qu'avec les vêtements.

À moins que vous n'ayez des abréviations, des symboles ou des nombres bien connus que vous pouvez utiliser pour représenter chaque variante, vous devez utiliser un autre type de sélecteur.

Par exemple, il s'agit d'une page produit sur le site Web de Leesa. J'ai ouvert le sélecteur "Choisissez votre taille" afin que vous puissiez voir comment ces options sont affichées:

Page de produit du matelas Leesa qui affiche non seulement la taille mais le prix normal et le prix de vente correspondant pour chacun
Le site Leesa présente les tailles de matelas ainsi que les prix de vente correspondants. (Source de l'image: Leesa) (Grand aperçu)

Pourquoi s'agit-il d'une liste déroulante par opposition à des boîtes?

Pour commencer, les noms de taille ne sont pas de la même longueur. Ainsi, les sélecteurs de boîte seraient de taille incohérente ou certains d'entre eux auraient une tonne d'espace blanc en eux. Cela n'aurait vraiment pas l'air bien.

De plus, Leesa utilise judicieusement ce petit espace pour fournir plus d'informations sur chaque taille de matelas (c'est-à-dire le prix normal par rapport au prix de vente). Donc, non seulement c'est la meilleure conception pour ce sélecteur de variantes, mais c'est aussi un excellent moyen d'être efficace avec la façon dont vous présentez de nombreuses informations sur la page du produit.

Remarque sur les variantes en rupture de stock

Si vous souhaitez éliminer toutes les frictions liées à cette partie du processus d'achat en ligne, assurez-vous de proposer une conception distincte pour les variantes en rupture de stock.

Voici à nouveau un examen plus approfondi de l'exemple de Kirrin Finch:

Chemise Kirrin Finch en «Pink Floral» est en rupture de stock dans les tailles 0, 2, 4, 6, 12, 14, 16, 18, 20 et 22
Une chemise en «Pink Floral» sur le site de Kirrin Finch a un certain nombre de tailles qui sont en rupture de stock. (Source de l'image: Kirrin Finch) (Grand aperçu)

Il n'y a aucun doute sur les options disponibles et celles qui ne le sont pas).

Bien que certains acheteurs puissent être frustrés lorsqu'ils réalisent que la couleur de chemise qu'ils aiment n'est disponible que dans quelques tailles, imaginez à quel point ils seraient ennuyés s'ils ne l'apprenaient pas avant après ils ont sélectionné toutes leurs variantes?

Si la sélection de produits est la dernière étape à franchir avant de cliquer sur "Ajouter au panier", ne leur cachez pas ces informations. Tout ce que vous ferez, c’est susciter l’espoir d’un produit qu’ils ont pris le temps de lire, de regarder et de tomber amoureux… pour constater qu’il n’est pas disponible en taille «16» avant qu’il ne soit trop tard.

Emballer

Que disent-ils? Un bon design est invisible?

C’est ce dont nous devons nous souvenir lors de la conception de ces interfaces utilisateur clés pour les sites Web de commerce électronique. Bien sûr, la boutique de votre client doit être attrayante et mémorable… Mais les éléments de l'interface utilisateur qui déplacent les acheteurs sur le site ne doivent pas les interrompre. Ainsi, la simplicité et la facilité d’utilisation doivent être votre priorité absolue lors de la conception du parcours principal des acheteurs de votre client.

Si vous souhaitez mettre ces philosophies de conception d'interface utilisateur au service de nouveaux clients, envisagez de rejoindre le programme de partenariat Shopify en tant que développeur de magasin. Là, vous pourrez générer des revenus récurrents en créant de nouveaux magasins Shopify pour les clients ou en migrant des magasins d'autres plates-formes de commerce vers Shopify.

Éditorial fracassant(rail)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *