SpoolCast: Design Patterns and Anti-Patterns with Bill Scott. Jared Spool: Hello everyone. Welcome to another of our Spool Cast podcasts. And I have with me here today Bill Scott, who is the Director of Engineering for Netflix. Did I get that title right because it's a new one? Bill Scott: Yeah, we'll nuance it a little bit. Director of UI Engineering. Jared: Director of UI Engineering, that's right. That's right. Bill: Got to get the UI part in there. Jared: That's right, that's right. Bill: You've heard of a place called UI Engineering, right? Jared: That's right. You would think that I would know what that is. So yes, Bill Scott is the Director of UI Engineering at Netflix, the folks who brought us little red envelopes filled with DVDs to our homes.For those of you who are not in the United States, you guys are missing a wonderful service. And Netflix is doing a fabulous job of doing that.How are you enjoying your new job? You've been there what, six weeks now, right? Bill: Yeah, I'm enjoying it a lot. It's a learning experience, and talent density is really high. It's fun to work with smart people. Jared: Yeah, so unlike Yahoo! Everyone's nice at Netflix. Right? Bill: [laughs] You know, I really enjoyed working at Yahoo!. And one of the things that was great there was the community of frontend web engineers. Of course, I keep a real close tie with them.We have a wonderful theater here at Netflix, which I know you've given a talk in. Jared: I have. It's beautiful theater. They film movies there, right? Bill: That's right, we do. And so, I'm having a parade of Yahoos come through to give talks. I have some more planned in the first part of next year. So we keep good, close ties with our web development community. Jared: That's excellent. That's excellent. So before Yahoo, you were at SABRE. Bill: That's right. Jared: That's right. And SABRE has a reservation system, and so you've been working on applications now for hundreds of years. Bill: Yeah, at least. I think back when Pascal first came up with the Pascal language in the 1800s. [laughs] Jared: Did he come up with the Pascal language? Bill: Yeah, I saw a website the other day that said, "Serving the web community since 1958." I thought that was pretty clever. Jared: [laughs] So... Bill: I got started way back in '84 formally when the Mac came out, and started writing games for the Macintosh. Jared: Right. Bill: So that dates me a little bit. Jared: It really does.So let's talk about the transition from Yahoo! To Netflix, because Yahoo! Is a company that does a million different things. And so they have lots of different applications. Netflix, everything is focused around renting or buying movies, for the most part at least the stuff that I know about.Does that change the way you think about the applications you're building, when you go from this, "We have to build platforms that almost anything can be built on top of," to, "We have this very specific focus."? Bill: Yes and no. The yes part is in the evangelist's role, especially at Yahoo!, I touched lots of groups and talked to lots of different folks doing things. And so you had to keep a really, really general view of everything, because one day you're talking to the media group and the next day you're talking to the front door kind of folks, and maybe talking to the middle team.So you get really different focus. And I enjoyed that variety. That's fun.One of the things at the last part of my time at Yahoo! I settled into a product, Yahoo! For Teachers, which will hopefully soon to be seeing full light of day. That was a desire to get more focused, and to kind of apply the things I had been learning by looking across all of Yahoo! Into a more focused area.So Netflix was kind of a natural follow on to that. Just a desire to really put some roots down and focus in an area and try to grow it.So coming to Netflix is really different in lots of ways, because we are really focused on connecting people to movies they love. And so we don't really care so much about how they get the movie. We have two basic ways right now. That's the DVD and the instant watching. We'll have more ways that will happen coming into next year, so that people can get their movies in lots of ways. That's an exciting area for us to expand and grow in.So the focus is really different in that it's much more narrow, but yet it's very, very deep. And I think that's pretty rewarding. Jared: And so being really deep, you get to get into those really sort of detailed problems. And you had that when you were doing the Yahoo! For Teachers stuff too, right? Bill: That's true. Jared: I saw a bunch of the work you were doing, and you were really getting into these very detailed problems. I think when developing web based apps I don't know if you agree with me but a lot of the devil is in the detail.I mean, the basic flows are fairly straightforward, but what makes or breaks a good app are little, subtle things that can be just the size of a triangle. Bill: That's correct. That's where Apple generally has done a really good job their nuance and stuff. That's the great thing with starting with the Mac back in 1984. I was just starting to get a love for design nuance.And here, what we do at Netflix is we rely a lot on testing, both qualitative and quantitative. We do lots of test cells, bucket testing. And we do a lot of very iterative approaches.We'll do lots and lots of experiments most users will never see on our site that are in smaller buckets. And we look very closely at what each of those little changes mean.It's a very interesting thing to get that much feedback. Whereas at Yahoo!, at least on the properties I was working on, I didn't have quite that detailed of feedback. And so I think that's really rewarding to take your intuition and have it tested. Jared: Yeah, at Netflix that's been one of their sort of claims to fame from early on. At last year's web summit, Sean Kane who is the previous person who had your job was talking in great detail about how that worked.He's gone off to create a startup. At the Web Apps Summit he's going to be talking about his experience transitioning into the startup world having had the rich data that Netflix could provide. What it's like when he's the guy who now has to produce it.[laughs] Bill: Yes, exactly. I'll be interested in hearing that talk myself. Jared: Yeah, because he's basically foreshadowing your next job I think. Bill: [laughs] There you go. Jared: Pioneers are the people with the arrows in their back, right? Bill: That's right. Jared: So you're paying close attention to how Sean survives on the outside. [laughs] Bill: That's exactly right. Jared: I think it's interesting that you guys, I mean... we're talking here little, little subtleties, like the pixel locations of things, and the number of pixels high something is, and the exact wording, and all those little nuances. Bill: Yeah, some of the stuff is interesting, about how the feedback comes. For example, we have a pretty tight loop with our customer service center up in Portland, Oregon. Just last year we went from an email based to a fully human phone based in the U.S., which has worked extremely well.One of the feedbacks they gave us was they kept getting calls about when people come back to the site a member, you know and their cookies expired, their login expired. They were having trouble finding the member signin. Jared: Right. Bill: And so for the feedback from the customer reps were like, "Why don't you guys make that a little bit bigger?" So we enlarged the font just slightly and put more of a shadowed background behind it. And it cut down on a whole host of phone calls to the customer support center.That's a real simple thing, but it's one of the things you get from feedback that you might not get just from normal testing because you may not have that scenario as much in a normal testing unless you thought to do that. Jared: Well, that's interesting, right? One of the resources that organizations don't use a lot of is, in fact, their call centers. Bill: Mmhmm. Jared: Call centers produce reports, but they typically produce reports, in my experience, of unsolved problems, right?So problems that they don't have a good resolution to that people are having. But they don't produce reports of all those calls that come in that they easily can provide a solution to.And, I remember years and years ago we were visiting a company and we were visiting a support center. The company had just released a brand new product, and there was a problem within installation.I came upon a process report guy who was picking up the phone and basically saying, "Hello and thanks for calling such and such a company. My name is Bob. Have you put in disk three yet?" Because he knew pretty much every call he was getting on that day had to do with some problem installing disk three. Bill: Exactly. Jared: And, I think one out of 100 calls had nothing to do with that. I thought it was pretty funny.But the thing was that if you can sit down and spend time listening in on the calls or talking to the support people about the types of call they are getting, you can often get some real insight about things you can fix that you may not realize are causing users grief. Bill: Well, that's one of the really, really great things here, because we can actually dial a number, and we can listen in to random phone calls. What we'll do often is driving into work, dial into it and listen to the calls going into the call center while you're driving into work.It really keeps you hearing your customers, their frustrations with things on the website. It could be other problems.The other thing we do is monthly, a group of us will go up to Portland, Oregon, and we'll have a sit down. Hillsboro is actually where it's at. But, we'll have a focus group with our call center folks to find out what their issues are internally, but also what they are hearing from customers.And of course, we also track the calls and have a bunch of stats on that. It's amazing. Just recently we refactored the FAQs and all the test cells that have those refactored, the number of calls went drastically down in lots of areas.We're looking at all sorts of ways to help people in the call center. One thing that just surfaced recently was exactly how minutes you'll be on hold. So if you go to the website it tells you if there's a five minute wait or a one minute wait, and that's dynamically updated to an AJAX sort of thing every minute.So you can decide to defer your call later if you like, or whatever. Those are just all really nice things that have been added just to make that whole experience much, much better, much less also the website.And we've been experimenting with a lot of things more personalized home page, new releases area where we use carousels to kind of showcase at a window shopping level, bigger box shots, and less words on the page. All those things have really proven to be the right direction to go.And what's really nice is that you actually have the numbers. You can look at the stats. You can measure that and really know that this is moving something and having an impact. Jared: Yeah. Having that kind of feedback is really critical. I think a lot of teams don't realize how much they are sitting in the dark when they don't have that kind of data. And how much they are relying on their sort of gut feel to do things. Bill: Exactly. Jared: Because they don't have the feedback to actually refine their gut, they don't know when their gut is telling them something that's honest or something that just turns out to be completely wrong. Bill: Well, there was a recent, kind of funny news article I think it was even on the nightly news about what is the average American. Of course, averages are always deceptive. Jared: Right. Bill: But when you hear what the average American does and all these things, you go, "Geez, I'm not average at all." And we are often especially in the Bay area and Boston is the same way we're definitely more high tech in the commerce area. We're not necessarily right in the middle of the way everybody else is living and working. Jared: Well, I was told that everybody in the Bay is above average. Bill: [laughs] Well, I don't know above average, but we're definitely type A. Jared: [laughs] That's right, that's right.So I want to talk for a minute a little bit about some of the good things you did in the Yahoo! For Teachers project. You did some really remarkable interaction design there. What are some things you're particularly proud of? Bill: Well, I think one thing that was really a fun project that I got a chance to do was the Gobbler. And the Gobbler's a fun name that just basically says what you're doing is allowing teachers to go out to any website, pop up this little bookmark tool. It Iooks like a widget that shows up on your page. And you can just take any text or images or links on the page and just drag and drop them over into each of the buckets.The buckets are basically your project. So a teacher can create a topic on mitosis, on geography and landforms, civil war battles, or whatever. So they feed things they want it's a clipping kind of service. It automatically saves it back to your teacher's portfolio.A lot of knowledge sharing, community kind of tools don't do as good a job on the collecting aspect. And that was one thing we wanted to make sure, that we made it really easy for teachers to collect.And then we did a lot of good work on embedding our rich text edit into the tools, so that you could then take all the things you've been collecting and remix those into a lesson plan and then publish those, in essence like a blog. And the share it with your classroom, your kids.The Yahoo! For Teachers is currently in beta, and there are a number of teachers that are beta testing it at this point. I have no idea what the release schedule at this point is, but we're certainly planning to launch that next year. Jared: The demos I've seen of this thing have some really interesting sort of design solutions in them, primarily because some teachers are very technically adept and they have a lot of experience using websites and the latest technology.But a lot of teachers are still just getting into it. In some cases, they only have access to somewhat outdated equipment and so they have smaller screens, and things like that. From what I saw, you seem to be taking a lot of that into account. Bill: Yes. And one of the challenges about launching the product was a revisiting of what that nonmember you know, the first time you kind of see the site and the day one experience was all about.Initially the product was kind of geared to say, "Let's go after teachers already kind of get it from a tech side perspective, and get them involved, get them viral." When I was leaving them, that's where the discussion was really at was that really the right approach or not, or whether to really make it simpler and simpler for someone who is not tech savvy to get it.It's a real, real challenge though, because when you're creating a web application and especially something that's a full tool. Imagine somebody never seeing a word processor trying to get it at a first glance.You could certainly get the typing aspect of it, but there's not a whole lot more you'd probably understand, especially if you think back to way word processors were a long time ago. Jared: Right, right. Bill: So it's just really a challenge. I know at Yahoo! Some of the issue was people were more use to media kind of sites. Those sort of things that were much simpler, just a content site.And it's a different beast when you're testing a web application in the kind of things you expect people to respond to versus testing just a content site.So that was a real challenge, and it's a hard one. But I really think the secret for that tool is to do what the initial approach was, which was to go after the ones who are savvy, very passionate about it, because we have a very passionate core that's using it and let them teach and make it viral.And there are a lot of professional development networks that would like to get a hold of it and put it in training, and train schools and stuff like that. So the best way I think it can go viral is that way. Jared Spool: OK. So now, I remember seeing manipulating these things that the Gobbler collected. So basically, the person was taking these items, they were capturing them, but then they needed to organize them. Bill: Well, there's a selforganizing principle in that each project was kind of like a bookmark page, if you will. It was a page that had your topic on it, it had all the things you'd collected, and they were kind of sorted into websites and images and links, I mean text quotations.So you could just stop there and have it just the topic and all those things that you gathered, and that was automatically shared with other teachers. But if you want to take another level and remix it into a document, we embedded a text editor a rich text edit that you could draganddrop those items into and type your own things and change the fonts and publish that, et cetera.So it was sort of this thing of gather, automatically organize it into the most simple form and then let you remix it into things that were more finetuned for your classroom. Jared: Now did you build this sort of in one shot, or did you sort of iteratively come across the functionality? What was your basic design approach for this project? Bill: What we did was, Karon Weber and Samantha Tripodi and myself were mostly involved in the design. I was helping with the design as well as the engineering initially. And it started off really as a hack project within Yahoo!, and we brought a bunch of teachers in.Just before the actual teacher camp, we had the concepts of what the Gobbler would be like, as we wanted to say "curate and collect." But we had no idea how we were going to build it or what it would really look like.And so a few weeks before the teacher camp, I took a long weekend to build the first version of it. And that went pretty fast, actually faster than I expected. And about 2:00 in the morning, Monday morning before the teachers showed up there, we had the last iteration of it and pushed it live.And another guy, Pasha Sahdri, who did the YahooPOPs! Project that's going to start up, did a lot of the lovely work as well as MetaDesign up in San Francisco, to get the main site up and going. That was the first hack of it.And then we finally got a team in Bangalore and then we finally moved it to a team in Sunnyvale. So, yeah, it was a lot of iterations. A lot of kind of starts and stops on it. Jared: Were there certain functions that you would envision them to be one way, but then as you put them in front of users they started to evolve and really went through a lot of iterations until you got to the end? Bill: Yeah, definitely. One of them especially was the whole thing with the concept of lesson plans. We originally had this real formal approach to lesson planning where we said, "OK, what'll happen is, you bookmark this stuff and you come in and what'll happen is an outline, it's got all the parts of your lesson plan. And you can basically put stuff into one of those outlines."We finally realized that there's just no way that... Getting it in front of teachers, "Well, I want to do this. I want to do that." It needed to be much more freeform. And so the rich text edit was borne out of that.We initially were thinking of maybe embedding a Wiki, we had a bunch of different ideas. But we finally just went with the more simple approach. You know, with that technique.I think the one thing, we didn't have too many surprises along the way because we had about 70 teachers come in for a whole week with us that very first iteration of the box.We took Yahoo! Trip Planner and we had hacked it to make the first version of Yahoo! For Teachers. We spent the whole week with all those teachers, brainstorming. They created lesson plans, created projects, and gave us tons of feedback. Had stickies, did design with us, drew up what they thought it should look like.We would work on it that night and they would see the next incarnation of it. They would make more comments and we would do it over the whole week. So we got a lot of stuff thought through initially and had the basic workflow of what teachers were trying to do and what niche this would fit. And we didn't deviate too much from that. Jared: OK. So now at the conference, you've done a lot of work in the area of patterns, right? That's been one of the things that has sort of put you on the map in some ways. When you talk about a pattern because everybody's got different definitions what is a pattern from your perspective? Bill: I kind of make it really, really oversimplified. I just say that it's basically vocabulary for common idioms, basic vocabulary for things that will work. Because I really think the most challenging thing is getting the folks in marketing, product management, the business side, the engineering, the designers, the testers, everybody else, talking the same language.And you deal with these very visual and timebased interactive sort of techniques that, unless you can develop a shorthand for those, you spend a lot of time trying to communicate what you need, and everybody has a wrong assumption of what you really need.They envision something else visually as well as interactively because we're doing both a visual aspect as well as a timebased, visual changing over time and the interaction back.So patterns the best way to kind of capture that in terms of shorthand for both design language as well as capturing and hanging off of that node of mental framework. Things like, what are the accessibility concerns with this, what are the good uses of it, what's maybe places not to use it? What's kind of the canonical solution to this? Our company, how do we implement this pattern?To me, it's the language of it, the vocabulary aspect of I find most intriguing, and don't try to get too theoretical about it. I'm pragmatic. Jared: And so now, putting together these patterns and making them useful, did Netflix have a sort of solid pattern library when you came in, or is that something you're sort of working on there? Bill: They have a number of interactions that have been named, given a name that everybody talks about. For example, the "bob" is the backofthebox shot where you have the overlay on the movies. The "quackle" is the queueadd container layer where... Jared: Oh, I love these names. Bill: Yeah. They have kind of distinct names and so they're real easy for people to remember. But they define a whole set of interactions and everybody in the company knows what that means.And that was something that Sean did real well as far as coming up with a kind of pithy name for them. And I think that's a good way to do it shorthand. And we'll obviously be enlarging that as we go forward in the next year to come. Jared: So, how do you organize your pattern library? Do you just have these names out there and everybody learns them, and like a language, there's no real organization to them? Or do you store them someplace? Bill: In Yahoo! What we did is we had a Drupal database content management system that we stored all the internal Yahoo patterns in, and they were open sort of like a Wiki that you could go in and change and submit, and then we reviewed them. And then some of those made it out into the public space, into our public Yahoo! Design Patterns Library.There's a lot of work I know that Christian Crumlish is doing over there at this point, along with Lucas Pettinati and others, to kind of bring together the code side and the pattern side together so you have working examples of each of the patterns. We were doing a little of that before I left, but they've taken that farther.Here we don't really have anything formal yet. Again, we just hired a creative director and that's one of the things that will be worked on as far as common patterns being notated and tested and vetted and those things.But there's already an informal body of them at this point, we just don't have an internal site for them at this point. Jared: Right. Now at the Web Apps Summit in March, that's going to be in San Diego, you're going to be talking about what you call "antipatterns." What are those? Why do we care about patterns we shouldn't implement? Bill: When the pattern stuff kind of made it into the computer science arena as software design patterns, one of the things that followed on shortly after that was a discussion of antipatterns.And often in the software world, antipatterns are discussed as just really bad programming practice. Things that you could necessarily look at and see this approach that is full of pitfalls.And generally a pithy name is given to those so that people can remember it. It's sort of like the "Daily Show," or the Stephen Colbert approach to the news, right? Jared: Right.[laughter] Bill: By kind of turning things on its head and exposing the error of our ways, and sometimes even in a funny way or a memorable way, we can learn a lot from that.So in a lot of way, this is what this is about. Antipatterns, I just call them pitfalls with a pithy name. Jared: Right. That's... Bill: Go ahead. Jared: That's interesting, because at the User Interface Conference recently, Scott Berkun was talking about brainstorming techniques. And one technique he talked about was to brainstorm on all the ways that we could make this product really suck. Bill: [laughs] Jared: And he says that when you get a group together that's not quite open to talking, and you say, "OK, let's just take 15 minutes and let us just on a whiteboard or a flipchart let us list all the thing we could do that would make this product much, much worse than it is."People have no trouble contributing that. Because what, someone's going to judge you on it not sucking enough? Bill: [laughs] That's a great idea. Jared: And what happens is, that group is now in this mindset where they can think about these things and say, "OK, so if we were going to do the exact opposite of this..."So let's say the way were going to make this suck was to make it really, really hard to log in. OK, we've got that.Now, what would it mean to make it the opposite of that? What would it mean to actually make it easy to log in? What are the things that make it hard to log in? And start brainstorming that.And all of the sudden, now you can talk about, "OK, how many of these things are we doing that make it hard to log in? And what could we do to fix those?" You're in this flow. Bill: And I think humor and creativity are linked together anyway. So, yeah. Jared: Yeah. So you think antipatterns are useful in that sort of form? Bill: Yeah, I do. And this actually came from working at SABRE. The folks at SABRE will love me for this. Jared: The home of the antipattern, is that what you're saying?[laughter] Bill: There are those in leadership that will agree with me that that was the situation. I'm sure they've changed it a lot since then.But when I came in, it was the wild, wild west of interaction. And I looked at 25 very complex airline management kind of applications in detail. And after looking at 25 and probably several thousand screens and studying each one of the business models and what they were trying to do in the interface, it became really obvious there was a whole class of mistakes.And if you look at Jakob Nielson, his 10 heuristic principles all got boiled down from 250 and someodd common mistakes. So sometimes it really helps to kind of see those mistakes and then boil them down into something that you can sort of summarize into a smaller set and be on the lookout for.Some of the ones, obvious ones like "big ball of mud," and that's just where it's just a tangled mess, the information architecture's all screwed up and you can't find your way around. In some ways, the very first versions of Flickr were kind of like a big ball of mud. Jared: Oh, they were, yeah. Bill: Yeah. But at the same time, they had a very viral community that was passionate, that was willing to ignore the disorganization. Because that morphed, it really didn't start off to be a photo sharing site. And now they've got a nice information architecture, a much better one, and it's not a big ball of mud. Jared: I remember with Flickr, telling... Bill: Everything was in the footer. [laughs] Jared: Oh, yeah. Telling Christine, "Oh, there's this really cool feature where you can send pictures from your phone straight to Flickr." And she goes, "Oh, how do I do that?" And we couldn't find it. I'd signed up for it, like, minutes before, and I couldn't find it a second time on her machine. Bill: Yeah, that was what used to be my experience. But I loved it at the same time, because it's so useful. It's one of those cases where it wasn't that useable at the time, but it was very useful."Meandering way," where you just make the user kind of flip back and forth, the mouse, to do stuff. A lot of times things pop up, and the mouse has to move a lot to do simple things. And there are ways around that.I talk about "tiny targets" which is really like Fitts' law, making things big enough and in proximity enough to what you're acting on so people can find it."Mystery meat" is kind of an old one. You can actually search for "mystery meat" and see lots of examples of it. It's like getting the can and label falls off and you don't know what the heck's inside the can any more. Jared: Right. Bill: So you hover over something and you don't know what it's going to do."Pogo stick navigation" is one of those that comes from you. Going back and forth from level to level, or having to go very deep and come back up."Novel notions," where people get some kind of a wildhaired idea on how to do something new that's been done in a triedandtrue manner over and over.One I saw recently was more like I call the "tabousel," which is combination of a tab notebook and a carousel together, if you can imagine that. So you're flipping the carousel, flipping through the tabs. It's kind of an odd sort of thing."Animation gone wild." I have a DVD that goes with that too. Jared: [laughs] Bill: Some of us will get that. And that's just the complete abuse of animation and cinematic effects just for the heck of it."Nonsymmetrical actions," where you require users to do things to get rid of something that you didn't require them to do to bring it up. So, activation and deactivation are radically different.A whole bunch of these, these are examples of the antipatterns. Jared: So now, in addition to you cataloguing them, do you recommend that teams sort of make their own catalogues? Bill: Yeah, I think it's a great idea to do that. And the tools I use to do it with, every time I see a site that does something really funky, or there's a number of people who will send them to me too, send me a link and say, "You've got to check this one out."I have a Mac, so I use Snapz Pro, which captures a screencast movie. And I'll just screencast that real quick, go through the interaction and I'll save it under a certain name.And I have hundreds and hundreds of those kind of videos. Jared: Yeah. You've lent me things out of your video library and I've been using them in presentations. I've gotten in the habit now of making movies.I just keep Snapz Pro running on my machine, and when I see something wacky, I just snap it and stick it in a folder and figure out a way to use it later. I think that's a great tool. Bill: Well, you can go back and kind of look back through it, and you start seeing those things that kind of emerge as a pattern, or an antipattern in this case.I do the same thing on good stuff I see. I'll capture it. Or if I'm going to want to go back and write something up on it, it's just a great way to reanalyze it. Jared: Well, super. It sounds like your presentation is going to be a lot of fun. I'm looking forward to it. I saw an early version of it at Yahoo! Design Day last summer and I've heard it's only gotten better. Bill: And I'll probably have a lot of new stuff for March. For sure I'm looking at a lot of new things that are popping up. I've got my Google Reader set to look for lots of these things, so I'm scarfing them as I go. Jared: Very good. OK. Well, Bill, I want to thank you for spending some time with us. Bill: Hey, and I look forward to being there. Jared: I look forward to seeing you in March. Bill: And everybody should come. Jared: Absolutely. Absolutely. Well, not everybody, because we're going to sell out. So just those people who need to come, they should register right away. Bill: That's right. You only have so many iPods. Jared: That's right, yeah. So, thank you very much, and we'll see you in March. Bill: All right, Jared, good talking to you. Jared: OK.