Quentin Durantay

Quentin Durantay

Growth Hacker @ Dolead

, Webdesign

Les basiques du Web Design à connaître pour booster votre Taux de Conversion

Un des sujets qui revient le plus souvent avec nos clients est celui de la qualité des pages de destination (landing pages).

En effet, vous aurez beau optimiser vos campagnes d'acquisition payantes au maximum, sans une page de destination bien conçue, belle et qui convertit, toutes ces dépenses n'auront servi à rien.

C'est pourquoi nous proposons désormais notre offre Dolead Performance, où nous prenons en charge la conception et l'optimisation des pages de destination.

Dans cet article, nous allons voir quels sont les basiques du Design Web à connaître et à appliquer, quelque soit votre public cible et ou verticale. Cette liste de basiques se veut pragmatique, simple à mettre en place et universelle. Vous permettant de mettre en place vote Minimum Viable Design.

1/ Si vous n'aviez qu'une seule chose à retenir du Web Design

Commençons tout de suite par le point le plus important :

Le fonctionnement d'un design est bien plus important que sa beauté.

Derrière cette phrase ce cache un fait connu de tous et pourtant souvent ignoré. Un design est fait pour obtenir un objectif précis :

  • Obtenir des inscriptions pour votre newsletter
  • Recevoir des paiements pour votre dernier produit
  • Obtenir des partages sur les réseaux sociaux
  • Etc

Prenons un exemple simple, celui du site Leboncoin. Son design n'a rien d'exceptionnel, mais le fait est qu'il fonctionne. Pourquoi ? Tout simplement car tout vous pousse à poster et lire des annonces sur le site.

Page d'accueil du site Leboncoin

Ainsi, le moyen de plus simple d'obtenir d'un internaute qu'il effectue et surtout comprenne ce que vous voulez qu'il fasse sur votre site ou page de destination, c'est de simplement réduire le "bruit" sur la page. Simplifiez là au maximum.

Comme le disait si bien Antoine de Saint-Exupéry :

La perfection est atteinte, non pas lorsqu’il n’y a plus rien à ajouter, mais lorsqu’il n’y a plus rien à retirer.

2/ Utilisez des Grilles

Une règle simple à appliquer et de tout aligner sur vos pages, tout le temps.

Page d'accueil du du New York Times avec les grilles
Le site du New York Times utilise le système de grille

Un décalage d'un pixel seulement n'a pas l'air affreux à l'oeil nu, et pourtant il sera toujours inconsciemment remarqué.

De manière très pragmatique, utilisez des règles et alignez les différents éléments de votre page sur ces dernières. Et ce, tout le temps :

  • Lors du design avec votre logiciel préféré (Sketch, Photoshop, Illustrator, Balsamiq, etc)
    Utilisation des règles dans Adobe Photoshop
  • Lors du développement grâce à des frameworks CSS comme Bootstrap ou Foundation
    Le framework Bootstrap

3/ Choisissez votre palette de Couleurs

Il n'y a rien de pire qu'une page sur internet qui utilise trop de couleurs différentes.

Restez dans la simplicité, choisissez peu de couleurs, complémentaires, toutes neutres sauf une qui vous servira pour mettre en avant les parties importantes de votre page de destination (typiquement les CTAs).

Si vous n'êtes pas sûr de vous, reposez-vous sur les choix qu'on fait des designers, probablement bien plus forts de vous dans ce domaine. Utilisez donc les palettes toutes faites de ces sites :

Enfin, n'oubliez jamais la psychologie des couleurs. Selon le produit ou service que vous vendez, ou tout simplement votre culture/image de marque ou public cible, optez pour une couleur dominante adaptée.

Psychologie des couleurs en marketing

4/ Restez sobre dans votre choix de Polices

Ici, la règle d'or à toujours respecter est très simple : jamais plus de deux polices par page/site.

De la même manière, et à moins que vous soyez dans le domaine du luxe ou que vous ayez une image de marque très forte, évitez les polices "originales", souvent peu lisibles.

La aussi pour un souci de lisibilité sur les écrans d'ordinateurs, tablettes ou téléphones, préfères l'utilisation de polices dites sans-serif. Au contraire des polices avec serif, ces dernières n'ont pas de "pattes" au bout des lettres.

Différence police serif vs sans-serif

Là encore, faites confiance aux spécialistes dans le domaine, en vous aidant de ces sites dans le choix de vos polices :

N'oubliez pas que choisir des polices disponibles gratuitement sur Google Fonts ou Adobe Typekit vous permettra de les inclure plus facilement au sein de votre page de destination. En effet, ces deux services vous permettent d'utiliser leurs polices gratuitement sur internet via l'insertion d'un simple lien de fichier CSS.

Enfin, pour mettre en avant des parties de votre texte, jouez sur le "poids", les majuscules ou l'italique plutôt que de mixer maintes polices.

5/ Usez et abusez de l'Espace Blanc

C'est un point souvent oublié des marketers et pourtant, il s'agit de l'outil ultime pour réduire le "bruit" présent dans un design : l'espace blanc.

Il s'agit de l'espace vide laissé entre plusieurs composants de votre page de destination ou site web.

Page d'inscription de Dropbox
La landing page d'inscription de Dropbox, example parfait de l'utilisation de l'espace blanc

Une règle simple à appliquer et de toujours utiliser un tiers de plus d'espace entre deux blocs de contenu que ce dont vous aviez initialement prévu.

C'est d'autant plus vrai autour des titres et CTAs qui doivent respirer pour être remarqués.

6/ Travaillez la Disposition et la Hiérarchie

Il faut toujours placer les différents éléments de votre page de destination selon où se place le regard de l'internaute, et dans un ordre logique. A quoi sert de designer une page magnifique si rien n'est lu ?

Pour cela, gardez en tête le "F-pattern", qui montre comment se déplace le regard d'un internaute la première fois qu'il arrive sur une page d'un site web :

Illustration du f-pattern, chemin que suit l'oeil sur internet

Placez donc les éléments les plus importants (CTAs, titres et autres éléments de réassurance) sur cet axe. Pour les faire ressortir (utile quand un internaute "survole" la page, soit 99% des internautes), jouez avec :

  • La taille
  • La couleur
  • Le positionnement
  • Le contraste
  • L'espace blanc
  • La typographie

Page d'accueil du site de Google Ventures
Le site Google Ventures utilise le f-pattern à merveille

7/ Travaillez votre Contenu

Ça peut sembler "bateau" tant c'est logique, et pourtant, c'est le plus gros problème que je constate la plupart du temps : les marketers veulent trop en dire.

Arrêtez les phrases et paragraphes trop longs, pompeux, remplis de jargon. Simplifiez au maximum.

Utilisez des phrases courtes, des puces, résumez.

8/ L'Expérience Utilisateur se travaille en amont

L'expérience utilisateur, ou UX (pour User Experience) ne sert pas juste "à faire joli". Bien au contraire, il s'agit d'un travail visant à faire comprendre à un internaute les actions que l'on veut qu'il effectue.

Pour une page de destination, c'est indispensable. La page de destination est l'exemple typique d'une page ayant un but unique et précis.

L'internaute doit donc comprendre quel est ce but, où vous n'obtiendrez jamais aucune conversion.

C'est pour cela que vous devez travaillez votre Buyer Persona en amont, et designer votre page ou site web selon les caractéristiques de votre client type.

Faites donc attention à ce que les informations importantes et CTAs soient simples à trouver pour votre cible, et qu'il reprennent votre promesse client. Ne parlez pas fonctionnalités mais avantages.

Petit point important mais souvent négligé : réduisez au minimum possible la taille et le poids des images que vous utilisez. Une page de destination qui met beaucoup de temps à charger est une page avec du churn.

9/ Utilisez des Images et Icônes

Les images et icônes sont très utiles pour faire passer un message, souvent bien plus qu'un texte. Vous pouvez utiliser ces sites pour trouver des images ou icônes libres de droits :

Malgré tout, utilisez-les avec parcimonie (pour éviter le "bruit" et la lenteur des chargements évoqué plus tôt).

Pareillement, évitez les images "stock" peu naturelles. Franchement les images aux poses et situations "forcées" sont la plaie du marketing digital. Ne tombez pas dans le panneau vous aussi.

Enfin, gardez en tête que le texte peut souvent être dur à lire quand il est placé sur une image (pensez aux personnes ayant un écran mal réglé, aux personnes malvoyantes ou daltoniennes). En règle générale, utilisez un overlay gris ou noir avec au moins 85% d'opacité.

Conclusion

Vous voici donc en possession des règles de base du Web Design. Les appliquer est nécessaire pour obtenir des taux de conversion dignes de ce nom.

Nous les appliquons nous-mêmes pour les pages de destination que nous gérons pour les clients de Dolead Performance.

Si vous avez aimé cet article, sachez que nous allons en publier plus autour du thème du CRO (Conversion Rate Optimization, ou optimisation des conversions) dans les semaines à venir. N'hésitez pas à vous abonner à notre newsletter pour ne pa les rater !

S'abonner à notre newsletter

Soyez assurés de ne jamais manquer nos derniers articles sur le SEA, la Génération de Leads et le Marketing Digital !

Commentaires