Guideline A: User interface

A8: Icons & clip art


Treating icons and clip art as UI

A well-designed picture or graphic symbol (icon) is not only usable in many regions of the world, but also requires less screen real estate and is easy to interpret and remember. As with words, however, icons may not be universally recognized by other cultures; or worse, their meanings are misinterpreted.

To ensure that a particular picture, whether stylized or realistic, is understood correctly and does not offend your users, design carefully and review if it is related to any language or cultural idiosyncrasies. The best icon designs begin with visually rich descriptions. Before developing the final design concepts, consider alternative icons based on different metaphors. However, no amount of good icon design can compensate for a poorly defined concept.

Finally, verify icons in the overall context of the interface. Different platforms may also impose additional requirements to ensure that all the icons on that platform achieve a consistent style and look.

Users need to move quickly and accurately to the desired icon; thus, each icon must be distinctive and easy to differentiate from neighboring icons. Users should not have to rely on minor differences to distinguish the different icons – a particularly important consideration in icons that are dynamic (such as an empty and non-empty mailbox).

To save on design costs and ensure a sense of consistency among their applications, many firms maintain repositories of icons and artwork that have been approved by their usability, legal, and intellectual property departments.

No matter how well designed an icon is, there is always the possibility that it may need to be changed for a particular region. For this reason create icons that can be quickly and easily replaced.


Guideline A8

Icons and clip art are to be treated as UI information and must, therefore, follow the rules for UI (such as isolation, packaging and tracking) and be translatable.

If text can be translated, why not icons? Such translation is simply the selection or creation of an acceptable alternative.

Example: An icon that shows a horizontal hand (with pointing index finger) is used in an icon to indicate an indexing facility.


When the dialog box is translated into an European language, the translator warns that users may interpret that icon as an obscene gesture. The dialog box must be redesigned entirely because the icon is hard coded into the dialog box.


Guideline A8-1

Avoid text in icons.


Textual information includes punctuation marks, digit shapes, and abbreviations, which vary in different parts of the world, and special symbols such as # and Rx, which have no equivalents in some languages.

Even though some words may be universally understood, usually, the entire icon needs to be replaced after translation. Even application names and their acronyms may differ in other countries because of legal and cultural considerations.

Another problem is while text in the original language (such as English) may be short, the translated version can be long.

Example: The Danish word for on is aktiveret.

Some icons, such as those used in word processors to convert a text string to bold face and underscored, do require the use of text in the icon: B for the bold face icon and U for the underscore icon. If you must include a text character in an icon, consider using the character uppercase form.

Example: In many English word processors, the B icon is used to denote the bold face option, but in Spanish the equivalent word is negrita, thus an N icon may be more obvious to the Spanish users.


Guideline A8-2

Avoid humor, puns, slang, and special, mythological, and religious symbols in icons.


Humor, puns, slang, and special, mythological, and religious symbols require that the translator and the user understand the subtleties of the language, culture, and religion of the icon designer.

Example: In North American culture, the owl symbolizes wisdom, but in some Asian countries, the owl symbolizes stupidity.

Example: The red maple leaf flag stands for Canada as a whole, while the lily (or fleur de lis in French) has a very powerful patriotic meaning in the province of Québec in Canada. These symbols can arouse strong emotions.

Example: For those countries that do not identify with the Jewish six-pointed Star of David or the Christian cross, translators can have difficulty finding equivalents in their languages.

See Punctuation Guidelines in Guideline B for more discussion.


Guideline A8-3

Avoid hand gestures or body positions in icons.


Almost any hand gesture or body position, however stylized, can be misinterpreted or be offensive in some cultures.

Example: Though an icon showing the palm of the hand facing you can mean stop - a fatal error has occurred, Greeks would interpret the gesture as offensive.


Guideline A8-4

Allow for changes in icon colors because the meaning of a color may differ between countries/regions.


Color is an extremely powerful attention-getting device, but be aware that the same color can have different meanings in different cultures.

Example: Yellow implies caution in North American culture, but not in countries such as China where yellow generates Yin and Yang which implies that yellow is the center of everything (see http://en.wikipedia.org/wiki/Color_in_Chinese_culture).

In addition to cultural considerations associated with the use and choice of color, you should look at accessibility considerations when supporting those afflicted by visual disabilities such as color-blindness.


Guideline A8-5

Avoid implicit assumptions or expressions of reading and writing directions.


Example: The Forward Tab key on North American keyboards has an arrow that points to the right, but this symbol means backward tab in the Middle East countries.


Guideline A8-6

Suppress nonessential details in icons.


The more details you show, the more your icon may unintentionally offend some users. Furthermore, a complex icon is not clear on a low-resolution display, which reduces its usefulness.

Example: Use the outline of the person instead of trying to show a person's features.


Guideline A8-7

Avoid culturally specific metaphors in icons.

Example: The picture of a North American rural mailbox is not universally recognized to mean mail.


Guideline A8-8

Use internationally recognized symbols in icons.


Mathematical symbols and musical notations are mostly standard throughout the world.

Example: Some countries use a five-point asterisk instead of the six-point version because the latter can be misinterpreted as the Jewish Star of David.

Example: The addition symbol, +, may raise objections in countries whose flags have a similar sign on them (such as Switzerland). To other countries, the plus sign resembles a Christian cross and thus may be unacceptable.

Do not confuse the difference between the DO NOT sign and the END OF sign. The DO NOT sign is a red circle with a slash going from the top left to the bottom right, while the END OF sign is a circle with the slash going from the top right to the bottom left.

DO NOT PARK. END OF NO PASSING ZONE.


Guideline A8-9

Avoid the use of national flags in icons.

A national flag is used to symbolize a nation or country/region. Flags are nationalistic and may represent ideals, boundaries and political beliefs but they are not very precise in their connotation. They can carry specific social, political, ethnic and religious connotations which may not be consistently interpreted across all countries/regions.

Sometimes flags are used in software as a graphical way to represent language. The problem is they do not accurately represent languages. For example, German, French, and Italian are spoken in Switzerland so which language does the Swiss flag represent? Conversely, which flag would you use to represent Spanish, French or Portuguese? Flags are also sometimes used in software to indicate multicultural support via locales. This however may not be very accurate since there are multiple locales under many of the world's flags.

Using national flags to represent a language is not acceptable in a country/region that uses the language but has a different flag. A much better solution is to use the interfaces provided on the platform (such as Java or ICU) to express the name of the language and country in English, in the selected language, or in any other language selectable on the platform. An example of an interface that does not use flags is the Select a country/region and language webpage in http://www.ibm.com/planetwide/select/selector.html where a user is presented a list of country/region and language from a pull down menu. Another example is Google Translate in http://translate.google.com/ (link resides outside of ibm.com) which lists the languages that it supports in a compact manner.

Lastly, it is important to note that national flags may include controversial regional or national boundaries making them a frequent source of dispute. Software has been banned in some countries/regions for using flags (or a map that showed a border that is disputed between nations) or simply because there is a political issue over the use of these symbols.

There are plenty of reasons to avoid the use of national flags in icons and no good reason to use them.