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

<?xml version="1.0" encoding="utf-8"?>
<chapter id="icons" lang="sl">
  <title>Icons</title>
  <para>Icons are a graphical metaphor presenting a visual image that the user associates with a particular object, state or operation. When a user sees a good icon they are immediately reminded of the item it represents, whether that be an application in the panel menu or the "right aligned" state in a word processor toolbar.</para>
  <para>
    <itemizedlist>
      <listitem><para>Icons can assist the user in rapidly scanning a large number of objects to select the desired item. Particularly after a user is accustomed to an icon's appearance, they can identify it more rapidly than a text label.</para></listitem>
      <listitem><para>Icons can augment text by providing visual suggestions to accompany the descriptive text. Some things are easier to communicate with a picture, even a very small one.</para></listitem>
      <listitem><para>Icons can compactly represent a large number of objects when there is insufficient space to display textual descriptions (such as in a toolbar).</para></listitem>
    </itemizedlist>
  </para>

  <sect1 id="icons-style">
    <title>Style</title>
    
    <para>GNOME uses a soft, three-dimensional look. This style is achieved by using antialiasing, shading and highlighting techniques. The <ulink url="http://developer.ximian.com/articles/tutorials/icons/"><citetitle>Gnome Icons</citetitle></ulink> tutorial details how one of GNOME's leading artists creates some of these effects.</para>
    <para>Components of an icon style can be broken down into several categories such as perspective, dimentionality, lighting effects and palette. These components play an important part in giving a group of icons a collectively distinctive look. For instance, the Java Look and Feel is recognizable by its use of a primary eight-color palette, interior highlighting and diagonal gradients. The Macintosh Aqua style is recognizable by its use of a cool palette based on blue, lighting effects mimicking reflectivity and antialiasing. The GNOME style exhibits a subdued thirty-two color palette, soft drop shadows and a mix between cartoonish and photorealistic graphics.</para>
    <table frame="topbot" pgwide="1">
      <title>A globe in different icon styles</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>Table perspective</title>
	<para>Presents objects as if they were sitting on a table or desk in front of the user.</para>
      </formalpara>
      <figure>
	<title>Illustration of the table perspective</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>Shelf perspective</title>
	<para>Presents objects as if they were propped up on a shelf at eye level. Make it look like a police line-up.</para>
      </formalpara>
      <figure>
	<title>Illustration of the shelf perspective</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>Lighting</title>
      <remark>FIXME: need to flesh out a little</remark>
      <formalpara>
	<title>Upper left</title>
	<para>Design as if there is lighting coming from the upper left corner, with a soft drop-shadow cast within the icon's 48x48 (original design size) borders (120 degrees, 4 pixel distance, 4 pixel blur).</para>
      </formalpara>
      <formalpara>
	<title>Overhead</title>
	<para>Design as if there is a light source placed above the "camera", casting a shadow down. <!-- FIXME: need to make this more detailed --> </para>
      </formalpara>
    </sect2>

    <sect2 id="icon_style_palette">
      <title>Palette</title>
      <remark>FIXME: need to flesh out a little?</remark>
      <para>Icons should use colors based on the basic thirty-two color palette, darkening or lightening the colours to achieve the desired look. See <xref linkend="Palette"/></para>
    </sect2>

  </sect1>

  <sect1 id="icons-types">
    <title>Kinds of Icons</title>
    <table frame="all" pgwide="1" id="icon_specifications">
      <title>Specifications for different kinds of icons used within GNOME</title>
      <tgroup cols="4" colsep="1" rowsep="1" align="center">
	<thead>
	  <row>
	    <entry>Icon Type</entry>
	    <entry>Sizes (pixels)</entry>
	    <entry>Perspective</entry>
	    <entry>Light Source</entry>
	    <entry>Examples</entry>
	  </row>
	</thead>
	<tbody>
	  <row>
	    <entry>Object / Document Icons</entry>
	    <entry>24x24, 48x48*, 96x96</entry>
	    <entry>Table</entry>
	    <entry>Upper Left</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>Application Icons</entry>
	    <entry>24x24, 48x48*</entry>
	    <entry>Table</entry>
	    <entry>Upper Left</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>Toolbar Icons</entry>
	    <entry>24x24*, 48x48</entry>
	    <entry>Shelf</entry>
	    <entry>Overhead</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>Menu Icons</entry>
	    <entry>16x16</entry>
	    <entry>Shelf</entry>
	    <entry>Overhead</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>(* denotes the primary size for this kind of icon)</para>

    <sect2 id="document_icons">
      <title>Document Icons</title>
      <para>If possible, document icons should convey the type of the file using a physical object. For example a good icon for MPEG video would be a movie reel. Failing the existence of an appropriate object, when a document type corresponds to a specific application, another option is to use a piece of paper with the corresponding application's icon overlayed it as the document icon. This may be appropriate for a document type such as an application's settings files.</para>
      <itemizedlist>
	<listitem><para>Do <emphasis>not</emphasis> display a piece of paper behind a document icon unless the document type has a use correspondence with physical paper (or a suitable object was not found and you are using the application icon). For example, the final state of most word processing documents is a piece of paper, so it is appropriate to use a piece of paper in the icon. On the other hand, a movie on the computer has little association with a piece of paper, so a piece of paper behind the movie reel primarily introduces <link linkend="icon_problems_extraneous_information">visual noise</link>. The use of a piece of paper in most or all document types creates an additional problem: it is harder to scan large numbers of icons because they do not possess <link linkend="icon_design_silhouettes">distinct outlines</link>. A useful technique for creating a subtle difference between document types with similar roles (for example, between "JPEG", "PNG", "GIF", etc) is to use different colours. Expert users who need to make this distinction frequently will become accustomed to these differences.</para></listitem>
	<listitem><para>Do <emphasis>not</emphasis> include a file extension in the icon. The document icon's job is not to convey such precise information but to allow for rapid visual distinction between documents. Additionally, this text will not be displayed in the user's preferred font and size. Because many document types are associated with multiple file extensions, a file extension embedded in the icon will also frequently be wrong. In a context where the file extension is actually useful, the application should composite the information onto the icon at runtime (thereby using the correct font and size, as well as getting the extension right).</para></listitem>
	<listitem><para>Do <emphasis>not</emphasis> customize document icons to a particular Nautilus theme. Document icons are likely to be used in conjunction with a variety of different icon themes, and should work well with all of them.</para></listitem>
      </itemizedlist>
    </sect2>

    <sect2 id="application_icons">
      <title>Application Icons</title>
      <!-- FIXME: we could give a lot more useful guidance here -->
      <para>Application's that handle documents should reflect the kind of document they handle in the icon. If an application's predominant purpose is to edit a particular kind of document, it should use this document's icon as its icon.</para>
    </sect2>

    <sect2 id="toolbar_icons">
      <title>Toolbar Icons</title>
      <para>The idea of a toolbar as a shelf filled with tools should be reflected in toolbar icons. Toolbar icons should have the perspective of being viewed head on, as if they were actually sitting on a shelf at eye-level. Some design guides refer to this perspective as "flush".</para>
      <itemizedlist>
	<listitem><para>Ensure that toolbar icons which will be used together are easy to visually distinguish. Try to <link linkend="icon_design_silhouettes">make the icons' silhouettes distinct</link> from one another.</para></listitem>
	<listitem><para>While most user's will view toolbar icons at 24x24 pixels, it is important to include a "large print" set of icons at 48x48 pixels for accesibility reasons.</para></listitem>
	<listitem><para>Often, you will not have to design any toolbar icons yourself as GTK provides a wide variety of stock icons. You should use these whenever representing one of their intended items. This establishes consistent language across applications, and makes it easier for users to search for items on the toolbar. Do not use stock toolbar icons for anything other than their intended purpose, however, as this will make your application inconsistent with others, and could easily confuse your users.</para>
	<para>To browse the available stock icons, install the development packages for GTK version 2.x and run <command>gtk-demo</command>. Double click on <guimenuitem>Stock Item and Icon Browser</guimenuitem> to activate the stock icon browser. Note that icons vary in available resolution, so the images presented in the icon browser should not be taken as indicative of the maximum quality of an image. To view the images in PNG format, look in the GTK 2 source code under <filename class="directory">gtk/stock-icons</filename>.</para></listitem>
      </itemizedlist>
    </sect2>

    <sect2 id="menu_icons">
      <title>Menu Icons</title>
      <para>Principles of toolbar icon design should be followed with menu icons, just at a smaller size. Where a corresponding toolbar icon exists, a menu icon should mirror its design.</para>
    </sect2>
  </sect1>

  <sect1 id="icons-design">
    <title>Designing Effective Icons</title>
    <para>
      <tip><title>Rule of Thumb for Icon Metaphors</title><para>"If you have to think about an icon to 'get it', the metaphor is too complex"</para></tip>
    </para>
	
    <itemizedlist>
      <listitem>
	<formalpara>
	  <title>Design Functionally Suggestive Icons</title>
	  <para>Icons should be suggestive of the functionality with which they are associated. The best icon will suggest to the user the primary purpose of the program or operation without having to read accompanying text. Users recognize functionally suggestive icons more rapidly than other forms because they directly associate with a physical object or action.</para>
	</formalpara>
	<figure>
	  <title>A functionally suggestive icon for a word processor</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>A functionally suggestive icon for underline</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>Make Icon Silhouettes Distinct</title>
	  <para>It is important to make it easy to visually distinguish icons that will be used together, for example toolbar icons and document icons. The human visual system is excellent at making rapid distinctions between items based on shape, thus a good way to help your users sort through a large number of icons is to use different shapes. You can see the shape of an icon most clearly by turning it into a silhouette: blacken all areas of the icon which are not transparent.</para>
	</formalpara>
	<example>
	  <title>Distinct silhouettes from the GNOME icon theme</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>Suggested Design Process For Toolbar and Menu Icons</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>Draw the basic outline as close to 48x48 pixels as possible:</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>Fill in with black and white to create detail. Do not add gratuities such as drop shadows or anti-aliasing:</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>Use the finished image as the large print high contrast icon:</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 will automatically scale it down to create the 24x24 high contrast icon:</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>Or you may hand-create a 24x24 version, which will be superior in contrast and sharpness:</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>Add color and anti-aliasing to the large print high contrast icon:</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>Add gradients for a smooth, realistic effect:</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>Add a drop shadow (120 degree global angle, 4 pixel distance, 4 pixel blur, 40% opacity), and use the finished image as the large print regular contrast icon:</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>Now you should hand-create a version of this icon at 24x24. Do <emphasis>not</emphasis> simply scale the larger icon, as this icon will be seen by the majority of users and the result of scaling would be less distinct:</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>Create a layer with the large print regular contrast icon's same outline and size then overlay that on the color icon. Give the overlay layer 40% opacity, and use the finished image as the large print low contrast icon:</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 will automatically scale it down to create the 24x24 low contrast icon:</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>Or you may hand-create a 24x24 version, which will be superior in contrast and sharpness:</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>Problems to Avoid</title>
      <itemizedlist>
	<listitem>
	  <formalpara>
	    <title>Avoid name suggestive icons</title>
	    <para>Some icons, such as the original Nautilus file manager icon, do not suggest the program's purpose, but instead suggest the program's name. This is less desirable than a functionally suggestive icon, because an extra layer of abstraction is added (rather than associating file management with an icon representing files, they have to associate file management with nautilus with an image of a nautilus shell). Additionally it makes it difficult for new users who may not know what "Nautilus" is, and hence will not recognize a shell icon as the file manager.</para>
	  </formalpara>
	  <figure>
	    <title>The original, name suggestive icon for 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>Do <emphasis>not</emphasis> include meaningful text in icons</title>
	    <para>Icons that contain the text of the program name in the icon. They effectively contain no metaphor or picture for the user to identify with, and are probably harder to read than the accompanying caption. Since icons draw the eyes, an icon that is harder to identify than text is potentially worse than no icon at all. Hence "text icons" should not be used. Moreover, text should be avoided in icons because it makes the icons difficult to translate. If there is text in icons it should not form words in your native language, a good metric for ensuring that the particular text is not lending to the meaning of the icon.</para>
	  </formalpara>
	  <figure>
	    <title>Text in the original GEdit icon</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>Do <emphasis>not</emphasis> rely on information your users will not have</title>
	    <para>Random icons appear to have no association with the application (except perhaps some odd connection in the mind of the developer). These icons should <emphasis>never</emphasis> be used and will likely serve to confuse the user more than help them. The icon's purpose should not be to "look pretty"; this is merely a very desirable side effect.</para>
			</formalpara>
	    <para>The SodiPodi project logo is a squirrel, which is used as the application icon. However, because the logo has no obvious connection <emphasis>to a user</emphasis>, it is a poor icon. Make sure that you are not relying on information that users won't necessarily possess.</para>
	  <figure>
	    <title>A seemingly random icon for 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>Do <emphasis>not</emphasis> include extraneous information</title>
	    <para>Remember that icons will often be viewed in a smaller form. Too much information may render the icon unintelligible when it is shrunk in size (e.g. to be placed on a panel, or in the tasklist). Too much information also makes it easier for users confuse the purpose of the application. For example, in user testing many users thought an older version of the Evolution icon (below) would launch a word processor. They were misled by the pencil and the paper, which could be seen as extraneous information: it is implicit that the mail program will allow you to write messages as well as receive them. A better icon might have been a simple envelope. Foremost in the icon designer's mind should be a consideration of the minimal visual elements necessary to express the purpose of the program.</para>
	  </formalpara>
	  <figure>
	    <title>Extraneous information - the Evolution icon</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>
	    This Gnumeric icon (below) is a great icon except for the introduction of extra visual noise. The extra sheet of paper with the 'g' on it behind the spreadsheet and chart adds no significant value to the icon and provides extra visual distraction. In this case the contribution of the extraneous element to the appearance of the icon is negative. Simple, well-balanced icons look more attractive than cluttered icons. An improved icon might contain only the spreadsheet and chart; larger because they can use all of the space in the icon, and hence more visually distinct.
	  </para>
	  <figure>
	    <title>Extraneous information - the old Gnumeric icon</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>Do <emphasis>not</emphasis> include body parts in the icon</title>
	    <para> Because GNOME aims to be an international desktop, it needs to avoid imagery that is potentially offensive or crass to other cultures. A prime source of offensive imagery is various body parts in a number of different configurations. Aside from offensive gestures with the hands, arms or fingers; body parts that are considered "clean" in one culture (such as eyes), will be considered tasteless or gross to another (such as a nose). Based on a survey of icons in GNOME, body parts frequently appear in the least communicative icons (often "pointing" at some element in the icon); they are being used as an ineffective crutch for poor metaphor. In these situations body parts should <emphasis>not</emphasis> be used. Even in situations where the metaphor is appropriate (for example an eye representing the sawfish appearance capplet) it is better to avoid using a body part. Often body parts have been used in GNOME to suggest a human "choosing" or "using" something. This is normally an unnecessary point for the icon designer to make. People naturally attempt to understand objects in reference to themselves (show someone a bat and they will think of hitting something with the bat, show someone a tool and they will think of using it, etc). For example, the font selector shows a finger pointing to an "F" suggesting the user choosing between a series of fonts. A better icon would be the text "Aa" presented in an ornate font (calling attention to the font rather than the text). The user doesn't need to be told that they are "choosing" the font, they can infer that easily.</para>
	  </formalpara>
	  <figure>
	    <title>Using body parts - the font selector icon</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>A better icon for the Font Selector</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>Do <emphasis>not</emphasis> base icons off word puns</title>
	      <para>This should be avoided for a couple reasons, the most obvious of which is that puns do not translate well. For example, representing the "system log monitor" as a log will likely be uncommunicative in languages other than English. Additionally, most users do not comprehend the word play until it is too late for the icon to assist them. Even after being familiar with the "system log monitor" being represented as a log, users do not form the association fast enough for the icon to assist through in scanning through menu entries. A popular instance of this problem was the proliferation of icons representing the "World Wide Web" as a spider web in the mid 1990s. Part of the value of icons is that they bypass linguistic comprehension and hence are complementary to captions, allowing users to utilize more areas of the mind than linguistic recognition (already used in scanning for captions) when they hunt for items.</para>
	  </formalpara>
	  <figure>
	    <title>Word play - System Log Monitor icon</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>Do <emphasis>not</emphasis> employ violent imagery</title>
	    <para>Just as words like "kill" and "slay" are inappropriate in interfaces, violent or destructive icons should be avoided. The "shut down" icon uses the image of an explosive detonation switch, presumably trying to convey the idea of ending something abruptly. However, this icon is likely to intimidate some users of the computer who will not want to click on the icon for fear of breaking something.</para>
	  </formalpara>
	  <figure>
	    <title>Destructive-looking Shutdown icon</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>Designing Accessible Icons</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>Low Contrast Icons</title>
	<para>Low contrast icon themes were deprecated in GNOME 2.22. It is no longer necessary to deliver low contrast icon equivalents. </para></tip>
       <sect2 id="icons-design-highcontrast">
	<title>High Contrast Icons</title>
	<para>
		High contrast icons are greatly simplified versions of an application's existing regular icons. They are drawn with two colors, black and white, and thicker borders. This style allows high contrast icons to be distinguishable when viewed by a user with a visual impairment. Below is an approximation of what well-designed high contrast icons look like when viewed by someone with a visual impairment.</para>
    <table frame="topbot" pgwide="1">
	    <title>Simulation of low vision user viewing high contrast icons</title>
      
      <tgroup cols="3" colsep="0" rowsep="0" align="center">
	<thead>
	  <row valign="top">
	    <entry>Description</entry>
	    <entry>High Contrast Icon</entry>
	    <entry>Simulated Appearance</entry>
	  </row>
	</thead>
	<tbody>
	  <row valign="top">
		<entry>Book</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>Copy</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>
		If a regular icon uses a simple, straightforward metaphor the corresponding high contrast icon can often use the same metaphor. In many cases the same metaphor will need to be drawn differently to create a simplified high contrast icon.
	</para>
	 <figure>
		 <title>Simplified representation of metaphors for high contrast icons</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>High contrast icons are created in a vector drawing program. Black and white shapes are layered to create a simplified icon. The process feels like layering black and white pieces of construction paper, as if you were assembling a collage.</para>
	 <figure>
		<title>Layered technique for high contrast icons</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>Reuse existing shapes</title>
		<para>Often shapes from existing high contrast icons can be resized and reused to more quickly build up a new icon.</para></tip>

	<tip><title>Don't forget the border!</title>
		<para>It is useful to design high contrast icons over a temporary background color so you don't forget to draw the external white border.</para></tip>
     </sect2>
     <sect2 id="icons-design-lowcontrast">
	     <title>Low Contrast Icons</title>

		<tip><title>Low Contrast Icons</title>
		<para>Low contrast icon themes were deprecated in GNOME 2.22. It is no longer necessary to deliver low contrast icon equivalents. </para></tip>
	     <para>
		     The goal of low contrast themes is to eliminate, as much as possible, light values (e.g. a large 'V' value in HSV). To achieve this, the colors in low contrast icons are compressed toward the middle value range, i.e. dark colors are lightened and light colors are darkened.
	     </para>
	     <para>
		     Low contrast icons are generated from the existing regular icons by adjusting the levels in GIMP. The Input Levels are set to 100, 1.25, 200 and the Output Levels are set to 100, 160, as shown in the Levels dialog below. Large numbers of regular icons can be quickly converted to low contrast by using GIMP's scripting facilities.</para>
	      <figure>
	        <title>Levels dialog in GIMP showing correct levels for generating low contrast icons</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:
-->