Friday, September 15, 2006

Icons, Metaphors and Shopping Carts

Today, a question arose in my Interaction Design class about the difference, if any, between an icon and metaphor as used in an interface, particularly a GUI. Both icons and metaphors rely on visual symbols rather than words to convey the meaning. Here's an example that might help clarify the issue.

Many e-shopping sites employ a shopping cart icon in their interfaces. As you shop around at the site, you ADD items to your shopping cart, just as you would in a physical, bricks-and-mortar store. You may, at any time, review the contents of your shopping cart by clicking on. Likewise you can decide to abandon the shopping cart, or empty it of some or all of its contents, much as you might in the physical world.

The picture or symbol of the of the shopping cart is an icon that represents a real shopping cart. The process of purchasing goods online relies on the metaphor of a shopping cart in that you go about shopping online using a shopping cart in much they way you would in the physical world. While the shopping cart icon represents a specific object using a shopping cart metaphor in an interface would require the designer to create a process that mimics that of a shopper moving around a store pushing a shopping cart. Note that while it is probably a good idea to use a shopping cart icon as part of a shopping cart metaphor, the designer could just as well use some other icon, such as a pickup truck, a bag, or even a horse (as means of carrying goods). Further, the use of a shopping cart icon does not necessitate its use as part of a shopping cart metaphor. It could be merely one of several objects scattered about on a desktop and may possess properties that have no correspondence with real shopping cart -- e.g., a magic flying shopping cart, a shopping cart from hell that attacks people and property, or a shopping cart that grows leaves and bears fruit.

An icon, then, is a symbol, usually for an object, whereas a metaphor describes an entire world, or reality, process that the designer seeks to create as means of helping the user interact successfully with a system. Icons may or may not be employed within a metaphor, although they often are.

You can clarify these concepts for yourself by visiting an e-shopping site such as Amazon.

No comments: