Now, these are often implemented with a checkbox that says something like “I have read and agree to the terms and conditions.” Most of us know that hardly anybody reads and everybody just checks off the box. (Once, I watched my dad, a lawyer, check the box without reading. “It’s probably unenforceable,” he told me.)

But on this new Amex site, there’s a different implementation of this control. Sure, there’s a checkbox, but it’s grayed out. The only way to enable it for checking is to scroll to the bottom of the agreement.

The Amex Biz Travel site greys out the checkbox until the user scrolls to the bottom.

Now, as is also standard, the agreement is presented in a tiny little scrolling text box that shows about 200 words at a time. And, as is also standard, the agreement is a whopping 7,243 words (13 pages in a standard document) long.

Therefore, scrolling through this box takes a fair amount of effort. It’s unlikely that scrolling will encourage anyone to read the document. It’s just an extra hoop to jump through to continue the farce of pretending that the user has “read” whatever it is their agreeing to.

Apparently, the lawyers at Amex think that by having me scroll to the bottom, they can claim that I had every opportunity to read and agree to the terms. Therefore, if there’s something down the road I want to sue them about, I gave up that right with my scrolling action. (It’s unlikely any sensible judge will buy this argument, but it’s just as unlikely that any suit against them will get in front of a judge.)

Of course, the best way to do this would be to be honest with your users and treat them with respect. Amex could write the terms in simple language and give users a chance to really understand what they are agreeing to.

The problem with a design solution like the “scroll to agree” implementation is that it won’t be good enough. What happens when some other lawyer at Amex (or whereever) discovers that users don’t read it when they scroll to the bottom and therefore don’t understand what they are agreeing to? They’ll put in some other ridiculous control, where you’ll have to enter a secret code or recite poetry or something.

At some point, we, as designers, have to stand up and say, “This isn’t really doing what you think it’s doing. It’s just making our relationship with our users worse.” When do we do that?

I’d like to start now.

We’re celebrating this year’s User Interface 16 Conference’s fantastic program by giving everyone access to last year’s great show. The recordings and slide decks contain these great topics:

• Engaging team members in the design process
• Developing a content strategy
• Designing for mobile
• Evangelizing design within the corporate culture
• Understanding styles of decision making
• Incorporating testing and prototyping
• Making successful personas
• Evolving design ideas
• Creating a UX library

You’ll hear from these top UX experts: Luke Wroblewski, Kristina Halvorson, Nathan Curtis, Dan Rubin, Leah Buley, Dave Gray, Kim Goodwin, Tamara Adlin, and Jared Spool.

How to get the free recordings?

It’s easy. Just sign up by October 13, 11:59 PM ET and you’ll get last year’s UI15 talks and materials for free. No tricks, no gimmicks. We’ll send you an email with details on how to access this bundle of goodness.

Now hurry and get last year’s UI15 recordings before October 13, 11:59 pm ET.

As we use a multitude of devices to access the same content, we expect a similar experience across platforms. If you have a great user experience on the desktop, it would be easy to rationalize that your mobile experience, for example, shouldn’t be painful. User experience professionals now need to consider how and where their applications and content are being accessed more than ever before.

Bill Scott knows this. Bill is the Director of UI Engineering at Netflix. Users can access Netflix on TVs, mobile devices, tablets, not to mention on the desktop. Bill believes that it’s not just the devices themselves, but also the context in which they are used that designers need to keep in mind. Developing rich interactions across all of these platforms can be a daunting task. Employing design patterns can help ensure that your users have a great experience wherever they use your product. Patterns develop a common vocabulary and create a shared understanding amongst the team.

Bill will be sharing more of his thoughts as well as examples of some patterns that work well, and some that don’t work so well, in his full-day workshop at the User Interface 16 Conference in Boston, November 7-9. Bill’s is only one of seven workshops at the conference. For more details visit UIconf.com.

Here’s an excerpt from the podcast.

“…It’s really about that shared understanding concept, where engineers have a shared understanding of business and design, and designers have the other two and et cetera. And marketing, you know, even educating them on what developers go through and what their process is at a very high level, gets everybody in the same ballpark where they really understand each other and get a sense for what’s hard, what’s easy, get a sense for the time crunch, get a sense for all those sort of things.

It sounds pretty touchy-feely, but I like the term “shared understanding.” I think that sort of captures the essence of it. You could put as much process or as little process to shared understanding. It could be very detailed wire-frames, or it could be just a hallway conversation, depending on what is needed for that organization in that context…”

Listen to the podcast to hear Bill address these points:

• Are design patterns about establishing a vocabulary?
• Is there any truth to the idea that patterns stifle innovation?
• Are patterns used more to lay out a path than to declare “absolute rules of engagement”?
• Do you ever push something out that is less than optimal and rework from there?
• How do you ensure that what you hand over gets implemented as you intend it to?
• Do you employ “hack days” to generate new ideas?

Do you use design patterns? Share your thoughts with us in our comments section.

Recorded: August, 2011
[ Subscribe to our podcast via ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]

Full Transcript.

Jared Spool: Welcome, once again, everybody to our current episode of the SpoolCast. I have with me today the wonderful Bill Scott, Director of UI Engineering at Netflix. And he’s going to be speaking at our User Interface 16 Conference on Monday, November 7th. The conference itself goes from Monday to Wednesday, November 9th, but he’ll be speaking in a full-day workshop on designing rich, interactive experiences, and that’s what we’re going to talk about today.

Bill, welcome.

Bill Scott: Hey, I’m glad to be here.

Jared: I’m glad to have you here. So, let’s just start talking here. I’ve known you for a really long time. You and I go way back. You were at Yahoo and before that at Sabre, and you’ve sort of always been in the center of what’s been happening in terms of this rich interaction stuff. Really bringing out over the web and through devices the ability to control and give access to data through all sorts of gestures beyond just a simple click of a button or a link.

How did you come to pick all that stuff up? What was your journey like?

Bill: I think my start, just to real quick go way back, was running one of the first games for the Macintosh actually, a game called GATO Submarine Simulation.

Jared: Oh yeah!

Bill: That was in 1985… early ’85, late ’84. And it was this whole thing of, we’ve got this new world with a mouse, with menus and icons, and how do you actually design a game? We didn’t actually have any examples in front of us, but we just thought we’d take the best of what was in that world and meld it into a video game.

And you know, I feel like we were pretty successful. That game was actually a best seller, number one on the best selling list for a while and at least the top ten the first year or two. Not a lot of sales compared to today’s market, but a lot for back then.

That really got me hooked on the power of — for example, we could add a mission editor for the submarines, right, and that wasn’t in part of the original spec. We just added that because we thought, well, with drag and drop and stuff you could create your own islands. You could create your own paths for the bad guys to come, and you know we added path editors and such like that. It was just so much easier to do with the mouse and everything. That sort of got me hooked.

And then, over time, I was always designing and developing together, because in the late 80s and early 80s and early 90s, there weren’t really that many disciplines that were pure user experience. You had to be in HCI or something like that. So it was always very pragmatic and always kind of tried to understand what were these emerging patterns? What could you do with technology, because there was always kind of a limit to what you could do.

That just kind of evolved over time into thinking about patterns. I remember discovering Christopher Alexander’s book on design patterns, and then finding some of Jenifer Tidwell’s work on cataloguing patterns for rich experiences, you know, for the desktop. That got me thinking.

Then as I moved to the web, I immediately went back to sticks and mud, because there was no way to do anything. You had that horrible request/response cycle, and you couldn’t do anything without refreshing the page. So we immediately started using some of the stuff in IE to get around that. This is early 2000, 2001, whatever. And then we finally, when Ajax came on the scene, when Google Maps came out, it really became possible.

So, at Sabre we were building a rich library, an Ajax library that would allow normal developers you know, that weren’t UI developers to actually create pretty good experiences without having to think too much about it. And so it behooved us to catalogue those patterns, and so we started documenting those and we started building a JavaScript library that we could release to the public, which was a slice of what we were doing at Sabre. That became Rico, which was one of the early Ajax libraries.

And in that we just saw the melding of showing examples of patterns as well as implementing those patterns. Because design patterns were a good way to bridge the gap, really, between design and engineering, because it creates a vocabulary. It names things that are hard to describe otherwise, instead of saying, “Well, you can take you mouse and you can click something.”

Of course, we have drag and drop, and we can say that in shorthand. That was a very early form of that in the early 80s. But as you go forward, things you know, page slides and hovers, accordions, and all those sort of things like that, and when are they good and when are they bad. I have sort of this reductionist mindset anyway, where I try to reduce things to simplicity. Maybe that comes from a software background, too, but I felt it played real well with the patterns.

Then, when I came to Yahoo and joined there as the Ajax evangelist, the Yahoo pattern library had already been started by Erin Malone and Matt Laycock. They had done a great job, but most of the patterns were really of the older school because this had just started emerging.

So I just started writing patterns for that pattern library. I had about 50 or 60 I added that were new, that were rich, and I started just cataloguing like crazy. At that time, in 2005, at Yahoo we were just starting to experiment with Ajax and get really into it and what could you do with the web, and it just led to more and more cataloguing.

Then, because I had actually written most of the patterns in the library, or at least half of them, I said to Erin Malone that, “Well, maybe I should, in addition to my other job, just take over the pattern library” since Matt was moving to something else. And so I did, and then we launched it as a public pattern library and got a lot of great feedback from what we put out.

And that just kind of kept me going down that path of doing that. But I’ve always felt like patterns were really about being able to take something and boil it down into just a few words so that I didn’t have to explain it over and over again, and you could just make it part of your toolbox.

Jared: Well, and this is interesting to me, because I was just discussing with somebody this week that I thought that a big piece of the value that comes from patterns just comes in establishing the language, the vocabulary. The sort of discussion of, what is it we’re trying to do, and what is that subtlety and nuance? And the more complicated these devices get, the more that subtlety and nuance happens.

