10 astuces pour concevoir une superbe vitrine Web

Les entrepreneurs et les détaillants physiques qui cherchent à se développer dans les achats en ligne ont plus d'options que jamais à leur disposition, mais ils ont également davantage de considérations relatives au site Web et d'options techniques à déchiffrer. Pour créer une vitrine Web efficace, il reste des fournisseurs clés en main, tels que Wix Stores, qui peuvent rendre votre présence initiale rapide et simple. Mais ceux qui tiennent vraiment à développer leurs activités en ligne constateront que leurs besoins évoluent assez rapidement au-delà de ces services clés en main.

Il faut répondre à de nombreuses questions avant que quoi que ce soit n'apparaisse réellement dans le cyberespace, et bien plus encore à mesure que l'entreprise évolue. La collecte de données sur les clients est un bon exemple et une question majeure aujourd’hui, en particulier pour les magasins qui souhaitent accéder aux marchés européens. La conversion des devises et les différentes lois sur le commerce électronique restent des problèmes épineux sur ces marchés, mais vous devez maintenant traiter également du règlement général sur la protection des données (GDPR), qui nécessite un processus de traitement beaucoup plus minutieux pour les données des clients.

La sécurité des transactions est une autre question clé, car elle implique un équilibre entre le besoin de sécurité des clients et le nombre de cerceaux que vous devrez leur faire franchir avant de pouvoir effectuer un achat. Et quelles que soient les décisions que vous prenez pour votre site Web standard, vous aurez besoin des mêmes discussions pour son itération mobile. Parce que, bien que la mobilité fût certainement l’un des mots à la mode de l’année dernière, les 12 mois supplémentaires n’ont nullement diminué son importance.

La pensée actuelle indique que les créateurs Web doivent d'abord concevoir l'expérience mobile, puis ajuster l'expérience de bureau en fonction des besoins.

"Chaque élément, chaque élément de contenu doit être fonctionnel sur mobile", a déclaré Jimmy Rodriguez, directeur de l'exploitation chez 3dcart. "Si vous partez de zéro, vous concevez pour mobile. Grâce à un design réactif, vous pouvez créer le site Web pour qu'il démarre sur mobile, puis l'amenez-le sur le bureau."

Pour vous aider à concevoir votre vitrine de commerce électronique à la fois pour les utilisateurs mobiles et les utilisateurs de bureau, nous avons compilé les 10 conseils importants ci-dessous. Cependant, Rodriguez recommande aux entreprises, avant d’intégrer certaines d’entre elles dans leurs vitrines, de tester ces fonctionnalités sur des pages de produits spécifiques pour voir comment elles se comportent avant de les déployer sur l’ensemble du site Web.

1. Navigation en-tête collante

Nous sommes tous passés par là: nous avons défilé jusqu'au bas d'une page de produit pour lire les critiques des utilisateurs ou les détails du produit. Nous sommes maintenant prêts à quitter la page pour revenir au menu afin de continuer notre parcours d'achat. Malheureusement, pour revenir au menu, nous avons généralement dû cliquer sur le bouton "Page précédente" de nos claviers de bureau ou appuyer en haut de l'écran sur nos appareils mobiles.

Avec les Sticky Headers, lorsque vous faites défiler l'écran, le menu est redimensionné et ajusté. Le menu vous suit tout au long de votre parcours pour conserver la navigation à l'écran si vous avez besoin de passer rapidement d'une page à l'autre. Vous pouvez voir cela en vigueur sur Bose.com. Bien que vous vous trouviez au milieu de la page, vous pouvez toujours accéder à la navigation principale de la page sans avoir à retourner en haut de l'écran.

2. Menus Hamburger

Bien que les menus Hamburger semblent être une fonctionnalité idéale pour les restaurants à service rapide, ils deviennent rapidement un incontournable pour les entreprises qui font de nombreuses affaires sur les appareils mobiles. Vous les avez déjà vus: les menus Hamburger sont devenus l’icône standard des mobiles pour la navigation et les menus pour mobiles.

