Jared Spool: Welcome everyone to another episode of the SpoolCast. I'm very happy today to have with us Noah Iliinksy who is part of the spring lineup here at User Interface Engineering. He has just appeared in a virtual seminar which if you missed it you can still get it, it was awesome, and he's going to be at our Web App Masters Tour as it appears in Philadelphia and Seattle and Minneapolis this spring. He's the co-author of a book called "Beautiful Visualizations" in which he has a chapter that he talks about what makes visualizations gorgeous and I'm very glad he's here with us today. Noah, welcome.
Noah Iliinsky: Hi Jared, thank you.
Jared: So, every time I talk to you, we're very quick to get onto this topic of something we both love which is how do you take really complex information and make it understandable and interesting and fun and interactive and all those things. You've been doing that for quite a long time. How did you start to get into that? What was the sort of trigger for you?
Noah: I had been a structured thinker for a very long time and sort of had visualizations in my mind in a not particularly specific way as I thought about structured problems. I went to graduate school at the University of Washington in the department of technical communication, now known as Human Centered Design and Engineering. I was there to do work on user interface, user experience, usability testing, that kind of thing.

In my first quarter in grad school I had a class called information design and we had a couple of assignments that involved drawing diagrams. I drew a couple of diagrams that my professor at the time thought were quite interesting. He said "You know what you should do, you should take an independent study. Take a quarter and just draw some diagrams, look at a bunch of diagrams and see what happens."

I did that, and I ended up doing that work for about a year and a half and I ended up writing about an 80 page master's thesis on how to draw good diagrams. The particular angle that I brought to it that I hadn't seen done deeply particularly before was not just about graphic design, not just about data visualization. And not even quite at the focus level of the pure cognitive psyche that you see Colin Ware doing where they know a lot about perception and how people understand and think about things like shape and color.

But, I really brought sort of a user centered design perspective to information visualization because that's what I was there to study and that's what I was immersed in so that really informed how I think about putting knowledge on the page. Just really thinking about who's the audience for this and how do you make it most effective to let that audience do their job well and let them be successful.
Jared: Well that's interesting because I think you're absolutely right that there's a lot of stuff. I'm a big fan of Edward Tufte's stuff. I've known Ed for a long time and been to his workshops many times. I send everybody I know to them. But one of the things that comes back from all that is you go there get really excited about the march of Napoleon and all the great stuff he puts in front of you, but then it's time to stare at your screen and do something really cool with the design you're working on and it's really hard to make that transition. Until I started talking to you about this I never really saw anybody who is really great at explaining that transition.
Noah: I mean it's really a design process is how I look at it and how I talk about it and teach about it. As with any other design process, or any other well done design process, or writing process for that matter. It's really a matter of understanding what it is that you are trying to communicate and understanding who your audience is and their whole context and every user centered design sense of that, you know their jargon and everything.

And using those to prioritize things like what do we include in this visualization. How do we choose which data to include and more importantly which data to exclude because it's very easy to get seduced into adding more knowledge simply because it's available, even though that may not contribute to your final goal or the goals of your audience.

You pick data, you have to decide what it looks like on the page, you have do decide where it goes on the page. These are all topics I am going to talk about in the masters tour. It's a design process and you can parameterize it and you can actually make it like any number of other design processes where you step through particular phases and the goal at every phase, I think, is to understand that you are making design choices and the best choices are intentional choices not arbitrary choices.

So the work that I have done has been all about teaching people how to understand one, that they are making choices and two, give them some foundation to make the right choices in each of these design phases in terms of what data do I include and how do I think about my users and how do I decide placement on the page and all these sorts of things.
Jared: See now you are getting to one of the things that I'm most interested in when I talk about design which is this idea of creating a language and a vocabulary and a set of distinctions and an understanding of the patterns for the things we are designing. To me, the difference between intentional design and unintentional design is that in unintentional design we often do it because we don't have a language. We don't know how to describe the thing we are designing.

