Table of Contents
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.
Icons can assist the user in rapidly scanning a large number of objects to select the desired item. Particularly after a user is acustomed to an icon's appearance, they can identify it more rapidly than a text label.
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.
Icons can compactly represent a large number of objects when there is insufficient space to display textual descriptions (such as in a toolbar).
GNOME uses a soft, three-dimensional look. This style is achieved by using antialiasing, shading and highlighting techniques. The Gnome Icons tutorial details how one of GNOME's leading artists creates some of these effects.
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.
Table 9.1. A globe in different icon styles
Java Metal | MacOS/X Aqua | GNOME |
---|---|---|
![]() | ![]() | ![]() |
Table perspective. Presents objects as if they were sitting on a table or desk in front of the user.
Figure 9.1. Illustration of the table perspective
Shelf perspective. Presents objects as if they were propped up on a shelf at eye level. Make it look like a police line-up.
Figure 9.2. Illustration of the shelf perspective
Upper left. 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).
Overhead. Design as if there is a light source placed above the "camera", casting a shadow down.
Icons should use colors based on the basic thirty-two color palette, darkening or lightening the colours to achieve the desired look. See the section called “Palette”
Table 9.2. Specifications for different kinds of icons used within GNOME
Icon Type | Sizes (pixels) | Perspective | Light Source | Examples |
---|---|---|---|---|
Object / Document Icons | 24x24, 48x48*, 96x96 | Table | Upper Left | ![]() |
Application Icons | 24x24, 48x48* | Table | Upper Left | ![]() |
Toolbar Icons | 24x24*, 48x48 | Shelf | Overhead | ![]() |
Menu Icons | 16x16 | Shelf | Overhead | ![]() |
(* denotes the primary size for this kind of icon)
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.
Do not 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 visual noise. 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 distinct outlines. 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.
Do not 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).
Do not 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.
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.
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".
Ensure that toolbar icons which will be used together are easy to visually distinguish. Try to make the icons' silhouettes distinct from one another.
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.
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.
To browse the available stock icons, install the development packages for GTK version 2.x and run gtk-demo. Double click on Stock Item and Icon Browser 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 maximuum quality of an image. To view the images in PNG format, look in the GTK 2 source code under gtk/stock-icons.
"If you have to think about an icon to 'get it', the metaphor is too complex"
Design Functionally Suggestive Icons. 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.
Figure 9.3. A functionally suggestive icon for a word processor
Figure 9.4. A functionally suggestive icon for underline
Make Icon Silhouettes Distinct. 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.
Example 9.1. Distinct silhouettes from the Nautilus Crux theme
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:
Draw the basic outline as close to 48x48 pixels as possible:
Fill in with black and white to create detail. Do not add gratuities such as drop shadows or anti-aliasing:
Use the finished image as the large print high contrast icon:
GNOME will automatically scale it down to create the 24x24 high contrast icon:
Or you may hand-create a 24x24 version, which will be superior in contrast and sharpness:
Add color and anti-aliasing to the large print high contrast icon:
Add gradients for a smooth, realistic effect:
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:
Now you should hand-create create a version of this icon at 24x24. Do not 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:
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:
GNOME will automatically scale it down to create the 24x24 low contrast icon:
Or you may hand-create a 24x24 version, which will be superior in contrast and sharpness:
Avoid name suggestive icons. 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.
Figure 9.5. A name suggestive icon for Nautilus
Do not include meaningful text in icons. 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.
Figure 9.6. Text in the old GEdit icon
Do not rely on information your users will not have. Random icons appear to have no association with the program (except perhaps some odd connection in the mind of the developer). These icons should never 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 to a user, it is a poor icon. Make sure that you are not relying on information that users won't necessarily posses.
Figure 9.7. A seemingly random icon for SodiPodi
Do not include extraneous information. Remember that icons will often be viewed in a smaller form. Too much information may render the icon unintelligable 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.
Figure 9.8. Extraneous information - the Evolution icon
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.
Figure 9.9. Extraneous information - the old Gnumeric icon
Do not include body parts in the icon. 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 not 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.
Figure 9.10. Using body parts - the font selector icon
Figure 9.11. A better icon for the Font Selector
Do not base icons off word puns. 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.
Figure 9.12. Word play - System Log Monitor icon
Do not employ violent imagery. 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.
Figure 9.13. Destructive-looking Shutdown icon