Le webdesign et l’UX design pour convertir sur un site e-commerce

Le webdesign et l’UX Design font partie intégrante d’un site e-commerce, au même titre que le trafic et les conversions. Pourtant, un beau design ne rapporte pas systématiquement des ventes. En effet, votre site e-commerce peut générer du trafic, mais avoir un taux de conversion faible et souvent un taux de rebond élevé. Alors pourquoi les internautes ne terminent-ils pas leur procédure d’achat sur votre site e-commerce ? 

Pour pallier ce problème, le webdesign doit intégrer une approche user centric, donc se centrer sur l’expérience de l’utilisateur. Dans cet article, on vous présente concrètement les actions et les changements que vous devez effectuer sur votre site : du design de l’interface graphique jusqu’à l’organisation de vos catégories ou de votre menu.

1) Webdesign de votre site e-commerce : les erreurs à éviter

UI est l’abréviation d’user interface ou interface utilisateur. L’UI design se rapporte donc à l’environnement graphique dans lequel évolue l’utilisateur de votre site e-commerce.

Votre webdesign est mal conçu 

Travailler votre branding et votre identité visuelle est primordial pour obtenir un site unique et un design attractif. C’est la première chose que l’on voit en arrivant sur votre site. Par conséquent, si le webdesign ne semble pas professionnel, il y a de fortes chances que l’utilisateur vous juge de mauvaise qualité et quitte tout de suite la page.

Votre entreprise a besoin d’une image forte pour être reconnue et identifiée immédiatement par vos prospects. Se doter d’une identité visuelle impactante va le permettre. Parfois une refonte graphique par une agence qualifiée et un webdesigner peut être la solution pour moderniser votre interface. 

De plus, le design doit être cohérent : adapté non seulement à votre secteur d’activité mais à votre cible (UI Design), à travers : 

• un logo professionnel et unique 
• des polices d’écriture lisibles (pas trop petites, privilégiez les polices classiques)
• une harmonie entre les teintes (pas de couleurs vives sur fond noir par exemple)
• l’apparence des liens (soulignés et changeant de couleur au survol) 
• un design aéré (laisser des espaces)
• l’utilisation d’icônes (panier, wishlist…)
• des Call-to-action bien visibles (jouez avec les contrastes de couleur et les verbes d’action)

Votre webdesign n’est pas responsive 

Le Responsive Design représente l’ensemble des outils qui permettent aux sites web de s’adapter à la taille de l’écran de l’internaute. Autrement dit, votre site est consultable sous des formes différentes, que l’on utilise un ordinateur, une tablette ou encore un smartphone pour les mobinautes. De nos jours, avoir un site mobile first est indispensable.

Votre site doit pouvoir s’adapter lui-même aux différentes résolutions d’écrans… et donc son contenu aussi !

L’enjeu est de taille car les sites responsive sont mieux classés sur Google et 53 % des pages web sont vues à partir d’un téléphone.

Cependant le graphisme du site web ne suffit pas ! Un beau design fera peut-être une bonne première impression mais si l’utilisabilité du site est mauvaise, vos visiteurs fuiront. Votre site web se doit d’être esthétique ET fonctionnel. Pour ce faire, il est indispensable de fournir une expérience utilisateur de qualité.

Une mauvaise accessibilité numérique

Chaque individu, quel qu’il soit et dans tous types de conditions matérielles et géographiques, doit pouvoir idéalement accéder aux contenus d’un site web. L’accessibilité numérique est devenue une norme. 

Entre autres, quelques éléments peuvent vous aider à améliorer l’accessibilité numérique.

• suffisamment de contraste de couleur pour être lisible
• des éléments assez gros : boutons, textes, icônes…
• un texte alternatif sur vos images 

De plus, vous devez fournir un contenu éditorial structuré. L’ergonomie éditoriale vous permet de valoriser votre contenu et de vous assurer que vos internautes le lisent et trouvent les informations rapidement. 

Une bonne structure éditoriale passe par :

