Pourquoi t’as mis le bouton sous la ligne de flottaison ?

Ahhh, la ligne de flottaison. Directement inspirée du lexique marin, porteur de rêve…
J’adorerais que ce concept soit viable. Mais il ne l’est pas. En tous cas, pas dans le contexte de cette question précise.

Mini-définition pour les non-initiés : la ligne de flottaison est une ligne imaginaire qui sépare ce que vous voyez tout de suite sur un site (le logo en haut, la navigation, les titres, le début du contenu…) de ce qui n’apparait qu’après avoir fait défiler la page (le reste du contenu, le footer…).

Ce terme recouvre des notions fondamentales en UX (expérience utilisateur) comme en SEO (optimisation pour les moteurs de recherche). Google et vos visiteurs vont lire en priorité ce qui est en haut de votre site.

Parce que cela fait appel à un réflexe humain : nos yeux “scannent” une page web de haut en bas, et sont attirés par les zones mises en valeur. Si l’on ne trouve pas rapidement ce qu’on cherche au cours de ce “scan”, on va se désintéresser du site. Ou essayer d’entrer dans le détail, pour les plus tenaces seulement… Il est donc obligatoire de bien hiérarchiser l’information, c’est même un métier.

Ce contexte étant posé, lors de la création d’un site, le premier réflexe serait de dire : “je mets tout en haut, ouh la, bien au-dessus de la ligne de flottaison !”. Moi, si j’étais Amazon, j’aurais fait ça direct.

ligne-de-flottaison-amazon

Tous les boutons bien au-dessus de la ligne de flottaison, emballé c’est pesé, profit maximal, bateaux à gogo.
Sauf qu’au delà des considérations d’architecture de l’information, de SEO, de sémantique, d’identité de marque, d’éléments de rassurance pour l’acheteur…

La ligne de flottaison fixe, ça n’existe pas.

Vous venez de lire la moitié d’un article sur une chimère, une licorne, un leprechaun. Parce que ce qui est au-dessus de la ligne de flottaison sur VOTRE écran…

lignes-de-flottaison-responsive

 

… n’est pas exactement la même chose que sur l’écran de votre voisin. Ou son téléphone. Sa tablette. Son frigo.
Son chien robotique (ça c’est pour que l’article soit encore valable dans 10 ans).

On fait comment, du coup ?

Puisque tous les écrans sont différents, et même s’il existe des standards de résolution d’écran, on adopte une démarche qui consiste à :

  1. Identifier les résolutions d’écran majoritaires de vos visiteurs (voir vos analytics pour ça),
  2. Réfléchir à l’articulation des éléments en fonction de leur importance ET de l’info récoltée au point précédent,
  3. Prévoir l’affichage des éléments en fonction des différents écrans (ce fameux “responsive”),
  4. Profiter du bateau que vous venez d’acheter grâce à la maximisation des profits suite à cette méthode.

responsive-flottaison
Source image : Wikimedia Commons par Muhammad Rafizeldi.

 

Un dernier mot et je vous laisse (j’ai bateau) : s’ils sont intéressés par le contenu et à l’aise avec sa forme, vos visiteurs VONT faire défiler votre page. Inutile d’essayer de faire tenir à tout prix des pages entières sur des espaces tout petits. On risque l’asphyxie, le manque de respiration. Faites juste attention à les intéresser, et ils feront le reste.

C’est d’ailleurs une démarche de conception très répandue depuis 3 ans, même si elle n’est pas adaptée à tous les types de contenu : les sites “long scrolling” ou “scrolling infini“, comme Pinterest ou Tumblr parmi tant d’autres.
On compte sur l’intérêt du visiteur et l’effet de simplicité dans la navigation linéaire pour dévoiler le contenu petit à petit, à un rythme laissant de la place à la narration et à l’identité visuelle de la marque.

Ce style de site n’est pas toujours adapé ni pertinent, et il est parfois franchement sur-utilisé (la faute à l’effet de mode), mais sa popularisation a au moins eu le mérite de démystifier cette ligne de flottaison tant redoutée.

ligne-de-flottaison-bateau

 

4 commentaires

  • Yann

    Merci pour l’article, ça fait du bien :).
    Entièrement d’accord avec vous. Les internautes ne sont pas bovins, si le contenu les intéressent, ils vont lire la page.

    Après, et pour nuancer un peu le propos (même si ce n’est pas précisément le sujet de la question :P). Vous le savez, les premiers résultats de Google (situés en haut de page) génèrent environ 80% des clics. Et pour le coup, être sous cette “ligne” (qui a tendance à baisser pour les résultats en naturel) revient à capter moins de trafic . Mais bon, la logique n’est pas du tout la même entre un site et le moteur de recherche.

    Je pense que des études seraient intéressantes à ce sujet !

    Si je peux me permettre une petite retouche sur le terme “Réassurance” dans la phrase : “d’éléments de réassurance pour l’acheteur”. Privilégiez lui plutôt le mot “Rassurance”. En effet, la “Réassurance” n’est pas vraiment la même chose : http://fr.wikipedia.org/wiki/R%C3%A9assurance

    Bonne journée :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Proposer un pourquoi