# Conception visuelle

La conception visuelle ne consiste pas qu'à rendre votre application séduisante. Une bonne conception visuelle concerne la communication. Une application bien conçue facilite la compréhension de l'information présentée à l'utilisateur et lui affiche clairement le comment d'une interaction avec cette même information. Si vous parvenez à cet objectif, votre application sera jolie pour l'utilisateur, même si elle n'a pas de graphiques sophistiqués ou de logos animés.

## Couleur

La couleur est un bon outil pour communiquer des informations dans une interface utilisateur. Par exemple, elle peut être utilisée pour :

- renforcer l'apparence d'un bureau en améliorant un thème,

- accentuer une alerte dynamique dans une application de gestion de système,

- mettre en valeur un élément dans une longue liste pour faciliter sa lecture,

- ajouter une touche esthétique agréable à une icône.

Cependant, la couleur doit toujours être vue comme un complément utile au design et non pas comme une nécessité. Ne tablez jamais uniquement sur la couleur pour afficher les informations importantes ; gardez à l'esprit que votre application doit toujours être utilisable, même si les couleurs ne peuvent pas être perçues correctement (par exemple, si l'utilisateur a un système 8-bits ou est daltonien).

### Palette

Une palette de 32 couleurs a été développée pour le bureau GNOME. La palette peut être téléchargée sur http://developer.gnome.org/projects/gup/images/ximian-palette. Pour l'utiliser dans The GIMP, enregistrez-la dans votre dossier `gimp_1.2/palettes` et redémarrez The GIMP. Une palette unique utilisée de manière cohérente aide à donner une apparence uniforme au bureau en minimisant les distractions visuelles. Si vous avez besoin d'une couleur plus foncée ou plus claire que les couleurs de cette palette basique (par ex. pour l'anticrénelage) choisissez une couleur qui est la plus proche de la teinte dont vous avez besoin puis assombrissez ou éclaircissez comme vous le souhaitez.

#### La palette de base à 32 couleurs de GNOME

The basic GNOME 32-color palette

#### Valeurs RVB et hexadécimales de la palette de base

Couleur | Description | RVB | Hex | Couleur | Description | RVB | Hex
--- | --- | --- | --- | --- | --- | --- | ---
| 3D basique clair | 234 232 227 | #EAE8E3 |  | 3D basique moyen | 186 181 171 | #BAB5AB
| 3D basique foncé | 128 125 116 | #807D74 |  | 3D basique obscur | 86 82 72 | #565248
| Vert clair | 197 210 200 | #C5D2C8 |  | Vert moyen | 131 166 127 | #83A67F
| Vert foncé | 93 117 85 | #5D7555 |  | Vert obscur | 68 86 50 | #445632
| Rouge clair | 224 182 175 | #E0B6AF |  | Rouge moyen | 193 102 90 | #C1665A
| Rouge foncé | 136 70 49 | #884631 |  | Rouge obscur | 102 56 34 | #663822
| Violet clair | 173 167 200 | #ADA7C8 |  | Violet moyen | 136 127 163 | #887FA3
| Violet foncé | 98 91 129 | #625B81 |  | Violet obscur | 73 64 102 | #494066
| Bleu clair | 157 184 210 | #9DB8D2 |  | Bleu moyen | 117 144 174 | #7590AE
| Bleu foncé | 75 105 131 | #4B6983 |  | Bleu obscur | 49 78 108 | #314E6C
| Chair claire | 239 224 205 | #EFE0CD |  | Chair moyenne | 224 195 158 | #E0C39E
| Chair foncée | 179 145 105 | #B39169 |  | Chair obscure | 130 102 71 | #826647
| Rouge vif | 223 66 30 | #DF421E |  | Rouge vif foncé | 153 0 0 | #990000
| Jaune vif | 238 214 128 | #EED680 |  | Jaune vif foncé | 209 148 12 | #D1940C
| Vert vif | 70 160 70 | #46A046 |  | Vert vif foncé | 38 199 38 | #267726
| Blanc | 255 255 255 | #ffffff |  | Noir | 0 0 0 | #000000

### Teinte, luminosité, contraste