Ils comportent trois lignes horizontales qui, lorsqu'elles sont pressées, offrent un menu déroulant de la navigation d'un site Web. Ils sont particulièrement utiles sur les appareils mobiles où l’écran d’affichage est rare. Mais nous commençons également à les voir sur les sites Web de bureau, de sorte que les consommateurs ont une expérience similaire sur les sites Web des entreprises, quel que soit le périphérique utilisé.

"Beaucoup de gens voient les Hamburger Menus et savent ce que cela signifie, mais ils ne savent pas que c'est fondamentalement la nouvelle norme", a déclaré Rodriguez. "Les visiteurs mobiles ont appris la signification de ce symbole et les sites Web devraient l'appréhender comme un standard pour la navigation mobile."

Vous pouvez voir un menu Hamburger dans le coin supérieur droit de Target.com et sur le site Web mobile de Target. Vous pouvez également voir la photo ci-dessous.

3. Défilement parallèle

Moins de fonctionnalité et plus d’amélioration de l’esthétique de votre site Web, Parallax Scrolling profite des grandes bannières remplies d’images haute résolution pour ajouter une touche artistique à votre site Web. En tirant parti des grandes images pleine largeur, vous pouvez créer un effet de déplacement entre l'image d'arrière-plan de votre site Web et l'image directement devant votre consommateur.

Comme vous pouvez le voir dans l'image ci-dessous de RimmelLondon.com, lorsque vous faites défiler la page, les images d'arrière-plan du site Web changent. Cependant, le changement se produit subtilement lorsque l'arrière-plan et les images au premier plan se confondent. La capture d'écran ci-dessous montre le site Web au moment où l'image d'arrière-plan passe du violet au rose.

4. Défilement infini

Infinite Scrolling sonne plus comme une technique de torture que comme une fonctionnalité de commerce électronique. Cependant, cet outil astucieux permet à vos utilisateurs de visualiser en permanence de nouveaux produits sans avoir à cliquer et à charger une nouvelle page. Voici comment cela fonctionne: lorsque vous faites défiler l'écran vers le bas d'une page de commerce électronique, celle-ci charge automatiquement plus d'éléments au bas de la page. Ils sont toujours catalogués sous forme de pages au verso, mais le visiteur ne le sait pas.

Vous pouvez voir une fonctionnalité similaire sur UnderArmour.com. Malheureusement, Under Armour vous oblige à cliquer sur le bouton "Charger plus" pour voir du contenu supplémentaire. Certains sites Web sont équipés d’un mécanisme d’ouverture automatique qui vous permet d’afficher plus de contenu sans clic.

5. Un bouton "Ajouter au panier" flottant

Semblable à l'outil Sticky Navigation, les boutons flottants "Ajouter au panier" permettent à vos clients d'ajouter des produits à leur panier, quel que soit leur emplacement sur la page du produit. Auparavant, les utilisateurs faisaient défiler les commentaires des utilisateurs, les détails du produit et d’autres éléments de page inférieure et, pour pouvoir ajouter le produit à leur panier, ils devaient revenir au haut de la page. Désormais, des sociétés telles que Diesel.com vous permettent de visualiser le prix, la quantité, les options de couleur et l'image du produit, ainsi que le bouton "Ajouter au panier", où que vous vous trouviez sur la page du produit.

6. Appliquer la loi de Fitts

Nous ne vous ennuierons pas avec les mathématiques derrière la loi de Fitts, mais c'est essentiellement une théorie selon laquelle plus un objet est grand et proche de nous, plus nous avons de chances d'interagir avec lui. Le même principe de base peut être appliqué au commerce électronique. Si vous souhaitez guider les utilisateurs vers les pages de produits, les paniers et les promotions, vous devez créer des boutons de grande taille, colorés et aussi proches que possible du centre-centre de la page.

Si vous ignorez la loi de Fitts et que vous placez de minuscules boutons en noir et blanc le long des rails ou au bas des pages, vous risquez de perdre des acheteurs potentiels. Ne fais pas cette erreur.

7. Afficher les avis clients et les témoignages

Vous ne voulez pas que les clients visitent votre site Web, consultent vos produits, puis se rendent sur Amazon.com pour consulter les avis des utilisateurs. Après tout, Amazon.com peut vendre le produit moins cher ou le client peut préférer l'expérience d'achat Amazon.com à celle de votre site Web.