Do you think that design patterns are really about that vocabulary creation, or is there another value that comes out of them that I’m missing?

Bill: No, that’s exactly right. And when we released the Yahoo design pattern library, you know, it wasn’t about, “Oh, hey, this is the only way to do it.” It was more about, “This is what we’re discovering. Let’s start a dialogue about this.”

There are people out there who are very, very semantic about the way they define patterns and go about and document those patterns. I appreciate those folks. I’m not one of those folks, because it’s like getting too far in the meta where you’re straining in a nat. And the reality, people just need examples. And I felt like that was actually the biggest contribution I was making was just collecting lots and lots of examples and putting those in the screen casts so that people could see those and associate those with an idea.

And then, once you have that picture there, that vocabulary, something somebody can see, you can talk about the nuance of it. You can talk about, well, why does it work in this situation and not this other situation? Because design is all about that nuance and the context.

And just exposing people that haven’t been through the design-thinking process, that maybe come from another background, there’s some very objective things but there’s also a subjective piece to it. The objective part is these patterns, but the subjective is how you apply them. And I think that helps a lot of people who especially don’t come from a design background. I think it helps people with a design background, too, but I know that what I’ve shared a lot seems to resonate especially with developers.

Jared: One of the things that came up in this conversation that I was having was that one of the folks felt that they’d seen design patterns used as a way to sort of stifle innovation. I’ve never seen it that way. His thinking was that the organizations that were using these patterns were being so rigorous about documenting and enforcing the patterns, more in a style-guide notion, that people couldn’t do things that made sense to do that fell outside of the patterns.

Whereas, when I’ve seen them used, they get used in less of an enforcement mode and more of a, “Here are what your options could be, and here’s the language you use to describe it. And if you come up with something better, that’s great. Just document it and add it back into the library.”

Bill: My hunch is that there definitely are groups like that, just like any bureaucracy. You have the police mindset, and you have the “I’m here to assist” mindset. When they become a resource, they’re good. When they become a stifling set of rules that have lost their context, right? That’s the whole thing. And you can’t crystallize these things. You can’t define every nuance and every context in those patterns. They get way too unwieldy.

I do know, in chatting with a few people, I’ve seen people try to go down that path, and I’ve tried to encourage them: “Don’t get hung up on the enforcement side of it. Really get excited about assisting and helping the teams and providing them with lots of resources and a common vocabulary. If you did just that, you would be successful.” But some people start to feel like they get measured by–they’re a central group in an organization. I was talking to a company a few months ago that’ll remain unnamed. A large social network. But anyway.

Jared: [laughs]

Bill: Anyway, I won’t go any further. Because there’s several of those, so I can leave it like that.

The people in the group were not of the ilk to do that, but I think they were feeling pressure that, well, shouldn’t they be getting more adoption? They were asking, “When you were at Yahoo, what was the adoption rate?” I said, “Not really that great, with our central guidelines and our central practices, but everybody grabbed the patterns idea and took it from a vocabulary perspective. So…”

Jared: Yeah, I mean, do you think that it’s really about making the designer and the teams that they work in a bit smarter and a bit more savvy, in terms of being able to talk about what they’re trying to do and sort of laying out a path that is proven, more than it’s about declaring what the absolute rules of engagement are?

Bill: That’s right. Yeah. Whenever you have groups that are seeking the best idea, the best solution, things work well. When people put some kind of stake in the ground, well, it’s like our political system today, right? You’ve got the two parties. It’s almost that same sort of mindset, where it’s no longer about solving problems; it’s about posturing and position. And I hate it. When the patterns come that way, I get very uninterested.

At Yahoo, we had a user group that I set up for pattern authors to join and I quickly lost interest in that mail list because there were these endless discussions about what was the canonical pattern, a pattern for a pattern.

Jared: [laughs] Oh God, that sounds miserable. [laughs]

Bill: And arguments about what kind of examples should you have, and whether they were four sections you should have versus eight sections. I don’t care. At the end of the day, the business has got to be successful, and design and engineering’s about bringing something to life.

Jared: Customers are not going to get excited because you’ve defined your patterns rigorously.

Bill: It reminds me of, this is back in the software world. I worked with a very bright engineer who had gotten the Gang of Four book, “Design Patterns for Software,” which was the first, really, application of Christopher Alexander’s patterns into the field of technology, and it’s a great, classic book. This was back in about, oh, probably ’94, ’93, something like that.

And one day he came around the corner and he had this big smile on his face, and he had the book in his hand and he was shaking it back and forth, and he says, “I did it!” I said, [laughs] “What did you do?” And he goes, “I’ve implemented all the patterns in this book in our software.” [laughs]

And a few years later, I’d left that company and I came back–actually, it was Sabre–and I came back, and through a quirk of a bunch of funding changes, for a while I ended up taking over his code, and was not a happy person, because that did not make better software, just applying [laughs] all the patterns blindly. So, same thing with design.

Jared: Yep. So, to sort of change directions here for a second, the work you’re doing at Netflix now, you’re involved in a lot of the day-to-day production of what goes out on the Netflix site, right?

Bill: That’s right, yeah. My job right now is much more focused. On purpose, I took a more focused role around acquisition. I hadn’t worked in that area before with marketing. And so it’s really around the sign-up flow and it’s around account services, probably what, in some ways, is seen as the less sexy stuff. I was involved with the member side for a good, long while, and still am tangentially.

But I just find it kind of fascinating to see just how fickle–that’s maybe one way to put it–the whole acquisition and conversion channel is. So it’s been an interesting education in that.

Jared: By acquisition and conversion, we’re talking about getting new people to realize that Netflix exists and then converting them into customers. And you guys have been moving into new countries, too, right?

Bill: That’s right. We’ve announced that we’re going into 43 countries in Latin America, and that will be in the not-too-distant future we will be launching that.

Jared: So there’s lots of new customers to acquire.

Bill: That’s right, and they’re different. They don’t have the same bandwidth. They don’t have the same movie watching habits, TV habits. They don’t have the same devices. They don’t have the same kind of payment methods. There’s a whole bunch of things that vary. Cultural differences, how you state things, you know all those sort of things come into play.

Jared: So now, what are you learning in terms of the rich interaction stuff that you can draw on to use in this new role that you’re focused on over there at Netflix?

Bill: Well, one thing we tried… And it’s interesting. This is a good example of where, even though you can do something, it may not be the thing that really works. So I’ll give more of a counter example I guess.

One of the things we experimented with was a single-page sign-up. So that, you just come to the page itself and you know, you do everything in one page and you’re signed up, that’s it. We’ve seen success around that with hotels and other things that have gone to a very simple flow like that.

The thing is, when we did that we actually saw a drop in acquisition, and our theory on that is because people need that second screen. They get the first screen, they put their email and a password in, and they need the second screen to really digest the whole payment area. And then, once they’ve done the payment they’re done. We’ve simplified the flow down to just the two steps and the confirmation.

But to get to that one step, we’re not there yet, and we’ve tried a few things. I think people need that break, go to the next page, digest the payment, feel comfortable that, this next step I’m going to actually be paying and not doing it in a one-step process.

So, even though we were doing a rich experience there, it ended up not actually working. We’ll definitely revisit it again with some different approaches.

Jared: Yeah, I mean, by bumping into these things you get a chance to learn what works better going forward. How do you get everybody involved in understanding what the goals are so you don’t push something out that is less than optimal? Or, do you push stuff out that’s less than optimal and then you just sort of regroup and figure it out?

Bill: Oh, yeah. That’s one of the mantras here is to fail often and fail fast. Everything you try is an experiment. A lot of times you don’t have full confidence. You have misgivings about some of the stuff you’re going to try. But you know you have enough volume that with customers, especially around the acquisition channel, you’ve got some pretty clear metrics about success or failure.

It doesn’t mean that, for example, that one-page sign-up would never work. We just may not have hit on the right way to do it yet, right? So you can’t throw out the whole concept. You can only say, “Well, with these particular tests it didn’t work.”

So what we do though is, you know marketing does a good job they’re, in essence, like our product managers providing us with a business context. And Netflix as a whole, there’s not any business information that’s not shared all the way down. It’s not just limited at the director level; it goes all the way down to employees.

So, everybody’s kept up to date on all the strategies and purposes and what we’re doing. There’s nothing hidden from the employees, which I think is really good. A lot of organizations don’t understand why the decisions are being made, and we have a very open culture about that. I think that kind of starts right at the top.

And then the business ideas are there, and then design and engineering understand that early. And then, in the process of, you know, raising issues and having conversations, it’s not like one team is just dictating and somebody goes off in a corner and implements without any knowledge. I’ve seen that happen in the past too many times, but we don’t do that.

Jared: Right. How do you make sure that when you’re designing something up and you’re handing it over to the folks who are going to implement this thing that … I guess there are two issues, right? One is, is that what you’re asking can be implemented, and second, that they get it enough that they can go off and do it the way you intend it to be happening?

Bill: Well, some of the things we’ve done in the past that have worked really well in that is, for a while to get everybody on the same page, we started having round tables where we get design and engineering together and have conversations.

Because design may put together their Photoshop assets in such a way that it actually causes a lot more work on the developers. And also, developers maybe have ideas or techniques that the design team doesn’t know about that are possible that are actually pretty easy to do that they could make part of their bag of tricks.

So, having an open forum that design and engineering can get together pretty informally, and not driven from top down but more bottom up. Anybody in the team can bring up a topic and make that the topic, or several topics, for the conversation. What that does is it gets vocabulary out in the open.

I remember the member design team. Some of the people in the member design team like to use the term “lockup,” because they came from an advertising background, describing the area where you have a box shot of the movie with the rating and whatever else goes around the particular movie title.

They call that a lockup, and half the developers didn’t know what the heck a lockup was, and once that was explained with the background … That came out through the round tables. I don’t think it would have ever come out and disseminated in normal hallway conversations or anyone would have sent an email about it.

