apollo13 art logo

 

      Contact | Links

 
Home GalleryResearchDevelopmentTeachingAbout Us

MM 340:
Principles of Web Design

Lecture/Navigation

Home

Some Examples

IA vs. Navigation

Big Questions

Org Schemes

Alphabetical

Chronological

Geographical

Topic/Subject

Task Based

Audience Based

Metaphor Based

Techniques

 

 

 Metaphor

Is there an overarching metaphor or analogy to some way of organizing things that is well understood and can naturally be used here to organize the content?

Organizational metaphors: use organizations we know and structure a site the way the organization is.

Good use: An automobile dealership might use the departments of the dealership to organize their site: new car sales, used car sales, repair, service.

Bad use: don't use the internal organization of a corporation to present information to users though, since users do not usually `interface' with a corporation according to its internal structure. For instance, if I want to buy a car I really don't care if it is corporate headquarters accounting dept. which determines whether my Fire Engine red is in stock.

Functional Metaphors: Organize the site by what you can do. 

Good use: In a library you can browse, search via catalog, ask a librarian for help. Airplane company you might want to know about arrival and departure times, Book a flight, change reservations.  These options are the sort that one finds on a VUI (voice user interface) which structures interaction according to the high frequency tasks users have.

Bad Use: If the tasks people can perform depend on the topic they have in mind, then they should select the topic first, then the task. E.g. suppose I want to order water pipes or electrical wire. I should choose the category I'm interested in -- water: pipes, or electrics: wiring -- before clicking on place an order.

Visual metaphors: Use graphic elements that are well established. 

Good Use: An icon family that is well designed will make sense.  Use key exemplars or prototypes images to refer to the whole group.  E.g. generic cat rather than Siamese. E.g. Yellow pages for a service directory. Another visual metaphor is a small bookstore where you browse the shelves with the subject headers above the bookcases. Obviously this doesn't scale well as the number of topics or the fineness of distinctions increases.

Bad Use: Where the visual metaphor doesn't bring the salient choices to the front.  Some things work in 3D space, where there is plenty of interaction and fail in 2D space. Or they work in real life because there are people to help, or the same location serves many functions and so they don't really have much choice, they just come to the counter and ask for what they want. E.g. Southwest airlines old site used a disastrous visual metaphor.

 

Next Page >>