Be Careful What you Put in a Template

Seth says:

“I’m going to go out on a limb and beg you not to create an original design. There are more than a billion pages on the web. Surely there’s one that you can start with? If your organization can’t find a website that you all agree can serve as a model, you need to stop right now and find a new job.

Not a site to rip-off, but an inspiration. Fonts and colors and layout. The line spacing. The interactions. Why not? Your car isn’t unique, and your house might not be either. If you’ve got a site that sells 42 kinds of wrapping paper, why not start by finding a successful site that sells… I don’t know, shoes or yo-yo’s… something that both appeals to your target audience and has been tested and tweaked and works. No, don’t pick a competitor. That will get you busted. Pick a reasonably small but successful site in a totally different line of work. Say to your designer: “That’s our starting point. Don’t change any important design element without asking me first. Now, pull in our products, our logo and our company color scheme and let’s take a look at it.”

There are two elements at play here. One is the look and feel of a web site, the font choice, colors, and *general* layout scheme. Bringing these together into code and applying them consistently across a site is often called applying a “design template”. After building dozens and dozens of these, I’m very familiar with the standard practice: place the logo in the top left, horizontal nav across the top, sub menu on the right, etc.

Template reliance only goes so far

However, it’s dangerous to go any further than that. Where Seth went, including “the interactions” and “pulling in our products”, is darn risky territory. Anything beyond the most general look and feel (anything except the periphery of the page) gets into the specifics of interaction, and you cannot borrow this from another site if you want to be successful!

Be very careful when borrowing interactions unless you know they work and are doing the EXACT same thing you’re trying to do. If they’re in a different sequence, in a different context, you just can’t be sure. I’m very skeptical of the idea that you can take interactions that sell yo-yos and then turn around and use them to sell wrapping paper!

We learned this lesson in a big e-commerce study at UIE a few years ago. We were testing e-commerce sites selling all sorts of digital electronics: digital cameras, televisions, ipods, laptops, etc. We tested each of 14 sites on how well they sold items that people were looking for. We didn’t expect to see a big difference between products…in fact we only had people buying a bunch of different products because the organization of our client was set up that way and we let people choose what they wanted to buy. We didn’t go into the study really caring if they were buying a TV or an ipod.

But one thing that became very clear through testing was that shopping for each kind of product is a completely different activity. One person can buy an ipod in 5 minutes and spend the next 45 mulling over, exploring, and comparing TVs. Each product search was a completely different journey with a completely different set of variables and interactions.

I think there is a good reason why this is the case.

Lewin’s equation

Lewin’s Equation is a foundation of social psychology. It’s a simple equation, but it sums up a complicated process quite well.

B=ƒ(P,E)

It says that an individual’s behavior is a function of their personality and their environment. Let’s look at what it might mean in terms of shopping for an ipod and a TV.

It is likely that when a person goes shopping for an ipod they have some prior knowledge of it (unless it is an impulse buy). This knowledge would fall under their personality. (our personalities are made up of our habits, experience, knowledge, and everything that goes with us through our world). They might know that its made by Apple and holds all the music they want.

The TV is another story. They might know they want a TV, probably a little bigger than one they had in the past. Maybe they want an HD TV. But as far as any other features, or types of HD, plasma or LCD, or black comb filter or not, or wall-mountable or not, they simply have no clue. They don’t know about most of the features of TVs…they simply want to see the sweat on David Ortiz’ brow during a Red Sox game.

So, at the very least the interface needs to describe the salient attributes of each product type. The interfaces for these are necessarily different.

But the 2nd half of the equation is even more interesting. That’s the environment. What is the environment? On the Web the environment is the interface itself. The interface not only helps the person find what they’re looking for, but, according to Lewin’s Equation, it changes their behavior. That’s the big insight. An interface changes the behavior of people. It’s easy to see how this happens, as when we’re shopping online the interface is our only connection to anything. It’s the only way we search, browse, investigate, compare, or do anything related to the items at hand. If it doesn’t exist in the interface, it doesn’t exist.

So, the environment which designers create matters a lot. This is obviously the case in an electronics store. The displays for ipods are completely different than the displays for TVs. At the local Circuit City, for example, the TVs take up a huge amount of space, and they even have a nice setup where they’ve replicated an entire living room so you can sit down and take it all in. The designers of this setup know that this makes a difference in you purchasing behavior. But the same setup doesn’t make sense for other products. For other products there is no such environment.

The challenge for big sites

Big sites with multiple product lines like Amazon deal with this all the time. They’re selling a myriad of different products through nearly the same interface. Their product pages are optimized for books, but they’re selling TVs through the same setup. But what’s important about TVs is different than what is important about books. The interaction has to be remade to make what’s most important the most visible, most salient thing the shopper sees.

To be fair, Amazon realizes this to some extent. Their “Search inside a book” feature doesn’t make sense for other products. You can’t search inside a TV. But the question is: what should the interface on a TV page look like, if not “Search inside a book”? What about a remote control interface, where you actually use the remote control of the TV and see if you like it? Would that make a difference come purchase time? Or how about a high-res picture of the actual screen? A picture of the back of the TV? What it looks like hung on the wall? Could that be added to the interaction?

But what Amazon has ended up with is a mediocre experience for selling electronics. Our study showed they were in the middle of the pack compared with their competitors like Best Buy, Circuit City, and Dell. The big differentiator between any sites was along product lines. Sites were good at selling one type of product, but bad at selling other types. That’s one of the biggest insights we got from the project. (Another big insight was the power of social influence on people’s purchase activities. The number of people recommending Canon cameras to their friends, for example, was incredible. It defined their behavior on the site.)

One browser, many interfaces

At some point when we translated shopping experiences to the Web we assumed that Web environments, since they are throttled through a single conduit called the browser, could all be the same. We assumed the interfaces for each kind of product could be built using the same template. In a general sense, this is possible.

But when you start getting to the product level, you get into trouble. This is what Seth is advocating, if I understand him correctly, when he says “pull in our products”. But picking a site in “a totally different kind of work” is akin trying to sell TVs the same way you sell books. It’s possible, but it’s not going to get you the results you’re hoping for.