It’s putting people together. It sounds pretty simple, but actually it’s one of those things we forget. It’s sort of like, how do you understand users? Well, you get with users, right? Obviously there’s more to it than that, but often those very, very simple things don’t happen.

So like, for example, the brand marketing design team, I’ve spent time with them. I did an HTML5 presentation, CSS3, et cetera and walked them through what is possible first on WebKit, because our TVs and our devices, our new devices that we’re going onto, most of them support WebKits, so we have all the capability of WebKit for those.

And then for the website, you know, what are the current browsers we’re supporting? What can they do in the HTML5 world and CSS3 world, et cetera, versus what can be done in flash? And those sort of conversations have been really helpful to them.

So, it’s really about that shared understanding concept, where engineers have a shared understanding of business and design, and designers have the other two and et cetera. And marketing, you know, even educating them on what developers go through and what their process is at a very high level, gets everybody in the same ballpark where they really understand each other and get a sense for what’s hard, what’s easy, get a sense for the time crunch, get a sense for all those sort of things.

It sounds pretty touchy-feely, but I like the term “shared understanding.” I think that sort of captures the essence of it. You could put as much process or as little process to shared understanding. It could be very detailed wire-frames, or it could be just a hallway conversation, depending on what is needed for that organization in that context.

Jared: I think that the shared understanding has got to be critical. And I think, when I look at the organizations that we work with that really struggle at getting good designs out, you can go back to surprises that happen in the process, where it comes from people not having that shared understanding, you know, “What do you mean that’s difficult to implement? You did it over there.” Or, “How come that’s going to take five weeks? Isn’t it just a simple changing of a few words?”

They just don’t have a sense of what’s going on. Of course, on the other end, it’s the devs and designers saying, “What do you mean that when you click here, it has to go to this other screen you didn’t tell us about, or it has to produce a message, or you’re going to want to extend this in the future to have these other options?”

Bill: That’s right. Yeah, exactly.

Jared: And so that shared understanding piece really does make a lot of sense. One question I have in terms of this is you had shared with me a while back that you guys were doing all this cool hack day stuff. Do you still do that on the acquisition side? You have a hack day type thing that happens?

Bill: Well, it happens company-wide. So it happens with facilities, where they may be doing something around hacking the phones. [laughs] It could be the content team, hacking stuff down in Beverly Hills, hacking together with some engineers. I did a hack with them a year or so back where you could go to Google Map and zoom in somewhere and see all the films that were shot in that location. Right?

Jared: Oh, cool.

Bill: And then, for fun, I added a little extra dimension in it where there was two little buttons. One was Mars and one was the moon. You could click on Mars, it brought in a Google Earth plug-in and flew you out to Mars and showed you some of the movies that were shot on Mars. [laughs]

Jared: Very cool.

Bill: [laughs] It was a joke.

We’ve had a number of things come out of the hack days. One thing we continue to test is how to find related content really easy, kind of like the six degrees of separation, Kevin Bacon kind of thing, right? We had a “more like this” kind of feature that came in in one of the hack days, where you have a page where the movie sits in the middle and then all the other movies that are related to it in some fashion are around it, and then you click one of those, it slides to the middle and more come out around it. We actually implemented it on the site. It didn’t test too well.

Of course, what we find out often with the media consumption we do is that anything that feels complicated at all, people don’t tend to do. It has to be really simple. But what’s happened is that thought has continued to have, I don’t know, at least maybe six or eight different incarnations. None of them have actually fully worked yet.

We have one example on the device that worked better than control. And on device, on our TVs–PS3, I think it was, we were testing this–you had a row showing up on your TV, and when you move your arrow back and forth and land on a movie or a TV show, below it, the next row, is all the related content. And if you go down to one of those and select it, then the row below it becomes related to it. So it’s almost like a tree navigation, but it’s just rows, right? That actually did pretty well.

The problem is, how do you integrate that back into something like the normal experience, where you’re showing just, here are your areas of interest, which we call sub-genres, or micro-genres, we’ve built and based out of your taste input and what you watched and stuff, like quirky, funny movies from the 1700s. I don’t know.

Jared: [laughs]

Bill: So, how do you tie that into that? So there’s some tests around doing that that are coming out to play with that.

Jared: So the neat thing about the hack days is, do you feel that has a huge effect on the shared understanding? I mean, do things sort of burst out of that and people go, “Oh”?

Bill: Yeah, I do. I think there’s a lot of stuff, like some technologies on the edge, that not everybody’s getting a chance to play with that somebody brings in. Like when the Kinect stuff first came out, you know, there was a pretty cool hack around that and sort of opened some thinking up around some other stuff.

Real early on, some guys had hacked the iPhone so you could control the Roku player with it. And those were quite interesting. But a lot of it is just you sort of get a chance to see what other people consider to be problems they’re trying to be solve. Right? What are the itches that are trying to be scratched around the organization? And I think that’s pretty helpful.

Jared: So in November, you’re going to join us and spend an entire day sharing this wealth of knowledge you have, and the stuff that went into your book and a variety of insights and details and videos and techniques on building interactive stuff. You’re going to show us how to deal with the flow in the application, how to deal with input, how to deal with responsiveness and all the sort of techniques that you’ve put together. I’m really looking forward to this session.

Bill: I am, too. I did a workshop similar to this, but this has more material, especially now adding a little bit with the device world and tablet and TV and mobile back in Lisbon. And the workshop went really, really well, and people seemed to really enjoy it. I know it sold out really fast. So I’m hoping the same interest is here in this. I believe it will be.

Jared: I think it will.

Bill: And really, I guess people that are considering whether to come to something like this, my goal is to make it as pragmatic as possible. When people hear “patterns,” sometimes they think of the theoretical. It’s not at all. It’s really just about lots and lots of examples that work well and don’t work well. And when you come out of the workshop, what you really should have, I think, is just a pretty rich vocabulary of what’s possible and what maybe to avoid, and then you can go back and share that with the team and have a toolbox. Expanding your toolbox is really what it’s about.

Jared: Cool. I’m looking forward to getting my toolbox expanded.

Bill: [laughs]

Jared: Excellent. Thanks for taking the time to talk about this with me today.

Bill: I’m always happy to talk, Jared.

Jared: Excellent.

Bill: And to talk with you is icing on the cake.

Jared: There you go. And I want to thank our audience for joining us today and for supporting everything we do. And, as always, thank you for encouraging our behavior. You can see Bill at the User Interface 16 Conference in November. November 7th through 9th. You can find out details about that at uiconf.com. Hope to see you there. Thank you very much.

Back in the early days of PC computing, we were interested in how people used all those options, controls, and settings that software designers put into their applications. How much do users customize their applications?

We embarked on a little experiment. We asked a ton of people to send us their settings file for Microsoft Word. At the time, MS Word stored all the settings in a file named something like config.ini, so we asked people to locate that file on their hard disk and email it to us. Several hundred folks did just that.

We then wrote a program to analyze the files, counting up how many people had changed the 150+ settings in the applications and which settings they had changed.

What we found was really interesting. Less than 5% of the users we surveyed had changed any settings at all. More than 95% had kept the settings in the exact configuration that the program installed in.

This was particularly curious because some of the program’s defaults were notable. For example, the program had a feature that would automatically save your work as edited a document, to prevent losing anything in case of a system or program failure. In the default settings for the version we analyzed, this feature was disabled. Users had to explicitly turn it on to make it work.

Of course, this mean that 95% of the users were running with autosave turned off. When we interviewed a sample of them, they all told us the same thing: They assumed Microsoft had delivered it turned off for a reason, therefore who were they to set it otherwise. “Microsoft must know what they are doing,” several of the participants told us.

We thought about that and wondered what the rationale was for keeping such an important feature turned off. We thought that maybe they were concerned about people running off floppies or those who had slow or small disks. Autosave does have performance implications, so maybe they were optimizing the behavior for the worst case, assuming that users who had the luxury to use the feature would turn it on.

We had friends in the Microsoft Office group, so we asked them about the choice of delivering the feature disabled. We explained our hypothesis about optimizing for performance. They asked around and told us our hypothesis was incorrect.

It turns out the reason the feature was disabled in that release was not because they had thought about the user’s needs. Instead, it was because a programmer had made a decision to initialize the config.ini file with all zeroes. Making a file filled with zeroes is a quick little program, so that’s what he wrote, assuming that, at some point later, someone would tell him what the “real defaults” should be. Nobody ever got around to telling him.

Since zero in binary means off, the autosave setting, along with a lot of other settings, were automatically disabled. The users’ assumption that Microsoft had given this careful consideration turned out not to be the case.

We also asked our participants for background information, like age and occupation, to see if that made a difference. It didn’t, except one category of people who almost always changed their settings: programmers and designers. They often had changed more than 40% (and some had changed as much as 80%) of the options in the program.

It seems programmers and designers like to customize their environment. Who would’ve guessed? Could that be why they chose their profession?

(Big takeaway: If you’re a programmer or designer, then you’re not like most people. Just because you change your settings in apps you use doesn’t mean that your users will, unless they are also programmers and designers.)

We’ve repeated this experiment in various forms over the years. We’ve found it to be consistently true: users rarely change their settings.

If your application has settings, have you looked to see what your users do? How many have changed them? Are the defaults the optimal choice? Does your settings screen explain the implications of each setting and give your users a good reason for mucking with the defaults?

The client was dealing with balancing a lot of navigation while keeping their home page free for the important messages they want everyone to see. A mega menu – those large multi-column layered menus that pop up when you hover over the navigation – seemed like just the ticket.

However, our research shows mega menus come at a price. In today’s UIEtips, I talk about the epic forces that are constantly in battle with any mega menu implementation, preventing the users from getting value. Every time I start talking about this stuff, designers perk right up. If you work on your site’s navigation, you’ll see why mega menus may not be the panacea they promise to be.

