gnome-devel-docs 3.8.1-1 / usr / share / help / fr / hig-book / hig-ch-icons.xml

<?xml version="1.0" encoding="utf-8"?>
<chapter id="icons" lang="fr">
  <title>Icônes</title>
  <para>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.</para>
  <para>
    <itemizedlist>
      <listitem><para>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.</para></listitem>
      <listitem><para>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.</para></listitem>
      <listitem><para>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).</para></listitem>
    </itemizedlist>
  </para>

  <sect1 id="icons-style">
    <title>Style</title>
    
    <para>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 <ulink url="http://developer.ximian.com/articles/tutorials/icons/"><citetitle>Icônes GNOME</citetitle></ulink> décrit comment l'un des artistes principal de GNOME crée certains de ces effets.</para>
    <para>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.</para>
    <table frame="topbot" pgwide="1">
      <title>Un globe dans les différents styles d'icône</title>
      
      <tgroup cols="3" colsep="0" rowsep="0" align="center">
	<thead>
	  <row valign="top">
	    <entry>Java Metal</entry>
	    <entry>MacOS/X Aqua</entry>
	    <entry>GNOME</entry>
	  </row>
	</thead>
	<tbody>
	  <row valign="middle">
	    <entry>
	      <mediaobject>
		<imageobject><imagedata fileref="images/icons-style-java.png" format="PNG"/></imageobject>
		<imageobject><imagedata fileref="images/icons-style-java.eps" format="EPS"/></imageobject>
		<textobject><phrase>Java globe</phrase></textobject>
	      </mediaobject>
	    </entry>
	    <entry>
	      <mediaobject>
		<imageobject><imagedata fileref="images/icons-style-aqua.png" format="PNG"/></imageobject>
		<imageobject><imagedata fileref="images/icons-style-aqua.eps" format="EPS"/></imageobject>
		<textobject><phrase>Aqua globe</phrase></textobject>
	      </mediaobject>
	    </entry>
	    <entry>
	      <mediaobject>
		<imageobject><imagedata fileref="images/icons-style-gnome.png" format="PNG"/></imageobject>
		<imageobject><imagedata fileref="images/icons-style-gnome.eps" format="EPS"/></imageobject>
		<textobject><phrase>GNOME globe</phrase></textobject>
	      </mediaobject>
	    </entry>
	  </row>
	</tbody>
      </tgroup>
    </table>

    <sect2 id="icon_style_perspective">
      <title>Perspective</title>
      <remark>FIXME: need to flesh out a little</remark>
      <formalpara>
	<title>Perspective objets sur table</title>
	<para>Présentez les objets comme s'ils étaient posés sur une table ou un bureau devant l'utilisateur.</para>
      </formalpara>
      <figure>
	<title>Illustration d'une perspective objet sur table</title>
	<mediaobject>
	  <imageobject><imagedata fileref="images/icons-perspective-table.png" format="PNG"/></imageobject>
	  <imageobject><imagedata fileref="images/icons-perspective-table.eps" format="EPS"/></imageobject>
	  <textobject><phrase>illustration of the table perspective</phrase></textobject>
	</mediaobject>
      </figure>
      <formalpara>
	<title>Perspective à plat</title>
	<para>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.</para>
      </formalpara>
      <figure>
	<title>Illustration de la perspective à plat</title>
	<mediaobject>
	  <imageobject><imagedata fileref="images/icons-perspective-shelf.png" format="PNG"/></imageobject>
	  <imageobject><imagedata fileref="images/icons-perspective-shelf.eps" format="EPS"/></imageobject>
	  <textobject><phrase>illustration of the shelf perspective</phrase></textobject>
	</mediaobject>
      </figure>
    </sect2>

    <sect2 id="icon_style_lighting">
      <title>Éclairage</title>
      <remark>FIXME: need to flesh out a little</remark>
      <formalpara>
	<title>En haut à gauche</title>
	<para>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).</para>
      </formalpara>
      <formalpara>
	<title>De face</title>
	<para>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.</para>
      </formalpara>
    </sect2>

    <sect2 id="icon_style_palette">
      <title>Palette</title>
      <remark>FIXME: need to flesh out a little?</remark>
      <para>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 <xref linkend="Palette"/></para>
    </sect2>

  </sect1>

  <sect1 id="icons-types">
    <title>Types d'icônes</title>
    <table frame="all" pgwide="1" id="icon_specifications">
      <title>Définition des différents types d'icônes utilisés par GNOME</title>
      <tgroup cols="4" colsep="1" rowsep="1" align="center">
	<thead>
	  <row>
	    <entry>Type d'icône</entry>
	    <entry>Tailles (pixels)</entry>
	    <entry>Perspective</entry>
	    <entry>Source d'éclairage</entry>
	    <entry>Exemples</entry>
	  </row>
	</thead>
	<tbody>
	  <row>
	    <entry>Icônes d'objet/de document</entry>
	    <entry>24x24, 48x48*, 96x96</entry>
	    <entry>Table</entry>
	    <entry>En haut à gauche</entry>
	    <entry>
	      <mediaobject>
		<imageobject><imagedata fileref="images/icons-objects.png" format="PNG"/></imageobject>
		<imageobject><imagedata fileref="images/icons-objects.eps" format="EPS"/></imageobject>
		<textobject><phrase>variety of object icons</phrase></textobject>
	      </mediaobject>
	    </entry>
	  </row>
	  <row>
	    <entry>Icônes d'application</entry>
	    <entry>24x24, 48x48*</entry>
	    <entry>Table</entry>
	    <entry>En haut à gauche</entry>
	    <entry>	
	      <mediaobject>
		<imageobject><imagedata fileref="images/icons-applications.png" format="PNG"/></imageobject>
		<imageobject><imagedata fileref="images/icons-applications.eps" format="EPS"/></imageobject>
		<textobject><phrase>variety of application icons</phrase></textobject>
	      </mediaobject>
	    </entry>
	  </row>
	  <row>
	    <entry>Icônes de barre d'outils</entry>
	    <entry>24x24*, 48x48</entry>
	    <entry>À plat</entry>
	    <entry>De face</entry>
	    <entry>
	      <mediaobject>
		<imageobject><imagedata fileref="images/icons-toolbar.png" format="PNG"/></imageobject>
		<imageobject><imagedata fileref="images/icons-toolbar.eps" format="EPS"/></imageobject>
		<textobject><phrase>variety of toolbar icons</phrase></textobject>
	      </mediaobject>
	    </entry>
	  </row>
	  <row>
	    <entry>Icônes de menu</entry>
	    <entry>16x16</entry>
	    <entry>À plat</entry>
	    <entry>De face</entry>
	    <entry>
	      <mediaobject>
		<imageobject><imagedata fileref="images/icons-menu.png" format="PNG"/></imageobject>
		<imageobject><imagedata fileref="images/icons-menu.eps" format="EPS"/></imageobject>
		<textobject><phrase>variety of menu icons</phrase></textobject>
	      </mediaobject>
	    </entry>
	  </row>
	</tbody>
      </tgroup>
    </table>
    <para>(* indique la taille principale de ce type d'icône)</para>

    <sect2 id="document_icons">
      <title>Icônes de document</title>
      <para>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.</para>
      <itemizedlist>
	<listitem><para>N'affichez <emphasis>pas</emphasis> 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 <link linkend="icon_problems_extraneous_information">bruit visuel</link>. 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 <link linkend="icon_design_silhouettes">contour distinctif</link>. 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.</para></listitem>
	<listitem><para>N'incorporez <emphasis>pas</emphasis> 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).</para></listitem>
	<listitem><para>Ne personnalisez <emphasis>pas</emphasis> 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.</para></listitem>
      </itemizedlist>
    </sect2>

    <sect2 id="application_icons">
      <title>Icônes d'application</title>
      <!-- FIXME: we could give a lot more useful guidance here -->
      <para>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.</para>
    </sect2>

    <sect2 id="toolbar_icons">
      <title>Icônes de barre d'outils</title>
      <para>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 ».</para>
      <itemizedlist>
	<listitem><para>Assurez-vous que, dans une barre d'outils, les icônes utilisées ensemble sont faciles à distinguer visuellement. Essayez de <link linkend="icon_design_silhouettes">différencier les silhouettes des icônes</link> les unes des autres.</para></listitem>
	<listitem><para>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é.</para></listitem>
	<listitem><para>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.</para>
	<para>Pour explorer les icônes disponibles du catalogue, installez les paquets de développement pour GTK version 2.x et lancez <command>gtk-demo</command>. Double-cliquez sur <guimenuitem>Navigateur d'icônes et d'éléments du magasin</guimenuitem> 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 <filename class="directory">gtk/stock-icons</filename>.</para></listitem>
      </itemizedlist>
    </sect2>

    <sect2 id="menu_icons">
      <title>Icônes de menu</title>
      <para>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é.</para>
    </sect2>
  </sect1>

  <sect1 id="icons-design">
    <title>Conception d'icônes efficaces</title>
    <para>
      <tip><title>Règle d'usage pour les métaphores d'icônes</title><para>« Si vous devez réfléchir en regardant une icône pour la " comprendre " c'est que la métaphore est trop complexe »</para></tip>
    </para>
	
    <itemizedlist>
      <listitem>
	<formalpara>
	  <title>Conception d'icônes fonctionnellement suggestives</title>
	  <para>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.</para>
	</formalpara>
	<figure>
	  <title>Une icône fonctionnellement suggestive pour un traitement de texte</title>
	  <mediaobject>
	    <imageobject><imagedata fileref="images/icons-word-processor.png" format="PNG"/></imageobject>
	    <imageobject><imagedata fileref="images/icons-word-processor.eps" format="EPS"/></imageobject>
	    <textobject><phrase>A document with a pencil writing on it</phrase></textobject>
	  </mediaobject>
	</figure>
	<figure>
	  <title>Une icône fonctionnellement suggestive pour le soulignement</title>
	  <mediaobject>
	    <imageobject><imagedata fileref="images/icons-underline-text.png" format="PNG"/></imageobject>
	    <imageobject><imagedata fileref="images/icons-underline-text.eps" format="EPS"/></imageobject>
	    <textobject><phrase>An underlined character</phrase></textobject>
	  </mediaobject>
	</figure>
      </listitem>
      <listitem id="icon_design_silhouettes">
	<formalpara>
	  <title>Fabrication d'icônes de silhouettes différentes</title>
	  <para>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.</para>
	</formalpara>
	<example>
	  <title>Silhouettes différentes du thème d'icône GNOME</title>
	  <mediaobject>
	    <imageobject><imagedata fileref="images/icons-silhouette.png" format="PNG"/></imageobject>
	    <imageobject><imagedata fileref="images/icons-silhouette.eps" format="EPS"/></imageobject>
	    <textobject><phrase>Silhouettes of various toolbar icons</phrase></textobject>
	  </mediaobject>
	</example>
      </listitem>
    </itemizedlist>

    <!-- CB-Ed: Much of this section has good substance, but is communicated poorly.  There seem to be a lot of blanket statements, and the tone is subjective (e.g., text describing figure 12, the Gnumeric icon.  Stick just to the facts, or try to stay closely to objective language, and language that will not be presenting things in a way that can be argued with or questioned. -->
    <!-- Seth: Objective language does not present the entire picture. While its better for laying down hard and fast guidelines, it does not assist designers in understanding the motivation behind various decisions. This document covers the design *philosophy* as well as providing specific guidelines. This is in fact one of my major complaints about the Java guidelines relative to the MacOS guidelines. Java guidelines attempt to maintain a facade of scientific objectivity and in doing so fail to educate designers as well as failing to communicate the real dynamics of good design. Dealing with more subjective issues is particularly important because many of the readers of the GNOME guidelines will not be professional icon artists, or even graphic designers. -->
    

    <!-- FIXME: we need a short section that talks about finding useful metaphors and images for icons -->
    
    <sect2 id="icon_design_process">
      <title>Suggestion de méthodes de dessin d'icônes de barre d'outils et de menu</title>
      <para>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:</para>
      <orderedlist>
	<listitem>
	  <para>Dessinez le contour de base à une taille la plus proche possible de 48x48 pixels :</para>
	  <mediaobject>
	    <imageobject><imagedata fileref="images/icon-design-process-1.png" format="PNG"/></imageobject>
	    <imageobject><imagedata fileref="images/icon-design-process-1.eps" format="EPS"/></imageobject>
	  </mediaobject>
	</listitem>
	<listitem>
	  <para>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 :</para>
	  <mediaobject>
	    <imageobject><imagedata fileref="images/icon-design-process-2.png" format="PNG"/></imageobject>
	    <imageobject><imagedata fileref="images/icon-design-process-2.eps" format="EPS"/></imageobject>
	  </mediaobject>
	</listitem>
	<listitem>
	  <para>Utilisez l'image ainsi obtenue en tant qu'icône de grande taille à fort contraste :</para>
	  <mediaobject>
	    <imageobject><imagedata fileref="images/icon-design-process-3.png" format="PNG"/></imageobject>
	    <imageobject><imagedata fileref="images/icon-design-process-3.eps" format="EPS"/></imageobject>
	  </mediaobject>
	</listitem>
	<listitem>
	  <para>GNOME diminuera automatiquement la taille pour créer l'icône à fort contraste 24x24 :</para>
	  <mediaobject>
	    <imageobject><imagedata fileref="images/icon-design-process-4.png" format="PNG"/></imageobject>
	    <imageobject><imagedata fileref="images/icon-design-process-4.eps" format="EPS"/></imageobject>
	  </mediaobject>
	</listitem>
	<listitem>
	  <para>ou vous pouvez créer à la main une version 24x24 qui sera meilleure au plan du contraste et de la finesse :</para>
	  <mediaobject>
	    <imageobject><imagedata fileref="images/icon-design-process-5.png" format="PNG"/></imageobject>
	    <imageobject><imagedata fileref="images/icon-design-process-5.eps" format="EPS"/></imageobject>
	  </mediaobject>
	</listitem>
	<listitem>
	  <para>Ajoutez la couleur et l'anticrénelage à l'icône de grande taille à fort contraste :</para>
	  <mediaobject>
	    <imageobject><imagedata fileref="images/icon-design-process-6.png" format="PNG"/></imageobject>
	    <imageobject><imagedata fileref="images/icon-design-process-6.eps" format="EPS"/></imageobject>
	  </mediaobject>
	</listitem>
	<listitem>
	  <para>Ajoutez des gradients pour un effet réaliste et doux :</para>
	  <mediaobject>
	    <imageobject><imagedata fileref="images/icon-design-process-7.png" format="PNG"/></imageobject>
	    <imageobject><imagedata fileref="images/icon-design-process-7.eps" format="EPS"/></imageobject>
	  </mediaobject>
	</listitem>
	<listitem>
	  <para>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 :</para>
	  <mediaobject>
	    <imageobject><imagedata fileref="images/icon-design-process-8.png" format="PNG"/></imageobject>
	    <imageobject><imagedata fileref="images/icon-design-process-8.eps" format="EPS"/></imageobject>
	  </mediaobject>
	</listitem>
	<listitem>
	  <para>Maintenant vous devez créer à la main une version de cette icône à 24x24. Ne faites <emphasis>pas</emphasis> 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 :</para>
	  <mediaobject>
	    <imageobject><imagedata fileref="images/icon-design-process-9.png" format="PNG"/></imageobject>
	    <imageobject><imagedata fileref="images/icon-design-process-9.eps" format="EPS"/></imageobject>
	  </mediaobject>
	</listitem>
	<listitem>
	  <para>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 :</para>
	  <mediaobject>
	    <imageobject><imagedata fileref="images/icon-design-process-10.png" format="PNG"/></imageobject>
	    <imageobject><imagedata fileref="images/icon-design-process-10.eps" format="EPS"/></imageobject>
	  </mediaobject>
	</listitem>
	<listitem>
	  <para>GNOME diminuera automatiquement la taille pour créer l'icône de faible contraste 24x24 :</para>
	  <mediaobject>
	    <imageobject><imagedata fileref="images/icon-design-process-11.png" format="PNG"/></imageobject>
	    <imageobject><imagedata fileref="images/icon-design-process-11.eps" format="EPS"/></imageobject>
	  </mediaobject>
	</listitem>
      <listitem>
	  <para>ou vous pouvez créer à la main une version 24x24 qui sera meilleure au plan du contraste et de la finesse :</para>
	  <mediaobject>
	    <imageobject><imagedata fileref="images/icon-design-process-12.png" format="PNG"/></imageobject>
	    <imageobject><imagedata fileref="images/icon-design-process-12.eps" format="EPS"/></imageobject>
	  </mediaobject>
	</listitem>
      </orderedlist>
    </sect2>

    <sect2 id="icon_problems">
      <title>Problèmes à éviter</title>
      <itemizedlist>
	<listitem>
	  <formalpara>
	    <title>Évitez une icône suggestive par son nom</title>
	    <para>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.</para>
	  </formalpara>
	  <figure>
	    <title>L'icône originale suggestive par son nom pour Nautilus</title>
	    <mediaobject>
	      <imageobject><imagedata fileref="images/icons-nautilus.png" format="PNG"/></imageobject>
	      <imageobject><imagedata fileref="images/icons-nautilus.eps" format="EPS"/></imageobject>
	      <textobject><phrase>A picture of a nautilus shell</phrase></textobject>
	    </mediaobject>
	  </figure>
	</listitem>
	<listitem>
	  <formalpara>
	    <title>N'incluez <emphasis>pas</emphasis> de texte significatif dans les icônes</title>
	    <para>É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.</para>
	  </formalpara>
	  <figure>
	    <title>Texte dans l'icône initiale de GEdit</title>
	    <mediaobject>
	      <imageobject><imagedata fileref="images/icons-gedit.png" format="PNG"/></imageobject>
	      <imageobject><imagedata fileref="images/icons-gedit.eps" format="EPS"/></imageobject>
	      <textobject><phrase>The original GEdit icon, a rectangle containing the word "GEdit".</phrase></textobject>
	    </mediaobject>
	  </figure>
	</listitem>
	<listitem>
	  <formalpara>
	    <title>Ne présupposez <emphasis>pas</emphasis> que les utilisateurs possèdent telle ou telle information.</title>
	    <para>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 <emphasis>jamais</emphasis> ê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.</para>
			</formalpara>
	    <para>Le logo du projet SodiPodi utilise un écureuil comme icône de l'application. Ainsi, étant donné que ce logo n'a <emphasis>pour l'utilisateur</emphasis> 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.</para>
	  <figure>
	    <title>Une icône apparemment aléatoire pour SodiPodi</title>
	    <mediaobject>
	      <imageobject><imagedata fileref="images/icons-sodipodi.png" format="PNG"/></imageobject>
	      <imageobject><imagedata fileref="images/icons-sodipodi.eps" format="EPS"/></imageobject>
	      <textobject><phrase>A squirrel</phrase></textobject>
	    </mediaobject>
	  </figure>
	</listitem>
	<listitem id="icon_problems_extraneous_information">
	  <formalpara>
	    <title>N'incluez <emphasis>pas</emphasis> d'informations sans lien avec l'application</title>
	    <para>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.</para>
	  </formalpara>
	  <figure>
	    <title>Information sans rapport - l'icône d'Evolution</title>
	    <mediaobject>
	      <imageobject><imagedata fileref="images/icons-evolution.png" format="PNG"/></imageobject>
	      <imageobject><imagedata fileref="images/icons-evolution.eps" format="EPS"/></imageobject>
	      <textobject><phrase>The Evolution icon</phrase></textobject>
	    </mediaobject>
	  </figure>
	  <para>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.</para>
	  <figure>
	    <title>Information sans rapport - l'ancienne icône de Gnumeric</title>
	    <mediaobject>
	      <imageobject><imagedata fileref="images/icons-gnumeric.png" format="PNG"/></imageobject>
	      <imageobject><imagedata fileref="images/icons-gnumeric.eps" format="EPS"/></imageobject>
	      <textobject><phrase>The Gnumeric icon</phrase></textobject>
	    </mediaobject>
	  </figure>
	</listitem>
	<listitem>
	  <formalpara>
	    <title>N'incorporez <emphasis>pas</emphasis> de parties du corps humain dans l'icône</title>
	    <para>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 <emphasis>pas</emphasis> ê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.</para>
	  </formalpara>
	  <figure>
	    <title>Utilisation de partie du corps - l'icône de sélection de police</title>
	    <mediaobject>
	      <imageobject><imagedata fileref="images/icons-font-selection-poor.png" format="PNG"/></imageobject>
	      <imageobject><imagedata fileref="images/icons-font-selection-poor.eps" format="EPS"/></imageobject>
	      <textobject><phrase>The original Font Selector Icon</phrase></textobject>
	    </mediaobject>
	  </figure>	    
	  <figure>
	    <title>Une meilleure icône pour la sélection de police</title>
	    <mediaobject>
	      <imageobject><imagedata fileref="images/icons-font-selection-good.png" format="PNG"/></imageobject>
	      <imageobject><imagedata fileref="images/icons-font-selection-good.eps" format="EPS"/></imageobject>
	      <textobject><phrase>A simple replacement icon showing an ornate "Aa"</phrase></textobject>
	    </mediaobject>
	  </figure>
	</listitem>
	<listitem>
	  <formalpara>
	    <title>Ne fondez <emphasis>pas</emphasis> la métaphore de l'icône sur un jeu de mots</title>
	      <para>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).</para>
	  </formalpara>
	  <figure>
	    <title>Jeu de mots - icône du visionneur de journaux système</title>
	    <mediaobject>
	      <imageobject><imagedata fileref="images/icons-system-log.png" format="PNG"/></imageobject>
	      <imageobject><imagedata fileref="images/icons-system-log.eps" format="EPS"/></imageobject>
	      <textobject><phrase>A tree log</phrase></textobject>
	    </mediaobject>
	  </figure>
	</listitem>
	<listitem>
	  <formalpara>
	    <title>N'employez <emphasis>pas</emphasis> d'image violente</title>
	    <para>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.</para>
	  </formalpara>
	  <figure>
	    <title>Icône d'arrêt du système à connotation destructrice</title>
	    <mediaobject>
	      <imageobject><imagedata fileref="images/icons-shut-down.png" format="PNG"/></imageobject>
	      <imageobject><imagedata fileref="images/icons-shut-down.eps" format="EPS"/></imageobject>
	      <textobject><phrase>An explosive detonation button</phrase></textobject>
	    </mediaobject>
	  </figure>
	</listitem>
      </itemizedlist>
    </sect2>
    </sect1>

    <sect1 id="icons-design-accessible">
       <title>Conception d'icônes en vue de l'accessibilité</title>
       <para>
	       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.</para>
	<tip><title>Icônes à faible contraste</title>
	<para>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.</para></tip>
       <sect2 id="icons-design-highcontrast">
	<title>Icônes à fort contraste</title>
	<para>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.</para>
    <table frame="topbot" pgwide="1">
	    <title>Simulation d'un utilisateur ayant une faible vision regardant des icônes à fort contraste</title>
      
      <tgroup cols="3" colsep="0" rowsep="0" align="center">
	<thead>
	  <row valign="top">
	    <entry>Description</entry>
	    <entry>Icône à fort contraste</entry>
	    <entry>Apparence simulée</entry>
	  </row>
	</thead>
	<tbody>
	  <row valign="top">
		<entry>Livre</entry>
	    <entry>
	      <mediaobject>
		<imageobject><imagedata fileref="images/icons-hc-book.png" format="PNG"/></imageobject>
		<imageobject><imagedata fileref="images/icons-hc-book.eps" format="EPS"/></imageobject>
		<textobject><phrase>Book icon</phrase></textobject>
	      </mediaobject>
	    </entry>
	    <entry>
	      <mediaobject>
		<imageobject><imagedata fileref="images/icons-hc-book-blur.png" format="PNG"/></imageobject>
		<imageobject><imagedata fileref="images/icons-hc-book-blur.eps" format="EPS"/></imageobject>
		<textobject><phrase>Blurred Book icon</phrase></textobject>
	      </mediaobject>
	    </entry>
	  </row>
	  <row valign="top">
		<entry>CD-ROM</entry>
	    <entry>
	      <mediaobject>
		<imageobject><imagedata fileref="images/icons-hc-cdrom.png" format="PNG"/></imageobject>
		<imageobject><imagedata fileref="images/icons-hc-cdrom.eps" format="EPS"/></imageobject>
		<textobject><phrase>CD-ROM icon</phrase></textobject>
	      </mediaobject>
	    </entry>
	    <entry>
	      <mediaobject>
		<imageobject><imagedata fileref="images/icons-hc-cdrom-blur.png" format="PNG"/></imageobject>
		<imageobject><imagedata fileref="images/icons-hc-cdrom-blur.eps" format="EPS"/></imageobject>
		<textobject><phrase>Blurred CD-ROM icon</phrase></textobject>
	      </mediaobject>
	    </entry>
	  </row>
	  <row valign="top">
		<entry>Copier</entry>
	    <entry>
	      <mediaobject>
		<imageobject><imagedata fileref="images/icons-hc-copy.png" format="PNG"/></imageobject>
		<imageobject><imagedata fileref="images/icons-hc-copy.eps" format="EPS"/></imageobject>
		<textobject><phrase>Copy icon</phrase></textobject>
	      </mediaobject>
	    </entry>
	    <entry>
	      <mediaobject>
		<imageobject><imagedata fileref="images/icons-hc-copy-blur.png" format="PNG"/></imageobject>
		<imageobject><imagedata fileref="images/icons-hc-copy-blur.eps" format="EPS"/></imageobject>
		<textobject><phrase>Blurred Copy icon</phrase></textobject>
	      </mediaobject>
	    </entry>
	  </row>
	</tbody>
      </tgroup>
    </table>

	<para>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.</para>
	 <figure>
		 <title>Représentation simplifiée de métaphores pour des icônes à fort contraste</title>
	         <mediaobject>
			 <imageobject><imagedata fileref="images/icons-hc-metaphors.png" format="PNG"/></imageobject>
			 <imageobject><imagedata fileref="images/icons-hc-metaphors.eps" format="EPS"/></imageobject>
			 <textobject><phrase>Comparison of photorealistic style of regular icons with the simpler, line-art style of high contrast icons</phrase></textobject>
								               </mediaobject>
									             </figure>

	<para>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.</para>
	 <figure>
		<title>Technique de calques pour les icônes à fort contraste</title>
	         <mediaobject>
			 <imageobject><imagedata fileref="images/icons-floppy-dissected.png" format="PNG"/></imageobject>
		             <imageobject><imagedata fileref="images/icons-floppy-dissected.eps" format="EPS"/></imageobject>
			     <textobject><phrase>Exploded view of layers used in high contrast floppy disk icon</phrase></textobject>
								               </mediaobject>
									             </figure>

	<tip><title>Réutilisation de formes existantes</title>
		<para>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.</para></tip>

	<tip><title>N'oubliez pas la bordure !</title>
		<para>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.</para></tip>
     </sect2>
     <sect2 id="icons-design-lowcontrast">
	     <title>Icônes à faible contraste</title>

		<tip><title>Icônes à faible contraste</title>
		<para>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.</para></tip>
	     <para>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.</para>
	     <para>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.</para>
	      <figure>
	        <title>Boîte de dialogue des niveaux dans GIMP affichant les réglages corrects pour générer des icônes de faible contraste</title>
		<mediaobject>
		  <imageobject><imagedata fileref="images/icons-lowcontrast-levels.png" format="PNG"/></imageobject>
                  <imageobject><imagedata fileref="images/icons-lowcontrast-levels.eps" format="EPS"/></imageobject>
		  <textobject><phrase>Levels dialog in GIMP showing input levels set to 100, 1.25, 200, and output levels set to 100 and 160.</phrase></textobject>
		 </mediaobject>
	      </figure>

     </sect2>
  </sect1>
</chapter>
<!-- Keep this comment at the end of the file
Local variables:
mode: xml
sgml-omittag:nil
sgml-shorttag:nil
sgml-namecase-general:nil
sgml-general-insert-case:lower
sgml-minimize-attributes:nil
sgml-always-quote-attributes:t
sgml-indent-step:2
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:("/usr/lib/sgml/catalog")
sgml-local-ecat-files:("ECAT" "~/sgml/ECAT" "/usr/lib/sgml/ECAT" "/usr/local/lib/sgml/ECAT")
End:
-->