Conseils de conception Shopify et meilleures pratiques UX

Publié: 2022-03-11

Shopify alimente plus d'un demi-million d'entreprises de commerce électronique dans 175 pays. Depuis 2012, le nombre de marchands sur la plate-forme Shopify a augmenté en moyenne de 74 % par an, et ces marchands ont réalisé plus de 55 milliards de dollars de ventes, Shopify étant l'une des plates-formes de commerce électronique les plus connues et les plus faciles à utiliser aujourd'hui.

Concevoir pour Shopify peut être très lucratif pour les designers.

Avec Shopify prenant en charge les domaines, l'hébergement, tout le back-end et certaines fonctionnalités frontales, plus de temps, d'argent et de ressources peuvent être consacrés à la conception UX. D'ici 2021, les ventes de commerce électronique dans le monde devraient atteindre un nouveau sommet de 4,9 billions de dollars, et avec une conception UX de qualité inférieure étant l'un des plus grands contributeurs aux caisses abandonnées, il est plus que clair que la mise en œuvre des meilleures pratiques de commerce électronique continuera de s'avérer très efficace.

Dans cet article, nous explorerons les meilleurs conseils de conception Shopify.

Quelles sont les fonctionnalités de Shopify ?

Shopify est livré avec toutes les fonctionnalités que vous attendez d'une plateforme de commerce électronique de premier plan :

  • Intégration avec des passerelles de paiement externes, telles que Stripe et PayPal
  • Accès à Shopify Payments, sans frais par rapport aux options externes
  • La possibilité d'autoriser le paiement par carte-cadeau ou crédit en magasin
  • Une page de paiement personnalisable (uniquement pour les clients Shopify Plus)
  • L'option de comptes d'utilisateurs ou de paiement en tant qu'invité
  • Pages statiques (par exemple, Politique de confidentialité ou Conditions générales)
  • Landing pages avec contenu promotionnel
  • Accès par mot de passe pour les magasins en développement
  • Variantes de produits avec une gamme d'options personnalisables
  • Collections intelligentes pour automatiser la catégorisation des produits
  • Fonctionnalité de recherche et de marquage pour faciliter la découverte de produits
  • Fonctionnalité de blog avec la possibilité d'intégrer des produits dans des publications
  • Une API pour aider les développeurs à créer des sites Web dynamiques et des applications mobiles

Stimuler la découverte de produits de commerce électronique

Semblable à la façon dont les magasins physiques sont organisés par département afin que les clients puissent localiser des articles spécifiques en demandant à un membre du personnel, les acheteurs en ligne doivent pouvoir parcourir, filtrer et rechercher afin de trouver facilement et facilement ce qu'ils recherchent. rapidement .

40 % des clients e-commerce abandonnent les sites Web dont le chargement prend plus de 3 secondes, ce qui indique à quel point ils sont impatients lorsqu'il s'agit de découvrir des produits. Heureusement, Shopify dispose d'un certain nombre de fonctionnalités qui facilitent la création d'une navigation personnalisée, l'organisation des produits et des catégories et la mise en œuvre de la fonctionnalité de recherche.

Navigation personnalisée

