029 - Navigation sur deux colonnes

Note 3/5, coût 2/5, accessibilité 4/5 La navigation prend ses aises dès le haut de page.

Adapté pour les sites contenant un nombre important de catégories, de sous-catégories et surtout dont les contenus sont courts ou prenant peu d’espace en hauteur.

La navigation sur deux colonnes utilise un gabarit de page sur 3 colonnes. Une colonne affiche les catégories de niveaux 1. Une seconde colonne adjacente affiche les sous-catégories de la colonne en cours de consultation et enfin une troisième colonne affiche le détail des pages.

Ici l’explorateur de fichier Mac. Cette navigation est une déclinaison de l’explorateur de fichier Mac. Les utilisateurs Mac devraient se sentir à l’aise.

Cette navigation présente l’avantage de donner une vue globale d’une catégorie à l’internaute. L’omniprésence des différents niveaux de navigation permet à l’internaute de changer de catégorie ou de sous-catégorie très facilement.

La navigation prend beaucoup de place à l’écran, utilisez cette navigation pour des libellés courts qui utilisent toujours le même espace. Évitez d’avoir des pages à long contenu ce qui forcerait l’internaute à faire défiler la page et ainsi de perdre l’accès direct à la navigation. Si cela est indispensable, insérez un bouton « Retour haut de page » en bas à droite des contenus pour donner un accès rapide à la navigation.

Cette navigation permet un nombre important de catégories et sous-catégories. Essayez de garder la hauteur de colonne homogène. Le deuxième niveau de navigation peut facilement disparaître pour afficher un contenu principal plus large.

Lors de la mise en place de ce type de navigation veillez à :

visuellement allumer la catégorie et la sous-catégorie en cours de consultation.

insérer des liens d’évitement afin de permettre aux personnes utilisant des aides techniques de type lecteur de se rendre directement d’un bloc à l’autre. Pour plus de détails, voir navigation 008.

éviter les jeux de cadre frame et iFrame.

vous assurez que l’on peut faire un lien vers une partie spécifique du site.
Ainsi, vos visiteurs pourront faire des liens directement vers le contenu dont ils parlent dans leur blog, site…

si vous devez utiliser des barres de défilement, faites qu’elles ressemblent au plus près aux barres par défaut des navigateurs. Plus d’informations navigation 021.

une longue liste de catégories et sous-catégories risque de paraître monotone, donnez
du volume aux listes d’éléments en insérant des variations de mise en forme, de couleurs et potentiellement insérez des pictos.

ne jamais afficher de barre de défilement verticale. Tout d’abord parce que l’internaute ne s’y attend pas et deuxièmement car jongler entre défilement horizontal et vertical est fastidieux et frustrant.

veillez à ce que l’ordre de lecture visuel et l’ordre de lecture linéaire soit le même. Si le menu est à gauche et le contenu à droite, on doit retrouver cet ordre dans le code html.

Sur Mac, le système fonctionne que
l’on clique une fois ou deux fois sur
le dossier. Sur un site web, préférez
un simple clic.

Tests pratiques

si vous créez la navigation dans une technologie autre que HTML standard, assurez-vous que les moteurs de recherche arrivent à avoir accès à vos contenus. Assurez-vous aussi que lorsque l’on arrive directement sur une sous-page du site, la navigation reste allumée correctement.

validez qu’il est possible de tabuler à travers la navigation pour avoir accès au contenu.

Laisser un commentaire

Les champs marqués * sont obligatoires