Projects/Usability/HIG/IconDesign

Purpose

Icons are pictorial representations of functions and objects, important not only for aesthetic reasons as part of the visual identity of a program, but also for utilitarian reasons as shorthand for conveying meaning that users perceive almost instantaneously. Well-designed icons improve the visual communication and strongly impact users' overall impression of visual design. Last but not least, icons are space-saving and improve usability by making programs, objects, and actions easier to identify, learn.

Guidelines

As a designer create icons with varying sizes in respect to the level of design. Simply scaling down (or up) does not work.

Design icons with a small number of metaphors [1].

Apply metaphors only once (e.g. do not use a brush twice for different options).

Rethink conventionally used metaphors (e.g. the clipboard icon of paste).

Antiquated metaphors might work well (e.g. a floppy is not necessarily outdated to represent save).

Adjust the degree of abstractness according to familiarity of the metaphor.

Use arrows only if they can easily be related to spatial features such as Previous/Next in a sequence or Up/Down in a hierarchy. Avoid using arrows metaphorically (such as for Reply/Forward or Undo/Redo).

Define metaphors independent from language and culture.

Make icons simple.

Colorize icons according to the meaning but in respect to application’s colors.

Don’t use animated icons.

Test your icon set on strength of association, discriminatory power, conspicuousness, and, if applicable, on accessibility.