Si vous vous êtes déjà retrouvé face à une page blanche - que ce soit pour créer une landing page, un PDF ou votre site web - vous savez qu'il n'est pas toujours évident de savoir où placer vos éléments. Cette phrase d'accroche doit-elle aller à gauche ? Cette image serait-elle mieux au-dessus ou en dessous de cet appel à l'action ? Bref, hiérarchiser les informations peut s'avérer complexe.
Pour ne pas se tromper, on peut appliquer bêtement ce que font les concurrents performants (ça fonctionne très souvent quand il s'agit de mise en page) ou tenter de comprendre pourquoi ils distribuent les informations d'une certaine façon. Observer la concurrence et les recettes gagnantes est une excellente idée, que ce soit pour rester à jour ou s'inspirer.
Chez Wifeo, nous trouvons tout aussi intéressant de comprendre les bases pour pouvoir innover. Dans le monde de la mise en page sur le web, l'une des bases n'est autre que le "F Pattern" ! En avez-vous déjà entendu parler ? Non ?
Apprêtez-vous à découvrir une règle extrêmement utile pour chacun des documents que vous créerez !
Avant de vous expliquer comment l'utiliser, prenons le temps de nous arrêter pour une courte explication. Le "F Pattern", également appelé modèle de lecture en F, est le chemin théorisé parcouru par les yeux lorsqu'ils se posent pour la première fois sur un document. Basé sur une étude de l'ergonome et spécialiste du comportement des utilisateurs Jakob Nielsen, le F Pattern indique que notre regard aura tendance à scanner une page en forme de F et non pas à tout lire progressivement et avec la même attention (contrairement à un roman). Concrètement, voici comment cela fonctionne lorsqu'un utilisateur pose son regard sur un PDF, par exemple :
Étape 1 : Le regard commence toujours par balayer la partie supérieure de la page, en allant de gauche à droite. Cette zone comprend généralement le titre, le sous-titre, parfois un petit paragraphe, une image de contextualisation et un appel à l'action. Dès les premiers instants, l'utilisateur comprend de quoi il s'agit, s'il peut être intéressé ou non et ce que l'on attend de lui.
Étape 2 : L'utilisateur opère ensuite un balayage vertical (rien à voir avec la coiffure). Il va ainsi pouvoir lire rapidement les différents titres des paragraphes, les chiffres censés le convaincre, les listes à puces pouvant l'aider, etc. Il semblerait que l'attention soit moins portée sur la droite de la page que sur son opposée durant cette étape.
Étape 3 : Notre cobaye effectue un dernier aller-retour de gauche à droite pour trouver sa conclusion et le formulaire de contact ou les informations permettant d'avancer.
Pourquoi utiliser le F Pattern ?
Si vous placez toutes les informations pertinentes au mauvais endroit sur votre page, votre lecteur s'impatientera et finira par quitter votre document ou votre site, sans même savoir si votre solution/produit pourrait l'intéresser. Il est nécessaire de comprendre ces points pour adapter vos mises en page et optimiser vos conversions.
Ce que le F Pattern nous enseigne est riche, et même pour votre marketing et votre vente en général.
Voici quelques conseils :
Capturer l'attention ;
Couper court à toutes les difficultés de compréhension ;
Garder l'attention avec des titres, des sous-titres et privilégier différentes parties plus petites à un grand texte monotone ;
Être clair et concis ;
Donner toutes les informations nécessaires pour une étape, mais ne pas tout dire sous peine de noyer vos lecteurs ;
Ne pas en faire trop : évitons de surcharger d'images et de couleurs.
Maintenant que vous connaissez la lecture en F, vous vous apercevez sans doute que toute la concurrence connaît ce secret depuis bien longtemps. À vous de l'adapter à vos besoins pour séduire vos clients et créer des documents efficaces !
Vous cherchiez des informations pour créer la mise en page de votre futur site ? Voilà qui est fait ! Vous avez besoin d'un outil pour créer votre site et vos landing pages sans écrire une ligne de code, facilement et en quelques heures ? Découvrez l'offre de Wifeo ! En plus de notre outil, nous mettons à disposition de nombreux contenus gratuits (blog, vidéos, guides, FAQ, etc.) pour vous aider à atteindre vos objectifs d'indépendants ! Intéressé ? Découvrez tout ici !