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.

In Johnny TV Features we’ll share with you interesting videos that we come across, enriched with our healthy opinion. This time we have ‘The Domestic Gubbins’, a video by Microsoft Research.

At first glance this video by Microsoft Research seems a bit whimsical or silly. But if we dig a bit deeper, we find there is a lot more to it, and there are some useful things that we can take away from it.

What is the video’s purpose?

The first thing to consider is what the video was for. What was its purpose? Once we understand this, we can go on to consider what the researchers got out of it and how this helped them in specific area that they were investigating.

So what was the video for? First, a bit of context. The Domestic Gubbins are part of a project called Objects Incognito (subtitle: Rethinking Machine Intelligence), which is “an ongoing enquiry into everyday ideas of intelligence”. We are promised a plethora of “intelligent” devices and technologies in the near future. But what is meant by intelligence, exactly, and what will it be like to live with these ubiquitous intelligent technologies? That is the question that this video attempts to answer.

Interviewing people

Why video, though? Jain and Taylor originally wanted to create the Gubbins as actual devices that they could give to people to live with and interact with. But this proved too challenging, so they decided instead to create this video, which shows how people might interact with the Gubbins. Then they showed it to people and interviewed them to find out what their thoughts and reactions were.

These interviews (excerpts of which can be seen here) provided the researchers with new insights and led them down new research paths.

How can we use this?

So how can we adapt and adopt this approach for use in our work? This research is very high-level and conceptual, whereas in our day-to-day work we usually deal with matters that are much more concrete. However, there are many situations where we would like to be able to put a product in users’ hands so that they can play with them (especially for products that are radically different from those currently in use or that address as-yet-unmet needs), but where we do not have anything close to a working prototype. In cases like this, we can use this approach to show how our new product might function and how people might use it, and then see how potential users react. We can then use the insights that we gain to guide the direction of our product.

What are the weaknesses of using an approach like this? The video itself has to strike the right balance between showing realistic scenarios of use and keeping things ambiguous enough to make viewers think and use their imaginations a bit. And when interviewing the viewers, a certain degree of finesse is needed to avoid drawing interviewees in a direction favored by the interviewer.

In conclusion, this is a very well-made video that we can borrow ideas from for certain situations (though definitely not all).

Johnny TV

This and many other UX videos are posted on Johnny TV. Should you come across a video that you think should be there, please contact us via mail or Tweet me @martinpolley.

Personally I’m a big fan of graffiti (when done properly)… but I can understand that a lot of people experience it as urban decay. Fortunately today I came across a great looking experiment where you can digi-spray paint on a screen. For a first demo it looks pretty nice.

The above experiment was done by combining a Wiimote, beamer and Flash actionscript. This is a pretty cheap and easy way to start experimenting with interactive screens. You can buy a Wiimote for about $35 and do all sorts of experiments with it, and you don’t even need a beamer for it… a computerscreen will suffice.

After checking the above demo out I came across another experiment with the Wiimote and spraying. It’s really impressive to see the accuracy of the Wiimote, especially when you consider that it will be even better with the updated version (soon to be released):

What would happen if we could control real-life with a mouse cursor? This thought must have triggered artist Olivier Otten, when he created Selfcontrolfreak. On his website there are several movies in which he is the actor… but he doesn’t play the main role, because that role is preserved for you. In every movie you can influence his actions by interacting with him in a different way.

I was suprised at how easily it could entertain me. Normally I’ll stay just 1-2 minutes on a website I like, but this time I played around with every movie. The thing that makes these movies good, is that it isn’t exactly clear what you can and can’t do. Within seconds you find out that the movies are interactive, but where this interactivity starts and ends is a surprise every time. Really simple, but effective.

The rawness of the movies also appeals to me. It really feels like an experiment, and not like a finished product. This makes it likeable.

A lot of people love to share their thoughts with other people. On websites this has been translated into chatboxes, forum, replies and many other ways to store information. But it has always been structured and put on the place where the designer wanted it… but what if you could put your thoughts wherever you liked? It can be done with digital sticky notes, but that is soooo 1999. In the era of Youtube we want to leave videos behind, and thankfully it’s possible.

Bubble Comment is a new service enabling everybody with a webcam to leave his message on any website in the world. Just type in a website, start up your webcam and begin recording your important message. Of course I tried it out, so check my message out. I have to admit.. at first it’s really strange leaving a message behind, especially hearing yourself talk (in English). But the promise of an experiment always wins my discussions…

It’s a really interesting way of commenting on a website. Unfortunately it’s not yet possible to use it as a community. You can only view one message on a website, not all messages left behind by different people. But of course this is the next step, leaving your video graffiti behind with others. Then you comment on each other and find new ways of interacting with content and people.

But for now.. let’s experiment: place your bubble comment on Johnny Holland and give us your thoughts on this new way of interacting. And as Johnny would say: be honest.

A lot of people use avatars in their digital lives. Avatars can be any character, as long as it represents you in the digital world. But what if you would have an avatar representing you in real-life? Mediametic decided to create The Girlfriend Experience, ‘a multiplayer game allowing you to enter into a real-life person and use this person as an avatar.’

On friday the 5th of December and saturday the game can be played at specific times (see website). The Girlfriend Experience will be physically located at Pixxelpoint 2008, Kulturni Dom, Nova Gorica, Slovenia. It’s not extremely clear, but as far as I know anybody in the world can play the game and control his own real-life avatar. All you need is Skype and a headphone plus microphone. Check out the available avatars on their website.

I’m really curious how people will react to this. Digital avatars give us a power to be anonymous and we fully control what the avatar says and does… but with an avatar that knows reason and logic, things are a bit different. We suddenly have a conscious, plus we realize that our actions can have a physical and psychological effect. The way we behave can make the avatar sad, angry or extremely happy.

This is really an interesting psychological experiment, which is fun at the same time.