As interaction designers, we’re keenly aware of the explicit meanings in words and images. But how many of us also focus on the what is suggested by our words and images?

What does a "base camp" make you think of?

Consider Basecamp. For a project management tool aimed at “the Fortune 5,000,000,” it would be difficult to find a better a product name than “Basecamp.” With one simple word, so much is suggested: A base camp is the safe place from which to plan your trek to the summit. Base camps are positioned to be safe from the harsher conditions above. It’s where you return to. And think of the folks who’d be staying in a base camp—likely a small, adventurous team. It’s the perfect product name to appeal to the small businesses who use 37 Signals’ project management tool.

We’re all keenly aware of the explicit meanings in words and images—we talk ad nauseam about everything from clean button labels to accessible content. But how many of us also focus on what is suggested by our words and images?

Great poets are masters of imagery. Skilled speakers know how to phrase and frame their arguments in a way that is difficult for their listeners to resist. Artists and comedians thrive or fail based on our ability to connect the dots. Words, images, animations—these elements all work on a suggestive level that (whether we’re aware of it or not) affects our recall, judgment, and decision making.

A Little Psychology

Here’s a little trick from psychology. Let’s say we’re having a conversation and I want to nudge the conversation in a certain direction; I want to influence what comes to mind for you. To do this, I might try using associative priming. Basically, I’ll tell a few stories or inject specific language into our conversation that your brain will pick up on, bringing associated mental objects into short term memory. A few minutes later, I might ask you a certain question. If I’ve done a good job at priming, there’s a good chance I can predict how you might respond (I suspect this is one way magicians are able to predict what someone is thinking!).

For example, let’s suppose I asked you to name some kinds of “blue boxes.” If a few minutes earlier we had been talking about wedding bands and jewelry, you’re much more likely to think of Tiffany’s blue box. If instead we were talking about science fiction and time travel, you’re much more likely to think of Doctor Who’s iconic telephone box, the Tardis. Our brains are constantly working to make associations. Assuming you’re familiar with Tiffany’s or (a riskier assumption) Doctor Who, our earlier discussion would have “primed” your brain, making it much easier for you to recall a thought or idea not entirely of your own choosing.

Here’s a simpler example: If I was to say “the dog was chasing the ____,” what word comes to mind? If you said “cat,” that’s consistent with most of the population. Our brains think and learn by associations and analogies. Even if the rest of that sentence was “squirrel” or “piece of trash being blown by the wind,” our brains are primed to think “cat” is what comes next. If you can make a reasonable guess about the associations your audience might make, priming can be a powerful tool, as evidenced by politicians and other kinds of persuasive speakers.

Most studies I’ve seen focus on linguistic priming, but what about ways we can use visuals to prime an audience?

Visual Priming and Semiotics

Classic advertisement for Panzani pasta

Our brains are trained to make associations. This is a basic way we learn and acquire knowledge, leveraging what we already know to make sense of new information. Just as specific words or phrases might trigger an association, images can do the same thing. This idea is nothing new to advertisers.

Our brains are trained to make associations. This is a basic way we learn and acquire knowledge, leveraging what we already know to make sense of new information. Just as specific words or phrases might trigger an association, images can do the same thing.

In 1964, the French philosopher Roland Barthes published his paper “The Rhetoric of Image,” which deconstructs an ad into three messages: the “linguistic” message, the “coded iconic” message and the “non-coded iconic” message. What we’re talking about here are the “coded iconic” messages associated with specific images, that is, those things suggested or associated with the literal objects pictured. In Barthes’ example, he discusses how the choice to show beautiful, fresh vegetables (and a box of pasta displaying a brand name) in a mesh grocery bag suggests freshness, plenty, and even “Italianicity” (in the yellow, green, and red of the tomato and peppers). A certain still-life aesthetic is also suggested. All in all, these are very positive brand associations. That’s nice for selling things. But how might we use this idea help us design better interactions?

When Decoration Isn’t

I’ve been working on an application focused on formal businesses meetings. I emphasize formal, as you might find this a bit burdensome for things like lunch meetings or daily standups.

'Add Meeting' form