We don't know how to think about the good results from the bad results and we just sort of copy stuff we've seen or we just make stuff up. It's not a whole lot different then the way a baby sort of asks for food it just sort of blah, blah, blah and stuff comes out and they don't know what is happening there. The refinement of language, being able to know that there's six different ways that you can design something and that some of those ways are better in some contexts then others and some never work. That set of distinction, that language I think, is really important and it sounds like that's exactly what you have been doing with this whole idea of designing graphic elements.
Noah: Yeah, really trying to make it an intentional process. Really trying to give a way of thinking about it so they can not just design, like you said but also have an ability, some insight with which to critique other stuff that they encounter in the world and ways of looking at a visualization and not just saying "wow that's cool there's a lot of stuff there" but being able to really say "ah, I see why they did this adds value and that thing over there maybe not so much, it's fun that they put it on the page but it doesn't actually contribute to my end experience" for example.
Jared: Exactly, exactly. Well, that's interesting right, because to me when I start thinking about critique, and I've been thinking about critique really hard lately, one of the things that occurred to me that's the beauty of a really well done critique is you separate out the conversation of where you're trying to get to from what it is you've actually just designed.
Noah: Yes.
Jared: You have those separate conversations so that you can first as a group when you are in the critique session, because critique is a group activity, you're talking about what is it we are trying to do? If not everyone is on the same page of what you are trying to do then you can have that discussion right then and there and then you turn to the design and say "OK, once we've now decided what we're trying to do does this design get us there?"
Noah: Yea, that's such a critical point and actually that distinction between functionally what are we trying to achieve and what is the design we are using to achieve it is huge. I actually had a whole course in grad school on that based on the work of Nam Suh who is at MIT, but I spent an entire quarter working on problems where you separate the function from the design. And it's so easy. It's instinctive almost for us to say, oh, we're going to do a drop-down menu or we're going do a bar graph. Because we know what the answers are; we're smart folks, we've done this before.

And so we'd immediately leap to the implementation that we know, that we are familiar with. And we often don't dwell enough on what the function is that we're really focused on. And the example that I give of this, this is basically a paraphrase of something that happened to me professionally as I'm talking to this internal customer for the system I was working on. They said, "We've got to be able to list all, whatever, 200 customers alphabetically."

And I said, how come. And I said, well, so I can scroll through it, I can find the five that are my customers. And I said, you're logged into the system. The system knows who you are, what if we only showed you your five? And they said, oh, we can do that. So they're so fixated on, "Well, we alphabetize, that's how we find things in the list." And we could have implemented it with an alphabetical list of 200 customers. But being able to step back and say, really, the function we want to achieve is you get access to your customers.

And there's other ways to do that. And of course, this goes for visualization, this goes for interface design, this goes for writing, anything that you're intentionally creating a system for other people to use, understanding their usage. Really their usage, not just the incremental usage; not just the next step in their process, but the goals that they're trying to achieve. It changes the whole design process and you can keep that in mind for more abstract place.
Jared: Well, and so this idea that you're working on this stuff and you've got this way of first describing what it is, and then actually seeing if you're getting there, with regard to graphic visualization, is that different in any way than it would be for, let's say, form design on a screen or working with marketing persuasion type activities, trying to get people sign up for something?
Noah: I think it is in some ways... I think web forms, not to say that they're well-understood at this point. But I think there is a finite amount of variance in a web form that you've got titles and fields and you've got some other inputs. In some ways, you're limited by the medium there. There's just not going to be huge amount... and I can hear Luke grumbling in the background.
Jared: I was hearing that too, I was wondering what that noise was.
Noah: He and I might have to rumble later. Not to deprecate web forms, but it's a little bit finite. It's a well-bounded problem. And I think with visualization, you have some parts of it that are well-bounded that we know what the best practices are for some flavors of data visualization.

We know when to use bar graphs versus line graphs, versus pie graphs, which is almost never. But there's so much more to it when you add more layers of data, when you add qualitative visualization that's not just quantitative, you can't just put it into a number. These are the aspects that really intrigue me because we don't have conventions and standard metaphors around them yet.

