skip to Main Content

I’m often asked about the difference between “design” and “user experience design”. It’s not an easy answer, because we (as designers) have always been taught to consider our audience when designing anything — isn’t that enough? Not really. Considering the user is the first step in providing an experience, but there’s a bit more involved.

Traditionally, we think of design as having two attributes: form and function. Its the “function” that makes it a piece of design and not a piece of art. And for years, functional everyday objects and printed material was good enough. Reading a newspaper, drinking from a coffee cup and finding your way through a building are all functions of design. User experience goes beyond mere function. User experience is about unexpected delight or increased ease or subtle surprise. Perhaps the best illustration of this added level of function came to me when I was eating breakfast at a local diner. I like catsup on my eggs (and I’ve also been known to order French fries instead of home fries, ok?). And one day when I sat down a booth with an empty catsup bottle and was handed another, I discovered that user experience can be learned from two different catsup bottles.

We’ve all seen the classic Heinz catsup bottle — glass with a metal cap. The shape is as iconic as a Coke bottle. And there’s no doubting that for years this bottle kept millions of gallons of catsup fresh for Heinz customers. Adding to the lore of the bottle, I was told as a kid that the secret to getting the catsup out, was to smack the debossed 57 on the neck of the bottle. I felt like I was an insider, afterall some people didn’t even notice the small embossed 57 on the neck of the bottle. Other tips tips for getting the sweet sauce out of the bottle included turning it upside down and shaking it (and getting catsup on everything but the intended target) or putting a butter knife in to get things flowing (and now you have a catsup covered knife).

Well let’s just think about this for a moment — this iconic piece of design has a variety of secrets and rumors regarding the best way to get the contents out. Who is that piece of “great” design serving? I would argue it’s serving only the client, Heinz. It’s recognizable, memorable, useful in that the product doesn’t spoil, but not user friendly. The design is great, but the experience is not. The replacement bottle that I was handed was also from Heinz, but this one was plastic and the most marked difference was the fact that the cap was on the bottom. I’m sure you’ve seen these types of bottles, they use them for shampoo, mayonnaise and catsup among other things. This bottle doesn’t ask the user to fight with gravity to get the contents out, instead it uses gravity. Open the lid and squeeze. That’s it. No secrets. The process, which had been a frustrating one in the past, was now invisible. Breakfast conversation doesn’t have to stop in order to pour catsup.

That’s user experience design. In this second example, the bottle serves both the client and the user. The shape is still distinctive, but what may be lost there is gained by the experience of using the item.

Now imagine this same thinking applied to a Web site, whereas the bottle is the site and the catsup is the content. We’ve all been on web sites where it seems that there’s a secret (that we’re not in on) to finding the content. On other sites, sites that are designed for the user’s experience, the content seems to spill out.

Now I’m sure the question is, “How do I get there with my Web design work?” Of course, it begins with the right thinking behind the information architecture, but the real answer lies in a often hidden step in the Web design process. This step comes after the information architecture phase and prior to the layout phase.

One of the most common mistake designers make when beginning the process of developing the user experience and visual concept for a web site, is they allow themselves to get over influenced by the IA documents, wireframes in particular. This happens because designers often try to use wireframes simply as a “underpainting” that they apply a style too. That, however is not the purpose of wireframes.

The usefulness of a wireframe at this stage of the creative process is not for the layout of a page, instead, a wireframe provides valuable information about functionality and general information hierarchy. IA is not necessarily a “design sketch” phase, but rather a time when a person or team can work out the details of the content and functionality of a site, void of creative decisions that can bog down the process. IA is very often about functionality, and we want to go beyond functional to experiential.



Back To Top