Icon Menu

Problem

Users need so make a selection out of a limited set of items

Solution

Allow users to select a menu item by selecting an image and display the label in a fixed location.

From www.apple.com

Use when

The space for the menu is limited or when icons can be used effectively.

How

The icons are lined-up or placed into a convenient configuration (e.g. 3 by 3 or next to each other). Users can move the focus or mouse-pointer over these icons. The icon that is selected will be visually shown distinct from the others. while an icon is selected the label is shown in the 'label-area' which is usually above or below the icons.

Why

This type of menu emphasizes icons while it is at the same time very compact. Especially in special circumstances with limited screen-space, e.g. mobile phone menus, this can create very effective menus.

More Examples

The SonyEricsson T68 uses an image menu as the main phone menu. The users can use a mini-joystick to select a menu item. The 3 by 3 arrangement corresponds with the keypad arrangement (the 1-9 keys) which work as shortcuts for the menu items.

Example of www.NPK.nl

Comments

5 comments have been added to this pattern

Kjell Bublitz, 31st August 2007

I think that icons at that size (and as seen in the screenshot) can be easily misinterpreted as decorative elements.

The screenshot is a good example how it should not be done.

The text-navigation is too prominent and the icons have no label. They are so seamlessly integrated that it nearly appears to be a part of the design.

Santi Banks, 15th December 2008

Another thing with icons is that users have to learn the meaning of these icons. It's a real challenge and almost an art to design a clear icon as graphics can be interprented in various ways, depending on the users perception.

In my opinion its ok to use icons and small images for navigational content as long as the labels are always visible. Icons form a part of the experience instead of beÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂ¯ng the content. Text is far easier to scan then a graphic so users can find their way much faster in a text based navigation then using icons.

artsyguy, 20th January 2009

Thanks for publishing all this great web design/development info

Mark Dunst, 23rd April 2009

Really great site! Thanks for putting this together.

An additional thing to consider is that icons as navigation (as represented above) are most effective for applications where the user will interact with the system many times. In that repetition, users will learn the shorthand for the icons. In situations where the user may only interact with the system on a limited basis (vanity and marketing sites), icons should be accompanied by visible text for better usability.

Asim Ishaq, 2nd July 2010

Beside providing the general understanding of various types of menus you may also provide templates and guides of how to built them.