To clearly communicate this intent, we’ve chosen design elements that evoke a more formal business atmosphere. The most overt of these is the background image used on the form page where a new meeting is added:

Although this boardroom image might be viewed as texture or decorative ornamentation, it serves a functional role in this application.

First, we’re hoping people have a favorable response to the overall feel, as this is one of the first pages encountered by new users. But beyond any perceived attractiveness, we need to communicate the intent of this Web app. Chances are, most people will skip past all but the shortest of written explanations. In the same way that microcopy, clear labels, and icons are explicit cues to help out users, we are using this image to suggest—through connotation—the kinds of meetings where we think this tool will be most valuable. We use this specific image to suggest board meetings, staff meetings, presentations to a VP, planning sessions—the kinds of formal meetings that would take place in that conference room.

Additionally, this imagery was included as a prime for the “meeting type” form field. In the event that people don’t read the microcopy that cues people as to kinds of meetings you can create, this image is our backup. It’s decoration that suggests usage. Or at least that is the intent.

Elsewhere in the same application we use a more subtle cue to suggest a degree of formality:

Accepting a request

What does the ornamental border bring to mind? Perhaps a certificate or legal contract? This is a key area of the application—asking people to accept a request made of them during the meeting. We want everything about this page, from the literal language to the associative visual elements to suggest the seriousness of this moment: You are about to make a commitment to another person, a commitment that will be visible to everyone in that meeting. Do you intend to follow through on this commitment?

To be clear, these are subtle nudges. And they may be difficult to quantify. But there’s good reason to justify these aesthetic choices, for what they say and what they suggest.

Avoiding Negative Associations

The layout and photography used by Groupon bring to mind high-end catalogs (click for a larger image)

Here’s another example from the Groupon site. For the uninitiated, Groupon offers “one ridiculously huge coupon each day, on the best things to eat, see, do and buy in [your city].” I’ve purchased gift cards for everything from a favorite Thai restaurant to an artisan cheese shop. Their daily deals are typically on the classier side—think salons, fancier restaurants and shopping. These are not closeout deals like you’d find on other “deal” sites. In fact, I believe Groupon wants to avoid any suggestion of a “cheap” deal. Consider the photography and layouts they use in their daily deals. The photography is usually top notch. And the layout style brings to mind high end catalogs.

That’s an example of positive associative priming. But here’s an interesting discovery I made while researching the site: in earlier versions of the site, Groupon used the familiar dotted line or scissor clipping design element to border their deals, a design choice that has since been dropped for a simpler solid border.

Why do you think Groupon dropped the coupon style border?

Why did they lose the scissors and the association with coupon clipping? I suspect this goes back to communicating a “value” message versus one that suggests cheap clearance. This would be an example of avoiding what for them would be a negative (cheap) association.

On that note, have you ever wondered why the original iPod Nano resembled (and was compared to) a stick of gum? Think about how that association might have shaped perceptions.

Concept Models and Metaphors

Visual priming is also a powerful tool in print contexts. Below is a poster I created to explain The Fundamentals of Experience Design. The content of the model should, in and of itself, be fascinating, but that’s not what attracted people to this poster. No, what people found most striking about this was the floating chunk of earth.

On the surface, it is a fairly intriguing image. But what associations come to mind? Conceptually, this functions the same way as the cliché iceberg model we see everywhere—there is the obvious stuff everyone sees, and below that the critical stuff that gets overlooked. But if we consider this visual metaphor a bit more, we might also think about the roots. An experience (the grass above) that has no roots is likely to result in tumbleweeds. However, the deeper our roots go, the stronger our foundation. These are good associations. Beyond the conceptual suggestions, though, consider the style of the illustration. Does it resemble technical illustrations you might find in an academic textbook? Not a bad association if you wanted your ideas to be taken seriously!

I could go on, but you get the idea: The images we use, the words we choose– whether we’re aware of it or not, they function at an associative level that can (if given conscious attention) work in our favor. What are you suggesting?

UX London 2010

This is just one of many such ideas from psychology that Stephen will be sharing at the UX London conference (May 19-21), in both his Seductive Interactions talk and his Concept Models Workshop.