And so at some level, you end up, when you are blazing new territory here, you end up in a situation where first you have to invent a language. And then you have to teach the language to your customer or your audience, and then you can start talking about your data.

And so this adds a lot more cognitive overhead, both on the part of you as a designer, and honestly, sort of a higher obligation on you as part of the designer to design this language in a way that's going to be effective for your audience. Because then you've got to teach it before you could start getting any of your content into it.

As a culture, I feel like we're a little bit less visually literate in some ways. We all get a lot of reading and writing education, if not skills, as we're growing up, but skills on how to visualize effectively.

I have a physics degree, so I was trained in the sciences and basic graphing and that sort of thing. But again, that's this very well-defined finite set and then you go into the bigger world.

And this is where people like Dave Gray of XPLANE and Robert Horn, who's been writing about the stuff for decades, come in and say, "There's this whole universe of visual language that most of us are not literate in, that most of us have these tiny little inklings, these little peeks through the cracks of." But there's so much more to talk about it and I don't think most of us have a good handle; I know I certainly don't.

And so for me and for people who are doing this effectively, I think the best thing to do is you learn a little bit about the cognitive psyche, you understand some of the social norms and you build piecemeal on understanding a personal literacy that's going to work for the audience of your particular material.
Jared: In some ways, what you're talking about reminds of this map that I recently saw of the United States, in 1680, 1685, somewhere in there. And it has the East Coast really well-defined and Mexico and California. And then once you get to the Mississippi, there's nothing. There's no boundaries, there's nothing. It just says "It's full of wild bulls, " it says in big letters on it.

And it was this completely undefined thing. I think in some ways you're right that the idea of web forms is like the East Coast of the web space. We've been living there for a long time, so we understand it pretty well. And even though there are still uncharted places, they're fewer and farther between. This idea of graphic visualization is really not charted at all. There's been a little work by people like Tufte, and some work in dashboard design by... who is the guy who wrote the great dashboard book?
Noah: Stephen Few, "Show me the numbers, and Information Dashboard Design." And I forget his recent one, but yeah.
Jared: Yeah, but that's about it. And there's not a whole beyond that Colin stuff, as you said. But there aren't a lot of examples to thrive on. There aren't a lot of things that people will have bumped into. I mean, the thing is that today's young designer tackling their first real design project has probably filled out dozens, if not hundreds of forms in their life, online.
Noah: Oh sure, couple a day, right.
Jared: Yeah. But that same designer has probably not run into any really good decent examples of visualizations, except in a couple of very pointed parts, maybe two or three a year.
Noah: Yeah. And the difficulty is that it's become very popular, which I think is great. And there's a lot of people doing a lot of work which I think is great. But as we said earlier, there's very little critical analysis of what's out there. And so you see some of these visualization blogs, and everything that goes by gets re-blogged.

And so there's a lot of exposure, but there's very little commentary that people can draw on to inform their consumption of these pieces, that says, this is really successful because of this and they did this thing wrong; this one we think is more successful as an aesthetic piece rather than an informational piece. Like there are so few people engaged in the conversation.

Those people definitely exist, but we're still, I think, a pretty small minority in the larger boom of visualization. And so as a novice, to your point, it's very difficult to have some guidance in terms of which of these is a good example and which of these is a bad example.

And that's something that I talked about a fair bit in the seminar is here's some things that makes things successful and here's some things that makes things less successful, and we're going to look at some of them side by side or one after the other and point out the things that make this effective and make this not effective.
Jared: That sounds really, really quite cool. I mean, I'm really excited to hear about all of this. Because I've been really excited about what the potential of this could be. I think that we don't do our audiences as much justice as we could, because we constantly put things into large tabular form that we require people to sort through and limit ourselves to column sorting and simple data filtering to be able to extract out what's going on.