Read today’s article, 6 Epic Forces Battling Your Mega Menus

Of course, what we’re talking about here is just one type of web design pattern — exactly the topic Hagan Rivers is talking about at our upcoming User Interface 16 Conference. If you’re doing any design for the web, you’ll want to dive deep into her full-day topic. She’ll fill your brain with exactly what you’ll need to create delightful and useful online experiences. Check out all the UI16 speakers at UICONF.com.

This is your opportunity to hear all 12 Masters from the Tour give their 75-minute presentations. The OnDemand collection consists of 15 hours of audio recordings, Q&A from the audience, and the Masters presentation decks. It’s a toolkit that you can share with everyone in your office. You can access it any time you want, as often as you want.

Web App Masters OnDemand covers these topics

• Constructing sites for active communities
• Building native device vs. mobile browser-based applications
• Producing beautiful data visualizations
• Using data for design decisions
• Integrating infographics and games to engage your users
• Designing for mobile first
• Handling rich interaction techniques on multiple devices & platforms
• Looking at AARP’s journey into web-based applications
• Conducting successful kickoff meetings
• Finding users’ deepest needs and desires
• Designing Salesforce.com’s Cloud Apps
• Creating great design principles for your team
• Ensuring a positive user experience with mobile

Learn more about Web App Masters OnDemand.

With Web App Masters 2011 OnDemand you’ll get

• Fifteen hours of audio from 12 Masters
• The best of the Q&A from all the tour stops
• Presentation slides from all 12 talks
• Unlimited access to the material any time you want it, as often as you want it

Order Web App Masters 2011 OnDemand now

No pre-ordering and no waiting for a disc. With just a few clicks, you can have Web App Masters OnDemand at your fingertips and start to improve your web apps today.

Purchase Web App Masters OnDemand by August 30, 2011, for $179. After the 30th, the price
increases to $229.

Now go get your bundle of goodness.

These experts will dive deep and get to the nitty-gritty details that make any designer a UX pro. Look at the intensive full-day workshops we’re putting together for you.

• Brandon Schauer: Immerse your team in an innovative design process that produces refined design ideas in record time.
• Kevin Hoffman: Facilitate productive and insightful kickoff workshops to start your projects with everything you need.
• Hagan Rivers: Employ best practices to simplify your most complex applications with state-of-the-art UI techniques.
• Steve Portigal: Drive your design with effective field research to deliver innovative results.
• Bill Scott: Discover the latest rich interaction techniques for engaging user experiences.
• Kim Goodwin: Compose compelling stories that drive a realistic design process from start to finish.
• Stephanie Sullivan Rewis and Greg Rewis: Enhance your designs with HTML5 and CSS3 without sacrificing your design goals.
• Luke Wroblewski: Integrate mobile design’s best practices and techniques into your process.

Get more information on the workshop topics and speakers at UICONF.com.

Details on the Sneak Preview Site

In the next few weeks, more details about the agenda and workshop will emerge. However, you can get a view into our special sneak preview site now.

And because the site is in the sneak preview mode, we’re offering a sneak preview price – our lowest price, of $1,349.

On Wednesday, July 27 at 1:00 pm, registration will open.

There are 100 spots available at the special low price of $1,349. Once they are gone, they are gone and you’ll have to buy one of the more expensive spots.

There is a way to get a jump start on registration, and learn about exclusive offers and the latest UI16 news. Add your email to the UI16 list at UICONF.com and you’ll automatically get added to the priority group.

Now go see the 8 different design workshops we have in store for you at UICONF.com.

What happens over time with applications is a design entropy sets in. As new features are added, they are glued on top of old ones, often with slightly different interfaces. Slowly, the application starts to develop a Frankenstein look-and-feel, which hurts the users and the business.

Teams can avoid all this. Using established, well thought out, and proven user interface design patterns, teams can hedge these problems off before they become unmanageable. Even the worst applications can benefit from the careful hand of applying the best design practices.

There’s no one who knows how to deal with hedging off design entropy than Hagan Rivers. I first met Hagan back in 1995, when she was working for Netscape as one of the world’s first web application designers. Since then, she’s become a world expert in interface design, helping hundreds of teams get their application UIs under control.

I’ve had several opportunities to work with Hagan on various projects. Each time, I walk away learning new design techniquesn and feel smarter about how to tackle even the most complex hairball of an app.

Hagan probably has the biggest collection of application design examples I’ve ever seen. Everytime she delivers her workshops and presentations, she brings out these stunningly amazing sets of both good and bad examples. You can instantly see how changing a design in just a few simple steps can immediately make for a better user experience.

This year, I’ve been working with Hagan on her full-day workshop for the User Interface 16 Conference. She’s putting together a intense program, where you’ll walk through practically every type of interface element, from tables and lists, to working with trees, forms, and wizards. She’ll tackle the gnarly topics of simplifying a complex navigation scheme and creating an effective dashboard display.

Anyone who is fighting design entropy, trying to get their application’s UI under control will be riveted by this in-depth workshop. I’m so happy Hagan’s on our UI16 program and I know you’ll love her session.

See the other UI16 Spotlights:

You can catch the sneak preview of UI16 at uiconf.com. (And there’s still a few of the sneak preview $1,349 registrations left. Snag one while they are still available.)

At our Seattle stop, Luke Wroblewski captured Bill’s talk in a blog post he originally posted on lukew.com. He’s graciously allowing us to repost his notes.

Bill and Luke will both be at our final tour stop in Minneapolis, June 27-28. Look for the special registration offer at the end of this post.

*  *  *  *  *

At the Web App Masters Tour in Seattle, Bill Scott detailed how Netflix manages the differences and similarities in cross-platform design. Here are my notes from his Designing for Mice and Men presentation.

• Over 400 SKUs have Netflix running on them (TVs and streaming players). You could give every manufacturer an SDK and guidelines and ask them to make things. But most manufacturers don’t want to build experiences themselves and they often have the skills or resources to do so. They prefer a platform.
• Netflix uses HTML5 on Web, Tablet, Mobile, and TV. Have used different WebKit platforms to manage this. On the TV, Netflix ported two instances of WebKit in order to deliver HTML5 solutions (QT and Skia). This allows the same team to build the same way across many devices. WebKit is Netflix’s application platform.
• Why HTML5? Server-driven dynamic UI, Web-style release vs. CE firmware updates, Support A/B Testing, Learn fast/Fail quickly, Chaos otherwise.
• Netflix needs a server-driven UI so they can test lots of different variations. The PS3 interface had 16 variations and four experiences that were tested. Trying to manage this testing through certification processes (like those on TV manufacturers) takes way too long.

Different Platforms, Different Experiences

• Some people at Netflix have been arguing for a single experience across all devices. This has never born out in any kind of testing. Instead, Netflix has a variety of experiences on different devices and even regions. In Canada, Netflix does not have a queue as they only have a streaming service available.
• Netflix chose a portability layer. But varies user experience across platforms (TV, Web, mobile, tablet).
• What determines the right user experience for a platform?
• User posture: Stationary, Lean back, on-the-go, shared.
• Input capabilities: pointer/keyboard, LRUD/OSK, Gesture/OSK
  Navigation style: controls & windows, panes.
• Display capabilities: Hi-Res, near, far away, small, medium, large
• These constraints are really powerful. You need to embrace them to get to appropriate designs.
• Design for mobile first when thinking about multiple platforms as it holds the most constraints. This helps you focus.
• The new Netflix Web experience has learned a lot form the constraints of the TV experience.
• So What’s in Common? Design principles: fundamental, universal ideas that underpin good design stay the same but the application of principles varies across input, posture, navigation, and display.

Get Physical

• Whenever possible add a realistic, physical dimension to your application. The more true to life your application looks and behaves the easier it is for people to understand how it works and the more they enjoy using it.
• Use metaphors to embody physicality. Take a common, understandable metaphor and translate it to the interface. Example: filmstrip metaphor on the Rocku player.
  The user’s mental model is the user experience cushion. Don’t break the metaphor for the underlying implementation model.
• Instead, break the metaphor with magic. Strict physicality is hard work! Use magic to simplify the real world.
• Use directness to simulate physicality. The scrollbar has moved from a controller to an indicator (on touch devices). Content is scrolled instead of the scrollbar. It is not about controls driving the experience; it is about content driving the experience. You are interacting with the content not the controller. This is really powerful.
• It must feel real. Make sure event handling is consistent. Remember fingers are fat. Real estate is limited.
• On touch interfaces, you can use less constructs to create the experience, and instead add more content to create the experience. As people get used to the idioms, we’ll be able to do more with content interactions.
• Drag and drop often creates artificial constructs in an interface that are not necessary. People often start with a technical solution first not a user experience first. This often ends up in artificial visual constructs to support a technology solution.
• How big should touch targets be: 44 pixels on mobile, tablet, TV. 16 pixels on desktop Web (mouse/cursor) but accurate as 1 pixel.

Maintain Flow

• Change blindness: our brain expects continuous change. Single page changes sometimes leave things unnoticed because the change is too drastic. This happens with page refreshes on the Web –people don’t notice what changed. So people can loose their context when moving from page to page.
• Overlays can encapsulate alternate workflows without removing context. Flow keeps people engaged in a task. Manage screen transitions carefully. You can minimize them with page slide transitions and other forms of animation. When using transitions, make flow visible.
• Where possible replace annoying hover details with dedicated detail panes.
  You can help explain interactions through changes in the user interface. Content is the flow. Keep information in context.

Be Responsive

