Navigation sur une page

La navigation interne à une page et particulièrement l’utilisation de pieds de page sur une page web est, le plus souvent, une adaptation malheureuse de son équivalent papier. Rapide tour d’horizon.

Navigation sur une même page

Il s’agit typiquement de proposer à l’utilisateur un raccourci spatial de n’importe quel endroit d’une page web vers un bout de contenu situé à un autre endroit de cette même page. On l’implémente de la sorte:

le lien:

Le lien est une balise « A » dont l’attribut href commence par une dièse « # » suivi de l’ identifiant de l’élément à pointer.

[sourcecode language=’html’]

Le philosophe
Nietzsche
le disait fort à propos: …

[/sourcecode]

la destination

La destination est assignée via un attribut « id » ayant, forcément, une valeur unique dans le DOM de la page.
[sourcecode language=’html’]

Nietsche est un philosophe allemand controversé….
retourner au texte
[/sourcecode]

Voilà grosso modo comment l’implémenter au mieux via le html.

Exemple : Découvrez Nietzche sur wikipedia (puis revenez ici, je n’en ai pas fini avec vous).

Le problème : l’utilisateur expérimente une rupture

Sur une longue page, l’écran « saute » à la nouvelle position indiquée par l’attribut href= »# » (pour autant que l’élément existe dans le DOM).

Ce saut provoque une désorientation de l’utilisateur, une rupture de son flux mental, et il est alors forcé de quitter son état de « consultation d’information » vers l’état « bon dieu mais où suis-je, et comment est-ce que je retourne lire la suite de la phrase?« .

Les solutions

Cascading Stylesheet pseudo-tags: :target et :focus

En utilisant les pseudo classes « :target » et « :focus » on peut souligner visuellement à l’utilisateur l’endroit qu’il a quitté et l’endroit où il se trouve.

Démonstration:

Ce (vieil et ) long article sur e-konomica.net utilise des ancres numérique ( [1] ) typiques du paradigme légal. Si l’on clique dessus, un surligné jaune attrape le regard.

Javascript

La solution CSS est une forte amélioration de l’expérience offerte par le simple html mais c’est encore un sparadrap sur une fracture si vous me passez l’expression. En effet, le sentiment de « rupture » vient du fait que l’on ne perçoit pas le déplacement spatial. Le javascript permet les animations, voyons 2 exemples que j’estime très pertinents:

  • scrollTo: déplacement de l’écran. Claire amélioration, mais on reste désorienté. L’usage le plus approprié est dès lors avec un menu à position fixe, tel que sur cet exemple: f555 (cliquez sur les liens du menu à droite).
  • l’effet « spectrum » : (demo) ce plugin jquery offre une approche très très intéressante à cette problématique: déplacement et objet visuel qui se déplace du départ à la destination. Magnifique!

J’espère que cet article contribuera à voir émerger de meilleures propositions de navigation interne à une page. Merci de votre lecture !