Design Guidelines

Communicating with icons

Icons must first and foremost communicate meaning:

• they are a visual representation of an object, action or idea

Always user-test all icons!

• if an icon is not clear, it is reduced to visual noise and brings confusion

Icon Guidelines

Enough information to convey the message and no more

• No fancy border or frills Too much detail causes users to
• take longer in recognition
• become interested in the pretty picture

Keep icons distinct from each other

• Perform tests to ensure each icon can only be interpreted as meaning one command

Use standard icons whenever possible

• very few icons are universal

Carefully think about the size of icons:

• make icons small when
  • they are permanently displayed
  • there are many possible options the user can choose
• make icons big when
  • icon is a central part of a message the user must look at now
  • there are only a few options to choose from

Other tips:

• beware of background patterns
• design with the lowest screen quality in mind
• use subtle colors
• use a small palette
• don't rely solely on colour to convey information

Text and Icons

Sometimes addition of text can add in the interpretation of the icon. Can be included permanently or may appear when the pointer is placed over the icon.

For non-standard icons, text can help if present at all time

• problematic for internationalization

Advantages and Disadvantages

Advantages

Recognition over recall

• people recognize things easier than they can recall written information

Quick Searching

• it is generally quick er to find the appropriate icon on a screen than to find a function in a text list

Compactness

• icons normally take up less room on the screen than if the corresponding functions were described with text

Comprehensibility

• if the icon is carefully chosen, most icons are easily understood by an "average" user

Universality

• many icons ar relatively language and/or culturally independent, so they can be sued on international versions of software without the localization costs

Availability

• not too difficult to obtain ready-made icons for practically any function from media such as WWW and collections of clip-art

Disadvantages

Ambiguity

• if the icon has not been well designed, there may be no way for the average user to even guess what it represents

Limits to Imagery

• cannot always completely replace words
• some complex situations require words

Cost of novelty

• it is difficult and costly to design a brand new icon that one can be sure will be interpreted properly by the users

Typical mistakes

• insufficient differentiation between icons
• too many elements in one icon
• unnecessary elements (when context is there)
• lack of unity in style