• Use transitions/animations to create responsiveness.
• Animation can: reveal relationships, improve responsiveness, show state change, focus attention, create delight, and simulate physicality.
• Needless fanfare anti-pattern: don’t use animations without purpose.
• Animation is a supporting actor. It should not take center stage. Always question why you are using animations. Occam: what can be done with less is done in vain with more.
• Consider the least effective difference to communicate change.
• Because you can easily add animations in Flash, people often do (many times in bad ways).
• On touch devices animation and input are synchronized. When things are more direct, connections between transitions feel more appropriate.
• Use invitations to create responsiveness: just in time invitations at drag moments & invitations at touch and hold moments.
• Pull to refresh is a great place to show a shortcut. Align it with a natural action like pulling down. Think about ways to align with already existing, natural interactions.
• Tours have their place but features at the point of discovery are much more powerful.
• Netflix Web site had a lot of white space in between box shots. The version that took out names, star ratings, buttons, and more performed much better than the version with text, etc. The idea is that content is front and center in the UI. This was directly influenced by the TV interactions.

Hear Bill’s full talk and 8 other Masters at the Web App Masters Tour in Minneapolis, June 27-28. Other topics at the tour include data visualization, UX in mobile design, and process best practices.

UIE Web App Masters Tour:
Get $100 off the Minneapolis Masters Tour with the promotion code TOURBLOG when you register by June 17.
Last Stop! Minneapolis

Pam Rodriguez and Luke Wroblewski did a nice job of posting their notes. Thanks guys!

• Steve Portigal on Design Fieldwork: Uncovering Innovation from the Outside In – Pam’s notes, Luke’s notes.
• Kate Brigham on PatientsLikeMe: Adventures with Data Visualizations – Pam’s Notes, Luke’s Notes.
• Luke Wroblewski on Designing Mobile Web Experiences – Pam’s Notes.
• Mike Lee on AARP: Designing a Strategy for Organizational Transformations – Pam’s Notes, Luke’s Notes.
• My presentation on The Essential Principles behind Great Design Principles – Pam’s Notes.

As you can see from the #UIEWAMT Twitter stream, everybody had a great time and we all learned a ton.

There’s one more stop on the 2011 tour – Minneapolis on June 27-28. Use the promo code BLOG and get $100 off the registration price.

See you there!

UIE Web App Masters Tour:
Get $100 off the Minneapolis Masters Tour with the promotion code BLOG.
Minneapolis

Blogger Pam Rodriguez has done a tremendous job summarizing the first day’s sessions. You can read them here:

• My talk: Mobilism & UX: Inside the Eye of the Perfect Storm
• Bill Scott’s talk: Designing for Mice and Men
• Josh Clark’s talk: Mobile Apps: Native or Web-Based?
• Noah Iliinsky’s talk: The Steps to Beautiful Visualizations
• Julie Zhuo’s talk: Facebook: Data-Informed vs. Data-Driven Design Decisions

Our own Web App Master, Luke Wroblewski, also has some great summaries:

• My talk: Mobilism & UX: Inside the Eye of the Perfect Storm
• Bill Scott’s talk: Designing for Mice and Men
• Josh Clark’s talk: Mobile Apps: Native or Web-Based?
• Noah Iliinsky’s talk: The Steps to Beautiful Visualizations
• Julie Zhuo’s talk: Facebook: Data-Informed vs. Data-Driven Design Decisions

Thanks to Pam and Luke for taking such great notes.

You can follow along with the second day by following the #UIEWAMT hashtag or the UIE Web App Tour attendee and speaker Twitter list.

UIE Web App Masters Tour:
Get $100 off the Minneapolis Masters Tour with the promotion code BLOG.
Seattle · Minneapolis

I’m interested in finding information about “On Object UI”. To me, this term means displaying controls on or near an object after the user has interacted with the object by hovering over or clicking on the object.

For example, in Microsoft Word, after highlighting/selecting some text, a Mini-toolbar appears near the text with choices that the designer thought the user was most likely to want to choose next.

Another example from Word: click on the File Tab from the ribbon (Office 2010) to enter the “backstage” of Office. Then click on the Info Tab. On the right hand side of the screen there is a “Related People” section. If I hover over the author name, or the “Add an author” text, additional controls appear offering functionality related to managing the author information.

This technique seems to work well, but what are the recommended best practices for its use ? What has been learned about this technique that is to be avoided ? Etc. And what is it called ? I know it by “On Object UI”, but a Google search of “On Object UI” finds very little.

If there is another name for it, I would love to know it. If there is not another name for it, then this seems like an area that User Interface Engineering should research and capitalize on by selling that information back to suckers like me.

Well Greg,

I think there’s a lot of thinking that’s gone into what you’re talking about. The broad term is pop-up menus, though people also call them context menus or on-hover menus.

Chapter 4 of Bill Scott & Theresa Neil’s Designing Web Interfaces talks about these as Hover-Reveal Contextual Tools. (Their book is a great resource. It should be within reach of everyone doing web design.)

I expected to find something similar in the Yahoo Design Pattern Library, but a quick glance didn’t yield anything.

That’s a start at least. We’ve looked at creating UIE pattern libraries, but it’s a hard challenge, as interfaces are constantly in flux. Just look at the recent patterns emerging from iPad apps and you’ll see that any library would have to double in size. I think they only way to do this would be wikipedia-style, with an army of folks trying to keep up voluntarily. That doesn’t lend itself to the making-money-off-of-suckers model.

Hope that’s helpful.

Jared

Their mortgage screen contains this list of menu options, with one of my most favorite menu options ever.

As asked in the comments, this is the default presentation when you first view the menu. (Some commented it would make more sense if the See more choices option were the default, but alas, ’tis not the case.)

What is the user scenario behind this menu option? “Whoa! I need to think about my mortgage for a second. Let me get rid of these extraneous menu options so I’m not confused.”

In case you’re wondering, here’s what the “fewer choice menu” looks like:

Aahh! That’s much better.

Seriously, I can’t imagine why someone thought this was the right design treatment for a too-many-choices scenario. This should’ve been a red flag to the designers.

Of course, there are places where I could see a See fewer choices function coming in quite handy. This one, for instance:

Subscribe to our podcast via

Few people have thought about search, and all that it encompasses, like Mark Burrell. Mark’s the Worldwide Lead for User Experience at Endeca, the company that builds search applications for many of the sites you use every day. These guys know search, and Mark is tasked with making the search experience humane.

With his vast experience with search applications, he oversees the Endeca User Interface Design Pattern Library, which attempts to catalog many of the most successful interface patterns for search. The goal is to make user and designer’s lives easier—and their searches more effective.

Which is exactly why we asked him to join Peter Morville for a UIE Virtual Seminar on Search and Discovery Patterns, back in January of this year. Today we’re revisiting the topic by sharing the follow up podcast Jared Spool recorded with Mark. Jared and Mark discuss a few bonus questions from the seminar. Below are a few highlights from the podcast.

Much of the challenge in search lies in sorting through results in a meaningful way. There are a number of interface components that sites use to accomplish this, and one is the range slider. You may have seen them on sites like Kayak.com. But are these intuitive for the users? Mark says they can be, but the devil is in the details. Designing the search experience is complex and there aren’t simple answers. Used correctly, range sliders can be useful.

“Determine what information is critical for the people you’re designing for and make that salient.”
-Mark Burrell

One size doesn’t fit all. One question asked, should you use different patterns for different audiences? There is not just one right answer to this question, but you need to know your audience and their scenarios, Mark says. Different interfaces or patterns for different types of searchers can be an effective decision.

One example of this is with Intranets. Mark says there’s a surprising amount of overlap between design for Intranets and public-facing sites. But there are advantages to knowing your audience intimately, as with an Intranet. You can tune your search and interface for specific groups within your company. A great example is in searching for human resources information. An average employee searching for “insurance forms” might expect to get a list of the relevant forms for her to fill out.

But if this search comes from an HR employee, her scenario is almost certainly different. She might rather see recently updated forms or policy documents that pertain to the forms, instead of the forms themselves. Leveraging our existing knowledge of who is searching can lead to powerful modifications.

There is much more in the podcast, including a discussion of combining searching and browsing, the complexities of designing components that denote AND vs. OR searches, and the good and the bad with “type ahead” assisted search. Tune in, and then let us hear your questions and thoughts in the comments below.

Subscribe to our podcast via

Nathan Curtis

If your site has more than one page, chances are you have repeated elements: Repeated interface elements, repeated design patterns, repeated code snippets. When you multiply your responsibilities over a large site and involve many designers, developers, and stakeholders, how do you make sure you’re not wasting your time building many widgets that already exist? That’s where a standardization process comes into play.

Nathan Curtis and the crew at EightShapes are the leaders in standards, reuse, consistency, and libraries. In this podcast, Jared Spool speaks with Nathan in anticipation of his workshop on this topic at the 2010 User Interface Conference.

(Side note: in this context “standards” are different than “web standards”, though completely compatible.)

When do you know if you need a component library? Nathan says the idea often surfaces when designers and developers start chatting about their collaborations. When many people are touching the design, the idea to reuse components comes up quickly. Standardizing on certain page components, for example, helps in many ways. It prevents double work and keeps the experience across sites (especially large sites) consistent. Certain items, say a calendar picker on a travel site, are especially useful to reuse.

While the creation of a library is useful and efficient in many ways, storing the components isn’t free. It requires a manpower commitment and possible software purchases or provisioning. Nathan says to do it right, you should treat it as if it were another project on your team’s plate. But once committed, you can focus on the quality of the components. If you have 18 different video players across your site, someone can take the time to discover which ones work best and then improve the experience across the site.

Beware of how you maintain your library, Nathan warns. If you let it get too out of date, it’ll lose its credibility and people will begin to stray. If you can’t ensure the library will be faithfully maintained, make sure only your critical items are in the library. Prioritize for the components that have the most effect on the User Experience.

Nathan shares many more tips for libraries in the podcast. But he’ll have even more when he teaches a full-day workshop on the topic at this year’s User Interface Conference.

Explore Nathan’s workshop and the full conference program. Register for UI15 by September 22 with promotion code BLOGPOST and get $400 off.

