Améliorer ses ventes sur son site web avec l’UX

Améliorer ses ventes sur son site web passe d’abord par la qualité que votre entreprise délivre. Mais lorsqu’on parle de site web, l’importance de l’expérience utilisateur (appelé UX, pour User eXperience) peut être grande !

Quelques idées pour optimiser vos taux de clics (CRO)

• Ajouter une URL d’inscription dans votre signature électronique
• Ajouter un CTA à votre page 404
• Ajoutez un CTA à votre page de remerciement pour augmenter l’engagement post-optin
• Utiliser les popups sur les pages pertinentes
• Ajouter une popup sur l’intention de sortie du site pour convertir les visiteurs abandonnant en abonnés à votre newsletter
• Ajoutez des boutons de partage social et rendez-les simples à trouver
• Créez un groupe Facebook pour votre communauté cible
• Donner aux utilisateurs la possibilité de mettre à jour les préférences de messagerie au lieu de se désabonner des emails
• Répondre aux commentaires
• Utiliser des permaliens courts
• Ajouter des mots-clés cibles aux balises Alt pour les images
• Attribuez un mot-clé cible unique pour chaque publication et page
• Utilisez un compte à rebours sur les offres promotionnelles
• Créez des pages alternatives pour montrer la différence entre votre produit et celui d’un concurrent
• Envoyer des emails de vraies personnes
• Écrire pour d’autres sites en tant qu’invité

De nombreuses petites astuces peuvent être glanées ci et là sur le web. Mais elles risquent de vous faire perdre la cohérence de votre communication. Lorsque vous découvrez de nouvelles astuces, préférez donc les noter pour créer votre boîte à outils plutôt que de vouloir les implémenter rapidement sur votre site, sans savoir réellement pourquoi.

Adopter une démarche UX

Définissez vos personas

• Commencez par créer 3 profils client :
  • Votre client-type
  • Et vos 2 profil client les plus extrêmes
• Listez pour chacun leurs caractéristiques déterminantes :
  • un nom, pour lui faire référence facilement
  • sa famille d’utilisateur (type, extrême…)
  • âge
  • un slogan pour le définir
  • son objectif, ce dont il a besoin
  • la fréquence d’utilisation/achat
  • le cas d’usage principal en 5 à 8 étapes (par écrit ou en storyboard – pas de wireframes)
  • le caractère, la personnalité
  • les objections, la déception éventuelle, le doute…

Définissez tous vos scenarios d’usage

Rédigez le plus simplement possible vos cas d’utilisation ! Du genre :

« En tant que visiteur, je peux créer un compte partout sur le site, à partir de la barre de navigation »

Ou

« En tant qu’abonné au site, sur tous les articles de blog, je peux commenter en bas de page »

Evaluez vos scenarios d’usage

On utilise 10 critères, pour couvrir tous les problèmes que l’on peut rencontrer:

• Homogénéité : Le design reste cohérent d’un bout à l’autre du produit.
  Ex : la forme et la couleur des boutons est la même partout.
• Universalité : Le design affiche un langage et use d’une symbolique familière, que tout le monde est capable de reconnaître.
  Ex : menu hamburger, bouton…
• Clarté : Le design est esthétique et minimaliste.
  Ex : il ne comporte pas de bruit visuel.
• Liberté : Le design permet de faire des allers-retours.
  Ex : revenir à la page précédente.
• Flexibilité : Le design permet de s’écarter du chemin de navigation prévu.
  Ex : mettre un article dans le panier puis continuer de consulter le site, sans être obligé de finaliser l’achat.
• Facilitation : Le design n’impose pas une charge cognitive lourde.
  Ex : il n’y a pas besoin de chercher ni de se remémorer l’information, tout ce qu’il faut savoir est là.
• Visibilité : Le design donne une indication d’où l’on est.
  Ex : barre de défilement (scroll), roue de chargement (transition entre 2 pages), temps de chargement d’un fichier…).
