11 recommandations en design web pour augmenter votre taux de conversion

Évitez les erreurs les plus communes en design web et qui font mal à votre taux de conversion.

AVANT DE COMMENCER

Je veux vous dire quelque chose :

RECOMMANDATION #1

Le plus grand mythe

« La page web est trop longue! ».

Comme copywriter, on l’entend souvent celle-là. C’est LE mythe le plus répandu.

Mais les chiffres ont démontré encore et encore qu’une longue page web peut très bien convertir et parfois mieux qu’une courte page web.

La longueur d’une page varie selon plusieurs facteurs :

• le niveau de complexité du service/produit vendu ou de la cause défendue

• le niveau d’engagement demandé à la personne qui vous lit (en argent ou en temps)

• le niveau de conscience à son arrivée sur la page (ce qu’elle connaît de vous et de votre cause, ce qu’elle connaît de son problème et des solutions qui s’offrent à elle, etc.)

Ma recommandation : ne modifiez pas le texte de votre copywriter *strictement pour des questions de design*.

Ça pourrait être tentant de raccourcir un titre ou un appel à l’action ou encore de supprimer une section pour que « ça rentre dans votre maquette ». Mais ne le faites pas.

Le design devrait s’adapter à votre texte, et non l’inverse. C’est pourquoi mieux vaut commencer par avoir les textes en main avant de faire le design.

Puis testez, testez, testez (voir recommandation 11). Et faites des changements basés sur vos tests.

Pas sur le mythe du « toujours vouloir faire plus court ».

RECOMMANDATION #2

La Hero Section

J’en aurais beaucoup à dire sur la « hero section » ou « hero header » d’une page web.

Vous savez, c’est cette première section qu’on voit quand on atterrit sur une page.

Mais je vais me contenter de dire une chose :

Si votre copywriter précise que les informations X, Y et Z doivent être en « above the fold », ça veut dire qu’elles doivent être visibles sans avoir à défiler (scroller) vers le bas.

Typiquement, ces informations comportent :

• Un titre

• Un sous-titre

• Un appel à l’action

• Une image (généralement à droite)

• Et parfois d’autres éléments comme une barre de logos ou autres preuves sociales.

Ces informations ont été minutieusement pensées par votre copywriter de manière à pouvoir « convertir » à elles seules la personne qui vous lit. Ou à tout le moins, lui donner envie de lire la suite.

Alors c’est essentiel qu’elles apparaissent toutes sans avoir à défiler vers le bas – en sachant que ça demande parfois quelques adaptations au niveau du visuel sur la version mobile.

Mais il y a une erreur commune qui nuit à la conversion et qu’on voit sur la plupart des sites web (y compris le mien au moment où j’écris ces lignes!) :

Celle de créer un « false bottom ». C’est-à-dire l’illusion qu’il n’y a rien plus bas avec une « hero section » qui prend 100% de l’écran en hauteur (100vh).

Ou pour le dire autrement : c’est quand la ligne du bas de votre « hero section » est parfaitement alignée avec le bas de votre écran.

Le risque, c’est que la personne qui vous lit croit qu’il n’y a rien plus bas et que votre page web s’arrête là.

Pour éviter les « false bottoms », assurez-vous qu’on aperçoit le début de la section qui suit juste en dessous. Ou à tout le moins ajouter une flèche qui pointe vers le bas pour indiquer que la page continue.

RECOMMANDATION #3

Le menu et footer

Devriez-vous retirer votre menu (bar de navigation) et votre footer (pied de page) pour vos landing pages (pages d’atterrissage)?

Votre équipe web vous dira peut-être non de peur que ça nuise à l’expérience utilisateur.

Et votre direction pourrait avoir peur que ça affaiblisse votre branding s’il n’y a pas votre logo et vos médias sociaux sur toutes vos pages web.

Mais ça a été prouvé que de retirer votre menu et votre footer augmentera votre taux de conversion.

Et la raison est simple : votre menu et votre footer ont pour effet de distraire la personne qui vous lit. Elle a plus d’options qui s’offrent à elle et doit faire un choix. Elle risque alors de quitter votre landing page alors qu’elle vient juste « d’atterrir ».

Le but d’une landing page n’est pas de rediriger, mais de « convertir ». Ou pour le dire autrement, de faire en sorte qu’on fasse une action précise (p. ex. : faire un don, acheter, s’abonner, etc.). Alors rendez-leur service (et à vous aussi) :

Retirez votre menu et votre footer sur vos landing pages.

Et gardez-les seulement pour des pages qui n’ont pas d’objectif précis de conversion. Comme votre page d’accueil ou votre page À propos par exemple.

RECOMMANDATION #4

Les appels à l’action

Trop souvent, je vois des appels à l’action (boutons) qui ont été réécrits, déplacés ou carrément supprimés par des client.e.s ou des équipes web au moment de mettre en ligne une page web.

Je vous conseille de vérifier auprès de votre copywriter avant. Parce que votre appel à l’action a un impact majeur sur votre taux de conversion.

