Les fils d’Ariane (”breadcrumbs” en anglais) sont des éléments de navigation permettant aux internautes de se repérer dans l’arborescence d’un site et de remonter facilement d’un ou plusieurs niveaux. Même s’ils ne sont pas toujours bien vus par les internautes lambda, ils ne prennent pas beaucoup de place et sont utiles pour le référencement. Inutile de vous refaire l’article, sinon il y a Breadcrumb Navigation, Breadcrumb Navigation Increasingly Useful et Breadcrumbs In Web Design: Examples And Best Practices.
Donc en théorie c’est une bonne pratique de conception, sauf que dans certains cas, notamment pour les sites avec une arborescence très profonde, les fils d’Ariane ne tiennent pas sur une seule ligne car les intitulés sont trop longs. La seule solution est alors de faire un affreux retour à la ligne. À moins que vous ne puissiez cacher les niveaux intermédiaires et ne les déplier qu’au survol de la souris. C’est ce que propose ce site : CompareNetworks jQuery’d Bread Crumb.
Fil d'Ariane animé grâce à javascript
Plusieurs configuration sont possibles en fonction de la place dont vous disposez : tout cacher, ne pas plier le premier et/ou l’avant dernier niveau… Il y a en prime une petite animation au survol de la souris pour déplier le niveau (il faut pour cela utiliser la librairie javascript jQuery, cf. Getting Started with jQuery).
Le résultat est propre, mais terriblement perturbant (surtout avec cette animation). Le mieux serait encore de réduire la taille des intitulés de navigation ou de simplifier l’arborescence (exemple dans les pieds de page du site d’Apple). Sinon il y a toujours la solution par défaut de faire un retour à la ligne…
(via Escargot)
Très largement ignorés par les utilisateurs, les chemins de navigation (breadcrumb en anglais, également appelé “fil d’Ariane”) sont néanmoins un élément d’interface essentiel pour venir compléter un système de navigation. Je ne me lancerais pas dans un long argumentaire sur l’intérêt (ou non) d’implémenter un chemin de navigation car je préfère plutôt vous rediriger vers ce très bon article publié sur Smashing Magazine : Breadcrumbs In Web Design: Examples And Best Practices.
L’auteur y détail ainsi les différents types de breadcrumbs (selon la localisation, les attributs et l’historique de navigation) ainsi que les bénéfices à l’usage : ils offrent une alternative à la barre de navigation, ils permettent de minimiser le nombre de clics pour remonter aux pages de premier niveau, ils ne prennent pas trop de place et ils peuvent prolonger la visite.
L’article propose ensuite une impressionnante liste d’exemples ainsi que des utilisations enrichies des chemins de navigation comme par exemple Lonely Planet qui propose un menu déroulant à chaque niveau :
Le chemin de navigation enrichi de Lonely Planet
Ou encore cet astucieux système à mi-chemin entre breadcrumb et onglets : Tabcrumbs.
Breadcrumb + Tabs = Tabcrumbs
Je reste personnellement un adepte des chemins de navigation et suis persuadé qu’ils sont encore largement sous-exploités (cf. Peut-on se passer des menus de navigation ?).
Comme tout internaute lambda vous devez forcément avoir été confronté un jour ou l’autre à un système de navigation page à page. Mais si enfin, ne serait-ce qu’en bas de page de résultats de Google :
Je vous propose dans ce contexte de découvrir un article très complet sur la navigation page à page : Pagination Gallery: Examples And Good Practices.
Voici les meilleures pratiques identifiées par l’auteur :
- Proposer de larges zones cliquables ;
- N’utilisez pas le soulignement des liens (recommandation à nuancer) ;
- Identifier de façon évidente la page en cours de lecture ;
- Espacer les liens ;
- Fournir des liens ‘Suivant‘ et ‘Précédent‘ ;
- Fournir des liens ‘Premier‘ et ‘Dernier‘ (si pertinent, c’est à dire en cas de très grosse pagination) ;
- Positionnez les liens ‘Premier‘ et ‘Dernier‘ aux extrémité.
L’article est en prime illustré avec une galerie très complète de copies d’écrans. Mes deux préférés sont les paginations de Digg et de MSDN :
/!\ Article initialement publié sur FredCavazza.net.