3 tips UX pour ta landing page

par | Juin 30, 2020

La landing page… Le couteau suisse du marketing !

On sait tous qu’il faut en faire pour guider le lead vers la conversion… Mais ceux qui savent les réussir sont rares… N’est-ce pas ?

Avec cet article, je te propose d’apprendre quelques astuces psychologiques pour mieux guider le regard de ton prospect.

Guider le regard, pourquoi ?

La landing page a déjà comme objectif de guider l’utilisateur vers un comportement attendu : on veut le convertir.

L’utilisateur poursuit sa lecture ou sa navigation uniquement si on parvient à lui donner l’envie de le faire. Lorsqu’on optimise visuellement une landing page, c’est dans l’optique de créer l’envie de continuer à lire.

Le principe de contiguïté spatiale

Comment parler de landing page sur ce blog.. Dédié à la psycho et marketing… Sans parler du principe de contiguïté spatiale de Mayer ?

Un principe de la pédagogie

C’est un modèle de psychologie cognitive dédiée à la pédagogie au moyen des outils numériques.

On peut dire qu’il s’agit d’un travail conjoint entre le monde du multimédia, de la psychologie et des sciences de l’éducation. Toutes ces disciplines se sont demandées comment faciliter la compréhension et la mémorisation d’un support pédagogique multimédia.

Les principes de Richard Mayer sont au nombre de 10, mais aujourd’hui nous allons nous concentrer exclusivement sur le principe de contiguïté spatiale.

De quoi s’agit-il ?

Les principes de Mayer sont des critères à respecter pour assurer le bon déroulement de l’apprentissage.

C’est le but, n’est-ce pas ? Que le lead mémorise toutes les informations.

Ce principe de Mayer suppose qu’il est nécessaire d’appuyer une information verbale avec une représentation non verbale pertinente.

Pour simplifier, les images complètent un argument écrit. On se souvient mieux de vos arguments de vente quand ils sont appuyés par une image.

La synthèse d’un argument autour d’une émotion

Bon, illustrer son propos, c’est bien. Mais en profiter pour construire une émotion, c’est mieux.

Cohérence

Un autre principe de Mayer suppose qu’il faut supprimer tout ce qui n’aide pas à la compréhension. C’est le principe de cohérence.

Ce principe vise à réduire la charge cognitive liée à l’apprentissage.

Cherchez une illustration cohérente avec votre propos et si possible exhaustive, pour ne pas multiplier les illustrations.

Appeler un contexte avec un ancrage émotionnel

Mettre une image en guise d’illustration, c’est une faille intéressante à exploiter dans le registre subliminal.

Choisir l’image

Optez pour une illustration dont le style graphique rappelle un environnement visuel connu de votre cible.

Cela suppose bien entendu de bien avoir construit son persona en premier lieu. Pour cela, bientôt sera disponible une formation sur Via Nebula.

Le lien entre l’image et les émotions : une affaire de mémoire

Utiliser un élément visuel connu de ta cible va permettre d’appeler d’autres souvenirs et donc les émotions liées à ce souvenir.

En psychologie, on considère que la mémoire fonctionne comme un filet de pêche. Si tu tires un fil, tu amènes à toi des noeuds et d’autres fils. Les noeuds sont des émotions communes à plusieurs souvenir qui sont les fils.

Ce phénomène est imputable aux structures cérébrales impliquées dans la création d’un souvenir. En fait, c’est l’hippocampe, placé au centre bas du cerveau, qui synthétise les souvenirs lorsqu’ils se créent. L’hippocampe est très sollicité par l’amygdale qui est la structure cérébrale la plus primitive dans le ressenti des émotions. L’amygdale envoie l’émotion en même temps que le reste du cerveau envoie les informations sensorielles et intellectuelles.

Le contexte est figé de manière exhaustive : les émotions sont attachées aux images, sons et tout ce que les autres sens ont perçu. C’est pour ça que la madeleine de Proust rappelle l’enfance lorsqu’il hume l’odeur du gâteau.

Bench, bench, bench, innove. Mais sans plagiat !

Pour créer l’ancrage émotionnel graphique, le mieux reste d’explorer les éléments visuels qui composent les identités graphiques des autres marques favorisées par ton persona.

Cette exploration doit t’inspirer à proposer des styles, couleurs, compositions. Mais tu ne dois pas la copier.

Il y a un milliard de raisons éthiques à ne pas opter pour du plagiat, des dizaines légales, mais la plus importante si ces autres raisons ne suffisent pas : plagier, c’est le risque d’être identifié sur le marché comme un charlatan. Tu prends le risque d’être perçu comme un véritable imposteur, et tu porteras toujours cette étiquette. Et le mot imposteur n’est rien par rapport aux désignations comme « voleur », «  menteur » et d’autres noms d’oiseau que je ne veux pas mettre sur mon blog.