Are you reusing your components? Are you curating them in a library? Share your experiences with the community in the comments.

This year’s topics are an eclectic collection that really says a lot about the current state of online web and software design. The program tells the story of the full development cycle, from coming up with innovative ideas, to making those ideas a reality, to growing the design to fill out its nooks and crannies.

Here’s the UI15 line-up and why we chose these amazing presenters

Leah Buley‘s Good Design Fast session was so popular last year because it really resonated with everyone. We all want to be innovative, to generate new ideas that will blow away our customers and our co-workers. Leah’s session looks at the design process. Whether creating a brand new product or service, or trying to rethink what your existing offerings could be, this workshop delivers the tools to make that happen quickly and effectively.

Dave Gray has opened our eyes on what visual thinking can do. By creating a simple visual vocabulary, filled with simple elements that even a self-proclaimed worst drawer can handle, Dave opens up a world of communication for all of us. We can take complex ideas and lay them out for others, in a simple and understandable way. Seeing our ideas visually gives us a view into the thinking behind them, and lets us see where everything fits together.

For years we’ve tried to get Tamara Adlin on our program. Finally, it’s happening. Tamara is the high priestess of building personas in the design process. Her experience and high energy will keep you captivated as she explains her techniques for effective persona development. The designs that come from teams with a strong understanding of their personas are worlds better than anything else we see.

Nobody knows more about interaction design than Kim Goodwin. She’s a regular high point at our conferences. Kim as the great ability to talk about all phases of the design process, from understanding the users and innovating new ideas, through creating screens and flows, to the final refinements and finishing touches. Every designer deserves a day in their career to hear Kim demonstrate her masterful design techniques.

Luke Wroblewski owns the title of The World’s Most Authoritative Expert on Web Form Design. Luke has spent the last few years studying every possible approach, testing each idea for effectiveness, and is now a walking encyclopedia on the topic. Whether you’re asking your users to create a new account, fill out an application, or file their taxes, when it comes to web-based forms, you need to hear Luke’s wisdom on what works and what doesn’t.

Dan Rubin has a magical way of taking the elements of good graphic design — typography, layout, color, and imagery — and demonstrating how they improve the usability, effectiveness, and feel of a design. After hearing Dan, we suddenly understood what separated great looking sites from those that were frustrating. If you need to know the secrets of how great visual designers get their great results, attend Dan’s workshop.

In the last year, Kristina Halvorson has actively put the most important element — the content — front and center. She’s at the forefront of the new discipline — Content Strategy. It combines copywriting, information architecture, web governance, and business strategy to help organizations get complete control over the most important ingredient of their sites. Attending this workshop will change the way you think about managing your site’s content.

Nathan Curtis‘ knowledge of building design patterns and component libraries is encyclopedic. After listening to Nathan, you’ll share our excitement about the benefits of having an effective pattern and component library. His techniques for discovering, documenting, and curating the library elements are powerfully easy to implement in any organization. Nathan’s workshop is essential for anyone looking to grow their design efforts to meet enterprise-wide scale.

Avoiding Eeny, meeny, miny, moe

There are a lot of choices to make here. We know, it’s a tough decision on which workshops to sign up for. We’ll make it a little easier for you. All you have to do now is register for UI15. You’ll choose the workshops later. When you register by September 9, we promise you’ll get the workshops of your choice. Plus, there’s an added bonus of saving your company $400.

Learn more about the program and register at www.uiconf.com.

Explore the conference program. Planning on attending? Register by 9/9/10 for the lowest rate of $1295.

Today, UIEtips features two amazing speakers, Bill Scott and Stephen Anderson. Both speakers strongly fit what we think is an ideal presenter. We extracted excerpts from their Web App Masters Tour talks and created podcasts. These talks are loaded with useful information to implement when designing web applications.

Bill Scott’s podcast, Designing Interesting Moments: Live!, delves into one of the principles he covers in his talk: input where there’s output. He gives us great examples of patterns and anti-patterns and how it effects the user’s interaction with the application.

Listen and learn more about Bill’s podcast, Designing for Interesting Moments: Live!

Stephen Anderson’s podcast, Designing Seductive Business Apps: Live!, looks at incorporating behavioral psychology into your design. He discusses three concepts: scarcity, set completion and the feedback loop and how it all plays into a user’s psyche and actions.

Listen and learn more about Stephen’s podcast, Designing for Seductive Business Apps: Live!.

Bill and Stephen cover a lot more material in their talks on the Tour. You still can hear them, plus 7 other Masters, at one of the two remaining Tour stops taking place on both sides of the US, Philadelphia or Seattle. Explore the whole program at www.UIETour.com.

Until May 31, register for Philadelphia or Seattle and get $100 off when you use the promotion code TOURBLOG. Learn more about the tour at www.UIETour.com

Computers, it seems, are here to stay for a while. However, they’re getting smaller, ubiquitous, and are far more connected. We’re already seeing it, as kids move away from email to more social applications on the tiny screens of their phones.

Social components will likely be everywhere. We’ll look to exploit this connectivity. Making sure our designs have those social interfaces doesn’t come without consideration and planning.

In today’s UIEtips, I discuss how to use a great resource—the new book, Designing Social Interfaces, written by Christian Crumlish and Erin Malone—to ensure we’ve thought through the social components the right way. We’ve been blessed with the work that Erin and Christian put into this masterpiece. It’s an important resource for every design team.

Read the article: Baking Social Interfaces Into Your Design.

I’ve had the great opportunity to talk with Christian and Erin about designing social interfaces, as we’ve been preparing for their presentations at our UIE Web App Masters Tour. They are truly experts in this area, providing teams with great insights into how to leverage the future of integrating social components. You can hear their thinking in Philadelphia and Seattle. Check out the details at www.UIEtour.com.

Have you been employing social components in your design? Where did you find your inspiration? Share your thoughts below.

See Erin Malone present in Philadelphia in June and Christian Crumlish in Seattle in July. Learn more about the Tour at www.UIETour.com

Ken Kellogg’s podcast talks about navigating the design process within a large corporate world, and how customer research plays an integral part of new designs. Listen to Ken’s podcast.

In Christian Crumlish and Erin Malone’s podcast, they talk about the huge collection of social design elements in their book. Christian and Erin also cover social communities and where the growth of “social in” is occurring. Listen to Christian and Erin’s podcast.

Did you miss parts 1-3 of the interview series? We showcased these Masters:

• Part 1 – Julie Zhuo on how Facebook handles design changes. And Bill Scott taking a look at design patterns and rich interactions. Here’s the post to part 1.
• Part 2 – Hagan Rivers’ new approach to designing web app navigation. And Stephen Anderson on how to encourage user behavior with the design of your web app. Read the post to part 2.
• Part 3 – Jason Fried discusses 37signals’ design and development process. And Luke Wroblewski on how to make web forms less intimidating. Here’s the post to part 3.

If you enjoyed the Web App Masters interview series, then you’ll want to explore the Web App Masters Tour. It’s two days of inspiring presentations with a perfect blend of theory and practice. The Tour stops in Minneapolis, Philadelphia, and Seattle. Learn more about the dates and program at www.UIETour.com.

Until April 23, you can register for any of the Tour cities for $795 when you use the promotion code TOURBLOG. Learn more about the tour at www.UIETour.com

As we planned the topics for the Web App Masters Tour, social design principles and patterns was a must have topic. After reading Christian Crumlish and Erin Malone’s book, Designing Social Interfaces, it was a logical pick for these two Masters to present on social design.

At the Tour in San Diego, Luke Wroblewski did an awesome job capturing the essences of Christian’s session. Below are his notes from a blog post on Lukew.com. By the way, Luke also did write-ups on presentations from Hagan Rivers, Stephen Anderson, and Bill Scott

Here is Luke’s reprint.

At the Web App Masters Tour in San Diego, CA, Christian Crumlish provided an overview of social design principles and patterns in his talk Designing The Social In.

• When telephones were new, people didn’t really understand why they needed one. Phones also didn’t make sense until everybody had one. It’s often the same way with new technologies –including social networking.
• Social design is more like architecting a house than designing a billboard. You set the rooms and spaces –but people will decorate and use them how they want.
  People will create the experiences they desire and in social design, people are a big part of what the experience will be.
• User is singular, social interfaces are plural. Solitary activities like reading headlines are relatively easy to measure. Social activities require engagement with others that are most easily measured through social objects.
• Pave the cowpaths: support people’s existing behaviors with the way you design software. Example: dogster started as a photo-sharing service, but moved to a social network for pets when they saw people were uploading many images of their dogs and cats.
• Talk like a person: use conversational voice to let others know there are actual people on the other side. Self-deprecating error messages can make things more acceptable. Posing questions prompts responses, which results in a dialog.
• Your vs. My: use “you” and “yours” to indicate other people are around. This sets the right expectations.
• No joking around: some people will take jokes the wrong way or get confused. No joke will be 100% understood.
• Play well with others: be open to participation. Build on open standards, share data outside your application, accept external data within your application, and support two-way interoperability.
• Learn from games: engagement that comes form how games work helps drive business needs. Games, like social networks, are only designed to a point. They have rules, boundaries, and structures but do not dictate a singular experience.
• Respect the ethical dimension: there is an ethical element when people are involved –private data, who they know, etc. In any ethical decision, the business, the individual, and the collective/community have a stake.
• Social design patterns can be grouped by patterns related to the self, activities, community, and social spaces.
• Give people a way to be identified: let people take ownership and customize their identity. Identity doesn’t always have to manifest itself in a complicated profile.
• Indicate presence so people are aware of who else is within a system. Reputation systems help people learn how to interact with people.
• Attribution and avatars –place people’s identity in context to what they’ve done.
  What is the social object in the site you are building? The social object is the reason two people are talking to each other as opposed to talking to someone else. Social networks form around social objects, not the other way around. In Facebook there are many social objects: videos, gifts, groups, etc.