And I think that there really is something here that could be really neat that once we get that power into our fingertips and we can really start to embody this, and we get some tool kits in place that let us do this really quickly and effectively-and all that's coming about-I think we're going to see a revolution in terms of the way information pops out and really works.
Noah: Yeah, I think so, absolutely. I think you're definitely right about tool kits, the things like Protovis, things like the processing language and a whole bunch of other ones a lot of people are working on, on ways of getting better tools to allow people to visualize more quickly into the market, not just limited by drawing it by hand with Illustrator or drawing it with OmniGraffle but sort of bridging that gap between end user hand tools and programming environments where there's a structure in place so that you can, with code, very easily draw images that have a lot of different elements, hundreds of thousands of elements, draw images that are interactive.

Really sort of do the heavy lifting of the mechanics of the visualization in the background and let people get to the point where they're expressing with it rather than having to spend all the labor dragging points on the screen and what not.

And I think that's going to make a huge difference because as these tools get better, and as these tools get more popular and there's more written about them, and there's more books and what not, every bit of accessibility lowers the barrier to entry and gets more people thinking about them, gets more people creating and getting in part of the conversation of what's going on.
Jared: So here's a thought that just occurred to me. I don't know if you've been paying attention but over the last few years we've seen a real sort of jump in the interactivity of websites, and one of the contributors to this has been the tool kits. It started with the Yahoo pattern library, Yahoo UI library, but then things like the Prototype JavaScript toolkit and then jQuery came on the scene. And once those things hit, all of a sudden because these tool kits simplify the process of drag and drop and light box style layers and all sorts of things, developers had this room to play.

And so the tools offer a lot of potential but the other thing that happens is that now, Uncle Ben said, "With great power comes great responsibility, " if I remember correctly. Like we see whenever we get our hands on new technology, a lot of the first stuff that comes out is a lot of crap.
Noah: Or just rough.
Jared: Rough, rough, yes. A lot of people today weren't around when the first laser printers came about but when they first came about everything looked like a ransom note. Because you could put 25 fonts on a page, people did. And so I suspect we're going to go through this stage where all of a sudden we're going to have a lot of really rough as you like to say, and crap as I like to say, visualizations and we're going to need to sort of filter out the good from the bad and really get our handle on what makes good, good and what makes bad, bad pretty quickly.
Noah: Well, and I think you're always going to have a gradient, right? You're always going to have some people who do good work and come into it thoughtfully and end up, even if naive, producing stuff of generally good quality. And no matter how long the tools have been out there and no matter how long the best practices have been out there you're always going to have people who are not creating things that you would publish yourself.

That's still the case with laser printing and desktop publishing. I mean look at the war over Comic Sans. Look at the fact that MySpace still exists, right? That there is stuff out there...
Jared: [laughs]
Noah: There's stuff out there that flies in the face of taste and it's always going to be there. And I don't think the goal is necessarily to eliminate that, because it's impossible, but I think the goal is to allow access to a more informed conversation for those that are willing to go look for it and have a critical mass of good examples, have a critical mass of good conversations out there so that when someone says, "Wow, I've got these new tools. I'm kind of having fun playing but now I want to learn how to do it well", that it's not difficult for them to find not just some good examples but some good conversation and allow them to learn on their own even absent a local community, allow them to go online anywhere else and see what's out there, and to be able to educate themselves.

And so when people make the choice to do it well, that that's a facilitated task, that that's not something that's impeded simply because there is nowhere to go to look at that.

So I guess it's sort of an issue of moving the average higher over time and making it a broader curve so that there's more goodness clumped around the average there, I guess. And then if that's accessible then it'll carry the next generation of designers with it hopefully so that when they get started they'll be able to say, "I know where to go." Everybody knows where to go to look for good examples. Everybody knows where to go to get good theory.

We know where to go to look for Web design examples. We know where to go to look at Web form design examples. Those best practices have evolved enough now that you can point to them. I think within a couple years we're going to get closer to that within visualization where if you're really curious, people will be able to point and say, "Go to this blog. Go to this book. Go to these authors. Go to these sites that are giving examples, " and that's where you can get some education that is generally understood to be guiding you in the right direction.

