"What Are You Suggesting?" Using Images to Influence

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? Whether we’re aware of it or not, these elements all work on a suggestive level that affects recall, judgment and decision making.

No related posts.

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?

basecamp logo

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!).

Tiffany's Blue Box and the Tardis from Doctor WhoFor 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

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 New Meeting form screen for the Web application After the Meeting

'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:

Screenshot from After the Meeting where you are asked to accept a request

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 used by groupon brings to mind high-end catalogs

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.

and older and

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.

Poster explaining the Fundamentals of Experience Design

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.

Header image by baylorbear7 / CC BY-SA 2.0

Stephen Anderson

Stephen recently published the Mental Notes card deck to help product teams apply psychology to interaction design. Between public speaking and consulting, he offers workshops to help businesses design fun, playful and effective online experiences. He’s currently writing a book about “seductive interaction design” that will be published in 2011.

12 comments on this article

  1. Louise on

    Great piece Stephen! It’s great to incorporate psychology into interaction or exerience design. It can only get better!

  2. Melanie on

    Fantastic. I especially like the idea of priming. I’m going to be thinking about this concept and how I can use it in my work.

    Regarding your “blue box” and “dog chasing cat” examples, I believe psychologists call this concept a “schema.” Schemas are mental categories we form from birth on. We learn very early that dogs typically chase cats, for example.

    If a brand can work their way into our minds as part of a schema (the way Tiffany’s has done with blue boxes), they’ve really accomplished something.

    Thanks!

  3. Pingback: uberVU - social comments

  4. Vicky Teinaki on

    Interesting – just had an article of a similar vein pointed out to me with more on Lakoff & Johnson’s theory “The astonishingly deep effect of primary metaphors in our lives” http://www.iftf.org/node/3127

  5. Pingback: User Experience, Usability and Design links for March 11th | BlobFisk.com

  6. Great post, you might wanna take a look into I/O Psychology.

  7. I guess that also works for pictures and illustrations. However, one should admit it’s not an easy process to find the best picture that will enhance the theme of your page. Time and experience will tell.

  8. MikeB on

    Interesting. There is significant research that exists on the use of imagery in design applications, such as wayfinding logic. Spent two years of my life researching. Imagery is far superior to words, and symbols in regards to both recognition and retention.

  9. Great article and an interesting read as right now I’m going through a re-design as I got my visual stimuly wrong. I choose young hip looking people fir imagery and thus alienated my corporate demographic. Lesson learnt

  10. sebastian geeen on

    great article, i did some research in the past about images as in their positions, for example eyes looking towards website copy, not away from it as the user will in a way follow where the image is pointing them but not thought about it in this way. Very interesting read.

  11. Pingback: Weekly Roundup: Design Related Links #11 « Discovery Session… by Gerard Dolan

  12. Pingback: Weekly Roundup: Design Related Links #12 « Discovery Session… by Gerard Dolan