• Social activities give people things to do. Some people will engage in a few small things, and others may engage in many or larger scale things. Social activities include: collecting, broadcasting/publishing, sharing, giving feedback, communicating, and collaborating.
• Feedback allows people to have conversations about objects
• Collaboration is when you are actually making objects together. Goes beyond conversation. Social media –when you have the whole ecosystem of sharing, creating, and collaborating. Social media needs context and filtering tools when it takes off, but this is a rich man’s problems.
• Bridging the gap to the real world includes location, calendaring, etc.
• Let the community elevate people and the content they value.
• Enable people to make connections.

Learn More from Christian Crumlish

Recently, Jared Spool interviewed Christian Crumlish and Erin Malone on the realm of social interfaces. They discussed the huge collection of social design elements their book Designing Social Interfaces, contains, whether you should build a community on your site or leverage an existing community, and how the growth in social media affects new mediums like mobile. Hear their podcast, Crumlish and Malone Design the Social In.

Also, Christian will be in Minneapolis and Seattle, and Erin will be in Philadelphia, for the Web App Masters Tour presenting Designing the Social In. He’s just one of the thirteen Masters. Read all about the Tour at www.UIETour.com.

Until April 19, you can register for any of the Tour cities for $795 when you use the promotion code TOURBLOG. Learn more about the tour at www.UIETour.com

Once again, Luke Wroblewski (a master in his own right and also part of the Web App Masters Tour) did an excellent job capturing Bill’s presentation at the first stop of the Web App Masters Tour in San Diego. In previous posts, Luke highlighted Stephen Anderson’s talk on Designing Seductive Business Apps and Hagan Rivers’ talk on Escaping Navigation Hell. You can read other posts from Luke at Lukew.com.

Here are Luke’s notes.

In his Designing for Interesting Moments presentation at the Web App Masters Tour in San Diego, CA, Bill Scott outlined several rich interaction design principles and showed them in action within several Web applications.

Learn More from Bill Scott

Jared Spool got together with Bill back in February to discuss his ideas about the nuances of Interesting Moments. The result was a jam-packed podcast interview called Interesting Moments with Bill Scott. You’ll want to give it a listen.

Bill will also be in Minneapolis, Philadelphia, and Seattle for the Web App Masters Tour presenting on Designing for Interesting Moments. He’s just one of the thirteen Masters. Read all about the Tour at www.UIETour.com.

Until April 19, you can register for any of the Tour cities for $795 when you use the promotion code TOURBLOG. Learn more about the tour at www.UIETour.com

Subscribe to our podcast via

Christian Crumlish and Erin Malone

As soon as we saw Erin Malone and Christian Crumlish’s new book, Designing Social Interfaces, we knew you’d want to hear about their rich collection of social patterns and principles. An outgrowth from creating the Yahoo! Design Pattern Library, the book is a perfect repository for anyone planning, designing, and building social aspects into their applications.

The core fundamentals of people wanting to share, people wanting to connect to people, people wanting to feel like they have a social space to be a part of, aren’t going to change. —Erin

We’re excited to have both authors with us on the UIE Web App Masters Tour and we made sure to schedule this podcast with them so we could discuss the realm of social interfaces.

Jared Spool discusses several points with Erin and Christian, including,

• How the book became a huge collection of social design elements and how people are using Designing Social Interfaces in the wild
• Could a better understanding of social design patterns have helped Google launch Buzz with less blowback?
• Expecting to build a community on your site, versus leveraging existing communities (for example, Facebook Connect)
• The growth of social in new contexts (mobile, new audiences)

We tried to drive down to a bedrock level of principles of human behavioral drives and needs and tradeoffs that are fundamental to the dynamics of the system. If there are new trends… that part can be updated without throwing out the idea that you need to model people in your system. —Christian

Tune in for more from Erin and Christian, and join all of us at the Web App Masters tour to hear their Designing the Social In session, where they’ll highlight many real-life examples to kick start your app’s social life.

Want to learn more from Christian and Erin? See their session– Designing the Social In at the Web App Masters Tour

Subscribe to our podcast via

Bill Scott

If you’re using advanced, or “rich” interactions in your web applications, then it’s likely you have Bill Scott and Theresa Neil’s Designing Web Interfaces on your desk, if not your bedstand. Published in 2009, it is perhaps the definitive tome on rich interactive design patterns for the web. Bill has dedicated a significant portion of his career to dissecting such interactions, creating the Rico JavaScript library, curating the Yahoo! Pattern Library and now overseeing UI engineering at Netflix—one of the first companies you think of when you think of Ajax-y web interfaces.

It’s hard for us to picture talking about web apps without talking about Bill and his research into design patterns. His new book is full of examples where he slows down time to explore each micro-stage of an interaction. Our Jared Spool got together with Bill to discuss his ideas about the nuances of Interesting Moments.

Jared and Bill discussed,

• Bill’s experience of aggregating successful interactions in the Rico JavaScript and Yahoo Patterns Libraries
• How his challenges at work lead to him writing Designing Web Interfaces
• How his interface research lead to better ways to capture interactions for documents and prototypes.
• Dancing Hamsters
• …and more

Bill speaks about both patterns—successful interaction models for common interactions—and anti-patterns. By showing what not to do, anti-patterns often provide insight on the right way to do something.

A good example [of an anti-pattern is from] the old Yahoo Photos site[…] dragging several photos into an album, there’s no indication that the photos actually dropped into the album folder, and there’s no feedback that says, “Oh, there was three, but now there’s six items in the folder.”

The designers had dropped in two extra “idiot boxes”, which is a great anti-pattern. The first idiot box says, “Do you really want me to drop these items into the folder that you so carefully managed to use your mouse dexterity to get to?” Not quite that message, but that’s gist of it.

Then there’s another pop-up that says, “Hey! Guess what? We did what we said we would do. We actually put those items in the folder.” It’s sort of, as Alan Cooper calls it, “stopping the proceedings with idiocy.” The missed moments were just those little, subtle feedbacks that could have been done, instead of the hammer approach, by having those boxes pop up and interrupt the user.

The take away for our work is that this interaction was backwards. It gave no indication that you were doing something successfully while you were doing it, and then penalized your time after completion with dialog boxes to confirm your success: “You did it!” After dismissing the dialog, you were left with an interface that didn’t reflect any of your changes.

By adding clues that the move was happening during the action, and then reflecting the changes with interface cues afterwards, we can make the experience smoother while avoiding “idiot boxes” altogether. (This interaction is detailed in chapter 5, “Overlays” of Designing Web Interfaces)

There are many more pearls of Bill’s wisdom available in the podcast, please tune in!

Don’t miss Bill’s full presentation, “Designing for Interesting Moments“, at our Web App Masters Tour. He’ll be with us in San Diego, Minneapolis, Philadelphia and Seattle.

Let us hear your questions about interesting moments in the comments below…

On January 7 Peter Morville will discuss Search Design Patterns, and in the same session, Mark Burrell will tell you how to then use them.

Later in the month, on January 28, Steve Portigal will present to you his thoughts on studying your users in their own context, Ethnography.

During last year’s UIE Roadshow, our audiences couldn’t get enough on the topic of personas. So, on February 18, we’ve asked Tamara Adlin to talk about The Power of Ad-hoc Personas. Personas can be your ticket to lasting organizational clarity… and it doesn’t take a ton of costly research.

With his book, Prototyping: A Practitioner’s Guide just hitting the bookstore shelves, Todd Zaki Warfel will help you flesh out your design ideas, test your assumptions, and gather real-time feedback from users on March 29.

In the Spring, look for Kristina Halvorson to help you with your content strategy and Louis Rosenfeld to dive deep on Search Analytics. And there is much more in the works.

Until December 3, you can still sign your team up for the UIE Virtual Seminar Subscription programs . Not only is it a tremendous savings, but you get the benefit of lifetime access to each recording and the ease of registering and paying just one time.

We also plan to unveil our plan for our User Experience Training Library. Believe it or not, there is a method to our madness.

Have you ever attended a UIE Virtual Seminar? What do you like best about them? How has your team maximized what it gets out of these learning events? Share your thoughts and experiences below.

Subscribe to our podcast via

Robert Hoekman, Jr. recently joined us for a Virtual Seminar on Interaction Design Frameworks, called, Web Anatomy: Interaction Design with Frameworks. The concept is a new one, and Robert and I are exploring and introducing the concept in new book due out shortly. The seminar (which is still available) was well-received, and we asked Robert back to help us answer some audience questions we did not have time to discuss during the seminar.

Here’s the list of the questions we discussed,

• Do you see being able to abstract information architecture into set frameworks?
• Should design patterns really be referred to as production patterns that fit within creative frameworks?
• Are you basing design patterns on generally accepted Web standards or what’s standard within the uses of the business?
• If you’re assembling a site with anatomical framework pieces, how do you avoid building a Frankenstein?
• Is there any relationship between an IxD framework, and a UI framework like jQuery?
• If everything is encapsulated and solved with an Interaction Design framework… will there be less need for Interaction designers in the future and more need for visual designers to differentiate?

Tune in and see how Robert thinks frameworks could make your job noticeably easier and perhaps even more interesting. If you still have questions, let us know in the comments.

However, on most projects, they are few and far between. That’s because, even in the most innovative projects, the portion that counts as never-been-tried-before is only about 20% of the project.

The remainder is supporting functionality — things the new functionality needs to work. That supporting functionality doesn’t get the heart pumping or the adrenaline flowing. It’s just nose-to-the-grindstone, must-do work that is part of every project.

But what if we could reduce that work and make it possible to spend more time on the fun, exciting innovative parts? Well, that’s just one benefit of having a solid re-use strategy.

In today’s UIEtips article, we explore the use of Patterns, Components, and Interaction Design Frameworks. These critical development tools, which make up what we’re calling the Re-use Trilogy, give developers a chance to increase the percentage of time they spend on the fun stuff, while delivering better quality results. Read today’s article to see how this works.

