Étiquettes de texte

Pour un utilisateur qui possède une vision normale, les sorties texte fournissent la majorité de l'information et de retour dans la plupart des applications. Pour un utilisateur à la vue déficiente, qui n'est peut-être pas capable de voir et comprendre toute sortie graphique supplémentaire, une sortie textuelle claire est un point critique. Vous devez par conséquent choisir et placer le texte soigneusement à l'écran et laisser le choix de la police et de sa taille à l'utilisateur pour s'assurer que tous les utilisateurs sont capables d'utiliser l'application efficacement.

VIII.III.I. Espacement et alignement

Utilisez des espacements et alignements de texte uniformes dans toute l'application. Comme règle de base, laissez de l'espace entre les composants de l'interface utilisateur par incréments croissants de 6 pixels lorsque la relation entre les éléments reliés devient plus distante.

Tableau VIII.2 Alignement et espacement pour différents éléments texte
Élément Positionnement Exemple
Grandes icônes (navigateur de fichiers) Centré horizontalement et 6 pixels au dessous des grandes icônes
Petites icônes (barre d'outils) Centré verticalement et 6 pixels à droite des petites icônes
Étiquette de contrôle liste 6 pixels au-dessus et aligné à gauche horizontalement avec le contrôle liste ou 12 pixels sur la gauche et aligné en haut horizontalement avec le contrôle liste
Étiquettes de case à cocher et bouton radio 6 pixels à droite et centré verticalement avec le bouton radio
Étiquettes de champ texte 6 pixels à gauche et centré verticalement avec le contrôle de champ de texte
Étiquettes de bouton 12 pixels de remplissage de chaque côté du texte centré (et de tout graphique accompagnant). S'il apparaît dans un groupe de boutons, l'étiquette du bouton la plus longue définit la taille des boutons, centrez toutes les étiquettes des autres boutons et des graphiques accompagnant dans des boutons de même taille.
Autres étiquettes de composant (par ex. zones de sélection numérique, champs texte) 12 pixels entre la plus longue étiquette de texte et son composant associé, toutes les autres étiquettes de texte dans le groupement du composant sont alignées à gauche avec l'étiquette la plus longue. Toutes les étiquettes sont centrées verticalement par rapport à leur composant associé
Conseils
  • Si l'étiquette précède le contrôle qu'elle nomme, terminez l'étiquette par deux-points. Par exemple, Courriel : pour nommer un champ de texte dans lequel l'utilisateur doit saisir son adresse électronique. Cela aide à l'identifier comme étant l'étiquette du contrôle au lieu que ce soit un élément indépendant. Certains utilitaires de consultation d'écran pour technologies d'assistance peuvent également utiliser la présence des deux-points pour identifier du texte en tant qu'étiquette de contrôle.
  • Assurez-vous qu'une étiquette avec mnémonique est associée aux contrôles qu'elle nomme.
  • Alignez à gauche les composants et les étiquettes à moins que toutes les étiquettes dans un groupe aient des longueurs très différentes. Dans ce cas, alignez plutôt à droite les étiquettes pour être sûr qu'aucun contrôle ne finisse par être trop éloigné de l'étiquette correspondante.
  • Choisissez les noms des étiquettes avec soin. Donnez aux objets, même pris hors contexte, un nom porteur de sens. Les utilisateurs qui utilisent des lecteurs d'écran ou d'autres technologies d'assistance ne sont pas toujours capables de comprendre immédiatement la relation entre un contrôle et son environnement.
  • Soyez cohérent avec l'usage des étiquettes ou leur sémantique. Par exemple, si vous utilisez la même étiquette dans différentes fenêtres, cela aidera si le même sens est utilisé dans les deux cas. De même n'utilisez pas d'étiquettes qui s'épèlent différemment mais se prononcent de la même manière, par ex. « dans » et « dent » ; cela pourrait être source de confusion pour les utilisateurs faisant usage de lecteurs d'écran.
  • N'utilisez pas la même étiquette plus d'une fois dans une même fenêtre. Des outils comme les loupes ou les lecteurs d'écran ne permettant pas toujours d'informer l'utilisateur du contexte environnant, vous ne faciliteriez pas la tâche de ceux qui en font usage.
  • Ne codez pas de manière permanente les styles et tailles des polices de caractères. L'utilisateur doit être capable d'adapter toutes les tailles et tous les styles.
  • N'utilisez pas plus de deux ou trois polices de style et tailles différentes dans l'application ; choisissez-les visuellement différentes plutôt que d'aspect similaire dans une même fenêtre. Une profusion de tailles et de styles de police donne l'impression d'une interface encombrée et non-professionnelle ; elle est plus difficile à lire. En général, utilisez toujours des polices du thème actuel et indiquez des tailles relatives plutôt absolues.
  • N'utilisez pas de toiles de fond graphiques ou de « filigranes » derrière du texte, autres que ceux définis par le thème choisi par l'utilisateur. Le fond influence le contraste entre texte et arrière-plan. Il peut en résulter des difficultés pour les utilisateurs qui ont des problèmes de vision et qui, par conséquent, habituellement choisissent toujours des thèmes avec des toiles de fond unies.

VIII.III.II. Usage des majuscules

Deux styles de mise en majuscule sont utilisés dans les éléments d'interface utilisateur de GNOME :

Usage des majuscules pour les titres

(En anglais) Mettre des majuscules à tous les mots de l'élément sauf pour :

  • les articles : a (un, une), an (un, une), the (le, la, les).
  • les conjonctions : and (et), but (mais), for (pour), not (ne pas), so (ainsi), yet (encore)...
  • les prépositions de trois lettres ou moins : at (à), for (pour), by (par), in (dans), to (vers)...

Usage des majuscules pour les phrases

Mettre en majuscule la première lettre du premier mot et de n'importe quels mots qui possède normalement une majuscule comme les noms d'application.

Le tableau suivant indique le style de mise en majuscule à utiliser pour chaque type d'élément de l'interface utilisateur.

Tableau VIII.3 Règle de style pour la mise en majuscule des éléments d'interface utilisateur
Élément Style
Étiquettes de case à cocher Phrase
Étiquettes de bouton de commande En-tête
Étiquettes d'en-tête de colonne En-tête
Étiquettes d'objet d'arrière-plan du bureau En-tête
Messages de boîte de dialogue Phrase
Étiquettes de zone de liste déroulante modifiable Phrase
Étiquettes de boîte de liste déroulante Phrase
Étiquettes de champ Phrase
Noms de fichier Phrase
Textes de remplacement de graphique : par exemple, texte « Alt » sur les pages Web Phrase
Étiquettes de cadre ou de boîte de groupement En-tête
Éléments dans les zones de liste déroulante modifiable, les boîtes de liste déroulante et les boîtes de liste Phrase
Étiquettes de boîte de liste Phrase
Éléments de menu En-tête
Éléments de menu dans les applications En-tête
Intitulés de menus des applications En-tête
Étiquettes de bouton radio Phrase
Étiquettes de glissière Phrase
Étiquettes de zone de sélection numérique Phrase
Titres de section d'onglet En-tête
Étiquettes de boîte de texte Phrase
Étiquettes de barre de titre En-tête
Étiquettes de bouton de barre d'outils En-tête
Infobulles Phrase
Titres de page Web et éléments de navigation En-tête
Directives pour la mise en majuscule dans d'autres langues

Les langues autres que l'anglais peuvent utiliser des règles différentes pour l'usage des majuscules. Par exemple, le suédois n'a pas le concept d'usage de majuscules dans les titres. Contactez le Projet traduction de GNOME si vous avez un doute sur la manière de mettre en majuscules dans une langue donnée.