# Icônes

Les icônes sont des métaphores graphiques présentant une image visuelle que l'utilisateur associe à un objet, un état ou une opération en particulier. Lorsque l'utilisateur voit une bonne icône, il se souvient immédiatement de l'élément qu'elle représente, que cela soit une application dans le menu du tableau de bord ou le style « alignement à droite » dans la barre d'outils d'un traitement de texte.

- Les icônes peuvent aider l'utilisateur à parcourir rapidement un grand nombre d'objets pour choisir l'élément recherché. Plus particulièrement, une fois l'utilisateur accoutumé à l'apparence d'une icône, il l'identifie plus rapidement qu'un texte.

- Les icônes peuvent renforcer le texte en fournissant des suggestions visuelles d'accompagnement. Certaines choses sont plus faciles à faire passer avec un dessin, même tout petit.

- Les icônes peuvent représenter un grand nombre d'objets lorsqu'il n'y a pas suffisamment de place pour afficher des descriptions textuelles (comme dans une barre d'outils).

## Style

GNOME utilise un look tridimensionnel doux. Ce style est obtenu en utilisant des techniques d'anticrénelage, d'ombrage et de mise en valeur. Le tutoriel Icônes GNOME décrit comment l'un des artistes principal de GNOME crée certains de ces effets.

Les composants d'un style d'icône peuvent être divisés en plusieurs catégories telles qu'effet de perspective, de dimension dans l'espace, d'éclairage et palette. Ces composants jouent un rôle important pour donner à un groupe d'icônes ressemblance et distinction. Par exemple, l'apparence Java est reconnaissable par l'emploi d'une palette de huit couleurs principales, un éclairage interne et des gradients diagonaux. Le style Macintosh Aqua est reconnaissable par son emploi d'une palette fraîche à base de bleus, d'effets d'éclairages mimant des reflets et de l'anticrénelage. Le style GNOME présente une palette maîtrisée de trente-deux couleurs, des ombres projetés douces et un mélange entre le graphisme de bande-dessinée et le réalisme de la photo.

Un globe dans les différents styles d'icône

Java Metal | MacOS/X Aqua | GNOME
--- | --- | ---
Java globe | Aqua globe | GNOME globe

### Perspective

Perspective objets sur table

Présentez les objets comme s'ils étaient posés sur une table ou un bureau devant l'utilisateur.

Illustration d'une perspective objet sur table

illustration of the table perspective

Perspective à plat

Présentez les objets comme s'ils étaient exposés sur une étagère à niveau d'œil. Donnez l'impression d'une parade d'identification par la police.

Illustration de la perspective à plat

illustration of the shelf perspective

### Éclairage

En haut à gauche

Dessinez comme s'il y avait un éclairage provenant du coin supérieur gauche avec projection d'une douce ombre portée à l'intérieur des bordures 48x48 (taille de conception d'origine) de l'icône (120 degrés, distance de 4 pixels, 4 pixels d'estompage).

De face

Dessinez comme s'il y avait une source de lumière placée au dessus de l'objet posé à plat, projetant une ombre vers le bas.

### Palette

Les icônes doivent utiliser des couleurs fondées sur la palette des trente-deux couleurs de base, en assombrissant ou éclaircissant les couleurs pour obtenir l'aspect souhaité. Consultez la

## Types d'icônes

Définition des différents types d'icônes utilisés par GNOME

Type d'icône | Tailles (pixels) | Perspective | Source d'éclairage | Exemples
--- | --- | --- | --- | ---
Icônes d'objet/de document | 24x24, 48x48*, 96x96 | Table | En haut à gauche | variety of object icons
Icônes d'application | 24x24, 48x48* | Table | En haut à gauche | variety of application icons
Icônes de barre d'outils | 24x24*, 48x48 | À plat | De face | variety of toolbar icons
Icônes de menu | 16x16 | À plat | De face | variety of menu icons

