How to create metaphors that enhance user experience

I’m working on content for an estate agent (that’s a realtor in the US). On their old site they have one of the worst metaphors that I’ve seen on a serious commercial web site. They have a basket.

That you can put houses in.

Think about that for a moment. As you browse through the site, looking for homes that fit your criteria, you can add ones that you like to a basket. Once they are in there, you click ‘View basket’ to see a list of homes you’ve chosen. There they are, snuggled at the bottom of the basket, waiting for you to – ‘click the register button to post off your details to the agent’. Whatever that means.

This metaphor is broken

It’s not just that there is no basket big enough to put a house in. Or that houses are fixed to the ground.

It’s also what process is suggested by this metaphor. When I’m shopping with a physical basket, I’m in a hurry: I put several different items in at once, and just before checkout I ditch the one I don’t need and grab something else that just caught my eye.

I buy my groceries that way. I buy books that way too, at least online. But I will never buy a house that way. Ever.

Finally, crucially, on all the other sites I use where basket shopping makes sense, I use the basket to carry items to a checkout. On a property web site I don’t. The next stage is to make an enquiry, perhaps to organise a viewing. I am not committing to anything just yet.

Metaphors that work are an essential tool for user experience

Without getting too metaphysical, the web relies heavily on metaphors. The ‘web’ itself is a metaphor, as is ‘web site’, ‘forum’, ‘browser’ and so on. We need familiar pictures to help us understand our engagement with this complex system. We need metaphors to shape for us an experience of the web that is useful and instructive.

That’s why naming features and concepts and processes is so important. Metaphors are vital to this task. That’s why I love ‘basket’ – on Amazon – why ‘following’ aids my understanding of Twitter but ’streams’ confuses me a bit on Flickr.

I’m not talking about writing poetry. I’m talking about finding the pictures that will help your users to understand, enjoy, and make use of the web site you have created for them.

Three elements of a strong metaphor

Baskets for houses was bad for three reasons. Flip those three objections on their heads and we’ve got three elements for a strong metaphor:

1. Cognitive harmony (the image doesn’t clash)

In other words, when your readers first see your metaphor, it doesn’t jar with them. The picture works in their minds. We need to avoid cognitive dissonance – which means that when people try to imagine what you have conjured up for them it doesn’t work, or works crudely. For example trying to put houses into a basket, or thinking of photographs as a stream (instead of a set, a gallery, or even a roll).

A strong metaphor should achieve the opposite. When your readers first encounter it, they should get it. It should make sense, be instantly helpful or friendly or illustrative. The visual image in their heads should work.

Of course cognitive dissonance can be used to making a shocking point, for example ‘social media is like teen sex‘; ‘meatball sundae‘; or calling religious leaders ‘whitewashed tombs’ – but that’s not usually what we’re talking about when it comes to naming a feature on your web site.

2. Constructive analogy (the parallels work)

There have to be enough comparisons between your feature and the metaphor to warrant picking that label over another. And they have to be the parallels that you want people to understand, otherwise it becomes and unhelpful distraction.

Facebook’s ‘wall’ is a good example. These parallels work: if I stick things up on a wall, everyone who comes by will be able to see them. The wall will always be there whenever they come past. I can take some off (out of view), or add things on (in view again). It is physical space where I can see things that have been stuck there to be seen.

These attributes of a wall don’t work for Facebook: you can climb a wall, and see what is being kept out (or in) on the other side. But that doesn’t matter. The important parallels are public visibility, permanence, and choice of what to display on it. I get those from the wall metaphor.

3. Fitting outcome (leads to the right conclusion)

Finally, the real failure of ‘basket’ for houses is that you take a basket to the checkout, whereas when you see a house online you make an enquiry about viewing it. Totally different outcomes.

Where are you leading people with your metaphors?

A good example is the ‘radio’ feature on Spotify. It actually has very little in common with a radio – which is a physical receiver for electromagnetic transmissions that you to tune into by selecting a specific frequency – but Spotify want you to end up at the same place: listening to a non-stop stream of music they have chosen for you (as opposed to the other functions of searching and creating playlists).

Spotify is not a radio, but they use ‘radio’ as a metaphor to get you listening to music. It is a metaphor chosen to bring about the right outcome.

A better metaphor for home buying

So what would be a better metaphor for an estate agent’s list of homes than ‘basket’? It needs to create cognitive harmony (a good first impression), be a constructive analogy (say the right things), and lead to a fitting outcome.

‘Shortlist’ would work. Boring, but effective. ‘Wish list’ jazzes the process up a bit, and creates a more aspirational tone. Perhaps even ‘portfolio’ – to lend greater significance to the process of looking for houses, and suggest that it is something of value worth returning for.

Basically, anything but basket.

What do you think? What other elements are necessary for an helpful metaphor? What shrewdly effective – or terrifyingly awful – metaphors have you come across on the web?