Published: March 2008
Applying the principles of package design to the web
Gerry Gaffney:
This is Gerry Gaffney with the User Experience podcast.
My guest today was previously lead user interface designer of eBay’s platform team and he’s currently the Senior Principal of Product Ideation and Design at Yahoo! and founder of Luke W Interface Designs. He publishes Functioning Form, an on-line publication for interaction designers. He wrote the book Site Seeing: A Visual Approach To Web Usability and he also has a forthcoming book on web forms design. Luke Wroblewski, welcome to the User Experience Podcast.
Luke Wroblewski:
Thank you for having me. It’s a pleasure to be here.
Gerry Gaffney:
Luke, first of all can you tell me when the book on forms design is due out?
Luke:
Yeah, so it is completely written and edited and in the layout stage so we are anticipating late March early April right now.
Gerry Gaffney:
Do you have a title for it?
Luke:
Yeah, Web Form Design: Filling In The Blanks.
Gerry Gaffney:
Now also, before we get into the meat of today’s discussion, you were recently in New Zealand where you had the experience of driving on the wrong side of the road for the first time?
Luke:
Yeah that was fantastic. I actually put 1,400 km on a little Ford Focus in about 3 days and 95 km of that was through winding mountain gravel roads in the North of New Zealand so, pretty unique experience to be sure.
Gerry Gaffney:
And did you learn anything about user interface design from driving on the wrong side of the road?
Luke:
[Laughter] I learned that I kept getting in the wrong side [laughter] of the car. Once I was actually in I was all fine but the habit was very hard to break.
Gerry Gaffney:
Now, recently I had the good fortune to hear you present at a CHISIG Evening here in Melbourne after you presented at the VALA conference and you covered a range of topics, and I wanted to talk to you about a couple of them today in the time that we’ve got. The first of these is your thoughts on packaging design for web site applications. But how can a site be likened to something that has a physical package?
Luke:
I think you have to sort of look at the context of what it takes to create a web service or a web product online now. The barriers to entry are amazingly low so in the US you can basically get web hosting for any sort of medium to you know even higher range web applications for less than a cup of coffee per month, there’s free open source packages out there that can power a good portion of your site and pretty instantly you can have a global audience of over a billion people. So getting something up and in front of folks, a product, a service, a site, an application is really quick and easy to do and what that leads to is that there’s a lot of products out there doing very similar things and the situation that creates is very crowded shelf space. So I think the reason why I gravitated towards packaging design principles was because those guys have been dealing with competing shelf space for years, how do they differentiate their products very quickly, very clearly to the consumers that are let’s say in a grocery store walking down the aisle and they see, you know, 15 different brands of soup. What is it about that that gets them to select one variety of soup over the other? Clearly there has been built up a whole school or discipline around how you create packaging, how you get someone’s attention, how you communicate why one product is different or better or more correct for someone than other products.
I thought that those principles would be more and more relevant to the packaging of content and services. And the other part to that is the things that we are building with these low barriers to entry are a lot more engaging and interactive and stand-alone than the early websites. The early websites were very much about this is what my company is, this is what my product is, but they weren’t products in of themselves. So now we’re creating lots and lots of web applications that are in of themselves services or things to interact with or even sometimes pay for so that’s how I got to thinking about web packaging design for web apps.
Gerry Gaffney:
And did you actually study physical packaging design and the principles of packaging design at that point?
Luke:
Yeah, yeah, I actually did a good amount of research and reading and tried to understand what are packaging designers thinking about, how are they approaching the problem, what are the things they strive for and all that, and codified that down to some things that I pretty strong parallels with the web application world.
Gerry Gaffney:
Of the three components you mentioned in packaging design the first one was “Meaningful Shouting” and I guess it’s reasonable to say that’s about strong branding and differentiation. It was the next two that I found particularly intriguing and the first one you refer to as “Back of Pack”. What’s that all about in the web environment?
Luke:
Maybe it becomes a little clearer if I think about it first from the packaging environment. There, what they talk about, the back of the package is… I guess what that’s short for, they explain it as it really needs to support that central story that you were just messaging. So it’s responsible for outlining, say, the benefits of owning this product or using this product. It may have some abbreviated instructions or it may outline particular features of the product.
The back in physical packaging design is really important because a lot of our retail worlds are self service meaning there’s no one around to explain to you what this product does so you’re kind of on your own and it’s especially true online.
In the web, there definitely is no-one there to help you and so you’re on your own to figure out what this web service or what this web application does and why would it actually be useful to you. So there’s, if you look at the data, and I don’t have the full context of how this comes out, but if you look generally at how often people visit websites and how many pages they tend to visit per session and you know how often they go online, the thing that it boils down to is you basically have 1.6 seconds one time per month with each potential customer to explain what you’re doing and why it matters to them. So there’s not a lot of time to explain the differences between what you’re doing, why there’s benefits to people in that space, what the features actually are of your product. So hence the term to “Back of Pack” within the web world, right? In this self-service web world it’s important to support the central story to outline features and benefits and do that in a way that takes advantage of the web as a medium. So in the physical world you can’t drop a quick video clip onto a product, at least not yet, you can’t really open up the product and show people portions of it and let them play with it, at least not yet you can’t do that yet in the physical world. In the online world you can do all that and more. So there’s a really big opportunity for this back of packaging to explain to people why this story actually matters to them, what the benefits are to using a particular service or application.
Gerry Gaffney:
Is there a corollary for where on a website that additional stuff would typically be?
Luke:
Yeah, so for me, the best way to do it is actually in the context of the product. So when I talk about this, I show some examples of how some sites basically create a page that lists out the features in a bullet, and you know, that’s ok, that’s kind of the equivalent of what happens in a physical store, you take the package and you flip it over. Other sites will do a little video tutorial and have some sort of link there and then you can engage in it in that way. But other ones… are the ones that actually engage you with the product as they’re explaining what it does. So they’ll do callouts within the actual UI, that’ll give you a list of benefits to it and then you can sort of either step through that almost in kind of in kind of a wizard flow, or start interacting with it in a little bit of a trial mode, and during the trial mode certain features and benefits are called out to you.
So I think the strongest way to do this is to actually get people or simulate using the product so people learn it, this is what I’m talking about, right, by actually opening up the box and playing with what’s inside, that tends to be the most engaging and I’ve seen a lot of information and I can’t share the particulars of it but when people interact with that type of experience the percent of engagement that they have subsequently with the product is substantially higher. So through that process you’re creating a customer that is likely to stick around more, come back more, you know, and become more, I guess, I don’t want to say devoted but more dedicated to the product itself.
Gerry Gaffney:
And I guess you’ve pretty much segued there into the third component of the packaging design thing… we had “Meaningingful Shouting”, then we had “Back of Pack” and the third one was the “Unpacking Experience”. Can you talk a little bit about that?
Luke:
Yeah, where the “Back of Pack” outlines the features in a pretty concise and succinct manner to get you interested in engaging, the “Unpackaging Experience” is literally the process of becoming a customer, becoming a user of a service or an application. Traditionally, the way this works is you come to a website and there’s a button that says “Sign Up” or “Join Now”. You click on it, you get a form, you fill in your email, you fill in your name, you fill in your address, your birthday or whatever and then you become registered and you’re sort of dropped off on a particular page.
What the unpackaging experience allows you to do is actually as you become a customer or user of the product you literally unpack it in steps, right, so you don’t get this roadblock of a form. An example I tend to use a lot is a online video editing site called Jumpcut. So Jumpcut is a place where you can edit and remix and sort of do video manipulation on the web. Their primary called action is “Make a Movie”. You click on “Make a Movie”, it asks you to give a title, grab some media from your computer and it literally drops you into the core purpose of Jumpcut which is their editor. It kind of walks through how you can pick a style, how you can add additional media to it and so on and so forth. So right out the gates you’re doing what the product is intended to do, to allow you to make movies and edit them and share them.
Gerry Gaffney:
A lot of the examples that you show are you know you’re showing screen grabs of things running in Firefox or IE or whatever but I mean most of the things you’re talking about could apply across the board?
Luke:
Across different devices, for sure. One of the general principles underlying the web, and there’s sort of been this tension for a long time between rich and reach. So if you create a really bare bones text only application your reach is very, very wide. You can basically be displayed on any application you want right, or any device you want. The more rich interactivity and function you add to it the less you are able to reach that broader of an audience, you no longer show up on phone devices, you don’t have interactivity unless somebody has like the latest Flash plugin or something like that. As we’ve progressed forward I think the opportunity to have richer experiences across a whole slew of devices has increased and now you know you’re seeing things like the iPhone where you can get a pretty rich web experience just about anywhere you are. I think we’ll kind of keep progressing in that direction so the things that make the web great in general will make it to lots of different places.
Gerry Gaffney:
Now you use the example of the iPhone there and when you speak on this topic you use I think the MacBook as an example of a good “Unpacking Experience”. What’s so good about the way Apple package their products, their physical products?
Luke:
I think they just take the time to do it well right. They don’t basically just drop everything inside a plastic shell and ask you to go find some scissors through which you cut through the plastic you might actually scratch up your fingers and you try and pull this thing out of this casing.
Instead the detail that you find in the product is reflected in the actual packaging so I think in the MacBook there’s a really slick kind of Styrofoam area that basically is fitted to fit your fingers so you can drop your fingers into the hole and just lift it up. Whereas you know somebody else might just cut corners and just put a big slab of Styrofoam to protect the computer in there and you have to, you know, dig this thing out through the corners, maybe you actually have to get like a knife to prop it up on the side or it’s stuck together with tape or something like that. You know, they’ve thought through how somebody would actually remove that piece of Styrofoam and made that part of the experience. The culminating moment of the MacBook Pro is they’ve got a built in camera and when you fire it up it shows a picture of you through that camera on the screen it says hey do you want to use this for your account, I mean that’s a very personal engaging moment that just sort of seals the deal and says OK, this computer is mine and you kind of go from there.
Gerry Gaffney:
Now another thing I particularly liked in your presentation was the simplicity of one of the models that you showed which is “Content, Context and Related”. Can you talk to us a little bit about that please?
Luke:
What I was talking about there was that content in general, and this goes back to what we were talking about before, on today’s web if you want to call it 2.0 or whatever you want to call it, is really redistributed and broadcast in lots of different experiences. So anybody that publishes let’s say an article or a video or an image, that piece of content can make its way into a lot of different environments and be interacting with people there. So for example it can be dropped into some sort of content aggregator like a social bookmarking service or a news service, it can be dropped into somebody’s profile or shared with somebody’s social network, it can be sent through communication channels, there’s lots of different ways by which this bit of content is distributed, remixed and encountered online. So the principle you’re talking to is, well, what happens when somebody encounters that out of context, and they choose to go and get more, right? So I publish an article, somebody blogs about it on their site but they only include a few lines or a paragraph, “Hey there’s a great article over here, check it out”, people are coming from one particular context, somebody else’s blog to this totally different environment and the problem you tend to see is a lot of those follow-on landing page experiences, what happens when you actually say oh that’s interesting, you click through to it, those things are optimised for the whole site they exist in, so you get like this really long navigation on the left, on the top and then you have all these things promoting different things on the site that may or may not, usually are not, related to the reason that person clicked on the link in the first place.
So if you focus on that situation, or someone says I’m interested in this and they click on it, that framework becomes really important because your primary objective then is to meet the expectations of that person coming to your product, which is the content. So devoting the bulk of the experience you give people to the content they expect. Then the additional thing you can do is actually give people a series of related information. We’ve seen a number of studies that when you meet that expectation of “I want to get this article, I want to see this particular thing”, and then you offer up something that’s very related to it, the chances of people engaging with that are significantly higher then they are with somebody you know, choosing to click on an arbitrary link in a navigation and click on something that’s totally unrelated.
So if you distil down the rest of the page to just what’s related and then maybe just provide a little bit of context about where you are and what you can find here you know, kind of just the minimum amount necessary is what I try to do, that creates a great follow-on experience for this content which lives everywhere on the web. So you encounter something, you click on it because you’re interested and you get this landing page which is 90% about what you expected to find, the content you wanted, it’s maybe 10% or so about some things that are related to that content and the minimum amount left, maybe 1 or 2% or whatever, is about setting context about where you are and what you can do there.
Gerry Gaffney:
Tell me, Luke, do you have any advice for designers moving from the old web to the so-called web 2.0. You know as they’re faced with both I guess the ability to build richer online applications and devices, and also perhaps the requirement to build richer online applications and devices.
Luke:
Yes, I think we talked to a few of them. One was applying those principles of packaging design to account for the fact that lots of people are building these richer online applications and devices. The second one was just being aware of the situation under which people are encountering portions of your online content and presence and services, right? They’re being redistributed and surfaced in all sorts of meaningful ways so knowing enough about that, that when people come to your site or your experience, they’re getting something that matches what they had before, there’s no follow through and you can engage them in a way that’s relevant to them at that point of time and what they’re trying to achieve.
In terms of the actual rich applications the two things I tend to point people towards when building out rich applications is considering the different states of interactions. People aren’t expecting a lot of these dynamic interactions out of web pages, like things like drag and drop, or inline editing and what have you. So you really need to focus on three stages of an interaction. The invitation, which really lets people know that there’s this rich interaction there they can do something with it, the transition which is once they choose to engage with that, showing them that things are in progress, things are happening, things are changing. Generally people in the web quote/unquote “1.0″ are waiting for the page to reload, so page blanks out, something happens and then a new page comes in. So illustrating the transitions with these rich interactions becomes pretty meaningful. And then last but not least is actually showing people what happened as a result of that manipulation or that transition. So giving them some feedback about this was successful, this was not successful, and so on. Because these rich interactions get pretty nuanced in terms of timing and detail and all these different states there’s really a good opportunity to leverage a lot of the best practices and design patterns that have been written about online. There’s a huge slew of design pattern libraries. There’s the Yahoo! user interface library, there’s Jenifer Tidwell’s Designing Interfaces, there’s Martijn van Welie’s web design patterns. So there’s a whole bunch of places where you can see these things sort of documented, quantified and explained in a way that allows you to make use of them.
Gerry Gaffney:
It’s interesting when you’re talking about you know your content being clipped or being presented in other contexts then when you designed it for. When I talked to Ken Carroll [MP3, 8.44MB) at ChinesePod a few, well about a year ago now he was saying they just accepted the fact that all of their MP3s, their lessons were going to be just out there in the public domain and they were going to be clipped and copied and shared and so on and they had to concentrate on what he calls the "edge competencies".
Luke:
Yeah, I think accepting that it's going on is step 1. I actually don't think of it as a problem though, right? There's some old movie with Peter Sellers, the subtitle for Dr Strangelove is "How I learned to stop worrying and love the bomb".
Gerry Gaffney:
Yes. [Laughter]
Luke:
And when you reach that stage and you actually start really utilising the benefits of that and seeing it as an advantage and seeing it as something that’s more of an opportunity then a limitation. So yeah, I fully agree.
Gerry Gaffney:
Finally, tell me did you come across any more nice beers when you were in New Zealand?
Luke:
You know there was a pretty decent beer called a Toohey. It was a nice pale ale, so that was pretty good. There was also Mac’s, a local brewery out in Wellington that had some pretty fine ales, so…
Gerry Gaffney:
It was a worthwhile trip then?
Luke:
Yeah [laughs]. Between driving on the wrong side of the road and a few beers here and there it was very nice.
Gerry Gaffney:
OK well Luke Wroblewski, thanks very much for joining me today on the user experience podcast.
Luke:
No problem, a pleasure.
Published: March 2008
We make verbatim transcripts of the User Experience podcast. We then edit the transcripts to remove speech-specific elements that interfere with meaning in print (primarily space-fillers such as “you know…”, “um…”).