• Un test a démontré que le changement d’un seul mot peut augmenter votre taux de conversion de plus de 25 %. Si votre copywriter a choisi comme appel à l’action « Je m’abonne gratuitement », ne le remplacez pas par « S’abonner » juste parce que c’est plus court.

• Un autre test a démontré que le simple déplacement d’un bouton pouvait augmenter votre taux de conversion de 304 %. Si votre copywriter a choisi de mettre votre appel à l’action à un moment précis et de le répéter à tel et tel endroit, ne le déplacez pas juste parce que ça fit mieux dans votre maquette. Et ne le supprimez pas, même si ça sonne répétitif.

Pour ce qui est du design, gardez en tête les 3 principes suivants :

1. Une couleur contrastante pour le bouton

2. Une hiérarchisation entre l’appel à l’action principal et secondaire s’il y en a (couleur vive vs pâle, bouton vs texte avec hyperlien, etc.)

3. Un emplacement qui correspond au niveau d’engagement de la personne qui vous lit (demandez une action quand elle est prête à la faire – pas avant)

RECOMMANDATION #5

Les témoignages

Il y a plusieurs types de preuves sociales : logos, stats, prix, revue de presse.

Mais la première qui nous vient en tête, ce sont bien sûr les témoignages.

Ils augmentent votre crédibilité, notoriété, autorité… et oui, vous l’avez deviné : votre taux de conversion.

Pour ma part, j’aime bien prendre un extrait du témoignage et en faire le titre du témoignage comme le fait Jacob McMillen et plusieurs autres copywriters reconnus. Ça permet au monde qui vous lit de scanner vos témoignages si jamais le temps manque.

Les témoignages sont généralement accompagnés d’une photo et, si c’est pertinent, du titre professionnel et de l’organisation.

Et quand il est question du nombre de témoignages, les opinions divergent. Mais disons que c’est difficile d’en avoir trop. Eddie Shleyner, un copywriter de renommée, en met des tonnes sur chacune de ses landing pages.

Les témoignages doivent être placés à des endroits stratégiques à travers la page.

• Exemple 1 : avant un appel à l’action pour venir renforcer votre notoriété juste avant de leur demander de faire une action précise. Vous pourriez augmenter votre taux de conversion de 64%.

• Exemple 2 : après une section où vous parlez de votre impact pour renforcer votre crédibilité et pour dire subtilement « regardez, ce n’est pas juste nous qui le disons! »

Avant de déplacer un témoignage, demandez l’avis à votre copywriter.

Et si l’envie vous prend de rassembler tous vos témoignages sous forme de carrousel « parce que ça fait plus court », lisez ça avant (recommandation 6).

RECOMMANDATION #6

Les carrousels et accordéons

Oui, je sais. Plusieurs en raffolent.

Ça fait stylé d’avoir des carrousels sur son site (j’en ai déjà eu moi aussi).

Mais ça nuit à votre taux de conversion. Et ce n’est pas moi qui le dis. Les chiffres parlent d’eux-mêmes :

Une étude a démontré que seulement 1% des visiteurs cliquent sur un carrousel (ou slider). Et 89% du temps, c’est sur la première « slide ». Ça veut donc dire que toutes les autres slides ne sont quasiment jamais lues.

En plus de ne pas être lus, les carrousels ralentissent votre site web, ce qui à son tour a un impact sur votre taux de conversion.

Alors que ce soit pour votre « hero section », vos témoignages ou vos services, évitez les carrousels.

Utilisez plutôt du contenu statique. C’est moins hot. Mais ça convertit mieux.

PS – Pour ce qui est des accordéons, ils ne ralentissent pas votre site web comme le font les carrousels. Mais ils obligent la personne qui vous lit à faire un clic supplémentaire. C’est correct si c’est une information secondaire (genre la FAQ – Foire aux questions). Mais ne mettez pas de l’information essentielle en accordéon (genre la description de vos services). Et oui, même si ça rallonge votre page web (vous vous souvenez du plus grand mythe dont je parlais au début?).

RECOMMANDATION #7

Les effets spéciaux

C’est l’fun d’avoir un beau site. Et je vous comprends de vouloir avoir quelques effets spéciaux question de donner un peu de piquant.

Mais du moment que ça ne soit pas une distraction (parce que distraction = moins de conversion).

Il y a tout plein d’effets spéciaux alors ça serait difficile de les prendre un par un.

Mais je vais en mentionner 2 parce que je les vois souvent et qu’ils affectent directement votre texte :

1. Typewriter effect : quand on voit un curseur qui clignote et que plusieurs mots apparaissent les uns à la suite des autres comme si quelqu’un était en train de les écrire

2. Scrolling text effect : quand le texte défile automatiquement comme on le voit durant les nouvelles à la TV en bas de l’écran

Je ne vous recommande pas d’employer ces effets spéciaux même si ça fait « cool ».