Les utilisateurs ayant des problèmes de vision, tels que les daltoniens ou les mal-voyants, ont besoin d'alternatives aux réglages par défaut. Une bonne interface utilisateur anticipe ces besoins en fournissant des préférences personnalisées et une prise en charge des thèmes favorisant l'accessibilité. Meilleure encore est une application déjà configurée par défaut avec un choix soigneux des couleurs et des contrastes.

Il est estimé que 11 % de la population mondiale a des problèmes de vision des couleurs. Les personnes atteintes ont typiquement des problèmes pour distinguer certaines teintes comme le rouge et le vert (deutéranopie ou protanopie) ou le bleu et le jaune (tritanopie). Par conséquent, il est nécessaire de permettre à l'utilisateur de personnaliser les couleurs dans toutes les parties de votre application qui transmettent des informations importantes. Cela signifie que votre application doit effectivement transmettre les informations en utilisant uniquement les couleurs d'un thème que l'utilisateur choisirait.

Un outil important pour passer en revue les informations sur le daltonisme et vérifier l'éligibilité des images pour les utilisateurs mal-voyants est Vischeck, un outil en ligne qui simule la façon dont une image ou un site Web apparaît pour un utilisateur atteint de deutéranopie, protanopie ou tritanopie.

#### Comment la terre apparaît pour un utilisateur avec une vision normale des couleurs (à gauche), deutéranopie (au milieu) et tritanopie (à droite) (images extraites de http://www.vischeck.com).

Photo of earth as a normally-sighted user would see it | Photo of earth as a user with red-green color-blindness would see it | Photo of earth as a user with blue-yellow color-blindness would see it

D'autres utilisateurs ont plutôt plus de problèmes avec les niveaux de contraste qu'avec la couleur à l'écran. Certains utilisateurs ont besoin d'un fort niveau de contraste entre les couleurs de l'arrière-plan et du premier plan, telles que noir sur blanc, blanc sur noir ou une autre combinaison à fort contraste. D'autres ressentent un inconfort à moins d'utiliser un réglage à faible contraste, tel que texte gris sur un arrière-plan gris clair.