(* indique la taille principale de ce type d'icône)

### Icônes de document

Si possible, les icônes de document doivent traduire le type de fichier en utilisant un objet physique. Par exemple, une bonne icône pour les vidéo MPEG figure une pellicule de film. En cas d'inexistence d'un objet approprié, si un type de document correspond à une application donnée, l'autre option est d'utiliser, en tant qu'icône de document, une feuille de papier portant en superposition l'icône même de l'application. Cela peut se révéler approprié pour un type de document tel que les fichiers de paramétrage d'une application.

- N'affichez pas une feuille de papier derrière une icône de document si le type de document n'a pas d'usage en relation avec une feuille de papier physique (ou qu'un objet adéquat n'ayant pas été trouvé, vous utilisez l'icône de l'application). Par exemple, l'état final de la plupart des documents de traitement de texte est une feuille de papier, il est donc approprié d'utiliser une feuille de papier dans l'icône. A contrario, un film sur ordinateur a peu de lien avec une feuille de papier, donc une feuille de papier derrière un rouleau de film introduit essentiellement un bruit visuel. L'utilisation d'une feuille de papier dans la plupart ou tous les types de documents crée un problème supplémentaire : il devient plus difficile de parcourir un grand nombre d'icônes étant donné qu'elles n'ont pas de contour distinctif. Une technique utile pour créer des différences subtiles entre types de document de rôle similaire (par exemple, entre « JPEG », « PNG », « GIF », etc.) est d'utiliser des couleurs différentes. Les utilisateurs experts qui auraient besoin de faire la distinction fréquemment s'habitueront à ces différences.

- N'incorporez pas l'extension du fichier à l'icône. Le rôle de l'icône document n'est pas de fournir d'informations aussi précises mais de permettre une distinction visuelle rapide entre documents. De plus, ce texte ne sera pas affiché à l'aide de la police et à la taille des préférences utilisateur. Étant donné que beaucoup de types de fichier sont associés à de multiples extensions, l'extension de fichier incluse dans l'icône risque également d'être fréquemment fausse. Au cas où l'extension de fichier est réellement utile, l'application doit recomposer l'information sur l'icône au moment de l'exécution (par conséquent, en utilisant la police et taille correcte et en récupérant la bonne extension).

- Ne personnalisez pas les icônes de document pour un thème Nautilus particulier. Les icônes de document seront vraisemblablement utilisées en conjonction avec un grand choix de thèmes d'icônes ; elles doivent pouvoir fonctionner avec tout autre thème.

### Icônes d'application

Une application qui prend en charge des documents doit refléter le type de document qu'elle gère dans son icône. Si le but principal d'une application est d'éditer un type particulier de document, elle doit utiliser cette icône de document comme icône.

### Icônes de barre d'outils

L'idée d'une barre d'outils comparable à une étagère garnie d'outils doit guider la représentation des icônes de la barre d'outils. Les icônes de barre d'outils doivent donner l'impression d'être vues de face comme si elles étaient disposées sur une étagère au niveau d'œil. Certains guides de conception nomment cette perspective un « flush ».

- Assurez-vous que, dans une barre d'outils, les icônes utilisées ensemble sont faciles à distinguer visuellement. Essayez de différencier les silhouettes des icônes les unes des autres.

- Même si la plupart des utilisateurs affichent des icônes de barre d'outils à la taille de 24x24 pixels, il est important d'inclure un jeu d'icônes « grande taille » 48x48 pixels pour des raisons d'accessibilité.

- Souvent, nous n'aurez pas à concevoir vous-même les icônes de barre d'outils car GTK met à disposition une grande variété d'icônes dans son catalogue. Utilisez-les pour représenter l'événement ou l'objet pour lequel elles ont été conçues. Vous établirez ainsi un langage cohérent transversal aux applications et faciliterez aux utilisateurs la recherche d'éléments dans la barre d'outils. N'utilisez pas les icônes de barre d'outils du catalogue pour autre chose que ce pour quoi elles ont été prévues ; l'application ne serait pas cohérente avec les autres et les utilisateurs pourrait se tromper facilement.

  Pour explorer les icônes disponibles du catalogue, installez les paquets de développement pour GTK version 2.x et lancez `gtk-demo`. Double-cliquez sur Navigateur d'icônes et d'éléments du magasin pour activer le navigateur d'icônes. Notez que les icônes changent dans les résolutions disponibles donc les images présentées dans le navigateur d'icône ne doivent être prise que comme une indication de la qualité maximum d'une image. Pour afficher les images au format PNG, regardez dans le code source de GTK 2 dans `gtk/stock-icons`.

### Icônes de menu

Les principes pour le dessin d'icônes de barre d'outils sont identiques à ceux des icônes de menus, mis à part une taille plus petite. S'il y a une icône de barre d'outils correspondante, une icône de menu doit reproduire son tracé.

## Conception d'icônes efficaces

Règle d'usage pour les métaphores d'icônes

« Si vous devez réfléchir en regardant une icône pour la " comprendre " c'est que la métaphore est trop complexe »

- Conception d'icônes fonctionnellement suggestives

  Les icônes doivent suggérer la fonctionnalité à laquelle elles sont associées. La meilleure icône suggèrera à l'utilisateur le but premier du programme ou de l'opération sans avoir à lire le texte d'accompagnement. Les utilisateurs reconnaissent les icônes fonctionnellement suggestives plus rapidement que les autres formes parce qu'elles s'associent directement à un objet physique ou à une action.

  Une icône fonctionnellement suggestive pour un traitement de texte

  A document with a pencil writing on it

  Une icône fonctionnellement suggestive pour le soulignement

  An underlined character

- Fabrication d'icônes de silhouettes différentes

  Il est important de rendre facile la distinction visuelle des icônes qui seront utilisées ensemble, par exemple les icônes de barre d'outils et les icônes de document. L'œil de l'homme est excellent dans la distinction rapide d'éléments à partir de leur forme, donc une bonne manière d'aider vos utilisateurs à faire le tri parmi un grand nombre d'icônes est d'utiliser des formes différentes. Vous pouvez voir la forme d'une icône plus distinctement en la transformant en silhouette : noircissez toutes les zones de l'icône qui ne sont pas transparentes.

  Silhouettes différentes du thème d'icône GNOME

  Silhouettes of various toolbar icons

### Suggestion de méthodes de dessin d'icônes de barre d'outils et de menu

For accessibility reasons, you should create high contrast versions of all icons, in addition to the regular contrast icon. A suggested process for conveniently integrating this into your icon design is as follows:

1. Dessinez le contour de base à une taille la plus proche possible de 48x48 pixels :

2. Remplissez-le avec du blanc et du noir pour créer les détails. N'ajoutez pas de choses gratuites telles que des ombres portées ou l'anticrénelage :

3. Utilisez l'image ainsi obtenue en tant qu'icône de grande taille à fort contraste :

4. GNOME diminuera automatiquement la taille pour créer l'icône à fort contraste 24x24 :

5. ou vous pouvez créer à la main une version 24x24 qui sera meilleure au plan du contraste et de la finesse :

6. Ajoutez la couleur et l'anticrénelage à l'icône de grande taille à fort contraste :

7. Ajoutez des gradients pour un effet réaliste et doux :

8. Ajoutez une ombre portée (angle global de 120 degrés, distance de 4 pixels, flou de 4 pixels, opacité de 40 %) et utilisez l'image obtenue comme icône de grande taille et de contraste normal :

9. Maintenant vous devez créer à la main une version de cette icône à 24x24. Ne faites pas un simple changement d'échelle de la grande icône ; cette icône sera vue par la majorité des utilisateurs et le résultat du changement d'échelle sera moins net :

10. Créez un calque contenant le même contour et la même taille que l'icône de grande taille et de contraste normal puis superposez ceci sur l'icône de couleur. Donnez au calque superposé une opacité de 40 % et utilisez l'image obtenue comme icône de grande taille et faible contraste :

11. GNOME diminuera automatiquement la taille pour créer l'icône de faible contraste 24x24 :

12. ou vous pouvez créer à la main une version 24x24 qui sera meilleure au plan du contraste et de la finesse :

### Problèmes à éviter

- Évitez une icône suggestive par son nom

  Certaines icônes, telle que l'icône initiale du gestionnaire de fichiers Nautilus ne suggèrent pas le but du programme mais plutôt le nom du programme. Une icône fonctionnellement suggestive est préférable car une couche supplémentaire d'abstraction a été superposée (plutôt que de suggérer la gestion de fichiers par une icône représentant des fichiers, les utilisateurs doivent faire une première association entre gestion de fichiers et application Nautilus et une seconde association entre Nautilus et l'image d'un fossile de nautile). De plus, c'est une difficulté supplémentaire pour les nouveaux utilisateurs qui ne savent peut-être pas ce qu'est l'application « Nautilus » ; dans ce cas, ils n'associeront pas gestionnaire de fichiers et icône de coquillage.

  L'icône originale suggestive par son nom pour Nautilus

  A picture of a nautilus shell

- N'incluez pas de texte significatif dans les icônes

  Évitez les icônes qui contiennent le texte du nom du programme. Elles ne contiennent effectivement pas de métaphore ou d'image qui permette à l'utilisateur de l'identifier et sont probablement plus difficiles à lire que la légende qui les accompagne. Puisque les icônes doivent accrocher l'œil, une icône plus difficile à identifier que du texte est potentiellement pire que pas d'icône du tout. C'est pourquoi, les « icônes texte » ne doivent pas être utilisées. De plus, il faut éviter le texte dans les icônes car cela induit des difficultés de traduction. Si néanmoins texte il y a dans les icônes, il ne doit pas être composé de mots de votre langue maternelle ; c'est une bonne façon de s'assurer que le texte indiqué ne confère pas de signification à l'icône.

  Texte dans l'icône initiale de GEdit

  The original GEdit icon, a rectangle containing the word "GEdit".

- Ne présupposez pas que les utilisateurs possèdent telle ou telle information.

  Les icônes aléatoires semblent n'avoir aucun rapport avec l'application (sauf peut-être un étrange lien dans la pensée du développeur). Ces icônes ne doivent jamais être employées ; elles ne servent qu'à embrouiller l'utilisateur au lieu de l'aider. Le but d'une icône ne doit pas être « l'esthétique » ; c'est qu'un effet secondaire hautement souhaitable.

  Le logo du projet SodiPodi utilise un écureuil comme icône de l'application. Ainsi, étant donné que ce logo n'a pour l'utilisateur aucun rapport évident avec l'application, c'est une piètre icône. Assurez-vous que le fonctionnement de l'application ne repose pas sur des informations que les utilisateurs ne possèdent pas forcément.

  Une icône apparemment aléatoire pour SodiPodi

  A squirrel

- N'incluez pas d'informations sans lien avec l'application

  Souvenez-vous que les icônes sont souvent affichées avec une taille plus petite. Trop d'informations peuvent rendre l'icône incompréhensible lorsqu'elle est réduite en taille (par ex. pour être placée sur un panneau ou dans la liste des tâches). Également, trop d'information facilite la confusion de l'utilisateur quant au but de l'application. Par exemple, lors de tests utilisateur, nombreux étaient ceux qui pensaient lancer un traitement de texte en cliquant sur l'ancienne version de l'icône Evolution (ci-dessous). Ils étaient induits en erreur par le crayon et le papier qui pouvaient être perçus comme des informations sans rapport : il est implicite que le programme de courriel vous permettra d'écrire des messages aussi bien que de les recevoir. Une meilleure icône aurait été une simple enveloppe. Avant tout, le concepteur d'icônes ne doit pas oublier la prise en considération des éléments visuels minimaux nécessaires à l'expression du but du programme.

  Information sans rapport - l'icône d'Evolution

  The Evolution icon

  Cette icône Gnumeric (ci-dessous) est une icône formidable, mise à part l'introduction d'un bruit visuel superflu. La feuille de papier en plus, avec le « g » dessus et derrière le classeur et le graphe, n'ajoute aucune valeur significative à l'icône, mais introduit une distraction visuelle supplémentaire. Dans ce cas, la contribution de la partie étrangère à l'apparence de l'icône est négative. Les icônes simples, bien équilibrées semblent plus attirantes que les icônes chargées. Une icône améliorée pourrait contenir seulement la feuille de calcul et le graphique : plus grands, car ils peuvent utiliser tout l'espace disponible de l'icône et par conséquent être visuellement plus distincts.

  Information sans rapport - l'ancienne icône de Gnumeric

  The Gnumeric icon

- N'incorporez pas de parties du corps humain dans l'icône

  GNOME vise à être un bureau international : il doit donc éviter les images qui sont potentiellement injurieuses ou grossières dans d'autres cultures. Une première source d'images injurieuses sont diverses parties du corps humain dans nombre de configurations différentes. Écartons les gestes obscènes avec les mains, le bras ou les doigts ; les parties du corps considérées comme « propres » dans une culture (comme les yeux) sont estimées comme de mauvais goût ou grossières dans une autre culture (comme le nez). En se fondant sur une étude à propos des icônes de GNOME, les parties du corps apparaissent souvent dans les icônes les moins communicantes (souvent elle « pointent » vers un autre élément de l'icône) ; elles sont utilisées en guise de renfort inefficace à de faibles métaphores. Dans ces cas-là, les parties du corps ne doivent pas être utilisées. Même dans des situations où la métaphore est appropriée (par exemple un œil représentant la capplet d'apparence de l'application sawfish), il est préférable d'éviter l'utilisation d'une partie du corps. Souvent les parties du corps ont été utilisées dans GNOME pour suggérer une personne « sélectionnant » ou « utilisant » quelque chose. Ce n'est normalement pas un aspect nécessaire à rendre par le concepteur de l'icône. Les gens voient naturellement les objets par référence à eux-mêmes (montrez une batte à quelqu'un et il pensera le fait de frapper quelque chose avec la batte, montrez un outil et il pensera le fait de l'utiliser, etc.) Par exemple, le sélecteur de polices affiche un doigt pointant un « F » (Fonts) pour suggérer à l'utilisateur de choisir dans une collection de polices de caractères. Le texte « Aa » affiché dans une police décorative (attirant l'attention sur la police plutôt que sur le texte) illustrerait mieux une telle icône. L'utilisateur n'a pas besoin qu'on lui dise qu'il « choisit » une police, il peut le déduire facilement.

  Utilisation de partie du corps - l'icône de sélection de police

  The original Font Selector Icon

  Une meilleure icône pour la sélection de police

  A simple replacement icon showing an ornate "Aa"

- Ne fondez pas la métaphore de l'icône sur un jeu de mots

  Deux raisons de l'éviter : la plus évidente est que les jeux de mot ne se traduisent pas facilement. Par exemple, représenter le « Visionneur de journaux système » par une bûche (journal = « log » = bûche) ne signifiera pas grand chose dans des langues autres que l'anglais. De plus, la plupart des utilisateurs ne saisissent pas le jeu de mots immédiatement ; il est alors trop tard pour que l'icône soit une aide. Même après s'être familiarisé avec le « Visionneur de journaux système » représenté par une bûche, les utilisateurs ne feront pas l'association suffisamment rapidement pour que l'icône les aide à parcourir les entrées de menu. Un exemple populaire de ce problème a été la prolifération des icônes représentant le « World Wide Web » (WWW) par une toile d'araignée dans le milieu des années 90. Une partie de la valeur des icônes réside dans le fait qu'elles contournent la linguistique et par conséquent sont un complément aux légendes ; elles permettent à l'utilisateur d'élargir au cours de la recherche d'éléments l'espace perceptif au delà de la reconnaissance linguistique (déjà occupée par la lecture des légendes).

  Jeu de mots - icône du visionneur de journaux système

  A tree log

- N'employez pas d'image violente

  Tout comme les mots « tuer » ou « pourfendre » ne sont pas de mise dans les interfaces, les icônes violentes ou à connotation destructrice doivent être évitées. L'icône « Éteindre la machine » utilise l'image d'un bouton de détonateur d'explosif, certainement pour essayer de transmettre l'idée d'une fin quelque peu abrupte. Cependant cette icône intimide probablement certains utilisateurs de l'ordinateur qui ne voudront pas cliquer sur l'icône de peur de casser quelque chose.

  Icône d'arrêt du système à connotation destructrice

  An explosive detonation button

## Conception d'icônes en vue de l'accessibilité

The GNOME desktop includes a high contrast theme that make the desktop and the applications running on it accessible to users with a range of visual impairments.To be considered fully accessible, all icons in your application must be replaced by a suitable alternative when this themes is used.

Icônes à faible contraste

Les thèmes d'icônes à faible contraste ont été abandonnés dans GNOME 2.22. Il n'est plus nécessaire de fournir les icônes équivalentes pour le faible contraste.

### Icônes à fort contraste

Les icônes à fort contraste sont des versions énormément simplifiées des icônes habituelles existantes d'une application. Elles sont dessinées avec deux couleurs, noir et blanc et des bordures épaisses. Ce style permet aux icônes à fort contraste d'être perceptibles à la vue d'un utilisateur ayant des déficiences visuelles. Ci-dessous se trouve une simulation de la façon dont sont perçues des icônes bien conçues lorsqu'elles sont regardées par un mal-voyant.

Simulation d'un utilisateur ayant une faible vision regardant des icônes à fort contraste

Description | Icône à fort contraste | Apparence simulée
--- | --- | ---
Livre | Book icon | Blurred Book icon
CD-ROM | CD-ROM icon | Blurred CD-ROM icon
Copier | Copy icon | Blurred Copy icon

Si une icône normale utilise une métaphore simple et évidente, l'icône correspondante à fort contraste peut souvent utiliser la même métaphore. Dans la plupart des cas, la même métaphore devra être dessinée différemment pour créer une icône simplifiée à fort contraste.

Représentation simplifiée de métaphores pour des icônes à fort contraste

Comparison of photorealistic style of regular icons with the simpler, line-art style of high contrast icons

Les icônes à fort contraste sont créées à l'aide d'un programme de dessin vectoriel. Des formes noires et blanches sont superposées pour créer une icône simplifiée. Le procédé ressemble à un empilement de pièces de construction en papier noir et blanc comme si vous assembliez un collage.

Technique de calques pour les icônes à fort contraste

Exploded view of layers used in high contrast floppy disk icon

Réutilisation de formes existantes

Souvent les formes existantes des icônes à fort contraste peuvent être redimensionnées et réutilisées pour reconstruire plus rapidement une nouvelle icône.

N'oubliez pas la bordure !

Il est utile de concevoir les icônes à fort contraste sur un arrière-plan temporaire en couleur afin de ne pas oublier de dessiner la bordure extérieure blanche.

### Icônes à faible contraste

Icônes à faible contraste

Les thèmes d'icônes à faible contraste ont été abandonnés dans GNOME 2.22. Il n'est plus nécessaire de fournir les icônes équivalentes pour le faible contraste.

Le but des thèmes à faible contraste est d'éliminer autant que possible les valeurs claires (par ex. une grande valeur de « V » pour TSV). Pour réaliser cela, les couleurs dans les icônes de faible contraste sont comprimées vers le centre de l'intervalle de valeur, ainsi les couleurs sombres sont éclaircies et les couleurs claires sont assombries.

Les icônes de faible contraste sont générées à partir des icônes classiques existantes en ajustant les niveaux dans GIMP. Les niveaux d'entrée sont positionnés à 100, 1.25, 200 et les niveaux de sortie à 100, 160 comme montré dans la boîte de dialogue Niveaux ci-dessous. Un grand nombre d'icônes classiques peut être rapidement converti en faible contraste en utilisant les facilités de script de GIMP.

Boîte de dialogue des niveaux dans GIMP affichant les réglages corrects pour générer des icônes de faible contraste

Levels dialog in GIMP showing input levels set to 100, 1.25, 200, and output levels set to 100 and 160.