And there's always going to be the stuff at the fringes, and that's fine, right? I would rather have more people creating at all levels than limit the ability to create and contribute to the conversation to a very few.
Jared: Yeah, I think that's right. I think you want a lot of people creating a lot of stuff but then you also need, as we talked about, you need that language around literacy, right? You need to be able to talk about what is this trying to do and how close did it come to doing it, and what are the other options it could have used to get there.

And you need that ability to have the discussion and critique out there and to be able to make it so that people can understand what really drives a great experience, particularly when you're putting millions of data points in front of someone or carefully selecting which of the millions of data points you're going to put in front of people so that you get the results you want and the results they want.
Noah: Yeah. I tend to channel Kathy Sierra in this sort of conversation when starting the conversation about how do you plan your visualization, which is to say that you are judged by the success of your audience. Now that audience might be end users of your product, it might be your customers, it might be your internal employees who have to use this dashboard to make decisions in the company, whatever it is. Kathy Sierra has talked for years about making your users kick ass and that's the measure of your success. And I really believe this. I've taken this to heart in so many aspects of my life.

If you're a poet out in the void by yourself, that's fine. But as soon as you start interacting with any other individual, your genius isn't measured internally, it's measured by the success of your audience. Can they walk away and go be effective with what you have communicated to them?

And when you start viewing your design problems in that way, it's all about making the consumer of this knowledge successful, or happy, or whatever your goal is for them to take away from your product. It informs how you design the product. That's true for user centered design as we've all known for many years, and it works really well for visualization, too, in the same sort of way that this is a design process and as soon as you really start considering your audience and what you're trying to help them do, you end up with a better product because it really does inform the choices you make as a designer.
Jared: So, I'm wondering if as a designer I want to learn more about this stuff in terms of just increasing my literacy about it, understanding what the differences are, and I also want to begin to understand what's good and what's bad, what are the resources that are out there today?
Noah: Oh, boy. So, book wise you could do a lot worse than starting with Colin Ware. Who, I think he's a professor of psychology, but he's written a large textbook called "Information Visualization." The subtitle of that one is "Perception for Design."

And then more recently he's come out with a much smaller version that's sort of more applied and has a little bit less of the sort of depth of academic theory behind it called "Visual Thinking for Design." So, Ware, W-A-R-E. And he gives a really solid foundation in the perceptive and cognitive principles behind things.

"Good Magazine" online published a map a couple of weeks ago, choropleth map, and they were using red, yellow, green, I forget.
Jared: I remember seeing that, yeah, yeah, yeah. So the idea was that they had three different variables and depending on the amount, they had more saturated red or yellow or green. And then they would mix them together so you'd get purples and blues, and it was true RGB thing. But you look at this thing and you're like, I have no clue what this thing's trying to tell me.
Noah: Yeah, which is better, orange or purple? And we don't know inherently. And the reason is that those three colors are not cognitively, perceptually in the eye we have a very difficult time quantifying those and perceiving those as separate channels. We're used to seeing them combined and the software in our brains is optimized to that.

And you go to Colin Ware, somebody did this-and I apologize I forget who-somebody on Twitter said, "Here it is. It's page whatever it is in the Colin Ware book, " and it shows that the red, green and blue color channels are not very separable. They're the wrong ones to use when you want to encode different axes of information because we read them in combined.

And so it's things like that, it's understanding which properties are preattentive where you can scan the page and you can say, "All that text is black, " but if somebody asks you to point to the one word that's in red, you don't have to look at every word on the page. You say, "That one. It's right there." If you have a whole page full of the character O and there's one that's an X, you don't have to look at every O. You say, "That one right there."

That kind of thing, sort of the Gestalt principles of things like how proximity and boundaries group and separate things, all that stuff is in the Colin Ware book. So that's a really good primer, a good foundation in terms of how are people going to interpret the marks you put on the page, and I think that's critical to understand. So that would be not a bad place to start.