Parce qu’on ne reste pas là devant notre écran à attendre que toute la phrase apparaisse. On risque plutôt de poursuivre notre chemin. Soit en défilant vers le bas, soit en quittant la page web. Dans les deux cas, on manque l’information.

Si vous tenez absolument à les employer, faites-le pour un texte décoratif. Pas pour le descriptif de vos services, pour une barre de logos (preuve sociale) ou pour tout autre élément qui a un impact direct sur le taux de conversion de votre page.

RECOMMANDATION #8

Les images

Encore une fois, on pourrait en dire long sur les images. Je vous mets ici les points les plus importants :

• Des images originales (et non tirées de banques d’images – stock images)

• De qualité, mais compressées (pour augmenter la rapidité de votre site)

• Qui appuient et font ressentir ce qui est écrit (vous seriez surpris.e.s du nombre de sites web qui affichent des photos de personnes contentes à côté d’un texte qui parle d’un problème vécu par leur public cible!)

• Avec des humains quand c’est pertinent (des recherches ont démontré que ça peut augmenter le taux de conversion)

• Avec une légende sauf pour les images strictement décoratives (les légendes sont en moyenne 300% plus lues que le corps de texte d’une page web)

• Et mon truc préféré : employer des « images directionnelles ». Ou en des termes moins techniques : des images qui « pointent » vers votre appel à l’action. Vous trouverez des exemples ici.

RECOMMANDATION #9

Les espaces et alignement

Ça peut paraître contre-intuitif. Mais le « vide » aide à mieux convertir.

Les espaces blancs rendent votre page plus lisible. Et font ressortir votre texte.

Pour ce qui est de l’alignement, évitez d’aligner votre texte à droite en tout temps. Une étude scientifique a démontré que ça nuit à la lecture vu qu’on lit de gauche à droite (du moins en français).

Privilégiez l’alignement de votre texte à gauche.

Et utilisez l’alignement centré avec modération seulement pour de courts textes (titres ou paragraphes de quelques lignes).

RECOMMANDATION #10

Les formulaires

Une fois qu’on a cliqué sur le bouton « Je donne » ou autre, la job n’est pas finie.

Tant que l’action de donner, d’acheter, de s’abonner, etc. n’a pas été complétée, ce n’est pas encore gagné.

On doit remplir un formulaire avec nos coordonnées et/ou nos informations de paiement.

Je vous donne quelques conseils en rafale concernant les formulaires :

• Mentionnez ce qu’on va obtenir ou ce à quoi on contribue en remplissant le formulaire. Vous pouvez même en faire le titre de votre formulaire (p. ex. mon infolettre : Votre cause ne laissera personne indifférent. Recevez 1 fois par mois 1 truc de copywriting)

• Rappelez le bénéfice dans votre appel à l’action (bouton). (p. ex. : Je veux apprendre à persuader VS. Je m’abonne)

• Limitez le nombre de champs à l’essentiel. 1 champ en moins pourrait augmenter votre taux de conversion de 26%.

• Augmentez votre crédibilité avec l’ajout de témoignages (voir recommandation 5). Pas juste sur votre page web, mais aussi sur votre page formulaire. Je vous mets ici un exemple d’un de mes formulaires de paiement pour mon service de coaching.

• Demandez-vous si une page dédiée à votre formulaire est nécessaire. Parfois, 2-3 champs suffisent à même votre landing page. Le moins de clics, le mieux c’est.

• Utilisez le moins possible les dropdowns (menu déroulant). Ça prend parfois moins de temps pour l’utilisateur.trice d’écrire « Canada » que de défiler 32 pays avant d’arriver à la lettre « C ».

• Retirez tout doute avec une mention de votre politique de confidentialité.

• Testez différents formats. Par exemple, un formulaire qui se remplit en plusieurs étapes plutôt que de rendre tous les champs visibles d’un seul coup.

RECOMMANDATION #11

Testez, testez, testez

Que ce soit votre texte ou votre design, rien n’est coulé dans le béton.

Faites des tests A/B pour voir ce qui fonctionne le mieux.

Et évitez les erreurs les plus communes dans ce genre de tests – comme de tester plusieurs modifications ou hypothèses en même temps.

Plusieurs outils comme Hotjar, Crazy Egg et Smartlook* vous aident à savoir quoi améliorer sur votre page web pour augmenter votre taux de conversion avec :

• Des heatmaps pour visualiser les zones chaudes et froides de votre page web, c’est-à-dire les endroits où le monde passe le plus de temps ou clique le plus

• Des enregistrements de sessions pour voir comment les utilisateur.trice.s interagissent avec votre page web

• Et plein d’autres belles choses!

Combinés à Google Analytics, ces outils sont une mine d’or.

Et n’oubliez pas aussi de tester la vitesse de votre page web parce qu’elle affecte votre taux de conversion. Vous pouvez le faire gratuitement avec GTmetrix, Pingdom ou PageSpeed Insights.

*Aucun lien affilié (je ne reçois pas de commission sur l’achat de ces outils).

POUR ALLER PLUS LOIN

3 ressources