• l’utilisation de balises H1, H2, HN : pas de chevauchement ou de sauts de niveaux sur vos titres 
• une bonne utilisation des éléments structuraux des pages
• une structure consistante pour la navigation

Ne pas optimiser les images pour le web

Les images sont essentielles dans un site e-commerce. Elles permettent aux prospects de se faire une idée du produit ou du service. Vous pouvez soigner votre webdesign autant que vous voulez mais vos efforts seront vains si vos images ne sont pas adaptées. 

Premièrement, le poids des images doit être léger, avec un format optimisé pour le web (PNG, JPEG, SVG…). Une image trop lourde ralentit le temps de chargement. 

Ensuite, assurez-vous de leur qualité : une haute résolution est indispensable. 

Portez une attention particulière aux caractéristiques de l’image principale sur la page d’accueil ou sur la fiche produit :

• Est-elle optimisée pour le web ?
• Donne-t-elle envie d’acheter le produit ? 
• La résolution est-elle suffisamment élevée ?
• Les couleurs sont-elles adaptées ?
• Est-il possible de zoomer depuis la fiche produit ?

Les photos entraînent l’impulsion d’achat, veillez donc à soigner leur qualité. Afin de convertir, créez la confiance ! 

2) UX Design ou l’expérience utilisateur en e-commerce : les erreurs à éviter

Pour inciter à l’achat, il est essentiel d’avoir une approche user-centric, c’est-à-dire basée sur l’utilisateur et son expérience sur votre site. Afin de respecter au mieux les standards de l’expérience utilisateur, veillez à bien connaître votre cible et ses besoins. Plus votre cible sera détaillée, plus vous en apprendrez sur son parcours utilisateur et ses leviers à l’achat.

D’une part vous répondrez mieux à ses besoins et de l’autre votre taux de conversion augmentera.

Votre webdesign n’intègre pas l’ergonomie 

Partez de ce principe pour un site marchand : un internaute achète en ligne par commodité. En réponse à cela, vous devez faciliter son parcours sur le site au maximum. 

Un site e-commerce ergonomique est un site où la navigation est intuitive. De ce fait, la majorité des visiteurs trouve l’information recherchée instinctivement et rapidement.

Sans compter qu’un site web où les internautes peinent à trouver une information rapidement sera pénalisé par les moteurs de recherche sur la SERP. L’intérêt est d’offrir une bonne navigabilité avec un menu, des catégories et du contenu clairs, organisés, intuitifs et surtout compréhensibles pour un nouveau visiteur.

Les changements à effectuer liés à l’ergonomie de votre site :

• un menu simple et clair : évitez les “sous-sous-rubriques” dans une sous-rubrique, par exemple
• informations simples à trouver : des titres explicites et intelligibles sur vos pages et pour nommer vos rubriques (pas de jargon trop spécifique au secteur) 
• une arborescence simplifiée : les catégories et sous-catégories doivent être pertinentes et réparties de manière homogène pour faciliter la navigation de l’internaute 
• un menu qui s’adapte bien sur mobile

En définitive, votre menu reflète le contenu de votre boutique : il doit être clair et organisé.

Vos filtres et tris ne sont pas optimisés 

Chaque jour, les internautes visitent des boutiques en ligne et les quittent sans effectuer d’achat. Et pour cause, ils sont tout simplement incapables de trouver ce dont ils ont besoin ! Pourtant, très souvent, une des raisons est la mauvaise conception du système de filtrage, qui éloigne les visiteurs au lieu de générer des bénéfices.

Dans cet esprit, un bon système de filtrage depuis la page des catégories est primordiale pour mettre en avant votre catalogue produit.

Pour aider le prospect dans sa démarche, votre boutique en ligne doit comporter un filtre de recherche performant. Le mieux est de laisser le plus de choix possible à l’utilisateur : 

• Laisser la possibilité de cocher autant de choix que désiré
• Proposer une large plage de critères
• Pouvoir affiner ses choix pour avoir les résultats les plus pertinents : par la couleur, la taille, le prix, la marque… 

