Expérience utilisateur et web design : au service de votre conversion ?

Rédigé par Auxence le 29 mars 2019
Temps de lecture : 9 min.

La fenêtre de tir disponible pour capter l'attention de l'internaute passant sur votre site est très courte. Elle se résume au temps moyen de concentration dont l'homme est capable : huit secondes. Les parcours de navigation et le design de votre site internet deviennent alors des éléments décisifs dans le succès de votre stratégie de conversion.

 Neoptimal vous propose ces quelques conseils afin d'aborder plus sereinement ces deux points.

  1. La construction d'une expérience client satisfaisante
  2. Le souci du design
  1. La construction d'une expérience client satisfaisante
a. Comprendre la psychologie de votre utilisateur

Parler d'expérience revient souvent à parler de psychologie. Posez-vous des questions pertinentes : quelles sont les habitudes de vos utilisateurs ? Quelles sont leurs attentes ? Comment les satisfaire et éviter de les frustrer au maximum ?

Les 3 constats suivants vous permettront d'appréhender des exemples de tendances comportementales typiques d'un internaute.

 

  • "Le modèle en F" : des études ont été menées afin de découvrir comment l'internaute moyen lisait une page web en traquant le mouvement de leurs yeux. Il se trouve que les personnes ont tendances à scanner la page suivant un modèle en F. Tout d'abord, un mouvement horizontal est opéré afin de lire la partie haute de votre contenu. Cela constitue la première barre de votre F. Puis, ce mouvement est répété plus bas sur un espace plus court. Voilà la deuxième barre de votre F. Enfin, il est commun que les personnes scannent le contenu de façon vertical, sur la gauche. La conséquence directe ? Tout votre contenu ne sera pas lu, et des zones chaudes sont à privilégier. Nous verrons plus tard comment placer les informations au bon endroit.

Modèle en F

 Source : Nielsen Norman Group

 

  • "La loi de Hick" : cette loi n'est pas liée uniquement aux internautes mais se trouve être plus générale. Voici son postulat : le temps nécessaire à une personne pour prendre une décision est proportionnel au nombre de choix possible. Trop de choix peut aller jusqu’à perdre votre utilisateur, dont les actions vont se perdre dans la proportion démesurée du champ des possibles. Il est donc inutile de noyer votre site web d'informations. Soyez clairs, précis, efficaces.

 

  • L'internaute est impatient. Selon une étude du groupe Aberdeen, une seconde de retard dans le chargement de vos pages peut causer une baisse de conversion de 7%. Soyez rapides !

 

b. Simplifier l'accès à l'information 

Impatient, en difficulté face au choix, peu capable de se concentrer… le portrait de notre comportement sur le web n'est pas des plus enjôleurs. Ces réalités contraignent les entreprises à un exercice parfois compliqué : simplifier au maximum l'accès à l'information.

Tout d'abord, prenons en compte le modèle de lecture en F précédemment évoqué. Celui-ci implique que vos deux premiers paragraphes doivent contenir les informations les plus importantes, ou du moins un titre ou des mots clés qui évoquent de façon claire ce dont va parler votre page web.

La clarté de l'information est particulièrement primordiale pour des acteurs BtoB, dont les sites peuvent contenir plusieurs indications clés à ne pas rater. L'internaute doit posséder un accès facile aux informations suivantes :

  • Votre offre
  • Votre valeur distinctive
  • Vos méthodes de travail


Il est très utile de placer, en bas de page et à d'autres endroits stratégiques comme sur le haut de la page d'accueil une tagline qui vous sert de proposition de valeur. Cela vous permet d'exprimer en quelques mots qui vous êtes, ce que vous faites, pour qui vous le faites et pourquoi vous le faites.  

 

Ensuite, ne surchargez pas votre page, et ce dans tous les sens du terme. Tout d'abord, ne mettez pas trop de liens dans les menus de navigations.  Comme évoqué, cela n'aide pas l'utilisateur à faire des choix et donc à procéder à des actions sur votre site. Ce qui peut marcher pour des sites d’e-commerce type Amazon peut vite perdre un prospect sur un site BtoB. Voici un exemple de menu à éviter :

Amazone Menu

