Cours guide de recommandations ergonomiques sites et applications Web

Sommaire: Recommandations ergonomiques sites

PRÉAMBULE
RECOMMANDATIONS ERGONOMIQUES
I. SITES WEB
I Le système de navigation
I GÉNÉRALITÉS
I LA PAGE D’ ACCUEIL
I LES BARRES DE NAVIGATION
A) LE CAS DES SITES SIMPLES
B) LE CAS DES SITES ÉLABORÉS
C) LE CAS DES SITES COMPLEXES
D) DANS TOUS LES CAS ( QUE LE SITE SOIT SIMPLE , ÉLABORÉ OU COMPLEXE )…
I LES LIENS
A) L’ASPECT/ APPARENCE DES LIENS
B) LA POSITION DES LIENS
C) LA SIGNIFICATION DES LIENS
D) LE COMPORTEMENT ET L’ EFFET DES LIENS
I La présentation
I L’HOMOGÉNÉITÉ.
I LES CADRES ( OU FRAMES)
I LA DISPOSITION DES ÉLÉMENTS/ INFORMATIONS DANS LA PAGE
I LES COULEURS
I LES ASPECTS TYPOGRAPHIQUES
I LES PICTOGRAMMES
I LES ANIMATIONS
I Le contenu
I ASPECTS GÉNÉRAUX.
I ASPECTS QUALITATIFS
A) LA PAGE D’ ACCUEIL
B) LES TITRES
C) LES DATES ET SIGNATURES
D) LES IMAGES
E) LES LIENS VERS L’ EXTÉRIEUR
F) LA GESTION D’ UN SITE
I ASPECTS QUANTITATIFS
I Le transfert de données
I LE TEMPS DE CHARGEMENT
I LE TÉLÉCHARGEMENT
I LA FIABILITÉ DE L’ INFORMATION
I L’IMPRESSION
II. APPLICATIONS WEB OU APPLICATIONS EN LIGNE
II Recommandations générales
II LE SYSTÈME DE NAVIGATION
A) GÉNÉRALITÉS
B) LES LIENS
II LA PRÉSENTATION
A) LA TAILLE DES PAGES
B) L’HOMOGÉNÉITÉ
C) LES CADRES ( OU FRAMES)
D) LA DISPOSITION DES ÉLÉMENTS/ INFORMATIONS DANS LA PAGE
E) LES LISTES ET TABLEAUX
F) LES ASPECTS TYPOGRAPHIQUES
G) LES COULEURS
H) LES PICTOGRAMMES
II LE CONTENU
A) LA GESTION DES DROITS
B) ASPECTS QUALITATIFS
C) LE VOCABULAIRE
D) LES BOUTONS
E) ASPECTS QUANTITATIFS
II LA DECONNEXION
II L’IMPRESSION
II Recommandations spécifiques a chaque type de page
II LA PAGE D’ IDENTIFICATION
II LA PAGE D’ ACCUEIL
II LES PAGES DE FORMULAIRES DE SAISIE.
A) LA SAISIE S’ EFFECTUANT SUR UNE SEULE PAGE
B) LA SAISIE RÉPARTIE SUR PLUSIEURS PAGES ( ONGLETS)
• Les onglets avec chronologie de saisie imposée (onglets dépendants)
• Les onglets sans chronologie de saisie imposée (onglets indépendants)
C) LES CHAMPS DE SAISIE ET LES CHAMPS D’ AFFICHAGE
• La présentation des champs
• Les libellés des champs de saisie
• La saisie
• L’initialisation des champs de saisie avec une valeur par défaut
• La saisie obligatoire et la saisie optionnelle
• La position du curseur
D) LA SÉLECTION D’ UN NOMBRE LIMITÉ D’ OPTIONS
• Les options exclusives : les boutons d’option
• Les options non exclusives : les cases à cocher
E) LES DONNÉES SAISIES PAR SÉLECTION DANS UNE LISTE DÉROULANTE
F) LES BOUTONS DE FORMULAIRE
II LES PAGES DE RECHERCHE ET PAGES DE RÉSULTATS
II L’impression
II Le système d’aide
II L’AIDE SYSTÉMATIQUE
A) L’AIDE IMPLICITE
B) L’AIDE EXPLICITE : LES MESSAGES
II L’AIDE À L’ INITIATIVE DE L’ UTILISATEUR
A) L’AIDE À LA SAISIE
• L’aide sur un format générateur d’erreur
• L’aide sur les valeurs possibles
B) L’AIDE CONTEXTUELLE
C) L’AIDE GÉNÉRALE
TABLE DES ILLUSTRATIONS
GLOSSAIRE
BIBLIOGRAPHIE
I. ARTICLES/ OUVRAGES
II. SITES
III. LISTE DE DIFFUSION

