Les menus de navigation sont ancrés dans les pratiques du web : ils apparaissent comme quasi-indispensables, notamment pour aider les utilisateurs à s’orienter et à se déplacer au sein d’un site. Par conséquent nous (les internautes) sommes habitués à trouver ces menus en haut des pages. De même, nous (les concepteurs de sites) ne nous posons même plus la question de savoir s’il faut un menu ou non.
Et pourtant… je viens de découvrir un site qui a fait le choix audacieux de substituer un menu de navigation permanent par un chemin de navigation : iLike. Dans les faits, ce site (qui possède une structure et une arborescence tout à fait classique) mise tout sur la navigation contextuelle. Illustration avec cette page dédiée à un album d’Enrique Iglesias :
Hé oui, pas de navigation, juste un “fil d’Ariane” accolé au logo (qui sert de retour à la page d’accueil). Je ne peux que reconnaitre la réussite de ce système de navigation minimaliste qui “fonctionne” parfaitement bien.
En fait les avantages de cette solution sont multiples :
- cela dégage un maximum de place
- cela permet de contextualiser les pages et de concentrer l’attention en allégeant la structure
- cela facilite la compréhension de l’arborescence par les utilisateurs
Bref, une réussite sur toute la ligne. Mais attention, cette solution ne s’applique pas à tous les types de sites. Une arborescence large ou profonde peut par exemple être très problématique à gérer en l’absence de menu de navigation (difficulté à se repérer, problème pour basculer d’une section à une autre…).
Je trouve dans ce site l’illustration parfaite d’une recommandation faite à un client il y a quelques années : supprimer la barre de navigation principale au profit d’une navigation contextuelle (en coeur de page) afin de concentrer l’attention. Dédicace spéciale à Monica et GOB ;-)
En tout cas je vous invite à réfléchir très sérieusement (en vous inspirant de cet exemple) sur l’intérêt réel du menu de navigation de votre site :
- Comment naviguent vos visiteurs : en cliquant sur les liens ou en utilisant le menu ?
- Votre site serait-il toujours utilisable sans la navigation ?
- Quel gain de place cela représenterait-il ?
- Comment pourriez-vous réexploiter l’espace ainsi gagné ?
- …
(liste à compléter dans les commentaires)
Le problème de ce type de menu est le parcours qui devient beaucoup plus long. A une époque où le net était plus lent, il était important de donner aux utilisateurs les moyens de se rendre rapidement à la page désirée (on se souviendra qu’à une certaine époque, tous les sites présentaient leur ‘plan’). Aujourd’hui, il est vrai, remonter de 5 crans pour redescendre de 4 choque moins, mais cela n’est pas je pense idéal.
Et quand le site lui-même est basé sur un principe navigation ..?
L’arborescence de ce site est un rateau, ce qui convient bien à la navigation utilisée. Une récente étude lue sur la manière de parcourir un site e-commerce montrait l’usage fréquent de la touche backSpace. Si l’emploi de cette touche est justifiée dans un site (pas trop de ramifications ni de passage de paramètres contextuels), alors ce type de navigation me semble appropriée.
Mais ne perd-t’on pas la possibilité de faire découvrir d’autres pages à l’internaute ? (le faire butiner, quoi …).
J’ai essayé d’utiliser le site iLike, et je ne trouves pas qu’il empêche de butiner. Je me suis baladé et écouté plusieurs extraits de différents artistes…
De plus, les éléments de navigation (rechercher, lien vers la FAQ, Blog,…) sont bien disposés car rapidement visibles sans devoir faire clignoter quoi que ce soit à l’écran.
@ Eric et Jérémie > Effectivement la forte concentration de liens en coeur de page favorise la découverte empirique du site et évite de transiter par la page d’accueil pour se rendre dans une autre section comme le décrit Boris.
Mais encore une fois le contexte de ce site est particulier.
/Fred
Le même principe est utilisé par del.icio.us, et s’avère en effet clair et pratique.
Marrant… justement entrain de me poser la question pour un prochain site, comment disposer la barre de navigation.
Si on regarde de prés on se rend compte que l’internaute revient systématiquement à la homepage pour “replonger dans l’arborescence”… les menus contextuels se justifie pleinement. La réflexion que je suis entrain de mener, à voir si mon développeur est ok, mais éventuellement mixé menu contextuel avec barre de nav, un peu à la manière des sous menus Apple. Le principal risque est de perturber l’internaute qui va décider de rester ou de zapper en 4 secondes.
En tout cas le fil d’Ariane est indispensable.
Je pense aussi que la structure du site permet facilement cette navigation. J’aime assez l’aspect de la phrase : I Like Artists Enrique Eglesias. Ca renforce explicitement le contexte.
D’un point de vue ergonomie je pense qu’il y a un risque de perdre un utilisateur. C’est surement a utiliser avec modération et pertinence.
Dokuwiki propose également une navigation inhabituelle, il garde votre piste/parcours que vous avez emprunté sur le Wiki, et je trouve que l’idée est intéressante, assez bien approprié au Wiki en tout cas. Expérience à tenter sur une application Web plus conventionnelle !
Salut, j’aime bien ce type de navigation, bon après c’est sur que ça ne s’accorde pas sur tous les sites, je suis d’ailleur en train de développer un theme wordpress sans side-bar pour un projet particulier, au debut ça fait drole, mais on s’habitue assez vite
iLike est un très beau site, et oui, on arrive à survivre sans un menu horizontal en haut.
Le vrai problème ergonomique de iLike, c’est que l’on ne peut pas écouter de la musique en poursuivant sa découverte. En effet, leur player flash étant intégré à la page web, au premier click, la musique s’arrête.
—
Laurent
Tiens, je crois bien connaître ce client en question et ma surprise à la découverte de cette préconisation… (et admettre que ma position a plutôt évolué dans ton sens depuis mais quand même..)
Je me souviens avoir travaillé il y a quelques années avec un concepteur qui voulait proposer cette solution à un client, mais avec sous chaque item un calque qui s’affichait au survol avec toutes les rubriques du même niveau. Une navigation et un chemin fusionnés en un seul élément de l’interface. Je trouve l’idée vraiment brillante.
Si quelqu’un a d’autres exemples de ce type d’implémentation, je suis preneur.
Avez-vous déjà vu le fil d’Ariane/Menu du site de la MSDN de Microsoft ?
http://msdn2.microsoft.com/en-us/asp.net/default.aspx
Un “onmouseover” sur chaque noeud du fil d’Ariane ouvre un menu qui présente les sous-noeuds.
Qu’en pensez-vous ? Est-ce que ça existe ailleurs ?
Ce billet (autant que ses commentaires) est excellent. C’est vrai que le coup du “I like (…) Enrique Iglesias” est bien pensé, et la navigation contextuelle est, dans ce contexte ( =) ) parfaitement adapté.
@ Benoit Drouillat (“mais avec sous chaque item un calque qui s’affichait au survol avec toutes les rubriques du même niveau. Une navigation et un chemin fusionnés en un seul élément de l’interface.”) : c’est effectivement une très bonne idée.
Je songerai fortement à ce type de navigation pour des prochains sites.
Effectivement… cela fonctionne bien sur iLike, mais parce que l’arborescence est extrêmement étroite. C’est soit iLike > Artist, soit iLike > User XX (d’après ce que j’ai vu). Je pense qu’une arborescence comme celle ci fonctionnerait moins bien chez Last.FM par exemple, qui met en avant d’autres fonctionnalités (Events, Widgets, …). Le risque d’une arborescence comme celle-ci est que le contenu de chaque page (en dessous du menu) devienne fouilli au fur et à mesure de l’expansion du service, et que l’effet ressenti au final devienne l’inverse de l’effet souhaité au départ.
L’ergonomie et le parcours utilisateur doivent toujours s’adapter au service rendu et à la promesse de ce service… Il faut savoir copier la concurrence ou s’en éloigner lorsque c’est nécessaire ;-)
Ce site est fait de navigation contextuelle (in text) et cross-clicking. Ils gardent tout de même bien en haut de page, les éléments de transformation du site “créer un compte” et la recherche.
De mon expérience sur http://www.navigation-web.com, supprimer un bandeau en haut de page gène plus les équipes de développement que les utilisateurs qui arrivent avec une vraie démarche utilisateur.
La solution pour être sûr que les utilisateurs peuvent changer de section si besoin, mettre le menu en pied de page.
Henrik Olsen de http://www.Guuui.com dit dans mon livre “une navigation en pied de page, les capturent à un moment où ils sont séduisables.”
Je cherche des applications 2D du concept de clic-droit “que puis-je faire à partir d’ici” de nos OS. Pas en menu, en context ? Un peu comme le camembert de Second Life. Quelqu’un aurait des exemples en favoris ?
Salut Fred,
Comme autre exemple de navigation par thèmes et par exploration il ya notre célébre Kelkoo (pour lequel je travaille d’ailleurs !)
http://www.kelkoo.fr/c-145001-cuisiniere.html
En haut tu trouves une navigation par onglet de la meme manière que Ilike.
Je trouve cette navigation très pratique et beaucoup plus simple pour s’y retrouver. (cela ressemble à la navigation sous Windows)
Au passage merci pour ton petit lien sur ton article Velib !
>1. cela dégage un maximum de place
Certes, les pages épurées sont à la mode, mais l’important est toujours l’organisation du contenu.
> 2. cela permet de contextualiser les pages et de concentrer l’attention en allégeant la structure
C’est vrai que c’est ce qui se passe avec les utilisateurs avertis qui “lisent” les URLs. En même temps comme dit Skateinmars, del.icio.us utilise ce principe et cela correspond (magie !) à l’url dans la barre d’adresse.
Pour ma part, je crois que c’est une bonne idée, qui se marie parfaitement avec : des systèmes de tags et une arborescence “plate” ou en râteau comme dit Eric.
> 3. cela facilite la compréhension de l’arborescence par les utilisateurs
Est-ce de l’arborescence de nos fichiers ou de nos rubriques dont on parle ?
J’avais updater les Lifeline le mois dernier pour que les tags puissent servir d’outils de navigation ; le système propose un nuage de “related tags” tant que le nombre de résultats est supérieur à 5.
Expliqué dans cet article :
http://www.miaouw.net/articles/2007/07/utiliser-les-icetags-pour-fournir-un-outils-de-navigation-en-quelques-clics/
Bon d’accord, l’extracteur de tags des Lifeline est toujours pas assez performant à mon goût, mais çà me semble être une bonne piste pour un aggrégateur de contenus personnels, non ?