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.

    Figure IX.3 Une icône fonctionnellement suggestive pour un traitement de texte
    Figure IX.4 Une icône fonctionnellement suggestive pour le soulignement
  • 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.

    Exemple IX.1 Silhouettes différentes du thème d'icône GNOME

IX.III.I. Suggestion de méthodes de dessin d'icônes de barre d'outils et de menu

Pour des raisons d'accessibilité, outre l'icône de taille et de contraste normal, vous devez créer des versions à haut et faible contraste et des versions de grande taille pour toutes les icônes. Voici le processus que nous suggérons pour intégrer de manière pratique ces contraintes dans la conception de l'icône :

  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 :

IX.III.II. 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.

    Figure IX.5 L'icône originale suggestive par son nom pour Nautilus
  • 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.

    Figure IX.6 Texte dans l'icône initiale de 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.

    Figure IX.7 Une icône apparemment aléatoire pour SodiPodi
  • 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.

    Figure IX.8 Information sans rapport - l'icône d'Evolution

    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.

    Figure IX.9 Information sans rapport - l'ancienne icône de Gnumeric
  • 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.

    Figure IX.10 Utilisation de partie du corps - l'icône de sélection de police
    Figure IX.11 Une meilleure icône pour la sélection de police
  • 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).

    Figure IX.12 Jeu de mots - icône du visionneur de journaux système
  • 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.

    Figure IX.13 Icône d'arrêt du système à connotation destructrice