♣ Extrait du cours

I. SITES WEB
I.1 LE SYSTÈME DE NAVIGATION
Le système de navigation adopté doit être facile à appréhender pour l’utilisateur ; il doit permettre à ce dernier :
• de se faire une idée de ce qu’il y a à voir sur le site (grâce à un plan du site, un sommaire…) ;
• de savoir où il se situe dans le site (donc dans son arborescence) et ce qu’il peut encore aller voir (grâce aux barres de navigation et éventuellement une barre de progression ou barre de cheminement) ;
• de se souvenir de ce qu’il a déjà vu (grâce à des liens qui changent de couleur).
I.1.1 GÉNÉRALITÉS
1. Au sein d’un site, le système de navigation doit être autonome.
Il ne doit pas être dépendant des fonctions « Page précédente » et « Page suivante » du navigateur.
Ces dernières ne fonctionnent pas toujours de la même façon selon les navigateurs : ce n’est pas systématiquement la page précédente qui s’affiche lorsqu’on active la fonction correspondante. Les fonctions « Page précédente » et « Page suivante » du navigateur sont donc « un plus » fourni par ce dernier mais ne doivent pas se substituer au système de navigation propre à un site. En d’autres termes, le système de navigation doit offrir à l’utilisateur les moyens de naviguer dans le site sans que l’utilisateur soit contraint d’utiliser les fonctions « Page précédente » et « Page suivante » du navigateur : les liens proposés à l’intérieur du site doivent donc suffire.
2. Chaque page doit proposer au minimum un lien sans quoi il s’agirait d’une page « en impasse » ou « orpheline ».
Arriver sur une page orpheline est :
• gênant dans le cas où l’utilisateur est déjà sur le site car il est contraint d’utiliser la fonction « Page précédente » du navigateur pour pouvoir naviguer dans le site ; qui plus est, il n’a plus aucun repère lui permettant de se situer dans l’arborescence de celui-ci ;
• franchement frustrant si l’utilisateur arrive sur la page depuis un autre site car il y a alors de fortes chances pour qu’il ne sache même pas sur quel site il arrive (donc qu’il ait du mal à identifier la société/l’auteur de l’information contenue dans la page, mais également le « thème » général du site).
3. Il ne devrait pas y avoir de lien actif qui pointe sur la page courante.
Cliquer sur un tel lien entraîne l’affichage (ré-affichage) de la même page, ce qui est tout à fait inutile (et peut prendre du temps).
Exception : lorsque la page est longue (c’est-à-dire si elle dépasse la hauteur d’un écran) avec un contenu essentiellement textuel, on peut proposer des liens qui pointent à l’intérieur de la page courante, chacun vers une partie donnée ; ces liens (qui depuis une page donnée renvoient à
l’intérieur de cette même page) s’appellent des signets.
I.1.2 LA PAGE D’ ACCUEIL
1. La page d’accueil doit indiquer l’organisation générale du site.
La page d’accueil est théoriquement le point d’entrée du site ; c’est la « première » et la principale page « d’aiguillage ». Les différentes parties contenues dans le site – autrement dit le rubriquage – doivent donc y être présentées clairement.
Cette présentation peut revêtir diverses formes : bandeau horizontal, bandeau vertical, disposition en arc de cercle, ou bien encore disposition plus graphique,… pour ne parler que des présentations les plus souvent rencontrées. La forme adoptée sur la page d’accueil ne sera pas nécessairement celle utilisée pour faire la barre de navigation principale des autres pages du site (surtout si la forme adoptée pour la page d’accueil est très graphique). Pour des raisons de place, on privilégiera plutôt à l’intérieur du site un bandeau vertical gauche ou un bandeau horizontal haut de page (mais si la place est suffisante, on peut tout à fait conserver une forme plus graphique).
I.1.3 LES BARRES DE NAVIGATION
L’arborescence d’un site peut être composée de 1 à n niveaux, la page d’accueil étant le « niveau 0 ». C’est sur la page d’accueil que sont énoncées les différentes rubriques auxquelles l’internaute peut accéder.
Chaque rubrique (niveau 1) peut contenir 1 à n pages et peut être constituée de 1 à n sous-rubriques (niveau 2), lesquelles peuvent contenir 1 à
n pages et être elles-mêmes constituées de 1 à n sous-sous rubriques (niveau 3), etc.
Au sein d’un site, la navigation peut être :
• Verticale : changement de niveau à l’intérieur de l’arborescence, autrement dit on « monte » ou on « descend ».
Exemples : de la page d’accueil vers une des pages de la rubrique 1 (on descend dans l’arborescence) ou d’une des pages de la sous-rubrique 3 vers une des pages de la rubrique 2 (on monte dans l’arborescence).
d) DANS TOUS LES CAS ( QUE LE SITE SOIT « SIMPLE », « ÉLABORÉ » OU « COMPLEXE »)…
1. Au sein du site, présenter les items de navigation dans le même ordre que celui de la page d’accueil.
Les différentes parties contenues dans le site apparaissent clairement au niveau de la page d’accueil.
La cohérence étant un élément essentiel pour aider l’utilisateur à se repérer, l’ordre adopté en page d’accueil pour présenter ces différentes parties doit être repris/respecté au sein du site.
Exemple :
Si la page d’accueil propose les différentes parties suivantes dans l’ordre suivant :
• Université
• Formation initiale
• Formation continue
• Recherche
• Vie étudiante
• Publications
I.1.4 LES LIENS
a) L’ASPECT/ APPARENCE DES LIENS
1. Un lien doit être clairement reconnaissable.
Un lien peut être un pictogramme, un logo, un texte d’une couleur différente de celle utilisée pour du texte normal (et généralement souligné). Lorsque l’utilisateur passe sur un lien avec le pointeur de la souris, le pointeur doit prendre la forme d’une petite main.
b) LA POSITION DES LIENS
1. Eviter autant que possible de placer un lien parmi un ensemble d’autres liens, surtout si ceux-ci sont de petite taille.
« Noyer » un lien parmi d’autres le rend plus difficile à identifier/distinguer visuellement et plus difficile à « viser »/sélectionner avec le pointeur.
c) LA SIGNIFICATION DES LIENS
1. Un lien doit être explicite dans son contexte.
Choisir un mot ou groupe de mots évoquant le mieux possible le contenu vers lequel pointe le lien.
On doit savoir s’il nous envoie vers une autre page, s’il ouvre un document .doc, .pdf, du son, de la vidéo ou s’il correspond à une adresse e-mail.
2. Lorsqu’un lien mène à l’extérieur du site, il peut éventuellement être intéressant de le préciser.
Attention toutefois à la méthode utilisée pour signaler qu’un lien pointe à l’extérieur du site : éviter notamment d’écrire ces liens en italique pour des raisons de lisibilité à l’écran ; écrire ces liens dans une couleur spécifique ?… pourquoi pas, encore faut-il bien choisir ladite couleur (lisibilité du lien par rapport au fond, difficulté à trouver une couleur pour le lien visité et une couleur pour le lien non visité). Utiliser un picto (non cliquable) peut également être une solution. Mais le mieux est sans doute de préciser le site de destination dans une info-bulle, laquelle apparaît lorsque l’utilisateur positionne le pointeur sur le lien.