Le Nielsen Norman Group a révélé que les utilisateurs passent 57 % de leur temps de consultation au-dessus de la ligne de flottaison, l'attention chutant brutalement après le premier écran. Pour les landing pages, ce chiffre est encore plus extrême : les visiteurs décident de rester ou de partir en l'espace de 2 à 3 secondes.
Cela signifie que le design de votre zone au-dessus de la ligne de flottaison est littéralement votre seule chance de retenir un visiteur.
Ce que révèlent les études d'eye-tracking
Des études d'eye-tracking menées par Djamasbi et al. (2010) ont identifié les éléments qui captent l'attention au-dessus de la ligne de flottaison :
| Élément | Temps de fixation moyen | Première fixation |
|---|---|---|
| Image héro / visuel | 1,2 s | 67 % regardent ici en premier |
| Titre principal | 0,8 s | 22 % regardent ici en premier |
| Bouton CTA | 0,4 s | 3 % regardent ici en premier |
| Navigation | 0,3 s | 8 % regardent ici en premier |
Le visuel héro capte le plus d'attention, mais la conversion se produit au niveau du CTA. Le défi consiste à concevoir un parcours visuel allant du visuel → titre → CTA.
Les 5 éléments d'une zone de flottaison à haute conversion
1. Un visuel héro qui suscite le désir
L'image héro doit montrer le résultat, pas le produit. Adaval & Wyer (1998) ont démontré que l'imagerie illustrant l'état final (un client heureux utilisant le produit) génère 2 fois plus d'intention d'achat que les photos du produit seul.
2. Un titre comme promesse de valeur unique
Selon les recherches en copywriting de conversion de Copyhackers, les titres qui correspondent au dialogue interne du visiteur surpassent les propositions de valeur génériques de 3 à 5 fois. Le titre devrait compléter la phrase : « J'ai besoin de quelque chose qui va... »
3. Une hiérarchie visuelle qui guide l'œil
Les recherches de Faraday (2000) sur la hiérarchie visuelle dans le web design montrent que la taille, le contraste et la position créent un « ordre de lecture » qui peut être mesuré et optimisé. Le flux devrait être : Ancre visuelle → Problème/solution → CTA.
4. Un CTA avec un contraste maximal
Ling & van Schaik (2006) ont découvert que les boutons CTA présentant le contraste de couleur le plus élevé par rapport à leur arrière-plan recevaient 21 % de clics en plus, quelles que soient les couleurs utilisées. C'est une question de contraste, pas de couleur.
5. La preuve sociale au-dessus de la ligne de flottaison
Placer un signal de confiance (nombre de clients, évaluation, barre de logos) au-dessus de la ligne de flottaison réduit l'évaluation des risques par le cortex préfrontal, comme le montre Klucharev et al. (2009). Une seule ligne comme « Approuvé par plus de 10 000 marketeurs » peut augmenter la conversion de 15 à 20 %.
Testez votre landing page
Collez l'URL de votre landing page dans FlowDx pour voir exactement où se porte le regard des visiteurs. La carte de chaleur de l'attention révèle si votre CTA se trouve dans la « zone chaude » ou s'il se perd dans le bruit.
Références
- Nielsen Norman Group. Scrolling and Attention.
- Djamasbi, S. et al. (2010). Generation Y, web design, and eye tracking. Int. Journal of Human-Computer Studies.
- Klucharev, V. et al. (2009). Reinforcement learning signal predicts social conformity. Neuron.