7 enseignements pratiques tirés du eye-tracking : les internautes vont-ils sous la ligne de flottaison ?

Un des mystères les plus épais du web a été résolu depuis bien longtemps, mais le eye-tracking a permis de mieux comprendre le fonctionnement des internautes lorsqu’il s’agit de plonger profondément dans la page et de s’enfoncer sous la ligne de flottaison.

Pour rappel, la ligne de flottaison, c’est cette ligne de démarcation qui sépare ce qui est visible immédiatement à l’affichage d’une page web de ce qui n’est visible que lorsqu’on déroule la page à l’aide de sa molette de souris ou de la scrollbar (barre d’ascenseur). Sous la ligne de flottaison, pensait-on, point de salut, les internautes n’y vont pas.

Ce n’est pas que faux, mais pas que vrai, non plus 😉

La réalité, c’est que les internautes plongent dessous s’ils en ressentent le besoin. Autrement dit, s’ils pensent qu’ils vont pouvoir trouver de l’information qui les intéresse au delà de la zone visible de la page. Mais, l’internaute étant fainéant, votre intérêt est tout de même de placer les contenus les plus importants immédiatement visibles au dessus de la ligne de flottaison.

Schéma du temps d'attention par tranche de page en hauteur. L'attention dépérit très clairement dès que la ligne de flottaison est franchie. Notez également le pic d'attention un peu après le démarrage de la hauteur de la page, ainsi que le regain fort en bas de page (copyright useit.com)

Exemple sur la page d’accueil :

Rien n’empêche d’y mettre tous les contenus que vous souhaitez, mais vous devez respecter certaines règles simples :

  • Afficher votre logo le plus vite possible en haut à gauche pour une identification la plus rapide du site(ça tombe sous le sens)
  • Afficher votre navigation principale (attention aux navigations latérales en colonnes qui peuvent descendre sous la ligne de flottaison)
  • Afficher le lien d’accès au compte client et au suivi de commande
  • Si possible, mettre très haut dans la page les avantages différenciants : n° de téléphone, délais de livraison, retours.
  • Quand à l’offre, tout ce que vous mettrez au dessus de la ligne sera favorisé, par rapport, à ce qui sera en dessous (de manière drastique)
  • Sachez également utiliser le fait que la zone la plus vue est celle qui se trouve dans le 2ème quart de la page en hauteur

Autre enseignement intéressant  : les zones de bas de page bénéficient souvent d’un regain d’attention due au fait que l’internaute stoppe le déroulement de la page et bloque quelques instants dessus. C’est l’occasion ou jamais de proposer sur une page de liste, par exemple, des produits qui partent bien ou mettre en avant une offre.

D’après Scrolling and Attention sur Alertbox

