Comment augmenter vos ventes de 400% grâce à l’UX-UI design ?
Certains entrepreneurs négligent l’impact que peut avoir le design d’un site web sur le passage à l’achat du consommateur. C’est dommage car cet impact a été prouvé scientifiquement.
A titre d’exemples :
- Nous traitons les données visuelles 60 000 fois plus vite que les textes.
- 57% des utilisateurs déconseillent à leurs amis un site qui est mal designé (Google’s Mobile Playbook)
- 88% des utilisateurs sont moins enclins à retourner sur un site après une mauvaise expérience utilisateur.
Le design de votre site est donc non seulement à l’origine de la première impression que vos prospects auront de votre marque. Mais il sera également déterminant sur votre futur chiffre d’affaires. D’ailleurs, une étude récente de Forrester Research a montré qu’une interface bien pensée en termes d’expérience vécue par l’utilisateur pouvait augmenter le taux de conversion d’une entreprise de 400% !
Nous allons donc voir ensemble :
- ce qui fait que la première impression d’un site est bonne ou mitigée
- en quoi la structure d’un site nous fait agir selon un schéma prédéfini
- les éléments à mettre en place pour créer un chemin d’actions prédéterminées sur votre site et augmenter votre taux de conversion
1. La première impression
Si vous faites passer un entretien d’embauche à quelqu’un qui se présente à vous avec des vêtements troués et tachés, vous n’aurez probablement pas envie de l’embaucher. Cette personne aura beau être hyper compétente, votre cerveau fera des associations d’idées entre son apparence et ses prétendues compétences et/ou qualités personnelles.
Il en va de même pour votre site web. Imaginez que vous cherchez une ville de France sympa pour y passer un week-end. Vous tapez d’abord “Angoulême” puis “Rennes”. Quel est le site qui vous donne envie de faire plus de recherches ?
Le deuxième effectivement ! Et si on regarde en détails chacun de ces deux sites, on peut voir que :
Le premier site
- utilise des couleurs criardes
- la barre de recherche peut être difficile à trouver (en haut à droite
- les onglets au-dessus du bandeau sont nombreux et assez petits
- en voyant la photo, on peut également se demander si c’est le site d’Internet d’un musée (ou quelque chose en rapport avec l’histoire…)
- met la barre de recherche en grand au milieu du bandeau
- met ses onglets sous forme de menu déroulant pour désencombrer sa page
- propose une photo grand format de la ville concernée
- le reste du site est sobre et épuré (noir et blanc)
On se rend compte à quel point quelques choix malheureux en matière de design peuvent influencer notre vision (et donc notre opinion), d’une ville ou d’une marque. L’une peut nous apparaître comme étant vieillotte et désorganisée tandis que l’autre nous apparaîtra comme étant moderne et dynamique. Et cela, bien sûr, indépendamment de la qualité réelle de celle-ci.
Mais au-delà de l’image qu’un design renvoie d’une marque, la façon dont il est fait et structuré va nous amener à suivre un certain schéma d’actions.
2. Les schémas d’actions
Quand on atterrit sur un site, on ne déplace pas systématiquement notre regard et notre souris de la même manière. Nos actions suivent un schéma dicté par la structure du site.
Par exemple, en tombant sur le site de Rennes :
- j’ai été tentée de cliquer sur les onglets du menu déjà déroulé (encart blanc à droite).
- Puis j’ai effectué ma recherche dans la barre au milieu.
- J’ai ensuite apprécié les 3 petits logos en bas sur fond noir qui sont plutôt destinés aux gens qui s’installent.
Sur le site d’Angoulême :
- Je n’ai pas trouvé tout de suite la barre de recherche.
- Quand j’ai passé ma souris sur les petits onglets gris, cela a déroulé des menus très attractifs sur lesquels j’ai cliqué.
- Je n’ai finalement pas fait de recherche par mot-clef, mais j’ai surtout « traîné » d’un onglet à l’autre, captivée par les photos.
La structure d’un site influe sur le comportement des utilisateurs. C’est ainsi qu’une société a augmenté ses ventes de 300 millions de dollars en modifiant le texte d’un bouton de “enregistrer” à “continuer”.
Vous l’aurez deviné, le nom de cette société commence par Ama et finit par Zon. En changeant de message, l’entreprise a supprimé le fait de devoir s’inscrire pour passer directement à l’achat.
Cet exemple montre l’importance des éléments que vous allez intégrer à votre design : chaque bouton d’appel à l’action, chaque message sur ces boutons, chaque formulaire à remplir ou taille de barre de recherche aura son importance sur l’expérience vécue par l’utilisateur.
Votre design doit donc être fonctionnel et persuasif : il doit être agréable à la navigation, répondre à votre objectif business, pousser l’internaute à l’action, en plus d’être esthétique et sobre.
Si il est bien conçu, l’utilisateur va y naviguer en suivant une trajectoire qui va conclure à une vente. Voyons à présent comment créer une trajectoire efficace.
La première chose à faire est de se mettre dans les baskets de l’utilisateur.
- Que va-t-il faire en arrivant sur votre site ?
- A quoi va-t-il penser ?
- Et vous, que regardez-vous en premier sur un site ?
- Qu’est-ce qui attire votre regard ?
- Et qu’est-ce qui au contraire vous agace ? Une page trop fournie ? Ne pas trouver ce que vous cherchez en un clic ?
Vous pouvez vivre deux expériences différentes selon le contexte :
1. Vous êtes à la recherche de vêtements sur le site Mango.
Une fenêtre s’affiche, vous proposant d’entrer votre email pour recevoir la Newsletter de la marque. Cette fenêtre se trouve en bas à droite de votre écran et reste visible (mais discrète) durant toute la navigation. L’avantage à tirer de cette inscription n’est néanmoins pas évident à deviner.
2. Vous êtes toujours à la recherche de vêtements sur le site Mango.
Vous vous connectez sur le site, et hop ! Vous vous retrouvez face à une énorme fenêtre pop-up qui prend toute la page. L’avantage est clair : 10% de remise si vous souscrivez à leur newsletter. Le format de la fenêtre est néanmoins plus intrusif et donne l’impression de ne pas pouvoir continuer la navigation tant qu’on est pas inscrit.
Les paramètres d’une fenêtre pop-up sont nombreux : elle peut apparaître au début ou pendant la navigation, elle peut occuper une grande partie de la page ou être discrète en bas à droite, elle peut tomber à point et offrir une réduction quand on est sur le point d’acheter, ou mal tomber (une inscription à la Newsletter alors qu’on ne sait pas ce que propose le site)…
Vous l’aurez compris, l’expérience utilisateur est donc avant tout une affaire d’empathie…
On vous accordera largement que ce n’est pas évident de se mettre dans la peau de la majorité des utilisateurs. Et encore moins de connaître toutes les options que l’on peut intégrer à son design.
C’est pour cela que les designers se basent sur des recherches pointues, comme celle de Steven Bradley dans Design Hierarchy of Needs. Il y présente une pyramide de besoins, hiérarchisés, auxquels un site est censé répondre s’il veut offrir la meilleure expérience possible à ses utilisateurs.
3. La pyramide des besoins en design
Voyons quelques-uns des principaux besoins (bas de la pyramide) recherchés par les utilisateurs.
a. Fonctionnel
En premier lieu, le site doit être fonctionnel. Vos clients doivent pouvoir trouver et acheter vos produits sur votre site web (ou e-commerce). Et quand ils cliquent sur un bouton “d’appel à l’action” comme “mettre dans le panier” ou “acheter”, celui-ci doit impérativement fonctionner. Cela semble basique, mais vous seriez étonné du nombre de site qui ne teste pas leurs boutons et où ils ne fonctionnent pas.
b. Fiable
Une fois que votre site fonctionne, il est important que l’utilisateur se sente en confiance.
- Si vous rencontrez des problèmes de serveur,
- que votre site indique un message d’erreur,
- que le site est introuvable (lors d’une 2ème visite par exemple)…
- adresse
- numéro social
- mais surtout le téléphone et l’email
c. Rassurant
Les prospects qui viennent pour la première fois sur votre site, achèteront plus facilement si ils se sentent en confiance, c’est-à-dire si ils voient :
- Des avis clients positifs. Montrer que d’autres avant eux ont effectué des achats chez vous et en ont été satisfaits est l’un des moyens les plus efficaces de rassurer vos prospects et de les convertir en clients.
- Que votre site est sécurisé. Il est important de rassurer vos clients au moment du paiement, et là encore le design peut vous être d’une grande utilité, car vous avez la possibilité d’insérer des logos en forme de cadenas par exemple, à côté de l’encart des moyens de paiement.
- Les conditions de vente et après vente. Cela peut prendre la forme de garanties “satisfait ou remboursé”, d’un remplacement gratuit si l’article est endommagé, etc.
d. Facile à utiliser
Rien de plus désagréable pour des clients que de tourner dans tous les sens à la recherche d’un produit ou d’une info.
Pour savoir si votre site est facile à utiliser, vous pouvez le mettre à l’épreuve de différentes études scientifiques qui ont permis de comprendre comment les utilisateurs naviguent sur un site Internet.
Certaines exemples sont déjà très simples à mettre en place :
- Une barre de recherche bien en évidence
- Le logo de votre entreprise en haut à droite sur la page d’accueil
- Des call-to-action (boutons d’action) qui contrastent avec le reste du site
- Une photo unique sous forme de grand bandeau
e. Vendeur
A ce stade-ci, une fois que votre site est fonctionnel, fiable et simple à utiliser, vous pouvez commencer à installer des éléments additionnels, par exemple, des mentions telles que :
- recommandé pour vous
- ceci pourrait également vous plaire
- en fonction de ce que vous avez regardé…
f. Original
Une fois que les 5 premiers critères sont remplis, que votre site est donc :
- fonctionnel et
- fiable
- rassurant
- facile à utiliser
- vendeur
4. Favoriser la conversion
Voici quelques conseils pour personnaliser l’aspect visuel de votre page (photos, style des textes, couleurs…) tout en conservant un design facile à utiliser et orienté vers la conversion.
a. Rendre attractif son site dès le 1er regard
Quel burger frites vous fait le plus envie ?
Si vous utilisez des photos ou des images, pensez à la qualité de celles-ci. Leur but est de donner envie à vos prospects d’acheter le produit. Comme dans l’exemple ci-dessus, à produit quasi similaire nous serons d’accord pour dire que le burger de la photo 1 nous fait bien plus envie que celui de la photo 2 qui fait très “amateur”.
Certains entrepreneurs négligent l’impact que peut avoir le design d’un site web sur le passage à l’achat du consommateur. C’est dommage car cet impact a été prouvé scientifiquement.
Veillez aussi à ce qu’elle soient :
- assez grandes (pensez aux personnes qui ont des petits écrans)
- non pixelisées
- bien placées sur la page
- pas trop nombreuses
- originales : si c’est possible faites vos propres photos professionnelles. Vous pouvez les prendre dans des banques d’images mais vos clients risquent de voir les mêmes ailleurs, ce qui peut vous décrédibiliser.
b. Orienter le regard dans les photos
Les personnes représentées sur les photos doivent attirer le regard… Là où vous souhaitez que vos prospects regardent !
Lorsqu’une photo représente une personne qui regarde à un certain endroit de la page, on a tendance à regarder au même endroit.
C’est donc une bonne manière d’attirer le regard de l’utilisateur à un endroit précis :
- une partie du texte
- un bouton d’appel à l’action
- un formulaire à compléter…
c. Rendre vos photos réalistes, attrayantes mais pas trop non plus
Lorsqu’une photo représente une personne attirante physiquement, cela attire l’attention. On a aussi tendance à leur attribuer plus de qualités : intelligence, sympathie… C’est ce qu’on appelle le biais cognitif de halo.
A noter que la plupart des gens ne s’identifient pas aux personnes qui ont l’air « parfaites » et que les personnes que vous mettrez en scène devront correspondre à votre cœur de cible ou au moins lui ressembler. Par exemple, si vous vendez des couches, utilisez plutôt une photo de bébé ou de jeune parent.
Ci-dessous un exemple pris sur le site de la marque FEMPO qui propose des culottes menstruelles à toutes les femmes, quelle que soit leur morphologie.
Attirants, adaptés à son cœur de cible… mais réalistes quand même… Un vaste programme que le choix de modèles pour ses photos !
Il est impossible de parler d’images sans parler de couleurs. Voici donc quelques conseils en matière d’utilisation des couleurs.
d. Oser les contrastes
Dans cet exemple, le bouton sur lequel on oriente l’internaute (le “Je préfère une démo”) a un fond blanc pour se démarquer du reste de la page.
Généralement le fond blanc est utilisé parce qu’il contraste avec toutes les autres couleurs… Il sera votre meilleur allié dans une boutique de vêtements par exemple.
Si vous n’avez pas envie d’utiliser du blanc, vous pouvez vous servir de n’importe quelles couleurs opposées pour créer un contraste. Le rouge sera opposé au vert, le bleu au jaune, etc. Toutes les couleurs qui se font face dans le cercle chromatique ci-dessous créent le contraste.
Dans la mesure du possible, veillez à utiliser 2 ou 3 couleurs maximum, pour vous créer une identité propre, facilement identifiable par vos clients. Cela permet d’éviter la saturation et de rester en cohérence avec l’objectif de votre page : orienter le regard du prospect vers votre CTA !
Exemple : Coca Cola avec le rouge et blanc (et une touche de noir pour les Coca zéro).
Les textes sont d’ailleurs le plus souvent rédigés en noir sur des pages blanches pour créer ce contraste. C’est pour cette raison que l’on évitera par exemple un texte jaune sur un fond blanc.
Votre but est qu’on découvre qui vous êtes et ce que vous vendez, pas l’inverse.
En plus de la couleur, vous pouvez également jouer sur la manière de mettre en forme les caractères : lettres, ponctuation, symboles…
Votre choix de typographie sera en quelque sorte votre signature.
e. Choisir la bonne typographie
Puisque nous avons utilisé l’image et la couleur pour attirer le regard de notre prospect, voyons à présent comment la typographie pour nous soutenir vers cet objectif.
La typographie que vous utiliserez aura un impact sur l’impression que vous laisserez à vos prospects, qu’elle soit bonne ou mauvaise.
Exemple 1
-
Un site vend des formations pour devenir écrivain : il utilise la police d’écriture Courier New qui ressemble à la police d’un texte tapé à la machine à écrire.
C’est une bonne idée, cela place les élèves dans la posture d’écrivain et c’est drôle avec un côté rétro et décalé.
Exemple 2
- Un patron du CAC 40 utilise la police Comic Sans Ms dans ses communications professionnelles.
A l’opposé de l’expression “l’habit ne fait pas le moine”, la typographie, quant à elle, fait votre site web. Elle informe l’internaute sur différents aspects de votre business.
La taille compte
L’internaute n’aime pas lire. C’est un fait. Alors imaginez ce que lui fait une police d’écriture trop petite. Elle le décourage simplement de lire les textes ou en rend la lecture désagréable. 14 pixels est le minimum.
Dans le même ordre d’idée, faites des paragraphes courts.
Les gros blocs de textes sont attendus dans un rapport scientifique long (et pompeux 🙊). En revanche, sur Internet notre regard parcourt les pages en lisant uniquement les titres et intertitres (et encore).
Dans le graphique ci-dessous, vous pouvez découvrir la corrélation inverse entre le nombre de mots contenus sur une page de vente et le taux de conversion (nombre de ventes par rapport au nombre de vues).
Vous l’aurez deviné, réussir le design d’un site c’est avant tout anticiper l’expérience qui sera vécue par l’utilisateur de votre page. Le but est qu’elle soit la plus agréable et facile possible et qu’elle l’oriente vers votre Call-to-Action (appel à l’action).
5. Que retenir ?
Finissons par deux ultimes exemples. L’un à suivre, l’autre à ne pas suivre. Nous vous laissons trouver la bonne réponse…
Pour résumer, en quelques mots : design épuré, simplicité d’utilisation et efficacité vous permettront de convertir.
Nous espérons que ces conseils vous aideront à réaliser une page de vente attractive et facile à utiliser, conditions essentielles pour que vos prospects y passent un peu de temps et achètent. Si vous n’êtes pas certain de répondre à tous ces critères, n’hésitez pas à réserver un audit stratégique auprès de notre agence OUI Are Web.
- Gratuit
- Sans engagement
- Sourire garanti !
