Društvo LJUDMILA
Rozmanova ulica 12
1000 Ljubljana
Slovenia
Prostori: osmo/za

Icon Guidelines

Introduction

Icons are a crucial part of the graphical use interface. While in some cases, they can be replaced with text labels, icons have some advantages:

  1. If images are chosen carefully, they can be intuitive
  2. Due to the fixed aspect ratio (typcally square), they can be layed out better

We will consider icons to have the following basic properties:

  1. Square shape (as opposed to general images, which can be any size). This constraint enables icons to be stacked better, they can be tiled vertically or horizontally, for example.
  1. Each icon has an associated image and name, which is a string of characters.

Mapping name to image should be 1:1. Names of all icons form IconLexicon. Project Tango is an example of such a lexicon.

Image should be a canonical one. It should have high information content, depending on avaliable display size.

Icons can have 3d look, but they are essentialy 2d images.

There are some similiarities between the way icons fonts are handled.

Some other examples of icons are CD/Vinyl record covers and corporate logos.

Consistency, which is generally considered a good GUI design practice is specially important for icons. Inconsistency tends to be noticed quickly. So far, the seems to be no gereral consensus or solution to inconsistency.

Influences

  • HIG Icon guidelines
  • Shape Grammars
  • Wikis

Concepts

  • Dictionary of atoms
  • Composition Rules

Categories

Icons_class_diagram.png

Actions

Applications

  • Generic applications

Mimetypes

  • Filesysystems - directories, cabinets, trash, zip, tar, iso
  • Documents - text, binary, xml
  • Media - video, audio

Devices

  • hardware devices
  • disks
  • servers


Other

  • Brands - company logos and such
  • Body parts - eye, ear, mouth, brain, heart, hands
  • Websites - favicons, domains
  • Faces
  • UNICODE symbols

How should color be used?

Compositing

UNICODE already defines some compositing operators.

Can SVG be used for compositing?

Emblems

  • Readonly
  • Unreadable
  • Link

Documents

  • open/proprietary format
  • production/consumer format (color?)

Filesystems

  • Topic: documents, music, ...
  • Shared
  • Network
  • Archives

References

  1. Unicode Ideographic Description Characters
  2. VisualIDs: Scenery for Data Worlds
  3. Apple Icon design guidelines
  4. Tango Project - this project defines a naming standard

-- Main.guest - 17 Nov 2004