Pensez également à ne pas trop charger votre page en termes d'images. Nous vous conseillons de mettre des images de qualité exportées pour le web qui ne dépasse pas les 400 ko. Cela permettra à votre site internet de charger plus vite, ce qui peut améliorer considérablement votre expérience utilisateur. 

Enfin, n'hésitez pas à utiliser de l'espace blanc. L'espace vide, ou blanc de texte et d'information, aide l'utilisateur à se concentrer sur un unique groupe d'information. Cette technique de mise en valeur peut s'avérer très utile lorsqu'une information vous semble essentielle. En voici un exemple :

 Apple

c. Soyez pro-actifs : mettez en place des mécanismes qui suggèrent à votre utilisateur de faire des choix

Convertir les internautes en contact ou prospects potentiels est un art qui se veut subtile. Néanmoins, il existe de nombreuses techniques facilement applicables afin d'améliorer votre conversion. Parmi celles-ci, nous vous proposons d'en découvrir quelques-unes.

Tout d'abord, placez vos call to actions (CTA) avec attention.

Vous pouvez réutilisez le modèle de lecture en F pour les placer sur des zones où ils auront plus de chance d'être vus. 

Vous pouvez également vous appuyer sur la théorie de la Gestalt, "forme" en Allemand, qui postule que face à la complexité de notre environnement, notre cerveau va chercher à mettre en forme et à organiser ce qu'il voit. Cette théorie se décline alors en plusieurs lois dont la loi de la bonne forme est la loi principale. Un ensemble de parties informe, comme un groupement aléatoire, tend à être perçu comme une forme, qui se veut simple, symétrique, stable. En somme, une bonne forme. 

New call-to-action

Comment cela s'applique à vos interfaces ? Construisez des zones regroupant des informations similaires et placez un CTA. Utilisez l'espace blanc pour mettre en valeur ces zones. Il est fortement recommandé d'adapter un aspect graphique similaire pour les zones ayant des fonctions ou une importance similaire. Cela facilitera significativement la compréhension de votre utilisateur.

Une solution plus radicale vous permet d'imposer une action dès l'arrivée sur votre site. Vous pouvez mettre un portail de bienvenue, qui mettra en avant un seul CTA, et rien d'autre. L'utilisateur devra scroller – c’est-à-dire faire défiler verticalement le contenu du document sur votre écran d'ordinateur à l'aide de votre souris ou de votre pavé tactile - s’il souhaite obtenir d'autres informations. L'avantage est que cela vous assure d'avoir de la visibilité sur votre CTA. En revanche, il devient crucial de savoir quel type d'information unique vous souhaitez mettre en avant.

Gate-1

Au-delà des CTA, vous pouvez également miser sur un accompagnement poussé de vos utilisateurs à travers des chats en live ou des chat automatisés. Ils vous permettront de personnaliser l'expérience de votre utilisateur et de vous montrer très réactif face aux potentiels questions que celui-ci peut se poser.

  1. Le souci du design

a.L'importance du design et de l'esthétique 

Attention à ne jamais sous-estimer le rôle du design, qui dépasse le simple aspect de la beauté de votre site. De nombreuses statistiques prouvent que le design est un élément décisif. Selon l'université de Stanford, 46.1% des gens déclarent que le design d'un site web est le critère premier pour déterminer la crédibilité d'une entreprise. Le design est donc un outil primordial pour asseoir son autorité. Mais c'est également un outil qui peut convaincre l'utilisateur de s'attarder plus longtemps sur votre site. Selon Adobe, sur un quart d'heure, 2/3 des personnes préfèrent voir un site web au bon design plutôt que complet. Encore plus radical, 38% des utilisateurs quitteront votre site s’il est mal conçu !

 b. Les basiques 

Neoptimal vous propose de vous assurer que vous remplissez les critères de certains basiques dans un premier temps.

Tout d'abord, vérifier que votre site est bien pensé en responsive design. Le responsive design est conçu pour que votre site web s'adapte automatique aux dimensions de l'écran qui le visionne. Un site responsive design s'adapte de lui-même et modifie son menu, ses images et plus généralement sa structure pour être visible sur différentes tailles d'écrans : ordinateur, tablette, téléphone…  Des logiciels gratuits comme Adobe Xd vous permettent de créer des structures de site - wireframe - sur différentes échelles. 