• Précaution : Le design évite les erreurs : demande confirmation avant d’effectuer une tâche qui semble risquée et propose une alternative.
  Ex : lorsque l’on veut fermer un document sans l’avoir enregistré, une boite de dialogue s’ouvre « êtes-vous sûr de vouloir quitter ? » et propose d’enregistrer le document.
• Récupération : Le design récupère les informations perdues.
  Ex : si l’on quitte accidentellement une page, les informations que l’on avait renseignées sont récupérables.
• Aide : Le design fournit de l’aide si besoin.
  Ex : présence d’une FAQ, de micro tutoriel, d’un centre de support.

Pour chaque problème découvert, déterminez s’il est mineur, important ou urgent.

Appliquez la psychologie à votre interface

La psychologie peut se résumer comme étant la science du comportement (penser, sentir, agir). Nous nous intéresserons plus spécifiquement à la psychologie cognitive, car ses apports vont nous permettre de mieux comprendre les perceptions et les raisonnements de nos utilisateurs.

En ayant conscience des mécanismes qui sous-tendent notre perception et notre interprétation des informations présentées sur un écran, nous allons pouvoir créer des designs mieux perçus, mieux compris et plus engageants.

Rendez vos textes lisibles

La lecture est une activité quotidienne. Mais, souvenez-vous, il faut plusieurs années de pratique pour maîtriser la lecture. C’est une activité complexe : il faut identifier les lettres, les lier à des sons, comprendre l’assemblage des lettres et des sons… En bref, c’est donc un processus cognitif complexe. Et c’est pire sur un écran: nous lisons 25% moins vite sur un écran et cette lecture entraine une fatigue visuelle plus rapide que sur papier. Il convient donc :

• de rédiger des phrases courtes
• d’afficher les textes sur fond blanc ou très clairs (c’est moins fatiguant mais aussi pour éviter que les réflets des écrans ne gênent plus la lecture)
• que le contraste du texte soit suffisant
• ne pas utiliser plus de 2-3 couleurs
• ne pas associer de couleurs complémentaires
• afficher vos textes suffisamment grand
• limiter l’usage de l’italique

Tirez profit de la psychologie de la forme

L’ensemble de ce que vous allez présenter sur un écran va guider, ou au contraire, disperser le regard de vos utilisateurs. La structure des informations est déjà en soi une première étape de compréhension des informations (menu, textes, images) que vous leur présenterez, avant même de commencer à lire les intitulés comme les titres, le menu, les boutons.
Pour nous aider, nous nous intéresserons à la psychologie de la forme, appelée également théorie de la Gestalt. Cette dernière propose un ensemble de principes qui vont permettre de mieux comprendre comment le cerveau perçoit les formes.

Loi de la bonne forme

Lorsque l’utilisateur arrive sur une page, il scanne dans un premier temps l’ensemble de la page sans s’attarder sur chacun des éléments qui la composent. Il en déduit une organisation générale de la page et interprète l’ensemble.

Loi de continuité et principe de clôture

Nous percevons des points rapprochés comme un ensemble contigu. En suivant cette loi, nous pourrions mieux organiser des informations. L’œil préfère un histogramme dans lequel les informations sont rangées selon la taille des barres.

La loi de la proximité

Les éléments proches les uns des autres ont tendance à être associés et perçus comme un ensemble. Votre écran doit être organisé de façon à ce que vos utilisateurs, en balayant très rapidement votre écran, comprenne l’organisation de votre page. Ainsi, ils pourront s’orienter plus facilement pour trouver tout de suite les informations qu’ils cherchent.

La loi de similarité

Le cerveau associe des éléments qui sont similaires les uns aux autres. Ainsi, on a tendance à les percevoir comme appartenant à la même forme.

Prenons l’exemple d’un site de e-commerce.

