Cours analyse ergonomique d’un site web, tutoriel & guide de travaux pratiques en pdf.

Navigation
Naviguer sur un site web ou à l’intérieur d’un site web signifie aller d’un point à un autre et identifier le lieu où l’on se situe.
NTE / ergonomie document final 10/49
Critères ergonomiques d’un site web
Modes de navigation
Les modes de navigation représentent les différentes possibilités de navigation proposés par le site.
Nombre de modes de navigation
Explications
• Il est indispensable de présenter plusieurs modes de navigation pour offrir différents moyens d’atteindre une information (d’ailleurs, une idée fondatrice de l’hypertexte est de permettre plusieurs modes de navigation).
• Offrir ce choix, c’est intéresser un nombre plus élevé d’utilisateurs car c’est permettre plusieurs activités avec les même documents.
• Penser à présenter toutes les options principales de navigation en un écran, afin d’éviter que l’usager effectue de nombreux clics pour percevoir l’ensemble des possibilités de navigation.
Exemples
• (1) http://www.swissvirtualcampus.ch – Ici, dès la première page, l’utilisateur a plusieurs modes de navigation à disposition qui restent pour la plupart constamment présents sur chaque page du site.
Littérature
• « La navigation est l’indispensable complément d’une architecture bien pensée. Elle doit être simple à comprendre, facile à mémoriser, et offrir différents parcours adaptés aux types de visiteurs. »(DEMAZIERE, 2001, p.68)
Mode de navigation primaire
Explications
• Le mode de navigation primaire peut être considéré comme une sorte de guide du site permettant à l’usager de ne pas se perdre dans les multiples chemins du site. C’est ce qui est communément appelé le « menu principal ». Remarquons qu’un guide présuppose la notion qu’il existe un chemin qui doit être suivi pour avoir la totalité du message.
• Il permet à l’usager d’appréhender la structure du site et est donc logiquement présent sur la page d’accueil.
• Il facilite la navigation ultérieure, quel que soit le mode de navigation favori de l’utilisateur.
• C’est la base du succès d’un site.
Exemples
• « Les concepteurs utilisent le terme navigation persistante (ou navigation globale) pour décrire l’ensemble des éléments de navigation qui apparaissent systématiquement sur chaque page d’un site. » (KRUG S., Zéro prise de tête, DUNOD, Paris, 2001, p.70)
NTE / ergonomie document final 11/49
Critères ergonomiques d’un site web
Hiérarchie versus section
Explications
• La hiérarchie correspond à la navigation par niveaux alors que les sections permettent de naviguer par des passages directs entre les sections.
• Hiérarchie : pouvoir parcourir un site par des passages d’un niveau à l’autre de la structure hiérarchique est important (up & down navigation). La hiérarchie est la colonne vertébrale (Hierarchy is the backbone). Les utilisateurs sont habitués à utiliser des classements hiérarchiques et savent les utiliser. Les catégories hiérarchiques doivent être mutuellement exclusives.
• Section : pouvoir parcourir un site par des passages directs entre les grandes sections du site est tout aussi important (side to side navigation).
• Il faut adapter la largeur (nombre d’options à chaque niveau hiérarchique) et la profondeur (nombre de niveaux hiérarchiques) pour les rendre toutes deux adéquates
(trop large => trop fouillis ; trop étroite => pas intéressante ; trop de niveaux hiérarchiques => navigation trop astreignante).
• Ainsi, pour accéder à une section du site, l’usager ne doit pas être obligé de parcourir tous les niveaux hiérarchiques ou toutes les étapes historiques de sa navigation personnelle.
Littérature
• « Les sections – appelées parfois la navigation primaire – sont les liens pointant sur les sections principales du site : le niveau haut de l’arborescence du site. » (KRUG S., Zéro prise de tête, DUNOD, Paris, 2001, p.73)
Chercher versus explorer
Explications
• Pour retrouver une information sur un site, l’utilisateur à deux possibilités : soit explorer le site en cliquant sur les liens qui lui semblent pertinents, soit utiliser un moteur de recherche.
• Les usagers n’atterrissent pas par hasard dans un site. Ils décident consciemment de le visiter en recherchant une information spécifique.
• S’ils sont habitués au processus d’exploration, les usagers maîtrisent mal le processus de recherche d’information (un mot-clé dans un moteur de recherche ; pas ou peu d’expressions booléennes ; ne retrouvent pas l’item recherché même s’il est inclus dans une liste de résultats d’une recherche ; pensent a priori qu’un outil de recherche travaille sur l’ensemble des pages du site).
• Il en résulte que le mode de navigation primaire ne devrait pas être le mode « chercher » et que l’outil de recherche doit toujours être global par rapport à l’ensemble du site.
Littérature
• « Connaissant la puissance potentielle d’un moteur de recherche et le nombre de personnes qui préfèrent rechercher que naviguer, à moins qu’un site soit très restreint et très bien organisé, chaque page devrait mettre à disposition soit une boîte de recherche,
NTE / ergonomie document final 12/49
Critères ergonomiques d’un site web
soit un lien vers une page de recherche. » (KRUG S., Zéro prise de tête, DUNOD, Paris, 2001, p.75)
Visites guidées
• Proposer de choisir entre plusieurs langues pour visiter un site est un choix de navigation.
• On peut soit proposer un menu de langue ou détecter automatiquement la langue du navigateur de la personne.
• (0) http://www.tcs.ch/ – Ici, tout au sommet de la homepage, on trouve « suisse schweiz svizzero ». en pourrait croire qu’en cliquant dessus on tombe sur le site dans une des trois langues nationales, ce qui n’est pas le cas.
Zones de navigation
Un site est composé de zones de navigation, c’est-à-dire d’emplacements spécifiques dont le but est de proposer un mode de navigation.
Où suis-je? sur quel site suis-je? (site ID)
• Toute page devrait comporter une zone indiquant quel site l’utilisateur visite.
• L’utilisateur doit savoir immédiatement sur quel site il se trouve pour éviter de se sentir perdu, surtout dans les cas où l’utilisateur n’arrive pas au site par sa page d’accueil. Une séquence de navigation peut faire passer très vite un usager d’un site web à un autre, ou le fait de recourir à un moteur de recherche peut très bien amener l’utilisateur au milieu du site.
• Cette indication est en quelque sorte l’identité du site. Cette identité peut prendre la forme d’un entête toujours identique, efficace, avec le logo et le nom.
NTE / ergonomie document final 13/49
Critères ergonomiques d’un site web
Sur quelle page suis-je? (page name)
• Toute page devrait indiquer à l’utilisateur sur quelle page du site il se trouve.
• Il n’est pas toujours évident de distinguer d’emblée une section d’un site d’une autre section du même site.
• C’est pourquoi on peut mentionner près de l’entête le nom de la rubrique en question. par exemple, donner dans les pages un « Vous êtes ici » référencé par rapport à la structure globale du site et/ou un indice de l’entrée du menu activée.
Exemples
• (2) http://www.bnb.ch/index_f.html – Ici nous avons à faire à un menu en deux parties sur la partie gauche de la homepage. La première partie n’indique pas dans quelle section nous nous trouvons, alors que la deuxième oui. Cette double manière de faire trouble l’utilisateur.
• (0) http://www.unige.ch/fapse/ – Lorsque l’on sélectionne les items du menu de gauche, ils changent de couleur (gras) mais ne se distinguent pas tellement des autres. Si l’on clique ensuite ailleurs (sur la page par exemple), ce gras disparaît. On ne sait donc pas où l’on est.
• (1) http://www.click-fr.com – Les sections « annonceurs » et « webmasters » sont représentés par deux couleurs différentes, ce qui simplifie la compréhension. Par contre si l’on choisit une sous-section, on ne sait pas visuellement où l’on est.
• (0) http://www.unige.ch/fapse/SSE/teachers/chatelanat – On ne sait pas sur quelles pages on est et l’item « page d’accueil » nous fait à chaque fois tomber dans le piège, parce qu’en fait on est déjà sur la page d’accueil.
• (1) http://www.tidycats.com/behavior1.asp – Exemple parfait de ce qui pourrait être implémenté. Le menu principal encadre l’item dans lequel on se trouve (section) et la sous-section est indiquée par une petite flèche.
• (1) http://www.veblog.com/fr/2000/0909-flashprecautions.html – Il y a une indication très claire (accueil > archives…) de où l’on se trouve et une possibilité de remonter les niveaux.
• (1) http://hec.info.unige.ch/ – Ici, la page d’accueil met le menu en situation. Si l’on choisit un item, on tombe sur une autre structure avec un menu a gauche et les pages a droite. Ce qui est ici intéressant, c’est que le menu a gauche conserve les couleurs et surtout le fond de la page d’accueil. On sait tout de suite que cette partie de gauche correspond au menu principal repéré sur la page d’accueil. Enfin le menu comporte 8 items.
• « Une des façons de m’éviter la sensation « d’être perdu dans le cyber-espace », c’est de m’indiquer où je me situe, de la même façon qu’un panneau « Vous êtes ici » sur une carte dans un centre commercial – ou dans un parc national. » (KRUG S., Zéro prise de tête, DUNOD, Paris, 2001, p.82)
NTE / ergonomie document final 14/49
Critères ergonomiques d’un site web
Quelles sont les options à ce niveau ? (local navigation)
• L’utilisateur doit connaître sur chaque page les possibilités de navigation qui lui sont offertes au niveau où il se trouve. Cela revient à indiquer les « sous-sections » de la « section » qu’il a sélectionnée.
• (0) http://www.unige.ch/fapse – Le menu en haut au milieu (oblique) n’est pas du tout visible et dès lors sera peu utilisé.
• « Bannissez les pages cul-de-sac, dont on ne peut pas sortir. » (DEMAZIERE, 2001, p.68)
Quelles sont les principales section de ce site? (sections)
• Toute page devrait indiquer à l’utilisateur les autres sections principales qu’il peut consulter.
• On peut pour cela insérer sur chaque page une sorte de barre de navigation générique, reprenant toutes les sections principales du site.
• (1) http://www.apple.com – Ici, les sections sont clairement indiquées au sommet de chaque page et cliquables depuis n’importe où.
Puis-je rechercher? (search)
• Toute page devrait proposer à l’utilisateur un moyen de rechercher une information.
• De manière classique, il suffit de proposer un moteur de recherche.
• (1) http://www.tcs.ch – Sur chaque page se trouve en haut à droite un moteur de recherche qui permet de rechercher sur l’ensemble du site.
Menus
Les menus représentent des entrées de navigation au sein d’un site. Ils sont organisés, représentés sous forme d’items, peuvent être de différents niveaux et de forme graphique ou textuelle.

