Business boost

Accédez à notre masterclass

Stratégie digitale Neuromarketing - Méthode des 3 oui - Agence OUI Are Web UX Design CX Neuromarketing CRO
Découvrez une méthode de marketing innovante basée sur les neurosciences.

Sommaire

Comment augmenter vos ventes de 400% grâce à l’UX-UI design ?

Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
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 :
  1. ce qui fait que la première impression d’un site est bonne ou mitigée
  2. en quoi la structure d’un site nous fait agir selon un schéma prédéfini
  3. 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 ?
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
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…)
Le deuxième site 
  • 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)
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
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 :
  1. j’ai été tentée de cliquer sur les onglets du menu déjà déroulé (encart blanc à droite). 
  2. Puis j’ai effectué ma recherche dans la barre au milieu.
  3. 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.
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
Sur le site d’Angoulême :
  1. Je n’ai pas trouvé tout de suite la barre de recherche.
  2. 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é.
  3. 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.
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
  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 ?
Pour illustrer cela, prenons l’exemple des fenêtres pop-up : ces fenêtres de publicité qui apparaissent devant vos yeux, tandis que vous naviguez sur un site.
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.
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
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.
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
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)…
 => Vos clients risquent d’aller consulter celui de la concurrence. De même, montrer les coordonnées de votre entreprise :
  • adresse
  • numéro social
  • mais surtout le téléphone et l’email
 => donnera une crédibilité à votre entreprise et rassurera sur le fait qu’il est possible de joindre quelqu’un en cas de besoin.

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.
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
  • 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é…
Ce sera une manière de personnaliser votre offre et de l’adapter à ce que recherchent vos prospects. Vous la rendrez ainsi encore plus visible et plus attractive.

f. Original

Une fois que les 5 premiers critères sont remplis, que votre site est donc :
  1. fonctionnel et
  2. fiable
  3. rassurant
  4. facile à utiliser
  5. vendeur
Vous pouvez laisser foisonner votre imagination et être plus créatif ! A l’unique condition que cette créativité reste centrée sur l’expérience et les besoins de vos utilisateurs.

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 ?
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO


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…
Dans l’exemple très connu ci-dessous, on peut voir que les internautes qui ont passé le plus de temps sur le texte (à gauche, partie rouge/jaune) sont ceux qui ont suivi le regard du bébé. A l’inverse, quand le bébé est de face, ils s’attardent sur son regard mais délaissent le titre et le texte (en vert ce qui a été balayé sans être lu).
Comment augmenter vos ventes de 400% grâce à l'UX-UI design ? - Agence OUI Are Web UX Design CX Neuromarketing CRO
Comment augmenter vos ventes de 400% grâce à l'UX-UI design ? - Agence OUI Are Web UX Design CX Neuromarketing CRO

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.
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
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.
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
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

Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
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.
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
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).
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
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…
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
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.
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
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.
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
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).
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO
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…
Comment augmenter vos ventes de 400% grâce à l'UX-UI design ? - Agence OUI Are Web UX Design CX Neuromarketing CRO
Comment augmenter vos ventes de 400% grâce à l’UX-UI design - Agence OUI Are Web UX Design CX Neuromarketing CRO

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.

En equipe ou en solo

Formation en UX & Neuromarketing

Donnez à vos collaborateurs des outils uniques pour améliorer l'eXpérience Client (CX) et augmenter vos taux de conversion (CRO).