Il y a quelque temps, je vous parlais de ces sites où le haut et le pied de page vous suivent. Si je croise de plus en plus de pieds de page flottants, par exemple sur le site de American Eagle, les header flottants sont beaucoup plus rares à trouver. Pourtant l’idée est bonne, car cela permet de conserver le contexte quand l’utilisateur descend vers le bas de la page. Cette technique est particulièrement intéressante si le site affiche de pages très longues : lorsque l’internaute arrive en bas de page, il a été exposé à tellement d’unités d’information différentes qu’il a oublié le sujet principal de la page, c’est ce que j’appelle le « contexte ».
Premier exemple avec l’édition suisse de 20Minutes où une version miniaturisée du menu de navigation vient s’ancrer en haut de page dès que vous avez descendu l’équivalent de deux écrans :
Ce menu intègre également un moteur de recherche, un bouton de retour en haut de page, ainsi qu’un bouton pour le faire disparaitre. Si ce header flottant est parfaitement bien exécuté sur le plan technique, je me demande s’il apporte vraiment quelque chose d’un point de vue purement ergonomique, à savoir s’il permet de resituer le contexte. Idéalement, le titre de l’article devrait être rappelé dans ce header flottant.
Deuxième exemple avec Tripadvisor où un header flottant est affiché sur les pages des hôtels pour vérifier la disponibilité :
Le fait de n’afficher que le moteur de réservation est ici bien plus intéressant, car il correspond à la façon dont les internautes utilisent le site : ils sélectionnent un hôtel en fonction de son score, regardent quelques photos et vont parcourir les avis avant de prendre leur décision et de passer à l’acte. C’est pour faciliter cette dernière étape et transformer les clients au moment où ils prennent leur décision (juste après avoir lu quelques avis) que ce header flottant prend tout son intérêt. Idéalement, j’y aurais ajouté un bouton pour revenir en haut de page ainsi que pour lancer une nouvelle recherche.
Voici donc deux exemples particulièrement instructifs, car ils illustrent bien l’intérêt des headers flottants, surtout lorsqu’ils respectent les modalités d’utilisation. Bon par contre, l’utilisation combinée d’un header ET d’un footer flottant réduit la surface d’affichage, ce qui ne pose pas de problème sur un ordinateur de bureau, mais peut être très pénalisant sur une tablette. Sauf en mode portrait, mais cela fera sûrement l’objet d’un prochain article…
Bonjour Frédéric,
Je vois bien le header dans 20mn, mais pas pour les deux autres exemples, peut-être en fonction du User-Agent (Firefox pour moi). C’est vrai que la « position:fixed » est une propriété bien utile en intégration web et qu’elle permet souvent d’améliorer l’ergonomie des portails à l’information souvent dense et multiple !
Le site du soir en Belgique avait testé l’experience il y a quelques semaines. Mais depuis une dizaine de jours, plus de header flottant. Plainte des lecteurs ou problemes d’ergonomie ?
Effectivement, les headers flottants ont un intérêt évident car ils « persistent » lors du scroll. Cette technique est notamment utilisée par les outils de partage social, avec plus ou m oins de bonheur (le défilement vertical d’une fenêtre flottante peut vite devenir intrusif).
Le principe est cependant unanimement reconnu. Gmail sur le web ou bien avant les applications de design ou même de bureautique ont adopté ce principe des « palettes d’outils » au premier plan.
Les interfaces destinées aux tablettes l’utilisent aussi, regardez par ex le fonctionnement de twitter et ses menus en accordéon, toujours accessibles.
Le champ des possibles est grand, encore faut-il comme toujours mesurer l’intérêt pour l’utilisateur d’économiser un retour au haut de page lorsqu’il a dépassé la ligne de flottaison. Architectes d’information, à vos crayons !
Bonjour,
Cet article pose un problème de terminologie. Un élément tel qu’appelé “flottant” dans celui-ci est en fait ordinairement obtenu en y appliquant la déclaration position: fixed, et les professionnels parleront d’élément fixe et non flottant.
À l’opposé, un élément flottant, toujours pour les professionnels, est un élément de type bloc positionné à côté d’un autre grâce à la propriété float, suivie de la valeur left ou right.
Cela dit, le terme flottant est beaucoup plus proche du comportement de ces menus pour le profane.
Et par ailleurs, il serait plus approprié de parler de menus que de header, puisque lesdits headers sont en fait des menus, et qu’un header flottant/fixed, qui ne comprend que les nom, logos et baseline d’un site n’a aucune utilité.
Pour répondre au commentaire de Referencement Mons, ça me heurte quand je vois de tels menus de hauteur importante venir se superposer au contenu lorsque je scrolle, bien que la limite supérieure de la fenêtre du navigateur ne fasse pas autre chose (je suppose que ma réaction instinctive est que ce menu vienne masquer définitivement le contenu), et je présume que c’est le cas de nombreux internautes, d’où, à mon avis, la suppression du menu flottant/fixe du Soir.
De tels menus flottants sont cependant très utiles ; plus besoin de remonter en haut de page pour naviguer dans le site ou pour lancer une recherche, et j’en mets moi-même dans mes pages. Cependant, il me semble utile de préciser que de tels menus doivent être visuellement discrets (minces, translucides, de même couleur de fond que la page), pour ne pas heurter les instincts des internautes.
Deux exemples : photopin.com (http://photopin.com/) (quand les résultats de recherche sont affichés), translucide, et netPom (http://www.netpom.fr/) de même couleur que le reste de la page.
Enfin, avec une colonne de contenu suffisamment étroite, on peut également réaliser des menus flottants/fixes latéraux.
Et, contrairement à certains exemples (20minutes ou Photopin), et comme l’a dit Integration dans son commentaire, de tels menus peuvent être réalisés avec la seule déclaration CSS position: fixed, sans le moindre javascript, ce qui est mieux pour l’accessibilité), à moins qu’on veuille, obtenir d’autres effets, comme une transformation du menu, comme dans le cas de 20minutes (s’il s’agit bien de cela).
Enfin, contrairement au javascript, qui à moins d’être réalisé par un expert en la matière, provoque souvent un déplacement saccadé et/ou avec retard du menu “flottant”, dus au calculs de repositionnement de celui-ci dans la fenêtre (voir le comportement de la pub latérale de 20minutes), un élément flottant/fixed en CSS “suit” parfaitement le scroll, puisque sa position est définie par rapport à la fenêtre du navigateur, et que celui-ci n’a donc aucun calcul de repositionnement à effectuer.
A propos des menus « fixed » : Smashing Magazine a relayé le mois dernier une étude sur les « Sticky menu » : http://uxdesign.smashingmagazine.com/2012/09/11/sticky-menus-are-quicker-to-navigate/
On ne compte plus les tutoriels pour créer un menu « stay-top » sous WordPress… Une telle fonctionnalité pourrait également être très efficace pour l’affichage en direct de résultats sportifs !