File: icons-design.html

package info (click to toggle)
doc-gnome-hig 2.0-3
  • links: PTS
  • area: main
  • in suites: lenny
  • size: 2,868 kB
  • ctags: 223
  • sloc: makefile: 31
file content (5 lines) | stat: -rw-r--r-- 19,814 bytes parent folder | download | duplicates (2)
1
2
3
4
5
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Designing Effective Icons</title><meta name="generator" content="DocBook XSL Stylesheets V1.65.1"><link rel="home" href="index.html" title="GNOME Human Interface Guidelines 2.0"><link rel="up" href="icons.html" title="Chapter9.Icons"><link rel="previous" href="icons-types.html" title="Kinds of Icons"><link rel="next" href="icons-design-accessible.html" title="Designing Accessible Icons"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">Designing Effective Icons</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="icons-types.html">Prev</a></td><th width="60%" align="center">Chapter9.Icons</th><td width="20%" align="right"><a accesskey="n" href="icons-design-accessible.html">Next</a></td></tr></table><hr></div><div class="sect1" lang="en"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="icons-design"></a>Designing Effective Icons</h2></div></div><div></div></div><p>
      </p><div class="tip" style="margin-left: 0.5in; margin-right: 0.5in;"><table border="0" summary="Tip: Rule of Thumb for Icon Metaphors"><tr><td rowspan="2" align="center" valign="top" width="25"><img alt="[Tip]" src="images/tip.png"></td><th align="left">Rule of Thumb for Icon Metaphors</th></tr><tr><td colspan="2" align="left" valign="top"><p>"If you have to think about an icon to 'get it', the metaphor is too complex"</p></td></tr></table></div><p>
    </p><div class="itemizedlist"><ul type="disc"><li><p><b>Design Functionally Suggestive Icons.</b>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.</p><div class="figure"><a name="id2549895"></a><p class="title"><b>Figure9.3.A functionally suggestive icon for a word processor</b></p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="48"><tr style="height: 48px"><td><img src="images/abiword-icon.png" width="48" alt="A document with a pen writing on it"></td></tr></table></div></div><div class="figure"><a name="id2549936"></a><p class="title"><b>Figure9.4.A functionally suggestive icon for underline</b></p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="48"><tr style="height: 48px"><td><img src="images/underline-icon.png" width="48" alt="An underlined character"></td></tr></table></div></div></li><li><a name="icon_design_silhouettes"></a><p><b>Make Icon Silhouettes Distinct.</b>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.</p><div class="example"><a name="id2550001"></a><p class="title"><b>Example9.1.Distinct silhouettes from the Nautilus Crux theme</b></p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="200"><tr style="height: 29px"><td><img src="images/toolbar-silhouette.png" height="29" alt="Silhouettes of the various toolbar icons"></td></tr></table></div></div></li></ul></div><div class="sect2" lang="en"><div class="titlepage"><div><div><h3 class="title"><a name="icon_design_process"></a>Suggested Design Process For Toolbar and Menu Icons</h3></div></div><div></div></div><p>For accessibility reasons, you should create high and low contrast and large print versions of all icons, in addition to the regular size and contrast icon. A suggested process for conveniently integrating this into your icon design is as follows:</p><div class="orderedlist"><ol type="1"><li><p>Draw the basic outline as close to 48x48 pixels as possible:</p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="48"><tr style="height: 48px"><td><img src="images/icon-design-process-1.png" width="48"></td></tr></table></div></li><li><p>Fill in with black and white to create detail. Do not add gratuities such as drop shadows or anti-aliasing:</p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="200"><tr style="height: 50px"><td><img src="images/icon-design-process-2.png" height="50"></td></tr></table></div></li><li><p>Use the finished image as the large print high contrast icon:</p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="48"><tr style="height: 48px"><td><img src="images/icon-design-process-3.png" width="48"></td></tr></table></div></li><li><p>GNOME will automatically scale it down to create the 24x24 high contrast icon:</p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="24"><tr style="height: 24px"><td><img src="images/icon-design-process-4.png" width="24"></td></tr></table></div></li><li><p>Or you may hand-create a 24x24 version, which will be superior in contrast and sharpness:</p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="24"><tr style="height: 24px"><td><img src="images/icon-design-process-5.png" width="24"></td></tr></table></div></li><li><p>Add color and anti-aliasing to the large print high contrast icon:</p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="300"><tr style="height: 50px"><td><img src="images/icon-design-process-6.png" height="50"></td></tr></table></div></li><li><p>Add gradients for a smooth, realistic effect:</p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="48"><tr style="height: 48px"><td><img src="images/icon-design-process-7.png" width="48"></td></tr></table></div></li><li><p>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:</p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="48"><tr style="height: 48px"><td><img src="images/icon-design-process-8.png" width="48"></td></tr></table></div></li><li><p>Now you should hand-create create a version of this icon at 24x24. Do <span class="emphasis"><em>not</em></span> 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:</p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="24"><tr style="height: 24px"><td><img src="images/icon-design-process-9.png" width="24"></td></tr></table></div></li><li><p>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:</p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="48"><tr style="height: 48px"><td><img src="images/icon-design-process-10.png" width="48"></td></tr></table></div></li><li><p>GNOME will automatically scale it down to create the 24x24 low contrast icon:</p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="24"><tr style="height: 24px"><td><img src="images/icon-design-process-11.png" width="24"></td></tr></table></div></li><li><p>Or you may hand-create a 24x24 version, which will be superior in contrast and sharpness:</p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="24"><tr style="height: 24px"><td><img src="images/icon-design-process-12.png" width="24"></td></tr></table></div></li></ol></div></div><div class="sect2" lang="en"><div class="titlepage"><div><div><h3 class="title"><a name="icon_problems"></a>Problems to Avoid</h3></div></div><div></div></div><div class="itemizedlist"><ul type="disc"><li><p><b>Avoid name suggestive icons.</b>Some icons, such as the Nautilus 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.</p><div class="figure"><a name="id2550525"></a><p class="title"><b>Figure9.5.A name suggestive icon for Nautilus</b></p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="48"><tr style="height: 35px"><td><img src="images/nautilus-icon.png" width="48" alt="A picture of a nautilus shell"></td></tr></table></div></div></li><li><p><b>Do <span class="emphasis"><em>not</em></span> include meaningful text in icons.</b>Icons which 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.</p><div class="figure"><a name="id2550593"></a><p class="title"><b>Figure9.6.Text in the old GEdit icon</b></p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="48"><tr style="height: 48px"><td><img src="images/gedit-icon.png" width="48" alt="The GEdit icon"></td></tr></table></div></div></li><li><p><b>Do <span class="emphasis"><em>not</em></span> rely on information your users will not have.</b>Random icons appear to have no association with the program (except perhaps some odd connection in the mind of the developer). These icons should <span class="emphasis"><em>never</em></span> 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. The sodipodi logo is a squirrel, which they show as their icon. However, because the logo has no obvious connection <span class="emphasis"><em>to a user</em></span>, it is a poor icon. Make sure that you are not relying on information that users won't necessarily posses.</p><div class="figure"><a name="id2550666"></a><p class="title"><b>Figure9.7.A seemingly random icon for SodiPodi</b></p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="48"><tr style="height: 48px"><td><img src="images/sodipodi-icon.png" width="48" alt="A squirrel"></td></tr></table></div></div></li><li><a name="icon_problems_extraneous_information"></a><p><b>Do <span class="emphasis"><em>not</em></span> include extraneous information.</b>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 the Evolution icon 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.</p><div class="figure"><a name="id2550739"></a><p class="title"><b>Figure9.8.Extraneous information - the Evolution icon</b></p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="48"><tr style="height: 48px"><td><img src="images/evolution-icon.png" width="48" alt="The Evolution icon"></td></tr></table></div></div><p>
	    The Gnumeric icon 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.
	  </p><div class="figure"><a name="id2550792"></a><p class="title"><b>Figure9.9.Extraneous information - the old Gnumeric icon</b></p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="48"><tr style="height: 48px"><td><img src="images/gnumeric-icon.png" width="48" alt="The Gnumeric icon"></td></tr></table></div></div></li><li><p><b>Do <span class="emphasis"><em>not</em></span> include body parts in the icon.</b> 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 <span class="emphasis"><em>not</em></span> 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.</p><div class="figure"><a name="id2550879"></a><p class="title"><b>Figure9.10.Using body parts - the font selector icon</b></p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="48"><tr style="height: 48px"><td><img src="images/fontsel-icon.png" width="48" alt="The Font Selector Icon"></td></tr></table></div></div><div class="figure"><a name="id2550920"></a><p class="title"><b>Figure9.11.A better icon for the Font Selector</b></p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="48"><tr style="height: 48px"><td><img src="images/fontsel-suggestion.png" width="48" alt='A simple replacement icon showing an ornate "Aa"'></td></tr></table></div></div></li><li><p><b>Do <span class="emphasis"><em>not</em></span> base icons off word puns.</b>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.</p><div class="figure"><a name="id2550994"></a><p class="title"><b>Figure9.12.Word play - System Log Monitor icon</b></p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="48"><tr style="height: 48px"><td><img src="images/log-icon.png" width="48" alt="A tree log"></td></tr></table></div></div></li><li><p><b>Do <span class="emphasis"><em>not</em></span> employ violent imagery.</b>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.</p><div class="figure"><a name="id2551057"></a><p class="title"><b>Figure9.13.Destructive-looking Shutdown icon</b></p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="48"><tr style="height: 48px"><td><img src="images/shutdown-icon.png" width="48" alt="An explosive detonation button"></td></tr></table></div></div></li></ul></div></div></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="icons-types.html">Prev</a></td><td width="20%" align="center"><a accesskey="u" href="icons.html">Up</a></td><td width="40%" align="right"><a accesskey="n" href="icons-design-accessible.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">Kinds of Icons</td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top">Designing Accessible Icons</td></tr></table></div></body></html>