Avec la généralisation des écrans plats, la résolution moyenne des moniteurs qui équipent les internautes est en constante hausse (cf. StatCounter Global Stats). En conséquence de quoi, les pages des sites web s’allongent de plus en plus. Mais qui dit « pages qui s’allongent » dit « menus de navigation qui s’éloignent« . Le (petit) monde de l’ergonomie web est donc en train de débattre sur les menus de navigation qui restent collés en haut de l’écran (Docking Navigation Bars) et même les pieds de pages statiques (Static Footer Bars).
On retrouve ainsi un très bel exemple de menu de navigation qui se positionne au-dessus du contenu lorsque vous parcourez la page chez GamePro :
De même, on trouve un exemple de pied de page statique chez Cnet :
Dans ces deux précédents exemples, la gène est minime, car ces bars affichés en permanence ne prennent pas trop de place. Par contre, on ne les remarque pas forcément (surtout le pied de page de Cnet).
On trouve également des exemples de pied de page statique sur des sites marchands comme Comet :
Une astuce très pratique, car cette barre permet de caser le comparateur et la liste des derniers produits visités, le tout sans prendre trop de place.
L’intérêt de telles techniques est discutable :
- Dans le cas d’un site de contenu, elle facilite surtout le zapping d’une page à l’autre (augmentant mécaniquement le nombre de bannières affichées) ;
- Dans le cas d’un site marchand, elle déplace dans une zone moins exposée au regard des fonctions à valeur ajoutée (comparateur et liste des derniers produits).
Je suis tout à fait d’accord avec les premières conclusions exposées dans l’article : les hauts et pieds de page statiques ne compensent en rien un système de navigation / repérage défaillant. Ceci étant dit, il est tout à fiat possible de proposer des améliorations aux exemples cités plus haut :
- Ne pas imposer ces barres affichées en permanence et donner la possibilité de les replier ;
- Utiliser un fond transparent pour ne pas trop réduire la surface d’affichage ;
- Ne pas utiliser toute la largeur de la page, mais seulement une partie (comme peut le faire Chrome avec sa status bar) ;
- Ne pas se reposer uniquement sur ces barres et doubler les fonctionnalités dans la page elle-même.
Plus que pour les sites de contenu, c’est avant pour les sites marchands que je vois un intérêt à cette technique. Il serait ainsi tout à fait envisageable de combiner les deux : le panier, compte-client et pourquoi pas la recherche dans la barre de haut de page, le comparateur, les derniers produits visités et même le rubricage dans le pied de page.
Je n’ai pas encore trouvé de site utilisant les deux, mais si vous avez des exemples, je suis preneur.
Très bon billet.
L’idée de Comet avec le pied de page contenant le comparateur et les derniers articles vus me paraît être une bonne idée.
A creuser…
Bonjour,
L’idée n »est-elle pas plutôt d’essayer de restreindre la taille des pages. Aujourd’hui beaucoup de site ajoutent du contenu pour ajouter du contenu.
Du coup l’internaute est souvent perdu dans le flux d’information qu’on lui propose.
Je pense qu’il vaut mieux limiter la taille des pages et sélectionner l’information fournie plutôt que de créer des pages à rallonge avec des « rustines » (comme les menus fixes) pour améliorer l’expérience utilisateur.
Le retour des frames…
@ Guillaume > Pas si simple, certaines pages méritent un contenu le plus riche possible, par exemple les fiches produit d’Amazon qui s’étirent sur des Km. Ces rustines peuvent se révéler par contre efficaces pour décongestionner le haut des pages des sites marchands. donc à creuser…
Bonjour, j’attendais un article de ce type car nous sommes effectivement dans ce trend au niveau de l’affichage de la navigation. Bien joué !
Les expériences d’eye-tracking sur un site comme monabanq montrent bien l’importance de la navigation horizontale.
Or sur les pages de home transformées en catalogue ou les sites de contenu qui font remonter de nombreux focus sur la home, on risque en scrollant de perdre ce point de repère fondamental.
A moins de rappeler le menu dans plusieurs points de la page comme le fait assez adroitement ce designer : http://markhobbs.net/ je pense que la moins mauvaise option est de faire suivre le menu général dans le scrolling.
Après, tout à fait d’accord avec Frédéric, il faut pouvoir le désactiver et surtout le développer avec des solutions standardisées sans recours à Flash, ou du Java trop complexe car bonjour le rendu non-maîtrisé ou nécessitant des upgrades malvenus.
Je suis un peu plus partagé sur l’utilité d’un footer fixe dans la mesure où la présence continuelle du menu me semble le plus opportun.
Les expériences d’eye-tracking sur un site comme monabanq montrent bien l’importance de la navigation horizontale.
Une navigation très beau site ou de la relation avec lui est très important. Js effets et certains ne peuvent pas obtenir sur le bien, la disposition principale de l’ensemble du site, et la synthèse des couleurs.
C’est en effet une émergence qui est intéressante.
J’ajouterais un petit point supplémentaire à « explorer ». L’idée de ne pas imposer ces barres est judicieuse (pouvoir la replier) et je dirais même qu’il serait sans doute avantageux de ne pas les mettre du tout dans le cas où l’utilisateur à une petite résolution d’écran. Ce qui d’ailleurs pourrait très bien aller avec l’esprit de faire un « responsive design », tant la hauteur d’un écran peu être important.
Personnellement je n’apprécie guerre les dizaines de barres d’outils (navigateur ou in-page) qui se considèrent toutes comme essentiel et utiles mais qui toutes ensembles compromettent l’expérience utilisateur en réduisant beaucoup trop la taille « utile » de la fenêtre du navigateur web.
[…] Quand le haut et le pied de page vous suivent […]
[…] la maturation des usages du cloud computing.L’actualité de l’utilisabilité sur SimpleWeb.fr :Quand le haut et le pied de page vous suivent ;Vive les tunnels de commande simplifiés.L’actualité de la mobilité et des objets […]
[…] > Quand le haut et le pied de page vous suivent http://www.simpleweb.fr/2011/04/05/quand-le-haut-et-le-pied-de-page-vous-suivent/ Quand le haut et le pied de page vous […]
[…] 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 […]