Has your team tried building a pattern, component, or interaction design framework? What has your experience with these tools been? We’d love to hear what you’ve learned. Share your thoughts below.

On Wednesday, May 27, you’ll have a chance to learn more about Interaction Design Frameworks. Robert Hoekman, Jr will show you how this important new tool can jumpstart your designs and ensure you deliver high-quality experiences. Watch a sneak preview of the Virtual seminar.

Robert is thinking about this concept more than anyone we know. So much so, that we’ve asked him to present a UIE Virtual Seminar on Wednesday, May 27 — Web Anatomy: Effective Interaction Design with Frameworks .

We’d love for you to join us at the Virtual Seminar next week, but you don’t need to wait to be exposed to this concept. Earlier this year, Robert wrote a great article on frameworks. If design patterns describe cross-application behaviors, and design components are the place within an application where the behaviors and the implementation meet, then an interaction design framework is a systemic view of a specific portion of the system. An example? Let’s say you’re developing a site where users will need to log in. You know you’ll need a “username/password” login form. But, did you also remember the “Forgot Your Password?” feature? Or what you’ll need to create the user’s account? Or the functionality to change the password? Frameworks are the place where behaviors meet enterprise-wide thinking.

Are you involved in making web-based applications a key development platform? You’ll want to understand how frameworks make large-scale projects much easier. Robert’s article is a good introduction as to why that is.

Web Anatomy: Introducing Interaction Design Frameworks

By Robert Hoekman, Miskeeto
Originally published: Feb 02, 2009

UIE Virtual Seminar
Web Anatomy: Effective Interaction Design with Frameworks
With Robert Hoekman, Jr.
Wednesday, May 27, 2009, 1:30pm ET
90-minute online presentation

In your project, you’ll need to ensure you’ve got all the essential features along with those new, super-cool, hip capabilities that will dazzle your users. By using these interaction design frameworks, you’ll have a ready kit of necessary components so you’ll create the best possible design.

To help us understand how interaction design frameworks help us think through our designs, we’ve invited Robert Hoekman, Jr to tell us how they work. Robert’s been thinking about Interaction Design Frameworks more than anyone we know. He’ll show you how frameworks fill in the gaps left by design standards, best practices, and libraries of individual patterns. You’ll see examples from major web sites, where the frameworks helped predict missing functionality and critical design elements. Avoid these costly mistakes, and you’ll deliver a top-notch experience for your users.

Robert put together a great preview for you, to help you understand what to expect out of this seminar.
Click here to visit the site page with the preview.

If your team needs to quickly come up with designs that are both creative and usable, Robert’s seminar is a must for you. You’ll want to watch this with your entire team, so they come away knowing how interaction design frameworks will dramatically simplify your organization’s design process. Reserve your spot today!

Subscribe to our podcast via

This week Robert Hoekman, Jr. joins us to discuss Design Frameworks. Drawn loosely from the idea of coding frameworks that software developers use to more efficiently build software, design frameworks are an aid to assembling a design.

Frameworks sprung from research into web ROI that Robert conducted after a parade of clients came to him looking to improve their conversion rates. In the case of these clients, he needed to find the essential elements that encourage people to sign up for a web app.

From there, he applied that process to other areas, like search elements. What combination of essential design elements had to be assembled for users to successfully obtain their goals?

You can compare frameworks to design patterns, although patterns tend to be smaller, more specific solutions. Frameworks, when built out, can contain design patterns. Robert wrote a five-piece blog post series for Peachpit on his development of a sign-up a framework, called Five Tips in Five Days. Robert will detail the full story in a new book, co-authored with me, coming soon from New Riders.

Frameworks help create consistency in interface elements to help solidify the UX. Robert uses frameworks on all his current projects. He starts out with a check list of all the main elements what will help a person accomplish a goal. Projects will require frameworks for many different parts of the project and they need to dovetail with one another. Robert shared with us a story of what happens when they do not. It winds up that examining where frameworks clash can act as a diagnostic tool for some usability issues.

Tune into to the podcast for more details and a preview of the full-day workshop the Robert will be conducting at the UIE Web App Summit, entitled Web App Anatomy: Effective Interaction Design with Frameworks. We hope you join us April 19-22, 2009 in sunny Newport Beach to learn more about this useful new design method.

Subscribe to our podcast via

Without planning, web apps have no where to go. Planning documents for web app projects are often overlooked, despite their importance in the success of the product. As a designer, no matter how great your research is, or how amazing your programmers are, if your planning documents do not develop well, your project will fail.

One of the great user experience success stories in the U.K. is the Brighton-based agency Clearleft. They’ve developed successful, sophisticated methods of planning for their projects. I was able to get a hold of two of their talented crew to discuss those methods in this episode of the SpoolCast.

James Box (UX) and Richard Rutter (Co-founder and Production Director) have been working on ways to plan highly interactive web apps that make the process more efficient. And that’s exactly what we spoke about during the podcast.

James and Richard first told me that they hold back from traditional deliverables, and show clients what they call ‘design tools.’ Some clients prefer tidy deliverables, but many clients like these rougher documents. The advantage to these is that they stress design as a process, rather than set in stone. Sometimes overly polished documents can make a solution appear complete, without the client being able to change its course.

This method aids the flow of dialog between the designers and the client. Rough prototypes help your client stay focused on the core issues you’re demonstrating, like interactions, while avoiding getting caught up on visual elements that aren’t important at this very moment. As an example, when possible, they leave color out altogether.

A key element to the success of their design tools is that prototypes are interactive. They make many prototypes with HTML and enough jQuery to demonstrate the interaction. They don’t feel this process takes any longer than using relatively static tools like Visio or OmniGraffle, and offers more utility. They’re always looking for ways to improve the process with reusable pattern and code libraries.

There were more quality nuggets in the conversation too, so please tune in for more on peer reviewing, prioritizing usability testing and real code production.

James and Richard will be joining us in California this April for our Web App Summit, where they will be conducting a full-day workshop on “Wireframing and Prototyping for Highly Interactive Web Apps.” If you enjoyed this conversation, please join us to learn how their techniques can help in your organization.

Have you moved to interactive prototyping for expressing complex situations? Let us know in the comments.

Dealing with real-life web app production isn’t as glamorous as some aspects of design in the digital realm, but it is full of challenges and can honestly make or break a project. There are ways of truly optimizing certain aspects of the production so that you can create a product with consistent quality at a faster pace. To find out how, I turned to Nathan Curtis.

Nathan Curtis is a principal and co-founder of Eight Shapes in Washington, D.C., where he is spearheading research into design patterns and component libraries. Eight Shapes turns out great work in the UX and IA realms, with some impressive clients.

In our discussion, Nathan and I first defined design pattern libraries and component libraries. A pattern library is a repository for ideas and solutions to design interaction problems. Component libraries are comprised of actual functioning parts with real code. An example would be a log-in process. Your pattern would define the experience of logging into your application, from the interaction, and often visual standpoint. Your component would be the chunk of code that represents the set of fields and controls that can be replicated across your organization’s web properties, so that you can easily create a consistent experience for your users, no matter where they may enter your system.

You can see just from this one example that if you’re designing even a moderately large site, having repositories like these can save you tremendous production time. You can multiply those savings if you have multiple teams working on different portions of the same property. Each team doesn’t need to invent their own wheels and engineer them from scratch.

We go into more detail in the podcast and also compare these to style guides, which were the first step toward this idea—one that is too often broken, over restrictive, and simply ignored. Tune in to hear how pattern and component libraries can help you avoid these traps.

Nathan will teach us much more about how to build out your own library of reusable patterns and components in a full-day seminar at our Web App Summit, coming April 2009 to Newport Beach, California. You won’t want to miss it.

Have you employed a pattern or component library in your projects? What experiences can you share? Please let us know in the comments.

Fast forward three years and today we get a comment from Tessie asking:

I am currently designing a pattern library for my company. Can you recommend any pattern library systems which we can purchase which is easy to update and features a commenting system?

I didn’t know the answer, so I pinged Nathan Curtis, who is our go-to-guy on building pattern libraries these days. Here’s what he wrote back:

Good question. In my experience, I’ve not come across a pre-fab application for documenting patterns, components, or other libraries of reusable design assets that have the types of attributes (e.g., Use When) and other specific features. Instead, I’ve seen that teams have gone one of four routes to publish library documentation:

1. Home-grown systems: This is expensive and time-consuming, but ultimately the most advanced and tailored solution for an organization. Yahoo has written (on boxesandarrows.com) and subsequently spoken extensively about the challenges and roadmap they’ve traversed. Sun Microsystems has also use a custom website as the cornerstone of their efforts; lucky for us, they expose it to the community too at sun.com/webdesign/.
2. Collaboration tools: One team effectively used Jive Software’s Clearspace tool that includes a well suited three-prong feature set: wiki (articles per pattern & component, including editing permissions for team & individual, commenting and ratings), discussion boards (new requests, general discussions), and blog (publish ongoing notifications and articles about the overall library).
3. Basic tools: Other teams have set up a wiki or tried to transform a basic collaborative tool to publish patterns. This may be a good short term fix, but isn’t really a tenable long term solution unless you can really start to customize it.
4. Documents: For better or worse, some teams don’t have access to web-based solutions for publishing a library, and this really hamstrings their efforts. That said, they’ve gone to great lengths to compose documents (like a “Component Guide”, “User Experience Guide”, or “Pattern Library”) that become a versioned document managed over time. Additionally, with a modular documentation system, they can architect their guides in such a way that pages can be linked to project-specific documents as appendices or even key pages to scale changes or overlay annotations.

Hope this helps!

I think it does! What do you think?

[You may have heard: Nathan will be presenting his full-day workshop, Achieving Reuse with Patterns and Libraries at the UIE Web App Summit. Check it out!]