Luke Wroblewski Interviewed by Jared Spool Find the audio file and blog post here: http://www.uie.com/brainsparks/2008/07/29/spoolcast-visual-design-misconceptions-with-luke-wroblewski/ Brian Luke Wroblewski interviewed by Jared Spool, recorded June 6, 2008. Christiansen: [intro music] Brian: Welcome, I'm Brian Christiansen producer of UIE Podcasts. This week's episode Jared speaks with Luke Wroblewski, the Senior Principal of Product Ideation & Design with Yahoo, in California. Luke is a leading authority on visual design for the web, and web applications. Luke's the author of the new book, "Web Form Design: Filling In the Blanks, " and the popular "Site-Seeing: A Visual Approach to Web Usability." Luke will be presenting his talk, "Visual Design For the Web: Communicating With Customers" at our User Interface 13 Conference, which will take place this October 13-16, 2008 in historic Cambridge, Massachusetts - you won't want to miss it. Now, here's Jared. [intro music] Jared Spool: Welcome everybody to another episode of the Spool Cast. This is Jared Spool and I am talking today to Luke Wroblewski who works for Yahoo as Senior Principal of Product Ideation & Design. Also he is of Luke W Interface Designs, and he has got a new book out now called, "Web Form Design: Filling In the Blanks." He is going to be teaching a full day work shop at the User Interface 13 Conference called, "Visual Design For the Web: Communicating With Customers." Today we're going to talk to him about misconceptions that people have with visual design. Hello Luke! Did I get that all right? Luke Wroblewski: Yes, you did. Thank you Jared. Jared: Very good - very good, because I've been batting about .500 on these introductions. [laughter] Luke: It's not bad! Jared: Yeah, yeah that's true. Let's talk about this misconception stuff. How long have you been doing visual design? You've been doing it for quite a while now, right? Luke: Yeah. Visual design - gee - since '94ish, so about 14 years. Jared: OK. Luke: Visual design for the web professionally has been a little bit more like 12 years. So, most of my visual design experience is actually with web applications, and websites. I spent very little time in kind of the print medium or any of those things, but had a lot of training as a graphic designer back in the college days. Jared: Right, right, but you never did large print runs on six-color Heidelberg presses, or anything like that? Luke: Actually I did... Jared: Oh, wow! Luke: ... back when I was in - I don't know if it was a Heidelberg press or anything like that, [laughs] but yeah I did do a layout for a few publications. I guess when I was over at NCSA there was - NCSA for those who want to have the acronym lowdown is, the National Center for Supercomputing Applications. We had a publication out there that kind of talked about all the science that was going on, and I did some layout work for that. Jared: Well, that's cool. Yeah, well you haven't lived until you've stood in front of a six color press watching your art come running off of it in all its glory, but let's talk about visual design online and for the web. What are some common misconceptions that you see that people have when they're approaching visual designs? Luke: I think, I can encapsulate some of these things by just calling out some of the common catch phrases that would probably resonate with people. "So, can you make it look pretty?" "Can you make the logo bigger?" "Can you make that pop a bit more?" Another one I hear a lot of times is, "We really need to make this more discoverable - people aren't finding this." But, I think, these things can break down into a few common points of view about what the role of visual design actually is. I have a few examples that I can use to kind of walk through the way I kind of think about it, and I think, it ultimately begins to provide a bit more... I don't want to say "power" to people that think about design this way, but it lets you sort of open up the gates of what visual design can do for you, especially in interactive software. So, it can go much beyond styling, right? I get a number of calls from people that say, "Hey! We have this great product, but we're really having trouble selling it because it just doesn't look good enough." Jared: Right. Luke: People don't understand that it's a great product, because it just doesn't look great. Chances are it also doesn't work very great, especially for the people trying to use it. Because this common misconception that design is really, or visual design, is really just about making things pretty, undermines the capacity of visual design to help orientate people on what a system or what a software application actually does, and how they can make use of it. Jared: Yeah, I love that. I hear, "Well, we don't want to actually update how it works, but it looks dated." Luke: Yeah, exactly. [laughter] Luke: Yeah, and there's definitely a little something there, right? If you give something a little bit of - like a new coat of paint, right? It will look like it has a new coat of paint, but you're going to have the same engine underneath. If we're using a car metaphor here; you're going to have the same handling, you're going to have the same rate of speed, and so on and so forth. Jared: Yeah, it's going to drip the same oil on the driveway. Luke: Yeah, exactly. [laughs] It will have the exact same squeaky breaks, and all that. So, yeah the coat of paint can do a little something, but ultimately it's probably not going to address some of the underlying things that may or may not make the thing actually work well for people. So, instead of just thinking about visual design as being able to provide style, we can also start talking about it the way it can actually communicate some very core messages to folks. In particular; it can guide people through content, make organizational systems a bit clearer, communicate what actions people can take. I have this set of redesigns that I use to kind of get people thinking about the role of design in this way. So, essentially what I have is a form, and it is a form that has the information for a customer on it. So, when you look at it, it doesn't seem very interesting. It's just got a bunch of fields for; who the customer is, where they're at, how to contact them, any records of how people have contacted them, any notes - things like that. Now, keeping all those same core features, and even keeping the same color set and style, I have a few variations on that simple form that really change the entire conversation about what the product is for. So, in one case we take the same core features and the same color set, and we just change the visual organization, so the hierarchy, the relative importance of all the elements. So, certain things get more visual emphasis, other things get a little bit less. We just kind of manipulate those variables. In one case this same form ends up very clearly communicating its CRM tool, so a customer relationship system. So, it's all about communicating with the customer - what did we say to them? Where did we say things? In another case it's very much an address book. So, when you look at this same form it's, "Oh, here's that person's address look-up and I can send some things over to them." I can get in touch with them. In the third case it really comes across as a database of customer records; where I'm updating, editing, removing or adding customers. Literally all we're doing is; changing which actions are the focus, which actions are secondary, what things are grouped together, what things are visually presented as being related and unrelated. So, I think, it goes a very long way to demonstrate how you can utilize this layer of visual organization, this manipulation of the amount of visual weight elements have, how they are arranged into a hierarchy to communicate what the heck this product or this interactive experience actually does for people. Jared: Would it be fair to say that visual design can have as much impact, in terms of communicating what is happening on that page, as the words or the pictures, per se, are doing it. So, in other words, as you said, by just changing the visual look of the design you can give different weight to different items. So, it's really a key piece of the communication formula. Luke: Yeah, a catch phrase I like to use, the visual design is really the "voice" of the interaction design and the information architecture. You really can't tell. Unless you're coming through a screen rater or other assistive technologies, you can't really tell what's in the site or what actions are possible. Unless you are looking at the screen and trying to make sense of what is presented to you. In most cases, especially in the world I live in, which is consumer web applications and services, people aren't willing to give you the time of day, much less read any sort of treatises you have on what this product is for and how it works. So, instructional text tends not to help things. Every time, in this current consumer Internet space, where you are trying to give people an overview of what the heck this thing is and how it works. If you try to present that as five paragraphs of text, it's not going to go very far, especially in web applications where there are lots of features and lots of different kind of options people can take and utilize. Trying to explain all of that with words and with just a [bad spot in tape] doesn't work very well. So, you have to use the presentation letter to communicate what things are related, what things are very important at this point in time, what things are less important at this point in time, what things people should really pay attention to and what things they can check out if they want, but aren't really core to the task at hand. Manipulating that level of hierarchy goes an awful long way to get people through core activities that they are trying to achieve. If you have ever tried to fill something like an expense report, for example. And all the actions are presented to you very flat. In other words, everything you can do on the form looks exactly the same way. HR application looks exactly the same as every other thing you can do. They're all like red underlined links and there are ten of them. So, you're looking at this HR [inaudible] like: well, what do I do first? When you get into it: what do I actually do now? And what are my options? What are things I should be doing vs. here's a flat menu item list and go to town, you know. Keep trying things until something actually happens. The reason why I open up this HR application is because nice representation of the types of engagements you get with a lot of these web services, where they're not on an everyday basis. People aren't in here all day and all night. They're coming in here when they have an expense report to rile and they have a million other things going on in their day. So, you really got to get them in, explain what the heck they can do there and how they can do it. You put a smile on their face by getting them through that process quickly and easily. Not by showing them the richness and feature set that this application has at every single step. When everything is very equal from a visual organization perspective, or when someone hasn't really thought through the visual organization application, that's when it comes across. It comes across as the application throwing everything and the kitchen sink at you at every point in the process, no matter how relevant those things may or may not be at that point in the process. Jared: So, one of the things that I hear people talk about is they say: well, we don't have a graphic artist on staff and I can't draw anything worth beans. So, there's no way we're going to have a good visual design. We'll just blow it off and just put something out and just take our chances. Do you think an organization has options; a team has options, even if they don't have someone who is a Frank Geery of the web world? Luke: Yeah, I definitely think they have options. There's a great quote. I'm trying to think who said it, but it says something along the lines of: there is no such thing and no design. There's just bad design. So, if you don't put any design time into... Actually, it was Douglas Martin. OK, here's the quote. I just dug it up: "Questions about whether design is necessary or affordable are quite beside the point. Design is inevitable. The alternative to good design is bad design, not no design at all." So, what that means is that even if you don't think you're doing any design work, just by the shear fact that you are putting some combination of colors, fronts, images, shapes, textures, onto a canvas, you're doing "design" work. It may not be good design. [laughter] But it is still design. So, everybody, regardless of whether they have graphic training on manipulating those elements is doing design. Now, whether or not you have graphic design training, I think, there's a core fundamentals around prioritizing the presentation of information or actions and of interactivity or whatever you want to group under this banner. There a core principles that you can adhere to. One of the tasks I often run through with individuals who don't have visual design background, but are ultimately responsible for product decisions and things like that, so product managers and engineering managers, folks like that. I spend some time with them without any design at all, just walking through. Once the relative prioritization of stuff that they are trying to get across to people, what matters to them and what matters to end users as they are trying to go through the task, we literally try to prioritize those things independent of the actual page layout. Then once we have this prioritized list, we can begin to reflect that a little bit in the visual design. So, if you don't have a lot of graphic design skills, this priority makes a lot of sense. Jared: To most people, yeah. Luke: this is the most important I want people to do here or they want to do here. Ideally, those things are aligned. Jared: Right. Luke: And this is a secondary thing. Then when you start taking that priority and putting it on the page, it begins to make sense a little bit. Oh, this obviously needs to be bigger or bolder or redder, if want to take the simple design approach to things. So, it's the thing that people notice first and is the most dominant element on the page. Then the other things are kind of secondary, so on and so forth. So, even these simple principles like that of taking that hierarchy and beginning to make sure that visually that hierarchy is coming across, that can go a long way to guiding people through stuff. Jared: Now, I see a lot of folks, when they are putting together their designs, they do a lot of what I would call "Greeking," where they would put in fake text or fake elements, things like the lerm, ipsom, dollar sollit that famous piece of Latin/Greek that has made it's way through the graphic design world. And they don't put in the actual content and elements and are not balancing how the page will look visually with the actual stuff that it is supposed to show. Does that approach work effectively, or do you run into problems with not having the actual content there to see how those elements will be represented? Luke: I don't condone that kind of behavior. [laughs] You know, basically, I think, I have a little bit of a different rationale than what you laid out. For me it really boils down to the scalability of the design. Is it actually going to work with the real content? You know, I'm sure I can throw some Lauren Ipsum into something, but... I don't know is it actually going to be five lines of the text? Is it actually going to be a line of text? Those sorts of things ultimately play out to the overall balance of the page so unless you start dealing with the real elements and real constraint you are not going to get toward something that becomes a viable solution. I am going a little bit on a tangent here, but this is one of the problems I have with people presenting things that are more wire frame in nature as sign off on this design when it is in wire frame state than have actual screen real estate constraint built into it. There is no relative or actual scale in it. Folks at work think Andre Korozmechuc over at Evolution Studios is a strong advocate of doing pixel perfect wire frames. What he means by that is he actually has a pixel grid that he is working under when he is doing these sorts of higher level, more abstract representations of the function on the page. There is an element of reality there, right? And I think, the same thing happens in the Lauren Ipsum case which is there needs to be an element of reality with the things you are dealing with. Another quote just because I am in a quoting mood here, that I like to call out, especially to my team over here at Yahoo is, "Design is the process of gradually applying constraints until an elegant solution remains." So, we always start out with this big, wide open field, and then we start layering on decisions, limitations, all sorts of constraints that sort of bound the problem space. When you bound the problem space appropriately, what emerges is something that actually makes sense within that space. Lauren Ipsum and things like very high levels representations of screen designs like you may have seen some of, wire frames don't do much to bound the space, right? They keep it very free and open. A few lines of Lauren Ipsum can fit just about anywhere. Jared: Right. Luke: To go back to your point earlier around how you can actually start thinking about design as a holistic hole, this goes back to another one of the points I had around misconceptions that organizations have. One of the ones I run into pretty frequently is that people have this perception that visual design can be evaluated in small pieces so, there's kind of a tendency to talk about when someone is looking at a representation of a software application design or a web page design. They really start talking about the different elements in isolation, so - oh, the logo. Can you make that bigger? Can you change the color of this headline? Can we try a different image here? It's just little pieces in isolation. But, the reality of this is that the overall visual design is very integrated. Let's say, we ask a designer to go and make something blue. They'll go back to their desk and try to make it blue. By making that blue, all of a sudden this other piece has to go to yellow because, otherwise, the balance is thrown off. And because they made that yellow, well now, this image over here isn't popping enough so we'll try a different image that reflects the pallet and so on and so forth, right? Decisions made in isolation on a visual design don't yield necessarily a coherent overall visual design. As much as we like to sort of dismiss this notion of a kind of balance to layout the whole thing with the golden ratio and stuff like that, subconsciously when people look at something, they have a sense of whether it has some esthetic integrity regardless of what their training and background is in that, right? If something feels well structured and well organized and kind of put together, there is a subconscious - oh, I can achieve something here or oh, this feels simple enough for me to get started. When that balance, that holistic picture is thrown off things seem really intimidating and complex and people might not be as willing to dive in or feel confident about what they can actually do there. So, you get that "bad vibe" when you encounter a web page where everything is screaming for your attention at you because everything needs to be the most important thing on the page, right? You don't have that sense of confidence and of coherentness that, hey, this thing actually knows what it's doing. It understands what it's trying to tell I and I can trust it and we're going to have a good relationship because it's not going to try and jerk me around in all sorts of manners. Jared: Oh, along these same lines. Have you run into a misconception about when visual design starts being a focus within the development project? I've seen a lot of teams who say, "Well, we're just getting the basics down now. We're going to put the visual design on it right before we ship". Luke: Yeah. I think, that's sometimes an issue, sometimes not. The classic design answer is it depends. There is a lot of times where focusing on core functionality upfront makes a lot of sense. You've kind of got to get that stuff down, but there's other times where we literally, and I have personally, just jumped right to the final visual presentation because that's the most accurate picture of what the thing is actually going to be. So, my general tendency is to go kind of full bore upfront as a - I don't want to call it a vision piece but as a where we can potentially get to state. So, you sort of go to a potential end state and that gets a lot of the issues out on the table when it is like a fully, visually designed, almost - I don't want to say shippable but you know, you could literally start turning it into specs for engineers if you wanted to. I think, you should. We kind of get that out there. Then, a lot of issues start coming up. Everybody's opinions really start coming up; everybody's insights and the things that they are ultimately interested in start coming up. Then, you can take all of that information and go take a few steps back and focus on more the core functionality -what features do we need to have in there? How do they integrate? Spend a bit of time in that state; then come back up and layer in some of the visuals on top of it. Jared: Isn't there a fear though that if you jump full bore at the very beginning that you are going to spend a lot of time talking about colors and fonts when you should be talking about. What is this thing actually trying to do and do we have all the right pieces here to be able to do that? Luke: Yeah. It's really how you set context. One of my favorite ways to console designers when they get feedback like that - should that be red or blue or can you make that yellow - is when you go in front of someone who has a business stake in the product or who has responsibility for... I don't know, a few million or a few thousand or whatever customers that the product actually has. You go with them and say, "Hey, here's what we're thinking about the next generation of product, and this is why this is like this. And these are the ideas we are trying to communicate". And if they start diving into... can you make this blue? Can you make this font bigger? I honestly think it is an avoidance tactic. So, they don't have the confidence to make the decisions around the strategic direction the product needs to go nor do they have an understanding of what features their customers actually want and how to deliver on those. So, they jump into things that everybody can have an opinion on, which are colors, fonts, images, right? Everybody can have a favorite color, so it's very easy to jump in and say, "Oh, let's make this purple. Let's make this yellow". When I say setting context appropriately, what I mean by that is before showing the visuals, really laying out what you're trying to achieve and why. And then when you put out the visuals explain how they are reflecting those kinds of core goals. Too often, folks will kind of come into a room with a client or with a business stakeholder or whatever and just kind of put the designs out there and say, "Hey, here's our designs. What do you guys think? Which really sets absolutely no context about how you got there or why and where you are going next? Jared: Right. Luke: So, painting a picture underlying the design is a very important thing. And the more you are versed in this vocabulary of visual organization, the more you can tie actual user needs to business goals, to what's on that piece of paper. So you go in there. Let's say, we've heard from our customers that features X, Y and Z are important because in their daily lives they are doing A and B. This representation here really focuses on task A and kind of puts that at the core focus of what we're trying to achieve here because we think it fits in very well with the day to day tasks of people that are using this software. Jared: So, you're not going in and just saying: So, what do you think? You're saying: Look, we started with this task. Users tell us that they need to get this done. So, given that, we have created this design that focuses on this task and we've brought these elements to the forefront, because those are the elements that are the most important to getting the task done. Luke: Yeah. In fact, even more so than that. Sometimes we use the visual design to net out what's the focus of the product, in general. This is the ideation phase of things. So, there's general idea out there about something we want to achieve and we literally use, let's say, the front page of the application as an exercise in honing done our messaging and trying to really communicate what is this thing, who is it for, and why does it matter to them. So, we'll go through a bunch of revs to have a representative example of what this thing is trying to do. And use that to really guide the product... I don't want to say the product road map, but the overall product communication, feature sets, structure, that boils out of that. The thing that I like to have emphasized to people is that a lot of times the home page of the site is very much more for the client than it is for the customer. And we use it with the clients to walk them through what are we actually building here. How can we represent it simple, concise, visual way. It becomes almost the elevator pitch, right? And working through that process of being very high fidelity and it's something that very much communicates, helps us drill down into that big picture strategy, focus, what's the purpose of the thing and why are we making it story. It's very challenging to do with words, sometimes. Jared: Right. Luke: Because words can be interpreted a gazillion different ways. When you actually put something down on paper, especially when you put down a product representation on paper. That makes it very, very tangible for folks. So, it's a nice way to literally utilize visual representations of strategy, product direction, value propositions to get everybody on the same page. Jared: Cool. So, now you are going to be talking on just this topic at the "User Interface 13 Conference" in October in Cambridge, Massachusetts. What are some of the things that people are going to get from the session? This is a full day workshop, right? So, they haven't learned in this few minutes that we've been talking here; they haven't learned everything that they're going to learn, yet, right? Luke: Well, the things that we haven't really talked about are the how to aspect to this stuff, right? Jared: Right. Luke: We're talking at a pretty high level about what the value of all these things is. We haven't really gotten into the nitty gritty of how to make it happen. So, that's going to be what the workshop is. The workshop is taking some of these principles and turning them into very actionable insights, strategies, really tactical things that you start playing day to day. So, I start out by really walking through this notion that visual design is a bit more than just... I just I'll use the phrase again, of making things pretty. It's got this visual organization component to it and I'll walk through how you can manipulate visual organization, using factors like contract. Using things like visual hierarchy to really represent core tasks, core messages to people in the context of websites and web applications. I always like to show a heck of a lot of examples. So, I have a lot of before and after examples that illustrate this. And we do a lot of walk through and discussion around how do we get from example A to example B. All the things that we concretely changed and did and why did us do that. So, throughout the day that's a lot of the conversation. Through having those conversations a lot of the vocabulary a lot of the ways to position this and a lot of ways to thing about the presentation layer of your application emerge. I also have some exercises we'll do around to that as well. And then, so that was the first half of the day. [laughter] In the second half of the day, the topics we address are... and this is one of the misconceptions I didn't mention before. A lot of people feel the way to get a visual design to where they need it to be is to add more things to it. You know, add some emphasis here, make it bold, make it bigger, and make it redder. We really talk about the process of being able to remove visual information from the interface and from a product and what impact that can have to communicating clearer goals, actions and information to people. Lastly, the third part is around what people traditionally associate with visual design, which is having a bit of a brand message or an impact or some emotional appeal. So, how do we... I just go to this process really is determining the right personality for your content or for your service. So, what's the right way to select combinations of polaro type images, patterns, textures, what have you, in a way that is very appropriate for the people who will be using your application or your site. It's that combination of personality and visual organization is how you put together the visual communication package and really generate applications and states that speak to folks in a way that's very actionable. The thing I always like to repeat is: communicate what is this, how do I use it and why should I care? Jared: Excellent! Excellent. Well, last year you gave this seminar and it was just a huge hit and it filled up pretty fast. So, people get a lot out of it and people seem to really want it. I expect the same will be true this year and it's one of the highlights of the conference. So, we're glad you are going to be doing this. It's a great course. People love it and we talk to folks afterwards and they say: Yeah, I really got a ton out of that. Luke: It's a lot of fun so I'm glad people are enjoying it. Jared: Excellent. Excellent. Well, I want to thank you very much. We've been talking here with Luke Wroblewski, who is at Yahoo, a senior principal of product ideation and design. He also has just written the amazingly top selling book: "Web Form Design: Filling in the Blanks." It's been great talking with you Luke. Thanks very much for playing our little game here. Luke: Thanks, Jared. My pleasure. Jared: Take care. [music] Announcer: Don't forget if you'd like to hear more from Luke Wroblewski, be sure to sign up for our user interface conference this October, 2008 in Cambridge Massachusetts. Learn more at UICONF.com. That's U -I-C-O-N-F.com [spells out]. That's all for this week. Thanks for listening. Goodbye. [music]