Générer du contraste cognitif

L’usage d’une image pour appuyer un argument commercial permet de dire au cerveau : « Cette zone de la page est différente des autres ».

Le fait de créer une fracture sensorielle entre deux éléments, c’est ce que j’appelle le /constraste cognitif/.

Less is more

Pour qu’un contraste soit possible, il faut absolument qu’il y ait du vide autour de tes éléments. Aérer ta page.

C’est une bonne chose car mon dernier tip, c’est de réduire tes arguments à leur plus simple version intelligible.

Un argument, pour le second, tu scroll !

Donc, je ne mets qu’un seul argument par « étage » de lecture. Pour moi, un étage correspond à un affichage d’écran. En CSS, c’est la propriété « height » paramètrée sur 100vh, comme suit :

.bloc_etage_de_lecture {height: 100vh;}

100vh, c’est 100% view-height
Soit : 100% de la hauteur de l’écran.

C’est une propriété responsive ?

Ça fait beaucoup de vide autour d’un argument, mais c’est autant de place pour permettre des décorations légères et le travail minutieux pour avoir un élément beau qui présente l’argument.

Soigne bien ton CSS à chaque argument.

Surcharge sensorielle publicitaire

Pourquoi réduire et vider ton étage de lecture ? Parce que vos prospects sont assaillis de toute part avec les notifications, les vidéos, les images. Le web est une activité fatigante.

Offre lui un moment de répit : de l’info claire dans un contexte minimal.

Moins il est sollicité, moins il est distrait. S’il n’est pas distrait, il suivra les arguments dans le bon ordre.

Réduire l’impact émotionnel

Il vaut mieux opter pour une émotion simple et éviter les éléments qui peuvent apporter de la confusion.

Si tu utilises un sigle très fort (ex : un coeur, une étoile, un chien, une marque très connue ou soleil), alors évite les visages dans le même temps. Les visages ont une portée émotionnelle très forte. D’ailleurs le cerveau les traite avec une zones spéciale dédiée. Ce n’est pas la même zone que les autres symboles.

On évite aussi les écritures en gras ET les majuscules. On choisit l’un ou l’autre.

Si l’émotion est trop forte, le prospect ne va rien retenir. Ou pire, il va quitter la page.

L’esprit comble le vide

Un autre argument en faveur du vide et du minimalisme …

L’homme est un créatif né. Nous avons TOUS une imagination débordante. Nous passons d’ailleurs le plus clair de notre temps à remplir les vides.

Tu ne me crois pas ?

Si je te dis un prénom… Comme : Romain, tu vas immédiatement imaginer une connaissance à toi. Pourtant, son visage n’est pas sur le site.

Il n’y a rien de pire pour l’esprit humain que l’incertitude. C’est pour ça que nous sommes faillibles à hauteur de nos biais cognitifs. Notre cerveau comble les vides.

Ce que tu n’écriras pas sur la page, ou ne dessineras pas, son cerveau le fera. Et tu as tout intérêt à lui donner une bonne émotion et le laisser construire une belle histoire entre toi et lui. Non ?

Conclusion et récapitulatif

Une bonne landing page, c’est :

  • Un argument doit être clair et minimal
  • Cet argument doit avoir une composante : visuelle, rédactionnelle, émotionnelle et imaginative
  • Cet argument doit être isolé sur un étage de lecture et son environnement visuel immédiat doit être minimal
  • Tu peux compter sur le cerveau de ton prospect pour compléter l’expérience avec ses souvenirs si tu as bien conçu ton argument.

Adapter ton entreprise à ta personnalité ?

Tu veux connaître tes atouts en tant que freelance et cibler tes failles pour prendre de meilleures décisions ?

Passe notre test psychologique professionnel et reçois gratuitement un rapport complet.

Axelle Abbadie – Consultante marketing de contenu (UX – SEO – Stratégie)

Je suis entrée dans le marketing par la SEO et le graphisme, en autodidacte. Durant 2 ans, j’ai accompagné des entrepreneurs individuels dans leur démarche marketing, organisationnelle et qualitative. Pour mieux m’adapter aux entrepreneurs individuels, j’ai complété ma boite à outils : je suis diplômée de psychologie, de l’Université Toulouse Jean Jaurès. Actuellement sous le statut Étudiant-Entrepreneur, au dispositif PÉPITE de Toulouse, je me dirige vers un diplôme d’ingénieur en pédagogie.

Je suis aussi passionnée de photographie et grande consommatrice de chicorée ✌️