Catégories
Uncategorized

Ergonomie Web: barre de navigation Web: pour naviguer librement sur un site Web


La barre de navigation: un repère sur le site.

La barre de navigation est un élément essentiel pour l’internaute. Cela lui donne une vue globale du site et lui montre toutes les sections. Ainsi, l’utilisateur peut se déplacer facilement en fonction de ses besoins.

La barre de navigation vous permet de passer d’une section à l’autre en toute liberté, quel que soit le niveau de profondeur du site. Si l’utilisateur utilise le bouton « revenir en arrière » du navigateur comme bouton de navigation pour se déplacer sur le site, ce n’est pas un bon signe.

1. La barre de navigation.

Image de la barre de navigation
Le site de La Fnac propose une zone de navigation spécifique placée sous la barre de navigation

Le site de La Fnac propose une zone de navigation spécifique placée sous la barre de navigation

Toujours placée au même endroit sur toutes les pages du site, la barre de navigation est généralement placée horizontalement ou verticalement en haut de la page et de préférence à gauche.

Cette position lui permet d’être toujours visible et accessible quelle que soit la taille de la fenêtre dans le navigateur. Sa position, en haut de page, lui donne de l’importance, et c’est une référence toujours présente.

Les internautes ont cette habitude. Ils capitalisent sur leurs expériences et vouloir changer ce principe équivaudrait à déranger les visiteurs.

Il est parfois utile de fournir à l’utilisateur des zones de navigation indépendantes de la barre de navigation. Ces zones sont spécifiques à certaines pages et vous permettent de fournir des informations supplémentaires et d’ajouter au contenu de la page ouverte.

Ces espaces sont souvent proposés sous forme de liens hypertextes et permettent, par exemple, sur les sites de vente en ligne, d’affiner les critères d’achat.

Il est parfois tentant de multiplier les zones et les menus de navigation en utilisant des liens redondants pour inciter l’utilisateur à visiter la page. En général, cela conduit l’utilisateur à visiter la page deux fois et crée toujours un doute dans l’esprit de l’utilisateur.

2. Les menus déroulants.

Depuis la barre de navigation, il est possible de créer des menus déroulants. Le principe est d’afficher, lorsque vous passez la souris sur une section, une zone contenant des liens hypertextes vers les sous-sections.

L’objectif principal est d’économiser de l’espace et d’accéder rapidement aux sous-sections. Mais parfois, cela peut gêner certaines personnes, surtout si les sous-titres sont eux-mêmes divisés en nouveaux sous-titres.

Lorsque l’utilisateur clique sur l’onglet, le sous-menu apparaît et la souris doit être glissée pour sélectionner un nouveau menu. Si la souris quitte la zone, le menu disparaît et l’opération doit être répétée.

Pour remédier à ce type d’inconvénient, il est parfois préférable de proposer d’accéder aux rubriques par pages de liens.

Les onglets de la barre de navigation font partie de l’environnement que l’utilisateur connaît. Ils les identifient lorsqu’ils s’ouvrent en haut de la page.

C’est devenu un vrai standard en ergonomie web et il est rare de trouver un site internet qui ne les utilise pas. Ils n’ont qu’une seule limite. Lorsque le site contient plus de deux niveaux de profondeur, il est nécessaire d’utiliser une navigation secondaire.

Pour bien comprendre le rôle des onglets, lorsqu’un utilisateur accède à un site Web, l’onglet du menu de navigation correspondant à la page ouverte doit être sélectionné par défaut. L’utilisateur comprend immédiatement où il se trouve et peut ainsi naviguer entre les différentes sections.

C’est comme sur la première page du site, l’onglet « Accueil » est toujours présélectionné.

Image de la barre de navigation
Ici, le menu utilise le survol. Lorsque vous survolez le pointeur de la souris, les éléments changent de couleur. Ils passent du jaune au vert.

Ici, le menu utilise le survol. Lorsque vous survolez le pointeur de la souris, les éléments changent de couleur. Ils passent du jaune au vert.

Le survol est une fonction qui modifie l’apparence d’un élément graphique dans sa forme, sa couleur ou son animation lorsqu’il est survolé par le pointeur de la souris.

L’élément revient à son état initial lorsque le pointeur quitte l’image.

Cette fonction, ou comportement d’un élément graphique, est souvent utilisée pour donner de l’interactivité à un élément de la barre de navigation, afin de le mettre en évidence.

Si l’utilisation du rollover est souvent intéressante, elle est parfois source de difficultés pour les internautes. Sur le site de la Banque Postale, les titulaires de compte doivent identifier leur identifiant et leur mot de passe pour s’identifier. C’est pour le second que le système de retournement complique grandement les choses car son fonctionnement n’est pas intuitif et il est difficile à maîtriser.

Pour indiquer le mot de passe dans le champ réservé, la souris doit être au dessus des 6 chiffres constituant le mot de passe sur les 10 proposés. Le survol des chiffres les uns après les autres déclenche donc l’action de saisir votre mot de passe. Cela nécessite un effort de concentration important pour l’internaute, sous peine d’erreur. Il suffit de survoler par inadvertance un autre chiffre et il est facile de comprendre que le mot de passe devient alors erroné.

Dans ces conditions, l’utilisateur a l’impression de perdre le contrôle de sa navigation.

5. Boutons de navigation.

Image de la barre de navigation
Sans le texte associé au bouton, la signification des icônes est très difficile à comprendre.

Sans le texte associé au bouton, la signification des icônes est très difficile à comprendre.

Les boutons de navigation sont des éléments utilisés comme liens pour naviguer.

Ils se présentent sous plusieurs formes: icône, texte ou parfois les deux associés.

Pour économiser de l’espace sur l’écran, certains concepteurs Web préfèrent utiliser les icônes de navigation comme menu. Par exemple, l’icône représentant une maison pour accéder à la page d’accueil dans le menu est souvent bien interprétée. Ce n’est pas le cas pour tous les graphiques utilisés comme icônes.

Dans l’exemple ci-contre, l’icône « sortie » illustrée par la maison est déroutante, même si elle est accompagnée d’un texte.

Si la barre de navigation se compose exclusivement d’icônes, la navigation devient plus risquée. L’utilisateur est plongé dans le doute, dans la confusion, s’il n’identifie pas immédiatement ce que l’icône symbolise. Avant d’utiliser ce type de menu, il est préférable d’avoir testé la compréhension des icônes auprès d’un large public.

Dans les boutiques en ligne, les utilisateurs localisent immédiatement le «panier virtuel» ou le «panier virtuel» pour afficher la liste des articles placés en commande. Les icônes utilisées parlent d’elles-mêmes. Qui prendrait le risque d’en inventer d’autres?

Image de la barre de navigation
Sur ce site, les boutons de navigation sont totalement incompréhensibles. Nous pourrions les prendre pour des miniatures illustrant l'image d'arrière-plan. C'est pourtant un menu. Le quatrième bouton pointe sur

Sur ce site, les boutons de navigation sont totalement incompréhensibles. Nous pourrions les prendre pour des miniatures illustrant l’image d’arrière-plan. C’est pourtant un menu. Le quatrième bouton pointe sur « Economie et emploi ».

Le texte est généralement mieux compris qu’une icône. L’étiquette du bouton doit être explicite pour que l’utilisateur puisse comprendre le contenu de la page.

Par exemple, un bouton « page suivante » ou « page précédente » ne fournit aucune information à l’utilisateur. Pour lui, l’emplacement de la page n’a pas d’importance. Ce qui l’intéresse, c’est ce qu’il contient.

Une seule flèche au bas de la page ou de l’article peut ne pas être explicite. La combinaison de graphiques et du texte « Haut de page » supprime toute ambiguïté.



Source link