1. SITE 
1.1. ANALYSE ETHNOGRAPHIQUE
1.2. POINTS FRAGILES D’UN SITE
1.3. ANALYSE ERGONOMIQUE
2. NAVIGATION 
2.1. MODES DE NAVIGATION
2.2. ZONES DE NAVIGATION
2.3. MENUS
2.4. LIENS
2.5. OUTILS DE NAVIGATION
2.6. RÔLE DU SYSTÈME
3. STRUCTURE 
3.1. SITE
3.2. ECRANS D’INTRODUCTION
3.3. HOMEPAGE
3.4. PAGE TYPE
3.5. ORGANISATION DE L’INFORMATION
4. CONTENU 
4.1. TYPE DE CONTENU
4.2. LISIBILITÉ DE L’INFORMATION
5. DESIGN 
5.1. TYPE D’ÉLÉMENTS DE DESIGN
6. GESTION DES ERREURS 
6.1. PRÉVENTION
6.2. TRAITEMENT DES FORMULAIRES
7. SYSTÈMES D’AIDE 
7.1. TYPE D’AIDE
8. CHARGE DE TRAVAIL 
8.1. TYPE D’ÉLÉMENTS PERTURBANTS
9. ADAPTABILITÉ 
9.1. PERSONNALISATION
10. EVOLUTION 
10.1. MAINTENANCE
10.2. NOUVEAUTÉS DU SITE