Pour penser UX, quelques pistes à mettre en place sur votre site e-commerce :

• Afficher les filtres appliqués
• Mettre en surbrillance les options de filtrage sélectionnées
• Laisser la possibilité de supprimer un ou plusieurs filtres à tout moment
• Employer des mots simples et compréhensibles 
• Afficher une barre de filtres/tris horizontale ou verticale intégrée dans le webdesign

Inclure trop de pop-in, pop-ups, publicités, contenus dynamiques

Lors d’une visite sur le site web, les Pop-in affichent un message au sein d’une même fenêtre ou onglet. Elles vous permettent notamment de mettre en avant un service ponctuel ou non, une offre promotionnelle, une offre en lien avec la saisonnalité (Noël, Nouvel An, Pâques…). Par exemple, les marketeurs l’utilisent pour la demande d’inscription à la newsletter, mettre en avant un livre blanc, etc.  

Les pop-ups et pop-in peuvent être très utiles si déclenchées au bon moment et si leur usage est justifié. Cependant, évitez l’abus et prévoyez des dimensions les plus discrètes et les moins intrusives possibles. Pour l’expérience utilisateur, il faut toujours laisser le choix de fermer ou de revenir à la page précédente. 

De même pour les publicités, attention à la surcharge de contenus sponsorisés. Évitez l’abus et démarquez bien l’espace publicitaire de chaque page. La surcharge de contenus dynamiques impacte plus qu’on ne le pense le taux de rebond : si un utilisateur juge la navigation moins fluide, il ne reste pas. 

Enfin pour vos animations, quelques critères d’évaluation :

• Adéquation au contenu
• Poids
• Adéquation nature / fonction : informatif, commercial, etc.
• Pas de vidéos autoplay

A noter que si une page d’atterrissage présente trop de contenus dynamiques, l’utilisateur sera dérangé et ne poursuivra pas sa visite. Vous pouvez bien sûr offrir plusieurs promotions mais trouvez un autre moyen de le faire savoir (un bandeau, un pop-up plus petit).

Encore une fois, faites attention au poids de vos animations et contenus dynamiques : il influence directement le temps d’accès. 

Concevoir un site e-commerce pour les moteurs de recherche mais pas pour les humains

Si vous possédez une boutique en ligne, le positionnement de votre site sur des mots clés spécifiques est souvent source de préoccupation. Pourtant l’obsession pour les moteurs de recherche conduit souvent à une erreur fatale : oublier l’humain. 

Votre site sera peut-être performant sur l’aspect du SEO mais vos performances resteront les mêmes : un taux de rebond élevé et un taux de conversion qui ne décolle toujours pas.

Sans compter que la priorité du référencement est l’humain. Bien qu’il soit essentiel de concevoir votre site web en pensant aux mots-clés et intentions de recherche, votre objectif devrait toujours être de fournir une expérience utilisateur exceptionnelle. Elle entraînera à son tour une optimisation des moteurs de recherche et un PageRank plus élevé. Donc vos efforts pour optimiser l’expérience utilisateur seront forcément récompensés sur le long terme. 

Pour résumer : l’humain en premier, les moteurs de recherche ensuite.

Lors de la conception de votre site web, veillez toujours à travailler l’expérience utilisateur. Pour vous y aider, Idéematic propose notamment des services de marketing comportemental, dont la finalité est de vous permettre d’atteindre vos objectifs commerciaux en boostant votre taux de conversion.

Un audit de votre site web pourra également vous permettre de repérer les points forts et les points faibles de votre site et d’en extraire des recommandations et des avantages concurrentiels. De plus, il vous permettra d’analyser la provenance de votre trafic. Vous saurez enfin si votre taux de conversion bas est dû à un trafic non qualifié, un site mauvais sur les aspects techniques, le design de votre interface, etc.

Alors n’attendez plus et contactez une agence experte en digital !