Stephen Kosslyn also wrote a book. It used to be called, I'm looking at my bookshelf now, it used to be called "Elements of Graph Design." That's been re-released, let me take two seconds. I believe it's something like "Design for the Eye in Mind." Similarly, really good foundational work on just how to think about it. "Graph Design for the Eye in Mind, " that book is almost more about literally bar graphs.

If you can get past the fact that he's using that as an example, all the things that he talks about are these fundamental principles of how do people perceive placement and shape, and how do you make good choices around that so that as you're designing something, your audience can interpret it, can understand it in the way you mean for it to be interpreted.

One of the key principles that kind of blew my mind and that I've used everyday since then from that book is he talks about the principle of informative changes which is that because we are pattern matching machines because that's how our brains work, when we perceive a pattern, whether that pattern is intentional or not, and then we see something that violates that pattern, we understand there to be meaning in that pattern violation, that that one is different and that means something.

And so if all of your marks are in a row and you get to the edge of the page and there's not quite room and you put it up on top or down below, then the first thing your audience says is, well how come that one is different, and they spend a lot of energy trying to understand why that one is different. And so this is the bottom line that says that things that are the same need to look the same, and things that are different need to look different.

That seems very simple. It seems very straightforward, but it's done wrong so many times. That there's inconsistent encodings or that there is consistency when there could be differentiation. And so it's kind of this fundamental design notion that we don't have a vocabulary to talk about yet. It's not part of the common conversation. It's not part of the common knowledge when people are designing information visuals. And a lot of people get it right. A lot of people who've been thinking about this either intentionally or accidentally get it right, but a lot of people don't.

A blog that I really like about this stuff, Robert Kosara-I'm afraid I don't know how to pronounce his name-but he blogs at EagerEyes. And it's not just quick little blogs, he actually writes articles and he's very good. He actually has a blog tag about the culture of criticism and talks about good and bad visualizations and ways of talking about them and ways of thinking about them.

He is probably a little bit more militant than I am, I think, but he really firmly believes that there is good work out there and there's bad work out there. And pretty much anything that falls under the umbrella of infographics, which is the sort of Illustrator ones rather than generated ones, he has strong opinions about how they should be done and the validity and the value of them.

I think his stuff is absolutely worth reading. He's a very smart guy. He's got very good things to say and he is a great place to start your education about thinking about how do you take a critical approach, an analytical approach to what you see, these examples that you see everywhere, and having some vocabulary to talk about which are useful and which ones are less useful.

So, that's a few good starting places. There are some other blogs that tend to have higher quality of good examples but there's always some fun or some pretty mixed into pretty much everybody's blog. And it's difficult because they don't say this one is just here because it's pretty or this one is here because fun, and it's less valid or less intellectually interesting or less of an interesting design example than some of these other ones.
Jared: Well that sounds like a great starting point. We'll try to get a list of the books into the show notes so that people listening can build out their library. I think that's a really good, good starting point. I was familiar with about half of the books you mentioned and resources so I'm anxious to get into the rest of them.

This has been really awesome. I've really enjoyed talking to you about this. This has been a lot of fun and I'm very excited about the upcoming Web App Masters tour stuff where we can really get into it. I really loved what you did in the virtual seminar. So, it's really a fabulous opportunity for people to understand what makes great data visualizations come alive and really work for people.

So, Noah, thank you so much for helping us really get our heads around this today.
Noah: Oh, you're welcome, Jared. Thanks very much for having me. It's a lot of fun.
Jared: And for everybody who's listening, you definitely want to check out Noah's virtual seminar, which you can find at the uie.com website. And if you're building this stuff, you want to come to the UIE Web App Masters tour where he's going to get into exactly how you do that. Again, the website for that is uietour.com.

Thanks everyone for listening to us and as always, thank you very much for encouraging our behavior. We'll talk to you soon. Take care.