SpoolCast: Patrick Hofmann Effective Visual Design Virtual Seminar Followup Podcast Transcription of audio available here: [Introductory music] Brian Welcome to the Spool Cast. I'm Brian Christiansen. This week we Christiansen: have a special show answering audience questions and follow up from our most recent virtual seminar, Essentials of Effective Visual Design. During the seminar we received more questions than we had time to cover, so Jared Spool sat down with Patrick Hofmann to cover many of the remaining questions. If you were unable to attend this seminar, don't worry, there's plenty in here for you, too. And now, on with the show. [music] Jared Spool: Welcome, everyone. I'm Jared Spool, and this is another episode of "SpoolCast." Today I have Patrick Hofmann from Design Ph, his own firm, and Google Australia . Patrick just gave us a wonderful virtual seminar on the Essentials of Effective Visual Design. We had a whole bunch of folks attend that virtual seminar, and they asked some really awesome questions. I thought we would take some time today to answer some of the questions that we didn't get to during the seminar. Patrick's calling in here all the way from beautiful Australia . How are you doing, Patrick? Patrick Hofmann: Very well, and it's a stunning morning here. Sorry to hear that it might be snowy and blizzard-y up in Boston . Jared: It's a little chilly, but we haven't had the snow yet. Patrick: OK. Jared: No, other parts of the country have had snow, but not us. Patrick: Cool. Jared: So you gave a fabulous... Patrick: [laughs] Jared: ...virtual seminar on Effective Visual Design. It was a great sort of introduction to what that was all about. It was a full 90 minutes, but I thought I'd give you a real challenge and let you explain it in two minutes what you covered. Patrick: Cool. What did I cover? Essentially, it was focused on a lot of the usability research I had done over the last 14 years. My top three things, I think, that I discovered, or uncovered, was the fact that images, in general, are given too little priority. In my usability research it was pretty obvious that images seem to lack a lot of meaning. What can we do to amplify the meaning in those images? How can we devote as much time and investment in making our images and visuals as easy to understand and easy to use as we do with our words and our user interface designs and so on? One of the main findings through my research was that as soon as you apply graphic templates... Much in the same way that you would apply styles to a style sheet, your visuals throughout your information, whether they be flow charts or screen shots or maps, or even just photographic images, you need to establish some hard and fast rules through your business model and your process and all of your publications, to say, "You know what? We can template these things. We can make them consistent, we can make them part of a single brand identity." If you can apply those styles to all your types of visual information, you have something that is very, very compelling, very consistent for your users. But the best templates in the world won't necessarily make your visuals easy to use. You have to make sure that you're showing what you mean. So if your image is a photograph, and it is supposed to convey a certain mood, then make sure it does so. If you have a visual instruction that needs to instruct someone how to do something, make sure it does that. Show what you mean. Don't simply have a visual indication of the product. Particularly with technical illustrations, I find that they're just something that is drawn in its anatomically perfect form. But we're not communicating just the physical nature of an object. We need to convey the instruction, itself, or the actual message. So showing what you mean is vitally important as well. In addition to that, I talked about Robin Williams' fantastic premise, which is CRAP, designing with CRAP. Which is contrast, repetition, alignment, and proximity. And those four modes, those four principles of effective design are absolutely vital. In conjunction with templates, in conjunction with showing what you mean, to really create, evaluate and measure effective visual design. Having effective contrast will make things jump out of the page properly, having effective repetition creates a consistency throughout your information. Alignment, everything aligning with everything is fundamentally important. Placement of things isn't just an arbitrary thing. Try to make sure that all of the objects visually align with something else on the page. What you will achieve is better unity. And then proximity. How close does something appear to something else? Things that appear closer together will appear to be grouped, and is that grouping intentional. Is the meaning supposed to be... The meaning that that grouping conveys, is that correct? And so CRAP is a way of judging and measuring how effective your visual design is. So that was just a very quick, two-and-a-half minute overview. But there were plenty of questions that sort of feed off of that, so I'm looking forward to answering those. Jared: Cool. OK. I thought that was a great summary, and I've got to tell you, I really enjoyed the seminar. I got to see it multiple times... Patrick: Excellent. Jared: ...because we went through the rehearsals. Patrick: Oh, good. Jared: But I learned something every time I went through it, and people really liked it. Patrick: Excellent. Jared: So we got a bunch of questions people sent in and stuff. And Kathryn asked about localization. There were a couple of people who didn't really understand what you meant about localization; in particular localizing graphic elements. Can you say a little bit about that? Patrick: Absolutely. There's this common misconception that localization is only about words, and it's about translating something into another language. In actual fact, localizing a piece of information to a local or specific audience, one part of it is to make sure that the correct mother tongue is applied to those words. But for visuals, it's actually fundamentally the same. The same image or the same visual doesn't mean the same thing across the entire planet. One perfect example are the entire use of red and green to denote, in your stock listings or market results in your local business paper. If the market goes up, it's a big green arrow in North America. In actual fact, in Far East Asia, it's the exact opposite. It's an arrow going upwards, but it's a red arrow. Red denotes success and positivity, whereas green generally means, particularly in the Far East, it means the market is down, there's something negative happening. Localization is unbelievably necessary. To try to figure out for this particular market or this particular lingual group or this particular cultural setting, that we need to localize our graphics, or our colors or our visual images much in the same way we would like to change the wording according to language. In conjunction with localization is the issue of internalization. Localization is to change your particular visual or your particular text or your particular interface to satisfy one particular market or one particular culture. Internationalization does the exact opposite, is create one interface, one design, one image and make sure it means the same thing to the entire planet. That was the basis for most of my research is how can we create one image that means the same thing over the whole planet. This we always ran into snags, particularly with symbols. Symbols and icons, particularly to denote warning or that something is OK or not OK, something that is allowed or prohibited. That's where we always ran into trouble. Using the human hand, the image, a silhouette of the human hand, to say stop here is something that is not particularly well internationalized. Because in certain parts of the country , particularly North of the Middle East and some countries bordering the Mediterranean, the single human hand at you in your face is like I'm flipping you the bird or giving you the finger in North America. So, it's... Again localization and internationalization are sort of hand in hand, but they achieve two different objectives. If you're localizing your products to a particular market, make sure that your use of symbols and images addresses each of those audiences, the specific audiences. When you're internationalizing, it's like localizing to one audience. That's everybody. That's quite the challenge. Jared: That seems that it would be a lot harder to do. Patrick: Indeed. Indeed. It makes the evaluation, the testing so much more of a challenge. How do you capture with a digestible or at least an easy to handle number of usability participants over the entire planet within a given amount of time with usability research. How can you capture all of those different market segments or cultural groups or lingual groups to satisfy your usability objectives. Jared: I would think that the fallacy would be that internationalization would be cheaper than localization, because localization requires that you have this staff that everybody for each type of local culture that you are trying to go for. Whereas internationalization just requires one group. Unfortunately it would seem to me that the fallacy is that that one group has to be so knowledgeable about every possible culture that it's basically the same cost. Patrick: Right. Right. There are ways of minimizing the cost though. In my experience, we were conducting basically usability evaluations purely over the net, purely within instant messenger, with web x. Essentially using our usability labs more as a broadcast hub as opposed to an in-lab, in front of the two way mirror sort of setting. We were conducting almost all of our tests with miners from Alaska, farmers from Saskatchewan, and meteorologists from Denmark. Just purely over the web. In essence, you send as their incentive, you just send them the web cam that you use in your usability evaluation. It was such a quick and easy way of conducting actually very, very global research to satisfy these objectives, again to measure how well we internationalized some of our products or images. I agree that the fallacy is there, but there are ways of minimizing that cost. Jared: Right. So, on a slightly different note, how do you feel about hyper-links, right? One of the questions that came in, Julie Rowe talked about using different colors or whether hyper-links should be underlined, using color designations for visited links. From a graphic design perspective, do you think that that has changed at all? Is that just as important now? Patrick: That definitely involves... Julie's question is fantastic, because it address this issue of the evolution of crossover experience or just general usage experience of the web. Underlined text to denote links has been around since the inception of the web. Having that blue link turn purple when you visit a site, is something that has been ingrained in us. Younger age groups not so much. Because, they are seeing that that convention has sort of strayed. It's... Not all links are underlined, however on Hover they might be underlined or there's a different shade or something like that. What's important to note is that there is a difference or that there is change between something that is not clickable versus something that is. That is fundamentally important. To address the issue of experience, simply because a huge majority of the web surfing audience has grown up with that convention, it is very, very safe to continue using that convention. It's not absolutely required, but I find, in a lot of contexts, it's unbelievably helpful. Again, if you're internationalizing your website, in particular, for an audience that includes people who have been on the net for a long, long time and those who haven't been, to internationalize your site to that broad spectrum of users why not continue the status quo. There's absolutely nothing wrong with it. The one thing that I have to say that even here at Google, what we've done is, we've actually toned down the hyperlink blue in some cases. It's not that totally in your face blue. It's just something that's slightly muted, again to achieve better balance across the page. In some contexts we may lighten it even further depending on the number of links that appear on a page. What you will notice is that we still, more often that not, we still underline our hyper-links. We still color visited hyper-links purple and so on. Jared: OK. Nancy asked about the placement of the fold. The fold being that imaginary line that you cross when you have to start scrolling, right? How does visual design change when you start to design things that go beyond the fold? Patrick: Yeah. That's a huge challenge. In the actual webinar last week, we were talking about the rule of thirds. How it's not just an arbitrary thing that's applied to photographs where you split your image into nine separate tiles, into equal thirds. Anything that your focus of attention, if it crosses when one of those intersecting points of those nine tiles, then you've got something that's well composed. I gave a few examples of websites where it showed, where the main body content sort of being in the center of your viewable page or your viewport, if you will, and having your primary banner at the top. Your primary navigation on the left, for example. Your secondary information on the right hand side. That is inherently almost accidentally followed in the rule of thirds. As soon as you go below the fold, it's like, "Oh. That rule just turned to total mush." In a sense it's true. What I was addressing was the idea that your initial viewport, the page that you initially scan when you come to a particular website or application, if people can see the information effectively grouped, particularly if it's sort of oriented within this rule of thirds, then you've got something that's really nice. As soon as you scroll down, I think that rule really does go out the window. Because we can't see that rule of thirds applied across something that is very vertical, has a fixed width, but is very, very vertical, and potentially endlessly scrolling. So I always try to apply that rule of thirds to the first image or view ports that someone sees as they arrive at a particular page. As soon as you go below the fold, make sure that that stuff that's below the fold is, indeed, secondary information that meets the same level of information type or information role as the stuff that sits at the bottom third of the page when you initially come to it. As I always try to do, try to keep as much, obviously, as much above the fold as possible. But again, stuff that's at the bottom should be considered of a secondary information role, and not of a primary information role, or priority. Jared: Well, that's interesting. One of the things that occurred to me while you were talking, and I'd never really thought about it before, even though I've talked about scrolling a thousand times in my life, is I've never thought about the fact that traditional graphic design is based on this model that you can see the whole image. Patrick: Right. Jared: And sure, you crop things, but when you crop something, it moves it out of the view port. It's not like the thing that you cropped is going to scroll back in at some point. Patrick: Right. Jared: It's got to be a struggle for even people who have a good, solid, traditional graphic design background, to move to a medium where you can't control a couple of the edges of the display. Patrick: Exactly. That was a graphic designer's dilemma. When web sites first started becoming fully esthetically designed, it wasn't just a bunch of endless text and code that was grouped together with the universal navigational hockey stick in the top left corner. It was horrible. Graphic designers think why would I even want to design to this. And it's because it wasn't rigid, it wasn't reliable. Your audience can actually change the size of the view port, it can actually change the size of the window. And it took quite a few years for art directors that I worked with, graphic designers that I worked with, visual designers that I worked with, for them to realize, you know what, we have to be able to make this as malleable and moldable, to try to design not according to this singe, rigid size, but several different sizes. And that's, I think, what's fundamentally important, is try to make sure that you design your visual imagery and just the basic visual design of your site or your product, according to all of those scenarios. Or as many groups of those scenarios as possible. Jared: And that brings me to another question that somebody asked. Barbara asked about any tips that you had for showing images that are too large to fit the template. Patrick: Yeah. This is a great question because it actually was fundamental to the preparation of my sides for the seminar last week. And that is I had countless examples where it's like, "Oh, my god. This is going to be totally hard to see at a small size." And that is, to provide an example, essentially a zoomed-in view of that particular image. Particularly if you're developing, whether it's a digital product of some sort, even if it's a hard copy marketing brochure, the impact of showing something at a reduced size, and then an increased size as either a before and after or a regular plus a call-out, is highly, highly effective. It doesn't need to take up that much real estate. It could be just an additional slide in your Power Point presentation. Or it could be the difference between showing in your marketing brochure, showing something in its thumbnail format on the front cover versus showing it zoomed in and cropped on the inside, for example. So the idea of zooming is really, really good at giving people context, and it refers to the repetition that I was talking about earlier. Where if you repeat an image throughout a document, it inherently applies a sort of a consistency and a like, "Ah. This image, I've seen this before. I recognize it for this. It has this meaning associated with it." And as soon as I see it again, it's like, "Ah. It's tying this whole piece of information together." But one thing I have to say, far too often, I see that people zoom in the entire image, and they don't crop it. They just take one small image, and they take that entire image and zoom it in entirely. What it creates is a lot of wasted pixels, almost. As soon as you zoom in there, zoom in on something that is salient or relevant to what you are trying to convey. So when you're trying to decide, in that zoomed in version, what you'd like to crop, think of what is the main message that I want to see in that image. What do I want my users to get out of it? And it fundamentally gives you that, helps you make that design decision as to what is most relevant to that visual. And it will make a much more user-friendly document or publication. Jared: That's interesting. I saw, I'm desperately trying to remember the name of the site, but I saw a web site that somebody showed me a couple weeks ago. It was a t-shirt site. And it was your sort of typical t-shirt site where it had 12 or 15 t-shirts in little squares above the fold. And there was no way you could actually see what was in the t-shirt. As soon as you moved your mouse over one of the t-shirts, without clicking or anything, it was just an on-hover, move on hover event. It would just zoom right in to the design on the t-shirt. And you would, by just moving your mouse subtly, you could scroll through the zoomed in design so you could see it in more detail. Patrick: Nuts. Jared: Yeah. It was really slick. And I think various people are really sort of experimenting. And you see it a lot in e-commerce, where people are struggling with the fact that they want to have these pages that focus on the product description, but at the same time they want to show the product in more depth. And people are playing with different tools for this. I think that's a great place to go to get inspirations, is to visit these different types of e- commerce sites. Patrick: Absolutely. Jared: OK. So, Patrick, Yolanda asked about the type of questions that you ask after user testing. Are there special questions that you ask to hone in to what makes a good design? Patrick: Yeah. Generally speaking, of course, you never want to reveal your in-depth question as to why a user achieves success or did not achieve success during the actual usability evaluation. During what we often called bookends to the actual usability interview, we had a whole series of followup questions that talked about not just what their impressions were on how confident they were about how they did and how they performed during the evaluation, what they liked or didn't like about the actual product. Just very specific questions about specific mistakes we might have made in the design of our actual product. For example, if a particular symbol failed to convey it's proper meaning, we would actually at that point, after the entire test say, "OK. This is what we were trying to achieve with this particular symbol. Can you think of anything that would be better than what we had presented to you." So something very specific. It's putting the usability participant in the role of the designer. And also just sort of re- questioning or readdressing what were their expectations. So, if they were supposed to perform this particular task, what symbol or image would they expect to see? Where would they expect to see it? It's a level of question that you do not perform during the test itself because it sort of... it takes away from the participant's role as an evaluator, not to say that you can't accept their suggestions as they are performing the task. But generally speaking, the type of question we ask after testing essentially puts the participants in the role of the designer. We also would get them to, get the participants to even do a card of sorts after the fact or get them to provide titling or naming and another suggestions again as the role of the designer. Jared: OK. If you have different departments that are responsible for developing your graphics, do you find it difficult to get acceptance across the entire organization? Patrick: Yes or no. That's a great. Kingsley asked that question. It's a very good question. The way you can get acceptance across an organization and as difficult and painful as this might be is to get everyone in the same room. I know that sounds like commonsense. But the more that the different departments communicate with one another, the more that they will overlap in the types of visuals and graphics that they are producing. The most contentious of departments, the most weakly communicative departments on the planet will actually come to consensus because they realize there is so much graphical stuff and visual stuff and design stuff that needs to be produced. If anyone can save another person's time more often than not, you can sort of achieve consensus or acceptance across the organization. Obviously, there are differences. The web department, for example, may have very, very different requirements than the hard copy collateral department. But those different design organizations design departments within an organization, for me lately, tend to work very well and achieve consensus when they just simply get to the room and say, these are my requirements; what are yours? Essentially, as soon as you ask those questions and share that information majority of the time you will achieve consensus. Jared: Yeah. This reminds of something I read recently. A Harvard Business Review article had, a couple of months ago, was about Pixar and their creativity process. They put a lot of weight into something they called dailies which are basically these meetings that they have where people show unfinished work. They show the work in progress. Patrick: Yeah. Absolutely. Jared: What intrigued me was this idea that when you show people stuff that you haven't finished and you talked about it in terms of, I would just want you to see where I am going and here is where I was thinking of taking this and here is the part I am struggling with, then people get on the page a bit more and they understand the rationale, and you are able to explain a lot of stuff that you can't explain when you are only showing finished results. Patrick: Absolutely. The importance of sketching something in a lower fidelity is hugely important. Again, to get the different departments in a room and looking and evaluating that preliminary sketching is vitally important. Because again, if you look at something that looks relatively finished, people will say I don't like that pixel there and I don't like your color choice, that little thing right there. It gets too specific, it doesn't evaluate the graphics as a whole and eventually it doesn't really reflect your requirements as a whole either. So, that preliminary sketching is vitally important. And again, sharing in design process is possible, it's hugely important. Jared: Nancy wants to know, sort of a final question here, Nancy wants to know about images for beauty's sake. There are a lot of folks who just needs that sort of smiling person on the screen. My favorite is in universities you see a lot of girls under trees. Patrick: Yeah, absolutely. It's funny. It sounds like I didn't really address in the seminar last week. In actual fact, images for beauty's sake are required just as much thought and precision as the technical illustration as the map as the flowchart, as the screen shot. One of the things I mentioned last week, one of the number one usability comments or comments from usability participants in my testing, the research has been... it's too busy, I don't know what this means like, can you just tell me what this means? And images for beauty's sake, the images that you throw in somewhere just for aesthetic reasons needs to do the exact same thing. They have to have an intended meaning. You are not just going to throw in that image of a woman sitting on a lawn or nice mouldy... a grassy pasture on a university campus, that's there for a reason. It's there to attract a very specific audience of potential undergrads that might want to apply to this particular university. Whether that be men who really, really like that particular woman or whether it's women who like that woman or women who want to be like that particular woman who's lying on the grass at the particular university campus. That image has a purpose. Again, it might be aesthetically beautiful, it might provide a mood, it might provide a texture to the page but it's got to satisfy very specific requirements or objectives. You really need to think about that meaning before you just plop that photo on that page. And you have to think about its composition and what is the human eye... what do you want every human reader of that image to look at first. When Nancy talks about images for beauty's sake, absolutely, fill your documents with them, but make sure that they have a very, very specific reason and a very, very specific role and a very specific tactic. That way you will have something that addresses the needs and expectations of your audience. Jared: OK. Well, thank you Patrick. That answers a lot of questions that came in. As I mentioned it was an excellent seminar and this was a wonderful chance to follow up and get your perspective on these issues. Patrick: Great. Jared: If you miss the original seminar and you would like a chance to see Patrick's work, you can do so. You can just go to our site and look for the essentials of effective visual design, our virtual seminar page and you will see his seminar and you watch it. You can get a lifetime access to the archive and watch it with your group as often as you'd like. Patrick: I want to take this moment and thank you very much for the time, and for doing this. I hope you had fun. Patrick: Thanks, it was my pleasure. It was fantastic. Thank you very much. Jared: OK. I had a lot of fun too and I hope everyone else enjoyed listening today. Thank you very much for encouraging our behavior and we'll talk to you in the future. Take care. Patrick: Cheers.