1.
La barre de navigation: en
général persistante , indique les
principales rubriques du site en permanence
à l'internaute et signale en
général par un petit artifice
graphique la section sur laquelle le visiteur se
trouve. (voir exemple ci dessous)
la
barre indique que vous vous trouvez dans la section
"produits" du site d'IBM
2.
Le "breadcrumb trail" ou "arborescence
hiérarchique", fournit à
l'internaute le principal chemin d'accès
à la page courante depuis la page
d'accueil.
le
site yahoo
a le premier démontré
l'efficacité du breadcrumb
trail
Ensuite,
on trouve la navigation contextuelle, c'est
à dire l'ensemble des liens directement
reliés au contenu. Ceux ci sont
généralement inclus dans le texte
et/ou regroupés dans une zone clairement
identifiée à côté ou en
dessous du contenu principal (dans le cas de
veblog, c'est bien sûr le cadre beige "liens
associés" qui joue ce
rôle).
exemple
de liens contextuels placés en fin d'article
sur zdnet
nb.
A ces trois navigations liées au design du
site s'en ajoute une quatrième liée
aux navigateurs: l'usage du bouton "retour", la
bouée de sauvetage universelle de
l'internaute perdu. Bien que cet outil de
navigation soit essentiel pour l'internaute nous
n'approfondirons pas son rôle
ici.
L'expérience
montre que lorsqu'il arrive sur un site,
L'internaute va d'abord rechercher les liens
dans les zones de contenu, et ne prête
pratiquement pas attention aux barres permanentes
qui lui sont proposées, qu'elles soient
horizontales ou latérales. Cela est encore
plus vrai lorsqu'il dépasse la page
d'accueil et se retrouve profondément
ancré dans un site: Tant qu'il va poursuivre
son investigation vers le but qu'il s'est
fixé en venant sur le site, il va
privilégier la navigation contextuelle au
détriment des éléments de
navigation structurels du site.
Ce
n'est que dans trois cas de figure que l'internaute
va se servir de la navigation structurante qui lui
est proposée:
1.
Soit il a trouvé ce qu'il cherche, mais
le site l'ayant intéressé, il va
chercher à en découvrir de
nouvelles ressources.
2.
Il a trouvé ce qu'il cherche, mais,
poursuivant plusieurs buts en venant sur le
site, il passe au suivant (cas du
cyber-shopping).
3.
Soit, et c'est le cas le plus fréquent,
il n'a pas trouvé exactement ce qu'il
cherche mais il sent qu'il est sur la bonne voie
en continuant à naviguer sur le
même site.
Dans
ces cas, quels sont les avantages et
inconvénients respectifs de la barre de
navigation et du "breadcrumb trail" ?
Victoire
du "breadcrumb trail"... Presque
totale
Dans
presque tous les cas de figure, l'arborescence
hiérarchique se révèle
supérieure à la barre de
navigation. dans l'exemple ci
dessous,
il
parait évident qu'en cliquant sur
"émissions et séries", c'est à
dire la rubrique située juste en amont de la
page courante, l'utilisateur va trouver des pages
de contenu proche de celle qu'il est en train de
lire. Et s'il clique sur
"télévision", il élargira
encore légèrement son champ de
recherche. Cette navigation "de proche en proche"
donne de meilleurs résultats qu'une
sélection de grandes têtes de
chapître présents en permanence. Dans
le cas ci dessus, l'utilisateur perdrait du temps
si son seul repère était une barre de
navigation dans laquelle figurerait le terme
"actualités et médias".
De
surcroît le breadcrumb trail offre d'autres
avantages:
1.
Etant presque exclusivement
réalisé en mode texte, il permet
de conserver aux liens vierges et
déjà visités leurs
différences de coloration.
2.
Il permet des intitulés un peu plus longs
que ceux présents dans les barres,
où la nécessité d'en
afficher de 5 à 8 réduit l'espace
nécessaire à chaque
intitulé de rubrique.
3.
Il procure une information plus utile à
l'internaute que le simple énoncé
des principales rubriques: il indique la
"profondeur" de la navigation et précise
les différents niveaux de rubriques
corrélés à la page
existante.
4.
Il ne donne que des pistes de navigation
directement corrélées avec la page
en cours, et se rapproche en cela des
caractéristiques de la navigation
contextuelle. En fait, le breadcrumb trail
prodigue une information à la fois
contextuelle et structurelle sur le site et
constitue de ce fait la meilleure aide à
la navigation possible.
En
contrepartie, la plupart des barres de navigation
n'offrent pas le même niveau d'information.
Dans l'exemple ci dessous (tiré du site
rebel.com),
on peut remarquer que:
un
exemple de barre fréquemment
rencontrée... Et rès mal
fichue
1.
les libellés sont très succincts,
pas toujours très clairs (quelle
différence entre "solutions" et
"products" ?)
2.
après avoir navigué dans
"products", on a aucune idée de l'endroit
ou on se trouve à l'intérieur de
cette rubrique: les éléments de
repérage sont insuffisants.
Et
surtout, à un moment donné, les trois
quarts des informations prodiguées à
l'internaute sont inutiles: l'expérience
montre que tant qu'il n'a pas fini sa recherche sur
un produit, il n'y a aucune chance pour qu'il
clique sur "corporate" ou sur "news".
Et
une fois qu'il en a terminé avec sa
tâche courante, il y a les plus grandes
chances pour qu'il cherche à retourner sur
la page d'accueil pour démarrer une nouvelle
quête de renseignements. En effet, l'absence
de mise en contexte des labels contenus dans les
barres de navigation se révèle
souvent gênante pour "sentir la piste" de
l'information recherchée. Aussi en revenant
à la page d'accueil, et si celle ci est bien
dessinée, l'internaute va-t-il recommencer
un nouveau cycle de navigation contextuelle. (notez
que la barre montrée en exemple ne contient
pas de lien vers la page d'accueil, ce qui est une
erreur grossière).
L'observation
des internautes est formelle: la navigation
"vers l'avant" est à 80% guidée par
les éléments contextuels liés
aux contenus présents dans les pages. La
navigation "en arrière" est grandement
facilitée par le breadcrumb trail et peu par
les barres de navigation. La navigation "de
rupture" (où l'internaute commence une
nouvelle tâche) comprte souvent un retour
à la page d'accueil.
La
barre de navigation occupe en outre un espace assez
important en haut de page. Compte tenu de son
utilité relativement médiocre,
certains auteurs n'hésitent pas à
dire que cet espace à très haut
potentiel pourrait être mieux utilisé,
par exemple pour mettre en avant les promotions en
cours ou les gros titres.
Faut
il déduire de ce qui précède
que les barres de navigation sont bonnes à
jeter ?
Pas
tout à fait ! Dans deux cas bien
précis (qui se rejoignent souvent), la
barre de navigation, si elle est bien
conçue, peut être un bon
complément au "breadcrumb trail":
1.
S'il est prévisible que l'internaute va
vouloir accomplir plusieurs tâches dans des
parties différentes du site, alors la barre
de navigation peut procurer d'excellents raccourcis
de navigation sans repasser par la page d'accueil:
par exemple, faire ses courses sur un
cybermarché en ligne impose de
fréquents aller-retours entre les produits
frais, l'épicerie, les conserves, etc...
Avoir en permanence les principaux grands rayons de
la boutique sous les yeux permet de s'y mouvoir
plus facilement. (cf. exemple ci
dessous)
dans
l'épicerie fine "une
autre france",
les raccourcis vers les différentes
rubriques
aident à composer son panier plus rapidement
et informent en un coup d'oeil
sur ce qu'on trouve sur le site.
2.
Les habitués d'un site apprécient de
bénéficier de raccourcis intelligents
d'une rubrique à l'autre. Pour ceux
là, une barre ne reprenant pas toutes les
sections du site, mais uniquement les plus
fréquentées, pourra être un
plus. Les partie les moins utilisées seront
de toute façon accessibles depuis la page
d'accueil, inutile de les surexposer à tout
endroit du site.
Quelques
erreurs à ne pas commettre:
-Les
barres illisibles, comportant trop d'option et/ou
à menus déroulants: le site
internet.com
cumule ces trois inconvénients sur sa barre
de navigation (cf ci dessous).
une
barre de navigation plus confuse qu'autre
chose...
les
titres inclinés et enchevêtrés
sont peu compréhensibles, il y en a tant
qu'on s'y perd, quand aux menus déroulants,
ils sont peu mémorisables, pas naturels
à l'internaute dans un contexte web, et les
labels manquent cruellement de clarté et de
mise en contexte. (voir cet ancien article de
veblog, "menus
déroulants DHTML contre html classique, la
victoire de la
simplicité"
).
-
Certains designers essaient de contourner le manque
d'information sur la structure profonde du site
prodiguée par les barres de navigation en
créant des barres à deux niveaux (cf
exemple ci dessous , cobalt.com
).
les
barres à deux niveaux : moyennement
efficaces
Malheureusement,
le faible niveau informatif du second niveau de
barre aide peu l'internaute. Quelle
différence entre cobalt RAQ, RAQ XTR, Qube,
Cache, Vélociraptor ? un breadcrumb ou le
lien "products" conduirait sur une page comprenant
les 5 éléments de la gamme avec une
petite photo-vignette ("thumbnail") et une
description en 10-12 mots des
éléments clé de chaque produit
serait bien plus efficace pour aider l'internaute
à trouver celui qui lui convient. Quant au
lien "product comparison", il gagnerait surement
à figurer dans les pages comme
élément contextuel de navigation.
-
Le
journal du net
utilise une barre dont le premier lien, à
gauche ("solutions"), conduit non pas vers la page
d'accueil du site mais vers une autre publication
du groupe, ayant une présentation
très similaire de surcroît. combien de
fois me suis-je laissé prendre !!
très désagréable, et
certainement très perturbant pour
l'internaute inexpériementé. (cf
image ci dessous)
cliquez
sur "solutions"... Et vous changez de site
!
Le
premier lien d'une barre de navigation devrait
toujours pointer vers la page d'accueil du
site.
La
barre de navigation minimale, gilet de sauvetage de
l'internaute perdu:
Un
des intérêts de proposer des
éléments de navigation permanents
à l'internaute est de lui procurer un signal
visuel constant auquel il poura faire appel s'il se
sent perdu (si votre site est volumineux, cela sera
forcément le cas un jour, quelle que soit la
qualité de votre ergonomie). La
société system
concepts
propose ce qui est à mon sens une barre de
navigation minimaliste mais quasi-idéale: Un
lien vers la page d'accueil, un plan du site, ici
fort intelligemment décliné sous
forme d'index alphabétique, et le moteur de
recherche. (voir ci dessous).
une
barre de navigation minimaliste mais très
efficace.
Conclusions:
comment dessiner une bonne
navigation.
Dans
un "white
paper" (format pdf) sur l'ergonomie des
sites,
le consultant Alain Lefèbvre se demande
pourquoi les designers n'incluent pas
systématiquement une arborescence
hiérarchique comme élément de
navigation dans leurs sites. Je ne peux que le
rejoindre: sous réserve que les
intitulés y soient clairs, la navigation
par breadcrumb trail a abondamment prouvé
qu'elle était la plus efficace sur
internet.
Jakob
nielsen insiste sur la nécessité de
soigner
la navigation
contextuelle.
Par exemple, un vendeur d'ordinateurs aura
intérêt sur une page présentant
un produit à faire figurer des liens vers
des produits immédiatement moins chers ou
plus chers (et pas uniquement plus chers, sous
peine deperdre la confiance de l'internaute), et
vers une page de comparatifs. Il pourra en outre
habilement glisser une promo vers une imprimante et
un scanner.
Si
vous réussissez à créer une
bonne navigation contextuelle mariée
à un breadcrumb trail réussi, vous
avez fait 75% du chemin vers une bonne
navigation (les 25% restants dépendent
de la pertinence de l'architecture de l'information
choisie pour votre site: est elle conçue en
fonction des objectifs des visiteurs ?)
Ne
rajoutez de barre de navigation permanente que si
votre site se prête naturellement aux
raccourcis d'une rubrique à l'autre, ce
qui est le cas notamment de quelques
cyber-boutiques bien particulières
(cybermarchés, et toute boutique dans
lesquelles le panier type comporte plusieurs
articles différents à chaque visite).
Réduisez le nombre d'éléments
de cette barre aux seuls liens pertinents. "Le
raccourci que vous proposez constitue-t-il un
cheminement intellectuellement plausible pour
l'internaute" ? Sinon, optez pour un simple rappel
minimaliste de quelques éléments
clé, comme la page d'accueil, le moteur de
recherche ou un plan du site, si vous en disposez.
Et
gardez à l'esprit que cette barre ne sera
pas a priori recherchée par l'internaute
comme élément de navigation
principal. N'en faites donc jamais
l'élément clé du parcours ou
du repérage de l'internaute dans votre
site. Et si vous n'identifiez pas clairement une
valeur ajoutée pour cette barre, alors
oubliez la. Votre site n'en sera que plus simple
donc plus utilisable.
|