Si vous donnez à vos clients la possibilité d'évaluer et de réviser les produits, vous serez alors en mesure de repousser les clients prudents qui ont besoin de l'assurance de l'opinion des autres consommateurs avant de faire un achat. La plupart des outils de commerce électronique facilitent l’implémentation des évaluations et des commentaires, alors n’hésitez pas à appliquer cette pratique.

8. Un service clientèle efficace

S'engager avec votre client est essentiel au succès de la vente au détail, et ce n'est nulle part aussi facile et efficace que le centre de service à la clientèle. Prendre soin d'un client en colère, insatisfait ou même tout simplement dérouté est l'un des moyens les plus sûrs de faire des affaires. Les applications actuelles du centre de services et du service d'assistance simplifient plus que jamais. L’utilisation de l’une de ces applications permet non seulement d’organiser les demandes des clients, mais également de saisir les données sur les clients et les réponses générées par ces rencontres et de les acheminer vers vos moteurs de gestion de la relation client (CRM), de marketing et d’analyse commerciale. Cela vous permet de surveiller de plus près ce que les clients pensent de votre magasin et de ses produits.

L'emplacement de vos points d'ancrage et points de contact du service client est important pour l'expérience client globale. Et si cette interaction prend la forme d'une simple page de contact ou va jusqu'à ouvrir une fenêtre de discussion avec toute personne restant sur le site pendant plus de 60 secondes, cela dépend des types de produits que vous vendez et de la statistiques moyennes sur les visites de sites Web pour votre magasin.

Mais réussir un centre de service à la clientèle est plus qu’un logiciel. Vous devez vous assurer qu'un professionnel est là pour traiter ces demandes, sinon c'est un investissement gaspillé. Les clients qui ont pris la peine de cliquer sur un bouton "Contacter le service clientèle" s'attendent à obtenir de l'aide en direct d'un humain. Vous pouvez gérer cela par téléphone ou par chat instantané, une fonctionnalité de plus en plus utilisée par les fournisseurs de service d’assistance. Et si vous êtes à court de personnel, vous pouvez gérer votre service client à l'aide de chatbots intelligents qui ont un "son" humain, tout en étant en mesure de gérer un déluge de demandes entrantes à un niveau élémentaire, en ne transmettant que les demandes plus complexes sapiens.

9. Breadcrumb Checkout

Lorsque les clients quittent votre magasin, ils aiment savoir où ils se trouvent, combien ils sont en train de finir et comment revenir facilement sans perdre toutes les données déjà entrées. Breadcrumb Checkout indique au client où il en est exactement dans le processus en utilisant une conception de bouton de navigation linéaire qui permet aux clients de cliquer en avant et en arrière à partir de la connexion, des options de paiement, des options d'expédition, de la commande ou de la poursuite des achats. Sans cette présentation, les consommateurs peuvent appuyer sur le bouton Précédent pour vérifier que leurs informations ne sont pas enregistrées, être frustrés, puis quitter le site Web.

10. Vues à 360 degrés

Avez-vous déjà acheté une veste apparemment modeste en ligne uniquement pour vous rendre compte que son dos était orné de strass ébloui? Lorsque vous avez renvoyé ce produit, vous avez perdu votre temps et celui du fournisseur, et vous avez coûté de l'argent à l'entreprise. Ne t'inquiète pas, ce n'était pas ta faute. Plus que probablement, le vendeur n'avait que des images de la veste en vue de face et de côté. Si le fournisseur avait proposé des images avec vue à 360 degrés, vous auriez repéré ces strass et cliqué sur le bouton Annuler la commande.

Ne faites pas cette même erreur sur votre propre site web. En plus de permettre aux clients d’agrandir les images, donnez-leur la possibilité de faire pivoter ou d’afficher plusieurs angles de l’image, comme le fait Kenneth Cole.com. De cette façon, ils ne sont pas surpris quand ils ouvrent la boîte de livraison et sortent un produit auquel ils ne s'attendaient pas.