Courses Projects

Human Computer Interaction 2010

Metaphors 

Metaphoric interfaces rely on intuitive connections that users makes between the visual cues in an interface and its function.

Visual metaphors: a picture used to represent the purpose or attributes of a thing. Users recognize the imagery of the metaphor and, by extension, can presumably understand the purpose of the thing.

“Metaphoric interfaces are based on intuiting how things work”Alan Cooper

Desktop Metaphor

You have these little folders with little files in them, which you can drag around. You can drag a file from one folder to another to move it. To the extent that this metaphor works, it's because the little pictures of folders actually remind people of folders, which makes them realize that they can put documents into them. — Joel Spolsky

Trash | Recycle Bin Metaphor

A trash can icon for deleting files was implemented during the development of the Apple Lisa user interface in 1982.

The Recycle Bin first appeared in Windows 95.

A recycle bin, or trash, is temporary storage for files that have been deleted in a file manager by the user, but not yet permanently erased from the physical media.

First, files moved to the Trash would be automatically erased when the session ended. After, the Trash became a folder that retained its contents until the user chose to empty the trash.

Zoom | Search Metaphor

The magnifying glass is a real world metaphor. People know what they are supposed to do. And there's no fear that the zoom operation is actually changing the size of the underlying image, since that's not what magnifying glasses do. — Joel Spolsky

“There aren't enough good metaphors to go around, they don't scale well, and the ability of users to recognize them is often questionable, especially across cultural boundaries.” — Alan Cooper

Shopping Metaphor

The software allows online shopping customers to accumulate a list of items for purchase, described metaphorically as "placing items in the shopping cart". Upon checkout, the software typically calculates a total for the order, including shipping and handling (i.e. postage and packing) charges and the associated taxes, as applicable.

Amazon.com uses the term “shopping cart” while Amazon.co.uk uses “shopping basket”.

Post Box

These images are courtesy of the Wikipedia article entitled Post box.

Idioms 

Idiomatic user interfaces focus not on technical knowledge or intuition of function, but rather on the learning of simple, nonmetaphorical visual and behavioral idioms to accomplish goals and tasks.

Branding Idioms:

“The golden arches of McDonalds, the three diamonds of Mitsubishi, the five interlocking rings of the Olympics, even Microsoft's flying window are nonmetaphoric idioms that are instantly recognizable and imbued with common meaning.” — Alan Cooper

“Idiomatic interfaces are based on learning how to accomplish things”Alan Cooper

Figures of Speech examples: “break a leg”, “cool”, “back in the day”

Graphic Editors

E-mail Clients

ArtLibre Set aims to fulfill the need of a typical graphic application.

International Standard

A set of pictograms was defined in the international standard ISO 7001, championed by Roger Cook and Don Shanosky in the seventies with their “Department of Transportation” sanctioned (DOT) pictogram set of fifty universally acknowledged icons. Other known and recognized sets of pictograms include laundry instructions and chemical hazard labels. Many of the well established pictograms are hailed for being universally understandable, crossing language and culture boundaries.

Download the 67 authorized pictograms from the standardized DOT pictogram set.

Pictogram Signage Showcase

Icons Resources 

Icons Search Engines

Silk Icon Selector

Exercise: Select appropriate icons for the following actions: delete, edit, paste, close, add.

evalica 2010