IHM

KHAOULA YOUSSEF
- COURS 10 –
-( L A N A V I G A T I O N W E B )
 Objectifs du cours

Après avoir lu ce chapitre, vous allez:

Comprendre les règles de conception du schéma de navigation, d’un site

web, La règle des 3 clics, les éléments du système de navigation: la barre
de Navigation, le menu déroulant, les onglets, liste de sélection, boutons
de navigation, rollover, chemin de progression (fil d’ariane) et les liens.
 Plan du Cours

•Cycle de Développement d’une Application

•Conception du Système de Navigation
•La règle des 3 clics
•Les éléments du système de navigation
•Barre de Navigation
•Menu déroulant
•Les onglets
•Liste de sélection
•Boutons de navigation
•Rollover
•Chemin de progression (fil d’ariane)
•Liens
•Références
 Cycle de Développement d’une Application

Processus UX

Design

Des conseils concernant

l’ergonomie des HCI

Evaluation

Prototypage
 Conception du Système de Navigation -1-

 Internet nous fait voyager instantanément.

 Nous arrivons sur une page directement, sans savoir où elle se situe par rapport au reste

du site.

 Des lacunes dans la conception du système de navigation sont généralement à l’origine

de deux désagréments fréquents sur le web : se perdre

et attendre.

 Les navigateurs internet n’offrent aucune vue globale de l’ensemble du chemin

parcouru.
 Conception du Système de Navigation -2-

 Il faut fournir une vue globale du contenu du site.

 Il faut agencer les rubriques dans l'ordre où elles sont utilisées.
 Il faut permettre une navigation directe pour les utilisateurs expérimentés.
 Conception du Système de Navigation -3-

 Lorsque la navigation est peu ergonomique, il se perd fréquemment.

 L’attente entre chaque page rallonge inévitablement la durée globale de la tâche.

 L’ouverture d’une nouvelle page nécessite le chargement des éléments qui la

composent et autant de connexions au serveur.

 Il faut indiquer où est l'utilisateur.

 Il faut indiquer par où est passé l’utilisateur.

 La règle des 3 clics

 Ne pas demander à l'internaute de connaître le fonctionnement du navigateur.

 Les principales informations doivent être accessibles le plus rapidement possible.

 Compter le nombre de clics est un moyen simple pour s’assurer que la navigation est

efficace. Il faut aussi limiter la complexité de chaque clic.

 La difficulté de navigation ne réside pas à proprement parler dans le nombre de clics à

effectuer, mais plutôt dans la charge cognitive induite par chaque clic.
 Les éléments du système de navigation -1-

 Le logo du site est généralement placé en haut à gauche.

 Il est donc préférable d’indiquer également le retour vers la page d’accueil par un

lien dans la barre de navigation.

 En haut à droite apparaissent des utilitaires. Ce sont des éléments transversaux au

reste du site qui ne trouvent pas leur place dans l'arborescence des rubriques car ils

doivent être accessibles à tout moment par l'utilisateur.

 Les utilitaires sont par exemple : l’aide en ligne, le moteur de recherche, les

conditions de livraison, le suivi de la commande, l’accès au panier (ou caddie), les

contacts, etc.
 Barre de Navigation -1-

 La barre de navigation montre à l’internaute qu’il reste sur le même site. On

parle de navigation persistante. Elle permet un accès direct aux principales

rubriques du site et un retour rapide à la page d'accueil.

 Afficher une barre de navigation sur toutes les pages du site.

 Cadrer la barre de navigation en haut à gauche de la page.

 Barre de Navigation -2-

 Répéter la zone de navigation en bas de page lorsque la page est

longue.

 Prévoir une zone de navigation contextuelle.

 Ne pas multiplier les zones de navigation.

 Exemple de Barre de Navigation

 Éviter les barres de navigation « à géométrie variable » et la

redondance.
 Menu déroulant

 Il s’agit de faire apparaître, lorsque la souris est au-dessus d’une

rubrique, une zone rectangulaire, un menu, contenant des liens vers les
sous-rubriques.

 Le principal intérêt des menus déroulants est le gain de place, puisque

seule la barre de navigation est affichée en permanence.

 Les familiers du web apprécient ces menus qui leur permettent de

balayer rapidement l’ensemble du contenu du site.

 Éviter les sous-menus.

 Prévoir un second mode d'accès.