• D’abord, les fiches produits sont souvent toutes présentées de la même manière, avec la même organisation, le même emplacement des boutons, couleur, taille… Cela montre à l’utilisateur qu’il s’agit du même type d’action qu’il a l’habitude de réaliser.
• D’autre part, on trouve deux types de boutons, des noirs et des jaunes. Cela indique à l’utilisateur qu’il s’agit d’une action différente. Si entre les deux, seul le texte changeait, alors l’utilisateur ne pourrait pas repérer aussi facilement cette différence. Il serait obligé d’inspecter élément par élément pour le comprendre. Ici, jouer avec la similarité : l’emplacement des boutons, leur taille mais créer une différence de couleur indique tout de suite à l’utilisateur une différence d’action.

La loi de destin commun

Lorsque des éléments sont en mouvement et ont la même trajectoire, nous les associons comme appartenant au même ensemble. Pour un site, il peut s’agir d’animations qui arrivent dans le même sens, ou bien d’un slider.

La loi de familiarité

Nous percevons les formes les plus familières, comme étant les plus significatives. Notre regard, est donc plus attiré par ce qui nous est familier.

Vous devez proposer des éléments familiers afin que l’utilisateur puisse avoir des repères pour interpréter vos écrans. Pensez à utiliser des patterns connus par vos utilisateurs. Par exemple, dans de nombreux sites de e-commerce, les boutons pour envoyer un article au panier sont plus gros que les autres, et d’une couleur qui attire l’œil.

Représentations humaines : un atout pour vos interfaces

Ajoutez des visages pour humaniser vos interfaces ! En tant qu’humains, nous attestons d’une très bonne reconnaissance des visages. Il y a même une zone du cerveau dédiée à cela. Lorsqu’un visage est présent sur une image, les personnes regardant cette image vont tout de suite orienter leur regard vers ce visage. Ajouter l’image d’un être humain, va rendre votre design plus humain, en ajoutant une touche d’émotion.

Comprendre les raisonnements de vos clients avec les modèles mentaux

Un modèle mental est une représentation mentale permettant de simuler mentalement le déroulement d’un phénomène pour anticiper les résultats d’une action. Plus simplement, c’est ce que l’utilisateur croit comprendre de la manière dont le système fonctionne.

On parle bien ici de croyances, et non de connaissances, ce qui important. Car un principe majeur de ces modèles mentaux réside dans la capacité des êtres humains à transférer les attentes de la manière dont le système fonctionne, sur la base d’expériences similaires.

Ainsi, nos attentes vis-à-vis du fonctionnement, par exemple d’un site web, sont définies par notre longue expérience d’interaction avec d’autres sites. Avant même d’entrer sur ce site, on s’attend à :

• Trouver un menu, soit en haut de la page, soit à gauche.
• Lors de la navigation, on s’attend à ce que nous puissions revenir à la page d’accueil en cliquant en haut à gauche sur le logo du site.

Ainsi, lorsque nous appréhendons un nouveau système, nous ne partons pas de zéro comme un enfant, mais nous nous reposons sur nos modèles mentaux pour établir des hypothèses afin d’agir. Lorsque certains parlent de système “intuitif”, c’est-à-dire une application, par exemple, qui pourrait être simplement comprise par des utilisateurs n’étant jamais venus sur l’application, il s’agit en fait simplement d’une application qui est congruente avec les modèles mentaux de ses utilisateurs et qui respecte les codes déjà appris.

En tant qu’UX designer, nous devenons des experts de l’interaction humain-système, nos modèles mentaux sont donc différents de nos utilisateurs. Charge à nous de bien identifier les modèles de nos utilisateurs. Et attention, ils peuvent varier selon les groupes d’utilisateurs.

Le meilleur moyen d’y arriver est de faire régulièrement des enquêtes ou des tests utilisateurs auprès d’utilisateurs aguerris, mais aussi auprès de novices.

Maintenez l’attention pour améliorer ses ventes sur son site web

