Tips for using icons in interface design

Icons and pictograms as a form of communication are effective to communicate meaning quickly and where space is limited. Not only that, they also reduce language barriers because symbols are not tied to a language like written text.

Mar. 19th 2010 | 0 comments

sign Icons and pictograms are a simplified version of a real object like on this sign below, which illustrates a car driving on a slippery road. Another term that you should be familiar with is ideogram, which is an abstract representation of a meaning e.g. two vertical lines represent 'pause' and a square represents 'stop'.

Using icons effectively

Compared to logos, which should be unique identifiers, icons work best when they are familiar. There are different things you should consider to use icons effectively:

Choosing the right metaphor

The most important thing is to find icons with the right metaphor. If there is a convention, try to follow it. Try searching Google Images or IconFinder to find metaphors. E.g. a house is the convention for 'home', and then you should use a house as the metaphor.

home

Even though disks are not used in many computers today it is still the convention for save.

Don't choose or design icons in isolation

macosx It's important to see the icons in relation to each other and the overall design. Try to choose different color and shapes, to make them more unique are thereby more recognizable to the user. E.g. in Mac OS X the small icons have different colors and shapes making the icons easy to separate.

Icons should transcend language and culture

Apple chose to use a postage stamp for their OS X mail app instead of a mail box, because mail boxes look different in each country, whereas a postage stamp travels from place to place and looks the same everywhere. This is a great example of choosing icons that transcend language and culture.

Keep icons in a similar style

A dead giveaway of an amateur icon user is when the icons have obviously been taken from a variety of sources, and have varying shadows and lighting techniques applied. For the most effective, user-friendly design, be sure to use icons with a similar texture and style. Make sure the icons share:

Simplicity - Make the icon as simple as possible. Making object two dimensional instead of 3d is an effective way to reduce details. Simple icons also work better when scaled to smaller sizes.
Same type of metaphors - Keep the overall metaphor e.g. the desktop metaphor includes icons for recycle bin, folder and documents.
Lighting and shadow - Make sure the light source is coming from the same angle and shadows have the same direction and density.
Use colors actively - Use different colors for icons that a close together. This will enhance the brains perception of each icon. The more contrast and warmer colors, the more they icons will stand out.

Common Uses for Icons in Interface Design

Now that you can critique an icons' effectiveness based on it's design, you're ready to think of some uses for icons in your own designs. Some common uses for icons in interface design are:

Summarize features

This example is from www.ikea.com and gives the user an overview of all the different departments.

Highlight important actions

Important areas or buttons like a buy now or download button can grab attention from the users if you using icons. The details in the icons will attract the eye.

Use space more effectively

Icons can help you explain actions to the user without using text. This allows for more effective use of space. The example below is from Google Docs where many actions are shown in the typical text editor tool bar.

Some Great Examples of Icons In Interface Design

Vimeo

Vimeo uses very simple monotone icons. They use an uncommon icon for 'share' but it's recognizable and explains the function.

Transmit

Transmit uses common metaphors actively but have also found new way to explain uncommon features like the Queue and Show Invisible.

Coda

Panic uses a great assortment of icons effectively on the page for their popular code editing software, Coda.

coda

Where to find great icons?

Besides IconFinder (of course) you can look for icons at:

Inspiration for this post

Turbomilk: 10 mistakes in icon design
Jon Hicks: Icons for interaction presentation and his article in .net magazine Dec. 2009.

Authors

This blogpost was written by Shawn Adrian and Martin LeBlanc. Shawn is a freelance designer from Vancouver, BC, who spends his time creating useful web apps. His latest project is QuoteRobot and is coming soon at Quoterobot. Martin is behind IconFinder, adding icons and tweaking the website.

Click here to tweet about this

Twitter icon by TurboMilk