Interaction metaphors
How to communicate the value of an interaction design pattern over another.
The idea of ‘interaction metaphors’ is not new. Many interface components already have a metaphor applied to them to communicate what type of interaction takes place.
For example, I’ve listed here some simple interface components with their definition applied:
- Window: an opening that allows a passage of light.
- Map: a symbolic depiction between elements of a space.
- Menu: a list of options from which customer choose (usually food).
- Form: a document with space in which to write and submit a request, order, application, etc.
Even ‘computer’ is a metaphor. ‘Computer’ was the original title given to people who carry out calculations and computations. Interestingly, this metaphor has taken on new meaning since then. When we reverse the metaphor and refer to a person as a computer we now think of them as a mechanical robot-like person void of any emotion. The metaphor has evolved over a period of time after being used in another context.
The earliest mention of interaction metaphors I have been able to find is by John Carroll, Robert Mack and Wendy Kellogg in their 1988 paper “Interface metaphors and user interface design”. (Please comment on this article if you can find an earlier mention and I will update this reference.)
We use interaction metaphors to communicate new ideas
Although it might feel as though we’ve had smartphones forever, it was not too long ago that we only had landlines. Digital is developing (duh), and with its development come new ways of solving problems and designing solutions.
It is not always easy to communicate new designs or solutions and though we might understand them conceptually, we need to make sure our teams and clients understand them as well. We use interaction metaphors to help people understand the type of interaction that we expect to take place.
Metaphors describe a pattern.
We use metaphors to classify patterns and make them distinct from others. Describing a pattern reduces ambiguity around the shape of the solution and how it delivers value on a problem.
Metaphors communicate affordance.
We use metaphors to communicate what an object is, its purpose, and how people can interact with it. We know that recognition is better than recall, however when there is little recognition a user must rely on their memory (recall) of how something works to interpret how to use it. By using a metaphor we tap into peoples’ memories, or existing mental models.
Metaphors help novices become experts.
We use metaphors to help people become better at using technology by helping them relate it to the real world. Think of the first time you used Photoshop: it becomes easier to use as you move up the ladder from novice to expert. I would argue that the let down of these types of software is that they don’t help people move from novice to expert user fast enough. (Up for debate!)
Interaction metaphors live on an axis
Like many things in human-centred design, interaction metaphors are on a journey. They are continually moving up the ladder from being undefined to established. As mentioned before, there are metaphors that already exist, and they are used every day.
To communicate the different contexts of metaphors, I have plotted some everyday examples on the following axis:
Unfamiliar models to familiar models
Familiar ‘models’ are patterns that may be used frequently between people, and whose purpose and interactions can be easily perceived. Unfamiliar ‘models’ and their interactions may be difficult to perceive and unpredictable.
Basic interactions to complex interactions
Design patterns facilitate basic or complex interactions. Basic interactions might facilitate singular actions with feedback. Complex interactions may be a group of smaller interactions that facilitate an experience.
A very rough example may look like this:
Undefined metaphors
These are descriptions that may not exist or may not be common between people on a team to describe a pattern. As a designer, you may also not know the common term or way to describe the pattern. This could be the difference between calling the arrows on an accordion a ‘chevron’ (the little marks used to denote army or naval officers’ rank — interesting that this doesn’t tell us anything about the type of interaction to expect??) or ‘drop-down arrow’.
Established metaphors
These are descriptions that have been around a long time, and are more commonly used when discussed by larger groups of people. Some examples might be those mentioned earlier: a window, a form, a menu. The definition of ‘established’ may also vary on the maturity of the designer, the team, and the organisation.
Ultimately, interaction metaphors do not remain static. They move from being undefined and unknown to established and well-known.
Creating new metaphors
While some metaphors are used in everyday language, others can be created to communicate a design pattern — even if that design pattern has been around for a long time, and even if it is not obvious that we are looking at a design pattern.
Let’s have a look at how we can create a new interaction metaphor
The following 2 types of homepages come from different banks. One is a Neobank while the other is a major bank. The type of content and the way it is structured (IA) for each example is presented differently to a user.
The big bank has a huge customer base already and people may have well-established mental models of what a bank offers. Access points to different services and products appear high on the homepage making it easy for customers to complete their tasks. The type of interaction people have with this homepage may be similar to a Directory.
The ‘Neo bank’ may operate their services and products differently to a typical bank so these details are clearly communicated to introduce the concept, reduce anxieties and promote perceived value. The page is not very interactive, the news stories are high up on the page to drive credibility and images of the products are included. The type of interaction people have with this homepage may be similar to that of a Brochure.
So our metaphors become the ‘Brochure’ model and the ‘Directory’ model.
These metaphors might be more or less “right”, but ultimately a good metaphor comes down to whatever communicates the purpose or types of interactions that can take place in the digital space with the most clarity.
Guidelines for interaction metaphor creation
There are already existing guidelines out there for how to create interaction metaphors. As an advocate of principles over processes, I recommend reading Dan Saffer’s (Author of Microinteractions) set of existing guidelines here:
Here is the shortlist of these existing guidelines:
- Metaphors are cultural.
- Metaphors are contextual.
- Fit the metaphor to the functionality, not the other way around.
- Use metaphor to uncover otherwise hidden aspects of the material
- Discard process metaphors when necessary.
- Do not let your metaphor ruin key features.
- Choose metaphors that are appropriately scalable.
- Let your metaphors degrade and die.