Notre attention est très sensible à la distraction. Notre niveau d’attention varie bien entendu en fonction des capacités de chacun et de nos conditions physiques et environnementales : fatigue, heure tardive, environnement bruyant…

Il faut le prendre en compte dans vos designs en essayant au maximum de limiter les sources de distraction et de guider l’attention de vos utilisateurs vers le but à réaliser. Un design simple et surtout bien ordonné, permet d’attirer tout de suite l’attention de vos utilisateurs sur les produits.

Mettez en valeur les informations réellement importantes

Votre utilisateur arrive sur votre page. Qu’est-il venu chercher ? Il va falloir le guider pour qu’il arrive le plus rapidement possible à son objectif. Le mieux, est de proposer un call-to-action, c’est-à-dire une action à effectuer, dès son arrivée.

Vous avez sûrement entendu parler de la règle des trois clics. En réalité, le nombre de clics n’a pas d’importance. Les utilisateurs sont habitués à cliquer rapidement lorsqu’ils cherchent une information. Au contraire, ce qui, pour eux, pourrait être préjudiciable, serait d’avoir à chercher l’information dont ils ont besoin parmi un trop plein d’informations.

Répétez les informations importantes

Ce qui est particulièrement efficace, c’est de proposer des logiques de recherche différentes, ce qui permet aux personnes ayant différents buts de s’y retrouver. Et c’est un des avantages de la rédaction de vos scenarios d’usage et des tests utilisateurs : découvrir différentes logiques de la part de vos visiteurs !

Souvenons-nous que notre attention est un réservoir qui ne peut accueillir qu’un nombre limité d’informations à la fois. Nous appliquons donc des filtres pour rechercher uniquement les informations pertinentes. Il faut donc bien connaître vos utilisateurs et leurs habitudes.

Un design simple et surtout bien ordonnée, permet d’attirer l’attention de vos utilisateurs sur les informations pertinentes. Il faut bien guider l’œil de vos utilisateurs en mettant en valeur les informations réellement pertinentes. Et éventuellement répéter les mêmes informations sous des formes différentes.

Divulgation progressive

La divulgation progressive consiste à ne présenter que les informations pertinentes pour les utilisateurs, à un moment donné. Vous allez donc séquencer les actions et reporter certaines informations ou fonctionnalités sur un ou plusieurs autre(s) écran(s). Cela a pour objectif de réduire le sentiment de surcharge d’informations pour l’utilisateur.

Preuves sociales

Nous sommes rassurés lorsque nos choix ont également été adoptés par un grand nombre de personnes, ou des personnes en qui nous avons confiance. C’est en cela que les techniques des preuves sociales fonctionnent chez les utilisateurs. Il s’agit de montrer qu’un grand nombre de personnes a partagé votre article ou a mis 5 étoiles à votre produit. Vous pouvez donc :

• Afficher le nombre de partage Facebook, LinkedIn, Twitter, etc.
• Présenter des témoignages clients, le mieux étant en vidéo bien entendu.
• Afficher les personnes connues ou les entreprises réputées qui ont fait appel à vos services ou qui vous financent.

Les preuves sociales fonctionnent car cela augmente la crédibilité, d’une part, et encourage l’adoption, d’autre part.

Il existe trois risques auxquels vous pouvez vous exposer lorsque vous utilisez les preuves sociales :

• Vous faites appel à des personnes qui ne correspondent pas à votre cible. Par exemple, vous demandez à une personnalité célèbre de vanter les mérites de votre produit mais elle va à contre-pied de votre cible. Cela aura tendance à décrédibiliser vos produits.
• Vous affichez le nombre de partages par exemple, mais il est faible, et cela ne donne pas envie à vos utilisateurs de suivre.
• Cela peut alourdir la page et défavoriser les personnes ayant une connexion faible.

Analysez le comportement des utilisateurs

