Ligne de flottaison?
La ligne de flottaison est un concept qui veut, selon wikipedia© :
En informatique, la ligne de flottaison est la ligne qui sépare la partie d’une page Web visible lors du chargement de la partie invisible qui est accessible uniquement avec l’utilisation de la barre de défilement.
Ok, c’est donc la partie non visible sans scroll.
Pourquoi faire un article réservé à ce concept sur mon blog ? Simplement car je rencontre de plus en plus de personnes que j’appellerais « phobiques du scroll ». Comme si la souris n’avais que 2 boutons, et qu’il n’était pas naturel, en 2014 de scroller sur un site internet.
Ces phobiques du scroll ont décidé que les internautes ne savaient pas scroller, qu’il faut obligatoirement les mitrailler de "Clique ici" et ce, le plus haut possible dans votre page web pour qu’ils fassent ce qu’ils souhaitent.
La ligne de flottaison fixe n’existe pas
Eh oui, la ligne de flottaison existe bien, mais il n’y a pas de valeure fixe à observer. Entendre qu’il faut mettre tout ce qui est CTA ( Call to Action ) au dessus de la ligne des 600 pixels est une absurdité.
Pourquoi?
Simplement parce que votre écran n’est pas le même que celui d’un autre internaute, que celui de votre voisin, ou d’encore d’une autre personne, il n’a pas la même résolution, pas le même ratio, vous n’utilisez pas le même navigateur, avec ou sans barres d’outils. Et je ne parle même pas si vous êtes sur une tablette, Android ou iOS, ou un smartphone.
Tu disais qu’elle existe bien ?
Oui la ligne de flottaison existe, mais c’est un concept non adapté au web. En effet, il est devenu naturel pour un internaut de scroller, vous avez certainement du scroller jusqu’ici pour lire cette phrase d’ailleurs. Et penser qu’il est impératif de placer les CTA, le plus haut dans la page est faux.
Si vous souhaitez faire agir un internaute sur votre site, sans qu’il ai l’impression de s’être fait avoir, il vous faut l’amener à faire ce que vous voulez qu’il fasse sans lui jeter littéralement à la figure "Clique ici"
Tu as une meilleure idée?
Le webdesign en lui même, le contenu même du site internet devrait amener à cliquer, ou à faire ce que le créateur du site souhaite que l’utilisateur fasse.
Je ne pourrais vous conseiller qu’une chose dans ce cas, lire les slides sur le Persuasive Web Design de Raphaël Yharrassary
C’est passionnant, et vous verrez que c’est une bien meilleure pratique que d’utiliser ce concept de « ligne de flottaison ».
Point positif : les résultats sont bien meilleurs, et plus pérennes.
Point négatif : cela nécessite de réfléchir plus profondément à vos contenus, et leur mise en page.
Réflechissez
Je pense que de manière plus générale il faut arrêter d’essayer d’utiliser des concepts non adaptés au format qu’est internet. Il faut observer et comprendre le fonctionnement des internautes, ce qu’ils cherchent et ce dont ils ont réellement besoin.
Et tout ceci passe bien souvent par les tests, analyser les statistiques obtenues, et créer le site web en ayant en tête ce qui importe réellement : votre contenu, vos produits, ce pourquoi vous avez crée votre site.
Surtout, n’oubliez pas que ce n’est pas parce que Amazon, Sarenza etc.. le font, qu’il faut que vous le fassiez aussi.
Article intéressant, mais je reste convaincu que pour un site marchand par exemple, le bouton d’ajout au panier doit être visible sur la fiche produit sans scroll. Question de réduction de charge cognitive pour le client.
Je suis d’accord avec toi pour le site marchand. Néanmoins le fait est que dans ce cas l’utilisateur s’attends a le trouver en haut de page a droite, question d’habitude :) pareil pour un bouton « voir le panier ». Question d’ergonomie
Combien de pixels ? Tu détestes la taille de l’écran et du coup tu le remontes ? Tu fais comment sur mobile ? Et puis comment on fait sur un iPhone en format paysage dont la hauteur est égale à 320px ? :D C’est louable à mon avis, mais totalement infaisable en 2014 avec toutes les tailles d’appareil du marché :)
Bonsoir Stéphanie, je ne parlais absolument pas technique, mais ergonomie/ux. Donc règle générale pour la majorité des cas si possible. Le cas de l’iphone en paysage pour consulter un site marchand, n’est du coup pas pertinent. Je suis d’accord avec toi : il n’y a pas matière à réflexion sur ce point. Ca ne veut pas dire qu’il ne faut pas essayer de mettre les CTA d’achat le plus haut possible (comme le suggère également Matthieu). Ca se vérifie dans les conversions, je t’invite à lire l’excellent blog d’un autre Mathieu : http://www.fauveauxm.com/les-fiches-produits-suivent-elles-les-memes-standards/
Dans les faits, c’est bien plus facile de mettre un bouton d’action bien visible, peu importe la taille de l’écran sur une app mobile que sur un site responsive. Au final ça n’est pas une question de scroll mais une question de simplifier l’accès à l’information. Je ne scrolle pas pour trouver le bouton d’achat = j’achète facilement mon produit = plus de conversions. Bonne soirée :)
Il n’est pas possible de parler ergo / UX sans penser à la technique et l’implémentation derrière, les métiers sont complémentaires :)
Je donnais volontairement des exemples très précis (voir caricaturaux) pour résumer mon propos : je suis assez d’accord dans la théorie en ecommerce placer le bouton d’ajout au panier le plus haut possible aide, mais dans la pratique avec le multiplication des tailles d’appareils c’est techniquement de plus en plus complexe. C’est plus ou moins ce que dit Matthieu ici.
Nous avions un client qui tenait absolument à ce que le bouton d’action primaire soit visible sans scroller sur mobile. Nous l’avons remonté il était bon sur iPhone, mais au final sur un autre mobile il était masqué. On peut jouer à ce jeu un moment ^^
L’article de Matthieu F. date de 2012 et ne prends en compte que les sites desktop. Effectivement en ecommerce « classique » on a souvent 2 colonnes : à gauche la fiche, l’accès aux informations qui donnent envie d’acheter est simplifié, et le bouton à droite (souvent en haut) permet d’acheter directement.
Sur mobile c’est plus compliqué, si on met le bouton au dessus des infos qui vont convaincre l’utilisateur il risque de ne pas avoir suffisamment d’informations pour être convaincu d’acheter. Si on met les informations avant, l’utilisateur va devoir scroller pour trouver le bouton sur certains mobiles, mais au moins il sait pourquoi il scroll. Bref, c’est assez casse tête et à gérer au cas par cas (avec quelques tests si c’est possible sur des vrais utilisateurs)
Je rejoins l’avis de Gianni pour ce qui est d’un site marchand, l’ajout panier / choix optionnels (taille / couleur / etc) doit se situer dans une zone dite du premier écran. Il faut aussi prendre en compte un point important qui est la répétition du CTA dans le scroll. Si on est sur une landing page de service, le CTA en haut de page proche de la promesse est utile mais il sera nécessaire dans la partie présentation de faire ré-apparaître ce CTA.
Là où je te rejoins, c’est le « penser sa page ». Il faut penser sa hiérarchisation de contenu qui est souvent négliger mais qui permet à terme de regrouper les informations entre elles pour les rendre compréhensibles « en un clin d’oeil » et permettra d’amener l’utilisateur vers un tunnel (inscription / achat).
En total accord avec cet article.
J’ai les poils qui se hérissent et des flammes dans les yeux quand je lis « la ligne de flottaison doit être 1024 pixels » dans un cahier des charges client…
(PS : Attention, avant dernier paragraphe : « péreins » n’existe pas, on dit « pérennes » même au masculin.)
Je pense qu’il est de plus en plus nécessaire de faire preuve de pédagogie avec les clients. Ils connaissent maintenant des « trucs », du coup on les retrouve dans les cahiers de charges.
( J’ai corrigé merci )
Merci Matthieu pour cet article !
Pour répondre aux quelques avis sur le e-commerce et à la réflexion trop simple de « mettre le CTA le plus haut possible », il ne faut pas oublier que l’utilisateur n’est pas une machine, il ne va pas non plus bêtement cliquer sur le premier bouton qui se présente à lui s’il n’a pas eu suffisamment d’information, et ce de manière généralisée (pas uniquement en e-commerce).
Il faut lui présenter un cheminement logique, un parcours qui le fasse prendre la décision attendue lors de la conception de la page, et si le CTA doit venir plus loin dans la page, alors l’utilisateur devra scroller, mais je lui aurais fourni les informations nécessaires à sa prise de décision avant :)
Bonne soirée !
Totalement d’accord avec l’article, Geoffrey et Stéphanie. Placer le bouton « Marchand » en haut à droite est réducteur. A mon sens, tout va dépendre du contexte, imaginons une jolie histoire pour introduire un produit de luxe, dans une jolie landing page, on peux tout à fait imaginer la fiche produit en bas de page alors que ferait le bouton en haut à droite ?
Pour moi comme le dit également Geoffrey, le cheminement est important et le bouton devrait être placé proche de l’élément générant l’impulsion d’achat.
Le dernier chapitre d’une belle landing page formé grâce au storytelling est générateur de cette impulsion.
D’une manière générale on a tendance a standardiser la fiche produit avec une image en haut etc et du coup placer le bouton « Marchand » en haut à droite devient un standard pas une règle.
Je viens de voir un exemple concret et pour moi il s’agit d’une grossière erreur d’ux. Je suis l’internaute, je scroll pour lire l’histoire, j’arrive à la fin de l’histoire, ok je suis convaincu, ha merde il est où le CTA ?
https://www.evernote.com/market/feature/wallet-fr_FR?sku=WALL00102
Réponse : en haut à droite :/
C’est marrant, je suis tombé sur cet article car en mars 2017 je cherche encore à prouver à certaines personnes (âgé de la pré histoire – attention j’adore ces gens!) que les gens « scrollent »!