1. Attribuer systématiquement un titre aux listes et aux tableaux ; ces titres permettront à l'utilisateur de se repérer facilement et rapidement.
2. Si une liste ou un tableau est muni d'un ascenseur (car sa
taille/format ne permet pas de voir l'intégralité de son
contenu), alors :
- ascenseur vertical : les en-têtes de lignes de données
doivent défiler mais les en-têtes de colonnes doivent toujours
rester visibles ;
- ascenseur horizontal : les en-têtes de colonnes doivent
défiler mais les en-têtes de lignes de données doivent
toujours rester visibles.
3. Respecter les alignements standards des traitements de texte :
- libellés en général à gauche,
- numériques à droite.
Eviter les alignements centrés (effets de vagues verticales).
4. Les colonnes doivent être séparées par un double espace (1 caractère blanc x 2). Si cela ne peut pas être fait (par manque de place), séparer les colonnes par des traits (lignes verticales).
5. Comment organiser les éléments à
l'intérieur d'un tableau/d'une liste (c'est-à-dire sur quoi se
baser pour établir la chronologie des données) ?
- adopter l'ordre respectant les habitudes de travail de l'utilisateur ;
- le cas échéant, utiliser l'ordre alphabétique ou
numérique.
1. Utiliser le vocabulaire appartenant au domaine d'activité des utilisateurs.
2. Utiliser des termes explicites et non ambigus. Faire des phrases (ou expressions) simples, c'est-à-dire facilement compréhensibles par l'opérateur ; préférer les formes affirmatives.
3. Indiquer les unités de mesure utilisées (en abrégé si elles sont connues de l'utilisateur).
4. Eviter d'utiliser des abréviations, sinon, fournir chaque fois
que c'est possible des abréviations bien choisies :
- utiliser uniquement celles qui sont le plus largement adoptées par les
utilisateurs car ces derniers pourront avoir rencontré certaines
abréviations qui signifient autre chose ;
- préférer la contraction (omission des lettres internes) pour
les mots courts ;
- préférer la troncature pour les mots longs (omission des
lettres finales).
5. Par souci d'homogénéité, ne pas utiliser de synonymes : désigner toujours un même objet ou une même action par le même libellé.
6. Lors de la création de listes d'éléments, on peut être confronté à des éléments de texte trop longs pour contenir dans l'espace d'une ligne de la liste. Dans ce cas, supprimer des parties de texte dans le milieu du libellé et y insérer des points de suspension, conservant ainsi le début et la fin du libellé de l'élément. Attention toutefois : dans certains cas, il sera plus judicieux de conserver le début du libellé et de faire suivre ce dernier par des points de suspension.
7. Repérer chaque champ, liste, tableau, colonne ou groupe de
données par un libellé. On distingue trois grands types de
libellés :
- le libellé de champ, à utiliser pour identifier une
donnée affichée ou à saisir ;
- l'en-tête de colonne, à utiliser pour identifier la colonne d'un
tableau ou d'une liste ;
- l'en-tête de groupe, à utiliser pour identifier un ensemble de
données rassemblées sous la forme d'un groupe.
1.
Concernant la taille des caractères :
- taille minimum : 8 points ; des caractères de plus petite
taille sont quasiment illisibles ;
- taille maximum : 16 points ; l'utilisation de caractères de
plus grande taille gêne la lisibilité.
2. Choisir la police de caractères en fonction de critères de lisibilité (éviter l'italique).
3. Eviter d'utiliser plus de trois polices de caractères différentes dans une même fenêtre ou sur plusieurs fenêtres affichées simultanément.
4. De manière générale, utiliser une seule police de caractères dans un champ. Toutefois, il est possible d'utiliser des codages particuliers (police différente, couleur, italique, gras, souligné...) pour différencier certains textes tels que des mots clès, des liens, des libellés de champs de saisie obligatoire, etc.
5. Pour tous les libellés (champs de saisie et champs d'affichage, option de menu, boutons d'option, titre, etc.) utiliser une majuscule à l'initiale. Ne mettre donc en majuscule que la première lettre du premier mot du libellé et aucun autre mot de ce libellé.
La couleur peut être employée pour coder visuellement l'information : différenciation et identification des informations affichées.
1. La couleur ne doit pas être le seul moyen utilisé pour communiquer de l'information et ne devrait pas être le seul élément qui distingue deux objets ; il doit y avoir d'autres indicateurs (libellés, forme, disposition) ; appliquer ce principe surtout pour tenir compte des utilisateurs daltoniens ou achromates mais aussi pour les écrans monochromes (même si ces derniers sont " rares " !)
2. Choisir les couleurs en gardant à l'esprit que l'objectif est
de faciliter la lisibilité des informations affichées. C'est
pourquoi certaines associations de couleurs doivent être
évitées. Ainsi, essayer de ne jamais utiliser ensemble :
- le rouge avec le bleu,
- le jaune avec le violet,
- le jaune avec le vert.
Pour le fond des fenêtres, éviter les teintes de rouge, de jaune et de ses dérivés (vert, orange, ...). Privilégier plutôt le gris pâle, sinon du bleu foncé.
Pour de l'information que l'utilisateur doit lire, éviter le bleu pâle (et les couleurs pâles en général).
3. Homogénéité : au sein d'une même application et entre différentes applications destinées à un même groupe d'utilisateurs, toujours choisir les mêmes " codages couleur ".
4. Respecter les règles d'association conventionnelles entre la
couleur et sa signification :
- vert : signifie que tout se passe correctement,
- jaune ou orange : attention, vigilance,
- rouge : alerte, danger, interruption.
5. Eviter d'utiliser plus de 5 ou 6 couleurs différentes dans une même fenêtre (mais également au sein d'une même application). Au delà de 5 ou 6, cela entraîne une surcharge visuelle et l'utilisateur éprouve des difficultés à saisir le rôle joué par la couleur au sein de l'application.
6. Concernant les états sur les imprimantes noir et blanc : s'assurer que chaque couleur reste visible sur les impressions (il doit y avoir correspondance entre les couleurs qui apparaissent à l'écran et les niveaux de gris des sorties papier ; si le nombre de niveaux de gris disponible est insuffisant, prévoir des hachures).
Les
icones peuvent avoir deux fonctions :
- aider à identifier la nature d'une information, sous forme d'icone,
- représenter une action par une icone associée à un
bouton de commande.
Exemple : l'icone loupe (ou jumelles) est associé au bouton de commande <Rechercher>.
1. Attention, les icones utilisées doivent être représentatives de l'action ou du concept que l'on souhaite représenter, autrement dit elles doivent être explicites. Il paraît néanmoins " prudent " de doubler les icones d'un libellé.
2. Homogénéité : quand une icone est utilisée pour représenter quelque chose, la conserver pour l'ensemble de l'application. Autrement dit, ne pas utiliser deux ou plusieurs icones différentes pour désigner une seule et même action ou un seul et même concept.
1. Utiliser les onglets pour éviter les successions de boîtes de dialogue ou un trop grand nombre de boutons.
2. Eviter d'utiliser plus d'une rangée d'onglets, car la manipulation de 2 ou 3 rangées d'onglets est complexe.
3. Quand le principe des onglets est utilisé, si ces derniers sont liés (dépendants), les boutons <OK> et <Annuler> doivent être placés en dehors de l'onglet. Si les onglets sont indépendants, ces boutons doivent être placés sur chacun des onglets : le bouton <Annuler> devient <Fermer> et la demande de confirmation devient facultative (<OK> facultatif).
4. Centrer les libellés des onglets et les afficher sur une seule ligne.
5. Aligner les languettes des onglets à gauche et les accoler les unes aux autres.
![]() |
![]() |
![]() |