20 commentaires

  1. Oui mais…

    Ce que cache ce genre de stats c’est l’influence du design sur l’attention portée sous la ligne de flotaison…

    forcément, un site qui concentre ses infos en haut de page et ne fait rien, ou presque, pour inciter ses visiteurs à scroller va voir l’attention se focaliser sur tout ce qui est above the fold… Mais c’est un peu une histoire d’oeuf et de poule.

    Pour moi, le plus intéressant de cette étude, c’est le pic d’attention à 300px. Quoique je me demande si l’habitude de mettre logo et pub en haut de page dans un header bien marqué n’y est pas pour quelquechose (cf. banner blindness)

  2. Autre point important pour inciter les visiteurs à scroller sous la ligne de flottaison : faire en sorte que la ligne ne s’arrête pas sur un espace blanc qui laisse croire que le site s’arrête là.

    Je vois ce cas de figure assez souvent sur des pages d’accueil et sur des fiches produits.

    Certes, ca fait « propre » d’un point de vue visuel, mais du coup, il n’y a aucun indice graphique qui incite le visiteur à scroller dans la page, alors que des informations importantes s’y trouvent.

    Il faut donc toujours faire en sorte que la ligne de flottaison coupe une image ou un texte, afin de bien faire comprendre au visiteur qu’il y a encore des choses à voir en dessous.

    PS Capitaine : ton bouton de partage Twitter n’inclus pas de raccourcisseur d’URL, et du coup il n’y a plus de place pour mettre un bon commentaire au moment du partage.

  3. Ca fait un rappel intéréssant sur l’article précédent. Ces notions sont réellement très intéréssantes, mais après, je pense qu’il y a la capacité de l’internaute à vouloir « fouiller » sur le site, s’i trouve le contenu intéressant, d’où l’inétrêt d’avoir un menu en haut de page très structuré.

  4. Je trouve qu’une bonne pratique est également d’avoir un œil attentif sur les résolutions des navigateurs dans les stats d’audience car la ligne de flottaison varie pas mal en fonction (sans compter les barres ou encore le format 16/9 des écrans).

    A propos du design et d’avoir une sorte d’appel à faire défiler la page, le livre d’Amélie Boucher contient un très bon passage sur le sujet.

    (Très bonnes fêtes à tous.)

  5. @Lapin : oui, le design a une influence sur l’ergonomie. D’ailleurs, il en fait partie. On peut concevoir une page sans design graphique et le design influencera sur la compréhension de l’interface. Mais, ce qu’il faut surtout retenir, c’est qu’il faut absolument placer les informations importantes d’une page au dessus de la ligne de flottaison (qui varie, j’en conviens @Benjamin avec les affichages). Et ces informations importantes doivent correspondre à ce que recherchait l’internaute avant d’arriver sur la page.

  6. @Capitaine

    Juste pour la pinaille: Ca depends ce qu’on appelle « informations importantes ».

    Si on parle des informations nécessaires ou utiles pour convaincre l’internaute que c’est une page intéressante sur laquelle il restera, on est d’accord.

    Si ce sont tous ces trucs qu’on veut être sur qu’il ait vu parceque c’est « important », je suis moins convaincu.

    Je suis par exemple sceptique sur l’importance des n° de téléphone, délais de livraison, retours… toutes ces infos ne me semblent pas « importantes » pour utilisateur qui n’est pas déjà en train d’envisager un achat (ex: il en est encore à se demander si cette page correspond à sa recherche).

    Une page bien structurée qui capte l’attention de l’utilisateur et l’amène à scroller peut probablement mettre de telles infos plus loin sur la page. Histoire de convaincre l’acheteur une fois qu’il est séduit par le produit.

    Mais bon, tu as bien plus d’expérience du e-commerce que moi, donc je me met peut-être le doigt dans l’oeil jusqu’aux chaussettes.

  7. @Capitaine Je suis d’accord. Les informations importantes sont celles qui correspondent à ce que cherchent les utilisateurs (et souvent les mots-clés des recherches nous renseignent) et ce qu’on cherche à leur faire réussir comme missions (ex. pour un site e-commerce) accéder au checkout du panier). Il y a aussi des coutumes plus ou moins affirmées (ex. la position des champs de recherche) qui évitent à l’utilisateur de trop ré-apprendre en arrivant sur le site. En tout cas le graphique est très intéressant – merci de partager.

  8. @Capitaine : je rajouterais un 8ème enseignement, celui d’afficher, au-dessus cette « fameuse » ligne de flottaison, un champ d’inscription à la lettre d’information dudit site, histoire de commencer à créer du lien 😉

  9. il serait intéressant de quantifier en pixel cette ligne de flottaison chez nos visiteurs. La mienne est par exemple à 950px et la vôtre ?

    Le tableau de bord « Résolution d’écran » de Google Analytics peut donner la distribution statistique des hauteurs d’écran de nos visiteurs, certes, mais quid de ce qui modère cette valeur (barres d’outils diverses, surf plein écran …) ?

    je me demande si on pourrait pas coder quelquechose pour ça …

  10. Ping : pligg.com

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.

Capitaine

Article de : Capitaine

Olivier Sauvage est le fondateur de Capitaine-commerce.com et de Wexperience, agence spécialisée en expérience utilisateur digitale.