Vous pouvez répondre à ces besoins en vous assurant que votre application prend en charge les thèmes accessibles de GNOME (que l'on peut trouver dans le module gnome-themes dans cvs) ; il inclut des thèmes à fort et faible contraste et des thèmes à grande taille. Cela signifie que vous devez fournir les tailles par défaut et les grandes tailles pour l'ensemble des icônes à contraste fort, faible et normal avec l'application.

#### Conseils

- Utilisez la palette de couleur GNOME. Si vous avez besoin d'une teinte plus foncée ou plus claire partez d'une des couleurs de la palette et assombrissez ou éclaircissez suivant le besoin.

- N'utilisez pas la couleur comme seul moyen de distinguer les éléments d'informations. Toutes les informations doivent également être fournies par au moins une autre méthode telle que la forme, la position ou une description textuelle.

- Assurez-vous que votre application ne dépend pas d'un thème particulier. Testez-la avec différents thèmes, plus particulièrement les thèmes d'accessibilité à fort et faible contraste qui utilisent moins de couleurs, pour vérifier que votre application respecte les réglages. Par exemple, tous les textes doivent apparaître avec couleur de premier plan sur couleur d'arrière-plan spécifiées dans le thème choisi.

- Choisissez les couleurs avec soin. Lorsqu'elles doivent être différentes de manière reconnaissable, choisissez les couleurs claires parmi l'orange, jaune, vert ou bleu-vert, les foncées parmi le bleu, violet, mauve ou rouge car la plupart de gens atteints de daltonisme voient le bleu, violet, mauve et rouge aussi foncé que les couleurs normales.

## Agencement des fenêtres

### Généralités

Le positionnement des composants visuels dans une application est important parce que les relations entre éléments dépendent de leurs positions. C'est ce qui s'appelle « l'agencement » dans la conception d'interface.

Un agencement propre est crucial pour créer un flux visuel régulier d'informations pour l'utilisateur. Cette section décrit le positionnement correct des composants et l'espacement à utiliser dans les applications GNOME. Les principaux composants détaillés sont l'étiquette, l'icône, le bouton radio et la case à cocher, le champ texte, le bouton de commande et le menu déroulant.

### Boîtes de dialogue

Lorsqu'un utilisateur parcourt une boîte de dialogue Préférences complexe, composée de nombreuses étiquettes et leurs cases à cocher associées, de champs de texte et de zones de liste déroulante modifiable, il est facile de voir comment elle peut rapidement être encombrée si l'agencement est pauvre au niveau de la conception visuelle. Pour des informations sur l'agencement des alertes, consultez la .

#### Agencement de fenêtre amélioré

Initial layout with poor alignment and limited use of white space | Improved layout with fewer alignment points, frames removed to relieve clutter, and clearer grouping with use of white space

Dans la , la boîte de dialogue sur la gauche présente des étiquettes qui ne sont pas alignées à gauche. L'œil de l'utilisateur n'a pas de repère visuel correct pour parcourir la boîte de dialogue rapidement.

Comme les étiquettes sont toutes de longueur voisine, elles doivent être alignées à gauche. Maintenant l'utilisateur a une marge gauche ferme pour accrocher l'œil et parcourir plus facilement la liste des éléments verticaux. Si la plupart des étiquettes d'un groupement ont des longueurs différentes, alignez-les plutôt à droite afin que les contrôles ne finissent pas par être trop loin des étiquettes correspondantes.

L'utilisation de cadres avec des bordures visibles pour séparer des groupes dans une fenêtre est déconseillée. Utilisez des espaces et des en-têtes en gras à la place. C'est plus efficace parce qu'il y a moins de lignes inutiles pour distraire l'utilisateur du contenu principal de la fenêtre. Consultez la pour plus de détails.

Essayez de conserver une certaine concordance entre composants en terme de taille et d'alignement. Ceci est particulièrement important dans un groupe de contrôles pour que la capacité de l'utilisateur à rapidement parcourir l'information ne soit pas sacrifiée. Réduisez autant que possible le besoin de l'œil de l'utilisateur de s'éparpiller lorsqu'il parcourt un agencement.

#### Spécifications de l'agencement

Improved layout with fewer alignment points, frames removed to relieve clutter, and clearer grouping with use of white space

#### Conseils

- Laissez une bordure de 12 pixels entre le bord de la fenêtre et les contrôles les plus proches.

- Laissez un espace horizontal de 12 pixels entre un contrôle et son étiquette (l'espace peut être plus grand pour d'autres contrôles du même groupe à cause des différences de longueur entre étiquettes).

- Les étiquettes doivent être courtes et garder un sens sorties du contexte. Sinon les utilisateurs qui utilisent des lecteurs d'écran ou des technologies d'assistance similaires ne seront pas capables de comprendre immédiatement la relation entre un contrôle et ceux qui l'entourent.

- Fournissez des touches d'accès pour tous les contrôles modifiables. Vérifiez que l'utilisation des touches d'accès donne bien le focus aux contrôles associés.

### Espacement et alignement

Donnez un espace suffisant entre les contrôles et les groupes de contrôles. Cet espace vide facilite la recherche de l'information utile pour l'utilisateur.

#### Conseils

- 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. Par exemple, entre les étiquettes de l'icône et les graphiques associés dans une icône, 6 pixels sont suffisants. Entre les étiquettes et les composants associés, laissez 12 pixels horizontaux. Pour l'espacement vertical entre les groupes de composants, 18 pixels sont suffisants. Un espacement général de 12 pixels est recommandé entre le contenu d'une boîte de dialogue et les bords de la fenêtre.

- Brisez les longues listes de choix en groupes plus petits. Pour les listes de moins de huit éléments environ, utilisez des boutons radio ou des cases à cocher. Pour les listes plus longues, utilisez un contrôle liste ou une liste déroulante.

- Essayez de garder les éléments du même type alignés à gauche avec les autres. Par exemple, sur la , les groupes nommés (Général et Actions) sont alignés à gauche et justifiés les uns par rapport aux autres.

- Indentez les membres des groupes de 12 pixels pour marquer la hiérarchie et l'association.

- Minimisez le nombre de points d'alignement dans votre fenêtre. Un point d'alignement est une ligne imaginaire verticale ou horizontale qui traverse la fenêtre et qui touche le bord d'un ou de plusieurs étiquettes ou contrôles de la fenêtre.

- Une justification à droite dans les groupes ou dans la fenêtre globale (comme indiquée par la ligne nommée « justification » dans la ) est plaisante à l'œil, mais non cruciale.

- Arrangez les composants de gauche à droite, de haut en bas. Généralement, le premier élément que l'utilisateur est sensé rencontrer devrait être en haut à gauche et le dernier en bas à droite. Gardez à l'esprit le fait que lorsqu'ils sont localisés pour les langues non occidentales, les interfaces peuvent être inversées pour être lues de la droite vers la gauche.

- L'utilisation des espaces vides ou « blancs » et de l'indentation pour délimiter les groupes est plus propre et préférable à l'usage de séparateurs graphiques tels que des cadres.

- Alignez les contrôles dans votre agencement très précisément. L'œil est très sensible aux objets alignés ou pas. Si rien ne s'aligne avec rien d'autre dans une fenêtre, il sera très difficile pour l'utilisateur de parcourir son contenu et de trouver l'information qu'il souhaite. Deux choses presque alignées, mais pas exactement, sont également gênantes.

- Soyez cohérent. Utilisez le même espacement, alignement et la même taille de composants dans toutes les boîtes de dialogue apparaissant dans une même application. Les boutons Valider et Annuler par exemple doivent tous apparaître exactement à 12 pixels verticaux et horizontaux du coin inférieur droit de chaque boîte de dialogue.

- Assurez-vous que les zones claires et sombres ainsi que les espaces sont distribués de manière uniforme dans la fenêtre. Gardez en tête que chaque contrôle ou groupe de contrôles dans votre fenêtre possède un « poids » visuel qui dépend de sa taille globale, de sa couleur et de la quantité de blancs qu'il contient. Les zones plus sombres, plus grandes sont plus « lourdes » alors que les plus pâles, plus petites sont plus « légères ».

- Ne concevez pas de fenêtres qui sont plus que 50 % plus longues dans un sens par rapport à l'autre. Les gens se sentent plus à l'aise en regardant des fenêtres et des boîtes de dialogue dont les dimensions respectent le nombre d'or (entre 1,6 et 1), un rapport que les artistes et architectes ont utilisé pour créer des peintures et constructions esthétiquement agréables depuis des milliers d'années.

## É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.

### 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.

#### 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 | Large icon with text label centered below
Petites icônes (barre d'outils) | Centré verticalement et 6 pixels à droite des petites icônes | Small icon with text label to the right
É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 | List control with text label horizontally aligned above
Étiquettes de case à cocher et bouton radio | 6 pixels à droite et centré verticalement avec le bouton radio | Radio button with text label to its right
Étiquettes de champ texte | 6 pixels à gauche et centré verticalement avec le contrôle de champ de texte | Textbox with text label to its left
É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. | Buttons with centered text

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é

Drop-down list with label to its left

#### 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.

### Usage des majuscules

Two styles of capitalization are used in GNOME user interface elements:

Header capitalization

  Capitalize all words in the element, with the following exceptions:

  - Articles: a, an, the.

  - Conjunctions: and, but, for, not, so, yet ...

  - Prepositions of three or fewer letters: at, for, by, in, to ...

Sentence capitalization

  Capitalize the first letter of the first word, and any other words normally capitalized in sentences, such as application names.

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

#### 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.

## Polices

N'utilisez que des polices que l'utilisateur a définies dans son thème et des tailles relatives à la taille par défaut du thème. Cela offrira un maximum de lisibilité et d'accessibilité à tous les utilisateurs.

Ne mélangez pas plus de deux ou trois polices et styles (souligné, gras, italique) dans une même fenêtre : cela donne un aspect non professionnel et distrait l'utilisateur de l'information transmise.

Fournissez des alternatives au WYSIWYG (What You See Is What You Get) si possible. Certains utilisateurs peuvent avoir besoin d'imprimer le texte avec des petites polices, mais d'utiliser des grandes polices d'écran pour l'édition, par exemple. Les alternatives possibles comportent, soit l'affichage de tout le texte dans la même police et taille (toutes deux choisies pas l'utilisateur), soit une option « retour à la ligne automatique » qui permet de lire tout le texte d'une fenêtre sans défilement horizontal, soit un affichage en colonne unique (le contenu de la fenêtre est sur une seule colonne bien qu'il soit imprimé sur plusieurs colonnes), soit un affichage texte-seulement pour lequel les graphiques sont remplacés par des substituants ou des descriptions textuelles.