Présenter trop d'options au client peut entraîner une paralysie de l'analyse (lorsqu'il y a trop d'options disponibles pour prendre efficacement une décision, il en résulte de la frustration et de l'abandon). En concevant une navigation personnalisée, nous pouvons hiérarchiser les produits et les « collections » qui convertissent le plus efficacement, par exemple en affichant visiblement la collection « Desk » si les produits de bureau sont les plus populaires. Ces navigations personnalisées peuvent également être modifiées dans le CMS Shopify pour permettre des tests A/B occasionnels.

Visuellement parlant, les thèmes Shopify les mieux convertis affichent clairement le titre de la collection et utilisent suffisamment d'espace pour aider l'utilisateur à identifier facilement ce qu'il recherche parmi tous les produits, collections et pages proposés.

Conseil de conception Shopify : pensez à utiliser des navigations personnalisées
Boutique Shopify de Grovemade, utilisant une navigation optimisée.

Collections

Une collection est un groupe organisé de produits similaires. Les produits peuvent être triés manuellement dans des collections ou ils peuvent être automatiquement triés en fonction de critères correspondants (par exemple, si le titre du produit contient un certain mot-clé, s'est vu attribuer une certaine étiquette ou s'inscrit dans une fourchette de prix particulière). Les collections peuvent également être temporaires (c'est-à-dire saisonnières ou pour une vente à durée limitée) garantissant que les conceptions de sites Web Shopify sont toujours pertinentes, opportunes et, surtout, hautement convertissantes.

Bien que ces collections soient définies en arrière-plan, il est utile que les concepteurs de commerce électronique soient conscients de cette fonctionnalité lors de la conception pour Shopify.

Étiquettes de produit

Les balises affichées/visibles aident les clients à trouver des produits similaires et, comme mentionné ci-dessus, elles peuvent également être utilisées en interne pour créer des collections. Cependant, le plus grand avantage des balises réside dans le fait qu'elles peuvent être utilisées pour créer une recherche à facettes , permettant aux clients de filtrer les produits en fonction d'un attribut de définition balisé tel que "Jaune".

Conseil de conception Shopify : utiliser le système de balises Shopify
Attribution de balises aux produits sur la plateforme Shopify.

Gardez à l'esprit ces conseils de conception Shopify :

  • Pour plus de précisions, indiquez les filtres appliqués.
  • Autorisez les clients à supprimer les filtres afin d'élargir leur recherche.
  • Tronquez les filtres pour n'afficher que les plus populaires au premier coup d'œil.

Meilleure conception du site Web Shopify avec des balises et des filtres tronqués
Filtrage efficace des produits à l'aide de balises. Boutique Shopify par Pure Cycles.

Rechercher

La fonctionnalité de recherche est utile pour les clients qui savent exactement ce qu'ils recherchent et est particulièrement importante pour les acheteurs mobiles qui trouvent la navigation et le filtrage frustrants en raison de la gêne naturelle de l'interaction sur un appareil mobile.

Voici les meilleures pratiques Shopify à prendre en compte lors de la conception d'expériences de recherche :

  • Ne masquez jamais le champ de recherche ; réduire les frictions en les rendant immédiatement disponibles.
  • Placez la recherche là où les clients s'attendent à ce qu'elle soit (c'est-à-dire en haut à droite ou centralisée).
  • Afficher la zone de saisie entière, pas seulement l'icône de recherche.
  • Intégrez la fonctionnalité de saisie semi-automatique pour aider les utilisateurs à effectuer des recherches plus rapidement.
  • Concevez pour l'erreur humaine en utilisant les résultats suggérés et la correction automatique.
  • Enregistrez les recherches d'utilisateurs et envoyez des e-mails de suivi si aucune vente n'a été effectuée.

Améliorez la conception de la boutique Shopify en concevant de meilleures expériences de recherche
Une recherche complète mais bien structurée par Sunday Somewhere.

Meilleures pratiques Shopify pour les pages de produits

Shopify offre toutes les fonctionnalités nécessaires pour attirer les acheteurs de commerce électronique et guider facilement les utilisateurs directement à la caisse. Si nous combinons ces fonctionnalités avec les meilleures pratiques de commerce électronique, nous pouvons pousser le nombre de caisses abandonnées en dessous de la statistique moyenne.

Utilisez des images de produits captivantes

Ce qui fait un bon site Web de commerce électronique, ce sont des images qui captivent émotionnellement les utilisateurs. À cette fin, Shopify permet de télécharger plusieurs images et variantes de produits. Néanmoins, en tant que meilleure pratique Shopify, affichez au moins une de ces images de produit à l'échelle (c'est-à-dire entourée d'autres objets pour illustrer la taille du produit) pour définir les attentes.

Les clients veulent mener une enquête approfondie sur le produit avant de s'engager à l'acheter pour s'assurer que toutes les images du produit sont vives, de haute qualité et zoomables.

Conseil de conception Shopify : les magasins Shopify avec de superbes images convertissent mieux
Une page produit visuellement captivante par Hardgraft.

Afficher des informations claires sur le produit

Un nombre choquant (mais pas surprenant) de clients du commerce électronique abandonnent leur panier en raison d'un manque d'informations sur le coût réel. 60 % des clients citent des coûts imprévus (par exemple, l'expédition, les taxes, les frais) comme raison de l'abandon du panier, et 23 % sont incapables de calculer le coût total à l'avance. Le manque de transparence est un moyen infaillible de bloquer les conversions sur les sites Web de commerce électronique, alors gardez à l'esprit ces conseils et astuces Shopify :

  • Utilisez des techniques de divulgation progressive pour structurer clairement les informations.
  • Affichez une ventilation complète des coûts à l'avance.
  • Communiquez explicitement la proposition de valeur.
  • Faites en sorte que le bouton acheter maintenant/ajouter au panier soit visuellement distinctif.

Une boutique Shopify bien conçue
Luxy Hair utilise une conception soignée de la présentation des produits pour clarifier les informations importantes.

Bâtir la confiance et rassurer

Selon l'Institut Baymard, le manque de confiance est cité comme la raison pour laquelle 19 % des clients abandonnent à la caisse. Heureusement, tous les magasins Shopify sont livrés avec SSL (paiement sécurisé) par défaut, mais ils permettent également aux clients de laisser des avis comme preuve sociale.

La preuve sociale est un moyen indéniable de faire monter en flèche les conversions en renforçant la confiance sur les sites de commerce électronique . Selon BrightLocal, 88 % des consommateurs font autant confiance aux avis en ligne qu'à une recommandation personnelle. Il est donc essentiel d'inciter les clients précédents à laisser des avis et de l'indiquer dans le parcours client. La plupart des thèmes Shopify tirent également parti du balisage Schema pour intégrer ces évaluations directement dans les résultats de recherche.

Une boutique Shopify utilisant des avis sur les produits dans le cadre des meilleures pratiques de Shopify
Mise en place de revues de produits. Boutique Shopify par MVMT Watches.

Outre la validation sociale, envisagez de renforcer la confiance des clients en mettant en œuvre une solution de chat en direct telle qu'Intercom, Zendesk, Drift ou Kayako. Shopify permet l'intégration avec des services tiers via leur boutique d'applications et via une installation manuelle.

Afficher les recommandations de produits connexes

Toutes les grandes entreprises de commerce électronique tirent parti des stratégies de vente croisée et de vente incitative. Les balises, combinées à des intégrations d'analyse et de test A/B telles que les recommandations Web d'Optimizely, peuvent aider les concepteurs à donner aux entreprises les moyens d'améliorer les taux de conversion en affichant des éléments alternatifs ou supplémentaires susceptibles d'intéresser les clients.

Les thèmes Shopify qui convertissent le mieux utilisent des stratégies de vente croisée et de vente incitative
Hardgraft utilise des stratégies de vente incitative convaincantes.

Intégrez la personnalisation de l'expérience d'achat

Des intégrations telles que les personnalisations Web par Optimizely, en combinaison avec les collections et les balises Shopify, permettent aux entreprises axées sur les données de segmenter les audiences en fonction de leurs intérêts et de l'historique des achats précédents et de modifier le contenu de la page en conséquence.

Grâce à des techniques de conception anticipatives, les magasins Shopify peuvent afficher un contenu plus pertinent, en gardant le public engagé plus longtemps et donc plus susceptibles de se convertir en vente. La personnalisation est essentielle pour améliorer les résultats financiers de toute entreprise de commerce électronique.

Optimisation de la caisse

Paiement en tant qu'invité vs comptes clients

Selon l'Institut Baymard, « le site voulait que je crée un compte » est la deuxième raison la plus courante (35 %) pour laquelle les clients abandonnent leur paiement sans rien acheter. Shopify recommande d'autoriser le paiement en tant qu'invité (en particulier sur mobile), et à cette fin, c'est l'option par défaut de désactiver les comptes clients.

Shopify
Shopify autorise à la fois les comptes clients et le paiement en tant qu'invité.

Identifier les défauts UX et réduire les abandons

Tenter de résoudre les caisses abandonnées sans analyse robuste est aussi efficace que de chercher un chat noir dans une pièce sombre. L'optimisation des expériences utilisateur et des flux de paiement fonctionne mieux lorsqu'il s'agit d'un processus basé sur les données.

Les concepteurs de Shopify peuvent connecter Google Analytics à Shopify et configurer un entonnoir d'objectifs qui, une fois que suffisamment de données ont été collectées, illustrera exactement où les clients décident de ne pas poursuivre leur achat.

Visualisation de l'entonnoir d'objectifs à l'aide de Google Analytics pour analyser les thèmes Shopify les plus convertissants
Visualisation de l'entonnoir d'objectifs à l'aide de Google Analytics, par Patrick Han.

Pour de meilleurs résultats, intégrez Shopify à des outils tels que Crazy Egg, Hotjar et FullStory pour observer ces zones problématiques plus en détail à l'aide de cartes thermiques et d'enregistrements de visiteurs.

Conclusion

Pour que les concepteurs puissent mieux communiquer les avantages et les capacités de la plate-forme Shopify et savoir quelles solutions elle peut et ne peut pas fournir aux clients, il est préférable d'ouvrir une boutique de démonstration gratuite. De plus, les meilleurs concepteurs de commerce électronique peuvent devenir des experts Shopify enregistrés, ce qui ajoute plus de crédibilité à leur CV en tant que concepteur de site Web Shopify.

• • •

Pour en savoir plus sur le blog Toptal Design :

  • Lisez le blog Shopify pour plus de trucs et astuces Shopify.
  • eCommerce UX - Stratégies et principes de conception essentiels
  • UX eCommerce pour l'expérience mobile
  • Comment attirer les acheteurs de commerce électronique grâce à la conception UX
  • Conception réactive - Meilleures pratiques et considérations