In the BrandRepublic post ‘Forget Behavioural Economics, now it’s Ergopsychonomics’ Chris Arnold  makes a portmanteau of ergonomics and pyschology as a means to talk about the connection between the objects we use and how to think about them. Yet, one poster challenges Arnold: why can’t we just call this HCI?

Meanwhile, over at Fastcodesign, Tucker Veirmeister uses the word psychonomics to say the same thing. Still, as commenters point out, the word is hardly new as it’s been in use by psychologists since 1959.

I’d say the lesson to come out of this is that when it comes to making up words, with great power comes great responsibility. Last year we started hearing the word skeuomorphic a lot in regards to unnecessarily analogue iPad apps. However, the term is well established and hasn’t changed . On the other hand, Don Norman conflating JJ Gibson’s ‘perceived affordances’ with ‘affordances’ has caused confusion that he’s spent the following decades ironing out. And gamification is not the same as badgeification (as even the head of Zynga points out).

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.

As many may know, language is really important to me. I’m one of the first people to jump into any mud wrestling battle drenched in “defining the damn thing”. I love semantics, or more importantly I treasure appropriate semantics. So to support the design challenge, I thought I’d write about metaphors, and more specifically about the metaphor we are so happy to be-friend: the tab.

Lately, metaphors have been growing on my mind like ivy on the side of a Boston rowhouse. First, there is my recent talk on Foundations of Interaction Design that I did in Vancouver in February. But if that wasn’t good enough I did a cut-down version of it in Washington, DC for ReDUX DC. Then I’m in the midst of teaching a Perception & Cognition class as part of my job at the Savannah College of Art & Design where my colleague and co-teacher for the class, Bob Fee, reminded me so poignantly that not only is metaphor in everything digital but a good 90% of our language structure and semantics is rooted in metaphor. Finally, this fine publication along with the organization I helped to establish, IxDA, partnered with Mozilla Labs to create a summer Design Challenge whose topic is tabs in a browser.

Why metaphors at all?

Before we can answer why, we have to answer what. Well, we all took grammar in school and were told that a metaphor is an analogy that unlike a simile does not use the words like or as to declare a relationship.

My life is an adventure whose journey passes through wonders ridiculous and sublime.

Microsoft Bob, the worst metaphor OS ever

Of course, life is not an adventure, but at times has the feel of an adventure. As one of my students stated earlier this week, by creating the analogy without a prefix of like or as it is reinforcing the analogy as a truism which can’t be easily rebutted.

But why? Why do we need metaphors? What value do they add? The answer is quite simple. There is a density of complexity in the world around us. Analogies by themselves often create mental maps between intangible concepts that are difficult for us to understand. And tangible entities that have properties that we can associate between them, thus creating a definitional relationship, which we can use to aid our comprehension of the intangible concept.

A great example is how we talk about expenses: we say they are either rising or falling. Value or Expenses are neither additive or reductive. They just are. We give them a sense of size so that we can relate it to the experience of stacking coins which can go up as there is more, but prices, expenses, value in and of itself has no physical embodiment especially none that relates to altitude. Time is also very tied to metaphor. Does time really “pass”? I don’t think so. Nor does it fly or slow down.

In the digital world the metaphors around us are easier to see. Trashcans, files, folders, paths, etc. And our new favorite metaphor The Tab.

Tabs have existed in user interfaces for quite some time. With files & folders already among even the oldest WIMP (Windows Icons Menus Pointers) operating systems, it only makes sense to continue the office supply metaphor. I don’t know when they first entered the world of the GUI, but I remember them in the world of Windows settings dialogs as a way of presenting collections of options in usually arbitrary categories

I think the next major use of tabs was in the web world. Not in the browser (other than in dialogs) but in web sites themselves. The #1 prognosticator of the use of tabs as a form of web navigation was Amazon.com. They were also the first to realize and deal with the fact that tabs as a navigation/organizing form does not scale.

Older than Amazon but oft forgotten is that Microsoft Excel was using tabs as the means for navigating worksheets for quite some time.It was the main example of using tabs as a means of organizing separate work environments with minimal relationship within a single window instance. Following on its coat tails rather quickly was Visio (before its acquisition by Microsoft and after).  The assumption by both these applications was that there was no need for scaling up to lots & lots of tabs (just like Amazon).

Other applications like Fireworks and Dreamweaver then by Macromedia started using the tab metaphor to manage multiple canvases within the same windowing environment as well. And around this same time tabs were introduced through Netscape’s Navigator and then Mozilla’s Firefox to the browser world (now a de facto standard of all browsers).

The Challenge

The Mozilla Design Challenge for this summer put forward the following.
First the design challenge question:

Reinventing Tabs in the Browser – How can we create, navigate and manage multiple web sites within the same browser instance?

Then this explanation:
“Tabs worked well on slow machines on a thin Internet, where ten browser sessions were “many browser sessions”. Today, 20+ parallel sessions are quite common; the browser is more of an operating system than a data display application; we use it to manage the web as a shared hard drive. However, if you have more than seven or eight tabs open they become pretty much useless. And tabs don’t work well if you use them with heterogeneous information. They’re a good solution to keep the screen tidy for the moment. And that’s just what they should continue doing.”

And they are correct. Tabs for many users are broken. A quick poll of my class demonstrated that they are indeed not fulfilling the user requirements mostly in terms of scalability, but also not in terms of mapping the need of organizing their browsing experience (as it is done today) compared to that of tomorrow. And this is where it gets interesting. The line “… the browser is more of an operating system than a data display application; …” complicates things tremendously. It implies something greater that needs to be done which contradicts the seemingly limited question of the challenge itself. I don’t say this to be critical, but to guide (and I will not be a judge in this competition) participants that maybe “redesigning tabs” is not really the right question, just like “designing a bridge” is not always the answer to “Design me a bridge”. Sometimes you just need to design the appropriate means of getting from point A to point B across water or air.

Dissecting the metaphor

All metaphors should have a solid analog in the physical or tangible universe and Tabs is clearly in that category. When a metaphor fails, you should go back to its analog. Does it fail in that space? If it does maybe it means the metaphor itself is inappropriate. If it doesn’t, you need to understand what about its physical incarnation gives it advantages over its virtual.

In the case of Tabs there is one piece of the dynamic that must be understood when doing a proper analysis. This is that Tabs in the real world have depth. This means they can scale a lot more than the 2D virtual version.  This depth allows for stacking which means the only limitation becomes not the tabs but the depth of the draw in relation to the thickness of the content being held within the tabs themselves. And before anyone goes out there and build 3D tabs, please realize that 2D UI controls in 3D interfaces are not usable to the mainstream, at least not w/o major advancements in the UI control methods.

My advice

Continue doing three exercises:

1. dissect the existing problems;
2. explore what it means to transition from data delivery system to window of a cloud-based computing architecture;
3. understand not the usability of tabs, but rather the orientation of human needs towards organizing multi-tasking, and cross-referencing.

I hope other smart people will offer their advice for participants in the comments below.

I’d like to close, though, with the first part of Adaptive Path’s Aurora concept browser for inspiration:

This article is written as part of the Mozilla Design Labs Challenge: Summer 09. For this Design Challenge we are focusing on finding creative solutions to the question: “Reinventing Tabs in the Browser – How can we create, navigate and manage multiple web sites within the same browser instance?”