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

À propos de l'auteur

Suzanne Scacca est une ancienne réalisatrice, formatrice et directrice d'agence WordPress qui travaille maintenant comme rédactrice indépendante. Elle se spécialise dans l'artisanat marketing, web…
En savoir plus sur
Suzanne
Scacca
…

Lorsque vous envisagez de faire passer les acheteurs dans l'e -les sites de commerce que vous créez, vous vous attendez plus ou moins à ce qu'ils suivent ce parcours:

• Étape 1: Entrez sur la page d'accueil ou une page de catégorie.
• Étape 2: Utilisez les éléments de navigation pour vous orienter se rendre au 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 de votre choix à leur panier.
• Étape 5: Départ.

Ils pourraient subir des écarts en cours de route (comme l'exploration de produits associés , parcourir différentes catégories et enregistrer des articles dans une liste de souhaits pour un jour pluvieux ay). Mais, pour la plupart, c'est la principale voie que vous développez et c'est celle qui sera la plus fréquentée.

Cela étant le cas, il est particulièrement important pour les concepteurs de se concentrer sur les éléments d'interface que les acheteurs rencontrent le long de ce voyage. S'il y a des frictions au sein de l'interface utilisateur, vous ne verrez pas seulement une augmentation des écarts inattendus par rapport au chemin, mais aussi plus de rebonds du site.

C'est donc sur quoi le post suivant va se concentrer: Comment faire Assurez-vous que l'interface utilisateur tout au long du parcours de l'acheteur est attrayante, intuitive, attrayante 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éer une navigation multiforme qui suit les acheteurs

Il fut un temps où les sites 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 en dessous les en-têtes de catégories principales. Par exemple, voici comment United By Blue le fait:

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». [19659012] Les seules exceptions sont les catégories «Nouveautés» et «Masques et revêtements de visage» qui sont 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).

Revenant sur le site, voyons comment le concepteur a pu organiser le site mobile: [19659024] 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 auraient besoin de pincer et de zoomer ici, nous voyons un menu adapté à l'écran mobile.

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

Sur la page de 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 des couches de catégories), la page de résultats du produit aura besoin 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 produits sur le site Horne :

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. [19659012] Cette conception peu encombrante vous permet d'afficher plus de produits à la fois et est également un choix plus adapté aux mobiles:

Gardez à l'esprit que la cohérence dans la conception de l'interface utilisateur est importante pour les acheteurs, d'autant plus que beaucoup d'entre eux adoptent 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 dans le processus.

Fil d'Ariane et Recherche

À mesure que les acheteurs se dirigent plus profondément vers un site de commerce électronique, ils peut 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 produits, comme le fait tentree :

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 devrait toujours être disponible, quel que soit le moment du voyage 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 alimentée par 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:

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 de 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 seule est un énorme point de friction pour de nombreux acheteurs et, malheureusement, trop Les 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 leur panier en ligne à cause des frais d'expédition et 36% le font à cause de la façon dont .

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,
• Et ainsi de suite.

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

Présentez le pas de 30 secondes au-dessus du pli

C'est ce dont Vitaly parlait. 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 qu'il y a dans cet espace.

Bluebella par exemple, a un design peu encombrant qui ne compromet pas la lisibilité:

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

D'après la façon dont cela est conçu, vous pouvez voir que les détails les plus importants sont:

• Nom du produit;
• Prix du produit;
• Sélecteur de taille du produit;
• Boutons Ajouter au panier et liste de souhaits;
• Informations sur la livraison et le retour (qui apparaissent clairement sur une seule ligne).

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

S'il y a d'autres détails importants, les acheteurs pourraient avoir besoin de se décider – comme des critiques de produits ou un guide des tailles – créer des liens dans ce qui précède – le pli qui les déplace vers les sections appropriées plus bas sur 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 diapason 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 ventes supplémentaires et des éléments de marketing tels que des fenêtres contextuelles, Les widgets de chat et bien plus encore peuvent devenir tout aussi ennuyeux que de longues pages de produits.

Assurez-vous donc de les conserver à l'écart, comme le fait Partake :

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. Lorsqu'il est ouvert, il invite les acheteurs à rejoindre le programme de fidélité.

Ces deux widgets ne s'ouvrent que lorsqu'on clique dessus.

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

Dans ce cas, il comprend un widget de chat en libre-service en bas à droite sur lequel il faut cliquer pour ouvert. 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 produit 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. Vous pouvez faire certaines choses pour que cela se produise.

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 chacune. 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 devraient dicter la façon dont vous concevez chacune.

Utilisons ce produit page de Thinx à titre d'exemple:

Deux variantes sont disponibles sur cette page:

• La variante de couleur montre une rangée de Échantillons de couleurs. Lorsque vous cliquez dessus, le nom de la couleur apparaît et la photo du produit s'ajuste en conséquence.
• La variante de taille répertorie les tailles allant de extra-très 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.

Maintenant, 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 échantillons de couleur dans des cercles pleins:

C'est une petite différence, mais cela devrait être suffisant pour aider les acheteurs à passer en douceur d'une décision à l'autre et à ne rien manquer les champs obligatoires.

Maintenant, disons que le magasin 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 devriez utiliser un autre type de sélecteur.

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

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

Pour commencer, les noms de tailles ne le sont pas 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 particulier, 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.

Une note sur les variantes en rupture de stock [19659018] Si vous souhaitez éliminer toute friction de 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: [19659118] 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 « />

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

Bien que certains acheteurs puissent être frustrés lorsqu'ils se rendent compte 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 qu'ils font avant de cliquer sur «ajouter au panier», ne leur cachez pas ces informations. Tout ce que vous ferez est de susciter leurs espoirs pour un produit qu'ils ont pris le temps de lire, de regarder et de tomber amoureux… seulement pour constater qu'il n'est pas disponible en taille «16» jusqu'à ce qu'il soit trop tard.

Conclusion

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 Shopify Programme de partenariat 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 vos clients ou en migrant des magasins d'autres plates-formes commerciales vers Shopify.

(ra, il)