Visual Metaphors in Web Design
May 9th, 2009
"We don't read text, we scan it"1. The web is an interesting medium for communicating a message to a user. Compared with say, print, the methods employed to do so are different chiefly because the web has that extra dimension: interaction, hence the reason that translation from one medium to another is often not as successfull as you might think. The other element that the web often has is the ability to travel through multiple pages within a site in any order, different to print where you often read cover to cover or a chapter at a time. Steve Krug proposed this generalised process:
- Glance at each new page
- Scan some text
- Click on the first link that catches our interest
In an ideal scenario as developers we would love the users to use a more scientific approach, but unfortunately that is not going happen any time soon2. One of the reasons for this is that there is no penalty for chooseing the wrong page, especially if the site has well-structured navigation, so users can afford to muddle through. If the users are scanning the site for relevance, what interface techniques can you utilise to communicate a message or idea or guide the user in an instant?
Associations & Affordances
One answer is the use of visual metaphors. What this means is using images that reflect a real world or easily implied role or message. The idea is to use the social & cultural associations people make with certain objects in order to imply interaction. In his book The Psychology Of Everyday Things, Donald A. Norman refers to these associations are affordances:
Affordances are ‘the perceived or actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used…Affordances provide strong cues to the operation of the thing’3
The first thing that springs to mind is the use of icons.
Icons
Facebook, Tick, Silk Icons
Not all icons are necessarily metaphors: the RSS feed icon for instance. But they are definitely ideal for this role when designed correctly. Some that come to mind are shopping carts for, well shopping baskets, magnifying glasses for searches, or rubbish bins for deletion of removing something. The triangular warning/error icon is a good example: the only reason these work in such a role is because they reflect a real-life object. Triangular road signs generally involve a cautionary actions, so these are ideal in such a role. The list is endless because of the versatility of signs, but this technique is certainly not limited to icons: the interface elements are vital too.
Interface Elements
Apple, KFC, UKC Lecture Notes
The button is a very clear metaphor, and one that I genuinely belive every internet user can understand. Even such a thing as the making a box seem three-dimensional using different coloured borders implies interactivity: this can be pushed. Tabs, especially as navigation, have been proven to be a highly effective metaphor. They imply other sections, a hidden depth that creates the illusion that the page isn't flat, and also make it easier to show what the current section is.
One of my favourite metaphors is what I refer to as 'the three little grooves' that often appear in the bottom right corner of resizable objects. The fact they signify a grip, a physical sensation, sets it apart from most other metaphors, even though part of it's effectiveness does rely on the mouse pointer changing to the resize arrows.
What does this button do?
Nowadays most of these metaphors are used with barely a bat of the proverbial eye-lid, because they are so ingrained they are conventions. They have become conventions because they work. But with the web evolving are an astonishing rate, as cliched as that sounds, there will always be new ideas to communicate, so visual metaphors are still vitally important in design, and will be so for the foreseeable future.