Ne négligez pas non plus la qualité de vos images. Bien que nous vous conseillions d'optimiser le poids de vos images, il est indispensable de posséder des images haute résolution. Vous pouvez les trouver sur de banques d’images gratuites tel que unsplash ou pexels. Si le poids est trop lourd, utilisez photoshop ou un logiciel en ligne afin de l'optimiser pour le web, tout en gardant sa qualité.


La couleur est une variante extrêmement importante de votre site web. Comme le souligne le designer Tom Kenny, l'importance de la couleur est souvent sous-estimée. Elle transmet l'essence générale de la marque ainsi que l'atmosphère globale du site. Certaines combinaisons de couleurs évoquent un spectre multiple d'émotions et de réactions. Assurez-vous que les couleurs que vous choisissez reflètent l'émotion que vous souhaitez mettre en avant.

 

Afin de sélectionner ces couleurs, vous pouvez faire appel à un professionnel comme un directeur artistique ou un graphiste. Néanmoins, vous pouvez également travailler cela seul.  Tout d'abord, sélectionnez des images pour en faire un moodboard. Un moodboard est un assemblage d’images, d’objets ou de mots qui est utilisé pour exprimer le style choisi dans le cadre du développement d’une idée créative (concept produit, publicité, design, agencement, etc). Cela permet d’expliquer de façon visuelle ce que vous imaginez pour votre projet.

Téléchargez ces images sur la roue chromatique d'Adobe en cliquant sur "importer image".  Cela crée automatiquement un modèle de couleurs basé sur les couleurs des photos. Vous pouvez construire votre thème chromatique à partir de ce modèle.

Afin de booster votre conversion, gardez précieusement en tête l'importance du contraste entre les couleurs. Le texte, les titres et les CTA doivent être particulièrement visibles. Utilisez des couleurs de contraste avec le fond afin de mettre en lumière les éléments que vous considérez les plus importants !

 c. Les tendances 

En plus de vous assurer d'appliquer correctement les basiques du design, vous possédez la possibilité de surfer sur certaines tendances. 

  • Micro Interactions : poussez vos utilisateurs à agir grâce aux micro-interactions. Par exemple, passer sa souris sur un bouton et les couleurs changent ou la structure s’anime - comme un effet "hover". Cela augmente fortement le dynamisme de votre site web.

 

  • Le minimalisme : Vous pouvez combiner le vide (ou l'espace blanc comme cité plus haut) à une iconographie simple mais puissante comme des portraits pour souligner l'émotion et la simplicité. Cela peut humaniser votre site web.

 

  • La page unique : le "one page" consiste à présenter aux internautes un morceau de page qui occupe tout l'écran, souvent avec une photo en arrière-plan. Pour voir la suite, l'utilisateur est obligé de scroller. Ce design également minimaliste se veut léger et attrayant. Attention néanmoins à ne pas paraitre trop fade - n'hésitez pas à repenser la façon de scroller par exemple. Bien que pouvant rapidement augmenter en technicité, il existe des types de scroll très originaux qui peuvent surprendre votre utilisateur comme le scroll à l'horizontal ou l'écran divisé en deux colonnes, et celles-ci défilent à des vitesses ou des sens différents.

  

Augmenter ses taux de conversion passe donc par le design et l'esthétique. Une fois votre site prêt, commencez un process de test and learn. Afin de voir si vos mises à jour sont efficaces, vous pouvez utiliser des outils d'analyse comportementale comme hotjar. Cela vous permettra d'établir des cartes de "points chauds" selon les comportements d'utilisateurs et de repérer les outils - boutons, textes, images - qui marchent le plus. Vous pourrez les comparer aux objectifs fixés lors de la création de votre site et ajuster le tout dans une optique d’optimisation constante de votre outil.

N'oubliez donc pas que cela représente un travail de longue haleine. Si vous vous sentez perdus, nos spécialistes de la génération de lead et de la conversion digitale BtoB sont là pour répondre à vos besoins !

contact-site-internet

Envie d’approfondir ?