Prévoir un second mode d'accès.
 Les onglets -1-

 Les onglets sont maintenant un standard de la navigation web.

 Leur fonctionnement est compris facilement, probablement parce

qu’il s’agit de la métaphore d’un objet que nous avons tous utilisé :
les intercalaires.

 Le seul inconvénient notable de ce composant est qu’il n’est pas

possible de
l’imbriquer.

 Les onglets ne sont efficaces que pour 2 niveaux de profondeur. Au

delà, ils doivent être complétés par une navigation secondaire.
 Les onglets -2-

 Les onglets doivent être dessinés correctement.

 Présélectionner un onglet dès la page d'accueil.

 En voyant l’onglet « Accueil » sélectionné sur la page d’entrée du

site, l’utilisateur comprend que les onglets servent à naviguer entre
les rubriques du site.
Excellente utilisation des onglets
 Liste de sélection -1-

 Certains sites proposent néanmoins une liste de sélection pour naviguer entre
les rubriques.

 Son principal intérêt est d’occuper peu de place et donc de laisser de l’espace
pour le contenu de la page proprement dit .

 Cependant, dans la mesure du possible, ne pas utiliser une liste de sélection

pour la navigation.

 La liste pourra toutefois être employée pour permettre une navigation

alternative à la navigation principale dans le site.

 Associer un bouton à la liste de sélection.

Laquelle est mieux?
 Boutons de navigation

 Éviter d’employer des icônes sans texte explicatif.

 Ils apprécient la concision des visuels et la place ainsi gagnée au profit du contenu de la
page.
 En revanche, les visiteurs qui viennent sur le site pour la première fois ont peu de
chance de comprendre immédiatement la signification des icônes.
 Un texte est généralement moins ambigu qu’une icône
Sur ce site, les boutons de
navigation sont
parfaitement
incompréhensibles. On
pourrait les prendre pour
des vignettes illustrant
l'image de fond. Pourtant
c'est un menu. Le
quatrième bouton pointe
vers "Economie et
emploi".
 Rollover

 Le rollover sert à mettre en évidence les boutons de navigation.

 Le rollover permet de fournir un retour aux actions de l’utilisateur en mettant en
évidence le bouton qu’il désigne.
 Éviter les textes cachés.
 Le rollover est aussi employé pour afficher un texte en fonction de l’objet désigné par
l’internaute.
 Chemin de progression (fil d’ariane)

 L’idée de base du chemin de progression est de montrer le parcours effectué par

l’internaute.
 Le chemin de progression indique les rubriques qui séparent la page d’accueil de la
page courante.
 Placer le chemin de progression en haut de page

Le fil d'Ariane du site La Centrale est incohérent. Il ne correspond pas aux noms des pages
ouvertes. L'utilisateur a cliqué sur la page "Pièce" et c'est "Accessoire" qui figure dans le
fil d'Ariane.
 Liens -1-

 Ne pas changer la couleur et le comportement par défaut des liens.

 On observe, lors des tests, que les internautes s’appuient sur le changement de couleur
des liens pour faire le tri entre les pages qu’ils connaissent et celles qui leur restent à
découvrir.

Probablement pour des

raisons esthétiques, ce site
ne distingue les liens
ni par leur couleur, ni par
leur présentation. Pour
deviner où sont les liens,
l’internaute doit
explorer la page à la souris.
 Liens -2-

 Éviter les liens trop courts.

 La Loi de Fitts nous dit que « le temps pour acquérir une cible est fonction de la
distance et de la taille de cette cible »
 Ce principe s’applique également au web : plus le lien est petit et éloigné du pointeur
souris, plus l’internaute met de temps à cliquer dessus car il demande une sélection
minutieuse

Plus le lien est petit, plus il est difficile à sélectionner.

 Liens -3-
 Placer le lien à la fin d'une phrase ou du paragraphe.
 Le texte du lien doit permettre de deviner le contenu de la page.
 Placer les liens sur les mots-clés.
 Références

• http://ergonomie-web.studiovitamine.com/barre-navigation-menu,353,fr.html

•http://ergonomie-web.studiovitamine.com/lien-hypertexte,355,fr.html

•http://www.usabilis.com/conception-listes-deroulantes/

•http://www.auditergo.com/utilisabilite_boutons/

•http://interaction2.free.fr/Package2/GuideErgo/guide.html