Plus largement, vous l’aurez compris, l’amélioration de votre expérience utilisateur passe par votre connaissance du comportement de vos utilisateurs !

Analysez le comportement des utilisateurs avec Google Analytics

Vous pouvez en apprendre beaucoup sur le comportement des utilisateurs grâce aux outils de suivi analytique.

Google Analytics est un outil complexe. Vous ne maîtriserez pas toutes les fonctionnalités du jour au lendemain. Au lieu d’essayer de tout analyser, focalisez-vous uniquement sur les fonctionnalités qui vous renseigneront le plus sur vos utilisateurs.

On en parle un peu plus profondément dans une de nos documentations : Google Analytics avec WordPress

Examinez la pertinence des parcours utilisateurs grâce aux funnels

Il est courant, dans l’ecommerce, d’observer des abandons de la part des utilisateurs. C’est-à-dire qu’un utilisateur va abandonner son panier ou que son achat ne va pas aboutir et qu’il ne sera alors pas converti.

Les funnels sont un moyen d’identifier les points faibles de vos parcours utilisateurs. Ces derniers peuvent être utilisés dans le cadre d’achats en ligne, de parcours d’inscriptions, etc. Les funnels de conversion vous permettent de prioriser et de vous concentrer sur l’amélioration de zones spécifiques de votre produit sujettes aux abandons. Ils vous aideront à savoir si vos utilisateurs sont à tout moment capables de mener leurs tâches à bien et s’il n’y a pas un problème dans le parcours.

Il est important d’identifier les pages où les utilisateurs abandonnent, car vous pourrez alors essayer de formuler des hypothèses pour comprendre pourquoi et ainsi améliorer votre parcours. Par exemple, lorsqu’un utilisateur s’apprête à effectuer un achat, il est parfois dirigé vers l’interface d’un site tiers pour effectuer le paiement, tel que PayPal, qui n’a souvent pas du tout le même design que votre site. Ce changement brutal de design peut perturber l’utilisateur. Si vous identifiez que c’est vraiment un problème pour l’utilisateur, car vous avez un fort nombre d’abandons sur cette page, vous serez en mesure de proposer des solutions comme personnaliser les couleurs du module de PayPal.

Mobilisez des outils de tracking de comportement

Les heatmaps (les cartes de chaleur) et les scrollmaps (les cartes de défilement) vous permettent de comprendre le comportement des utilisateurs en examinant où se porte leur attention. Vous pourrez ainsi en déduire où et comment les visiteurs utilisent leur temps sur votre produit.

Vous pouvez utiliser les informations collectées via les études analytiques ou des tests d’utilisabilité pour déterminer les pages par lesquelles commencer. Il vous faudra alors installer le plugin Aurora Heatmap ou vous inscrire sur un service externe tel que HotJar.

Améliorez la conversion grâce à des tests A/B

Les tests A/B sont très utilisés en UX design. Voyons ensemble de quoi il retourne.

Qu’est-ce qu’un test A/B ?

Les tests A/B testent différents modèles sur des utilisateurs réels. Ce sont des expériences en ligne utilisées pour explorer des options et concevoir des variantes sur un sous-ensemble d’utilisateurs afin de valider les meilleures solutions. Les tests A/B sont efficaces avec un échantillon important d’utilisateurs sur une période de temps déterminée (de l’ordre de la semaine).

Il est préférable de ne changer qu’une chose à la fois afin de pouvoir déterminer l’efficacité de chaque modification. Voici une liste des points de design que vous pouvez facilement tester par des tests A/B :

• Texte et placement de bouton
• Disposition générale d’une page
• Images (images, taille, placement)
• Titres et contenus

Pour réaliser un test A/B, on scinde les visiteurs en deux groupes (d’où le nom A/B). Chaque groupe voit une version différente de la page. On suit alors le parcours des deux groupes en temps réel et l’on regarde quelle page obtient le meilleur résultat par rapport à un objectif donné.