an oddBlog @ oddQuad

What’s a metaphor?  And how much better is it than a meta-three?

Hyuk, hyuk.  I know, old joke.  (Thanks Jonah!).  Seriously now, what is a metaphor?  And how does it play a role in visual design and user interaction?

A metaphor is a comparison of one thing to a seemingly unrelated other thing, generally implying that they are indeed alike in some way, shape or form.  Metaphors are usually employed to help make a point, but also are often utilized to better illustrate that which might be unclear or to relate complex subject matter in a way that is approachable and more easily understood.  Additionally, metaphors can be used to flower a diatribe, add flourishes to the contents of a story, or make an argument that much more compelling to ones audience.  But what does this mean for visual interaction design?

First off, in design a visual metaphor makes things more interesting.  And for us, this is a good thing.  Because let’s face it, digital interfaces aren’t exactly clay waiting to be molded by our hands, or a blank canvas begging for the paintbrush.  No, rather, our interfaces are made up of pixels, pixels on a flat screen of a certain size and aspect ratio, pixels that are either on or off, and that silently await our input so that they may, in turn, respond.  But the pixels are our slaves.  And it’s up to us to make them tell a story.

It’s the story that is vital in capturing your audience.  The compelling interface will make the user think (in the good, want-to-make-sense-of-this way, not the bad, what-the-hell-is-this-crap way).  Most of us like solving puzzles and riddles, even on a sub-conscious level.  I would wager that this has to do with the human intuition to constantly attempt to make order from chaos.  But that’s the subject of another blog post.

A good interface employs a good story.  This visual story can range from subtle metaphorical interactions (a very simple example would be a button on a website–not really a button at all, but merely a digital representation of a physical object we are familiar with) to all-out, full-blown extended metaphors.  An over-the-top example of an extended metaphor used in a digital interface can be found in the infamous 1995 Microsoft Bob.  The goal of the software was to provide for the home user a familiar alternative to the usual technical interface seen in desktop computing at the time, quite an ambitious undertaking, given the hardware and software limitations back then (this was 1995, after all).  It was slow and clunky, and honestly, perhaps a bit too patronizing.  Needless to say, Bob was a flop.

Microsoft Bob

So Bob was a failure, sure, but does that mean that extended metaphors should never be used in web or other digital interfaces?  Of course not.  There are countless examples of great interfaces that successfully employ solid visual metaphors, metaphors that tell us a good visual story (without going over the top) and that bring us in, but also provide us with an intuitive means of navigation that is at once familiar and enticing.  Two great examples can be found at SectionSeven and Urban Silo.  Both design portfolio sites are perfect examples of the use of visual metaphor, and each strike a good balance between story and functionality.

Section Seven uses a simple book metaphor.  Once the site has been loaded, the viewer is presented with what appears to be the cover of a book.  Indeed, the title centered on the cover image reads “SectionSeven Cabinet of Selected Works.”  There are a few things at play here already.  The playful wording makes us think we might be browsing an old literary magazine rather than a web-based design portfolio.  The cover-of-a-book image makes us want to open the book, as we are wont to do when encountering covers of books.  Clicking on the cover causes an animation of pages to fan out from beneath, revealing themselves in a neat row to be the numbered chapters of the book, each with a table of contents listed beneath their associated title.  Clicking on a title page spawns yet another animation, this time of pages folding out in sequence, each revealing a rich screen capture image detailing the particular work that is being showcased.  The overall interaction is rich, yet simple.  We are all familiar with books, so it only takes just a few clicks before we get it.  In fact, I’d wager that for most visitors to the site the book metaphor is quickly forgotten for the content that it showcases.  In my opinion, this makes the site all that more successful.  It employs a powerful and familiar visual metaphor to help tell its story, but it doesn’t do it at the expense of the content that it is presenting.  Double bonus.

SectionSeven website

Urban Silo (a site developed by the folks at SectionSeven) utilizes metaphor a little bit differently.  In fact, one could make the argument that overall the site is actually an example of a mixed metaphor.  I’ll leave that up to those who like to argue semantics.  Whatever the case, the site is successful in its design for a number of reasons.  Upon coming to the site the visitor is greeted with a brief rising-sun animation and the sound of a crowing rooster.  This is quickly followed by a file-loading sequence, represented visually as wheat stalks growing upward in order as the files load.  All of this does a couple things.  One, it somewhat disguises the fact that we are having to wait for files to load before we actually see anything.  That is, we’re not waiting for files to load, we’re watching the sun come up and listening to the rooster greet the new day.  We’re watching wheat grow, ok?  Oh, and the site is called Urban Silo.  Get it?  Silo, as in the thing that holds all the goodies on a farm, but with an urban twist!

Urban Silo loading animation

Ok, so the whole farm metaphor should be pretty clear.  However, I have to stress that they’ve done a great job of keeping it subtle.  Visit the site and you will see for yourself it’s not cheesy at all.  The name of the company/site is really quite clever (it sticks out in a sea of design agencies, don’t you think?) and in light of that accomplishment I think that carrying the theme out just a bit further with a visual (and audio) metaphor is appropriate.  However, I’m happy to report that the whole farm thing, for the most part, stays pretty dialed back from there on.

Once entering the site proper, the visitor is presented with a handful of cards, each representing a section of content, suspended from strings, hanging down and casting shadows on a surface beneath.  They are hung in a circle, going back in space on the z-axis, but the user can easily rotate the ones in the back to the foreground by using a horizontal scrubber located toward the bottom of the page (the sun icon from the opening sequence).  So here again we have a few things going on.  They’ve added another metaphor, that of physical cards representing content, not unlike tags that you find hanging off clothing when you go shopping.  Additionally they’ve added the metaphor of three-dimensional of space in which to move to browse content.  The dual-device of cards and three-dimensional space continues throughout the site as the user drills down to explore content.  This works great because these tags are familiar to us as sources of information, and, well, we operate in three dimensions all the time every day!

I should mention that the original farm metaphor isn’t completely abandoned once you get into the site.  For instance, the print work of the company lies within the hanging card entitled “Print Silage,” which features quite prominently as its icon an ear of corn.  Other icons are based on wheat and eggs, and another section title is “Web Fodder.”  Examples of a few sub-headers:  “Organically Grown”, “100% Natural” and “Bio-Degradable.”  They definitely stick with the farm metaphor, but do so in a subtle fashion with mild visual cues and clever copy writing.  Because of this, the site succeeds where others fail.  We all understand the farm story, and initially it’s sort of this cute thing that we take note of as we come to the site, but again, once we begin to explore the actual content, the metaphor takes a back seat, as it should, and doesn’t overwhelm what the site is really trying to do, in this case present a portfolio of work.

Urban Silo website

To wrap this up, I’ll just say that metaphor is a powerful tool in interface design, but that one must strike an appropriate balance between it and the actual purpose of the UI that is being developed.  Telling a story is a powerful way to entice users into your experience and keep them there, and using a good visual metaphor is a great means of accomplishing this.  We are very visual creatures, and a recognizable visual story that we can relate to (a book or a farm, for instance) will be more successful at bringing us in and keeping us interested.  However, there is a fine line between a good, solid metaphor, and a big, cheesy bomb.  Just ask Bob.