 I'm thrilled to invite our last two speakers, and we're going to start with our next speaker who is a news applications developer at one of the most amazing and highly seemed investigative journalism organizations in the world for Publica, where she makes interactive graphics and data visualization. She also teaches a design course at the CUNY Graduate School of Journalism. And before joining for Publica, she wrote for Scientific American and wired on a variety of topics around science and health. So please help me welcome Lena Groger. Thanks, Irene, and hi everyone. So I know the Museum of Science gets a lot of attention, and I'm sure we all had a lot of fun there last night. But we're actually right around the corner from another great museum. If I can show you the map, MIT Museum. And I definitely recommend, now it's a little bit late, but I recommend you check it out if you ever get the chance. And the MIT Museum is filled with exhibits on robots. It's got holograms and slow motion photos. But it also chronicles an important part of Cantabrigean history, the MIT hacks. And now I grew up in Cambridge and almost every year we'd end up hearing stories about the MIT pranks and practical jokes put on by the students, which I guess are sort of the inevitable outcome of a school full of genius engineers. But they range from famously putting a police car up on the top of the MIT dome, which you can actually see at the museum. It was fake. Or making the tallest building in Cambridge a giant game of Tetris, which was actually controllable from a joystick attached to a podium nearby. If you've ever walked over the Mass Ave Bridge and noticed these odd markings on the sidewalk, those are smootes which mark off the distance of the whole bridge in the height of Oliver Smoot, who lay down end over end in 1958. And even now, every MIT student knows that the length of the bridge is 364.4 smootes in one year. But one of these hacks began as a search. And if you'd been walking around campus on December 16, 2006, you might have noticed something a little bit off with the letters on the MIT admissions building. Students at the time began to spot posters appearing along the wall of the Infinite Corridor. And this went on and on until finally, you might be able to guess what happens here, they found Waldo. And he turned out to be larger than life on the side of the Stata Center. I know it's cute. But typically, our childhood searches for Waldo don't lead us to a nine-story building. They stay pretty small. And Waldo is typically a tiny person in the middle of a lot of other tiny things. And that's what makes him so hard to find. And that's what I want to spend some time today on. We things. How we read them, why they're useful, what principles we can apply to make them work for us. And I think in many ways, Waldo and the search for Waldo can tell us quite a lot about the subject. So in the last talk, we had the flanore, and now you're getting Waldo. And Waldo is sort of the anti-hero of we things, at least when they apply to data visualization or graphics. In a lot of these cases, Waldo can basically be a pretty good example of what not to do when you use we things in your own work. So what do I mean by we thing? Probably the most immediate definition are things that are physically small. So they're little things on the page. And we see them all the time in news graphics, and we're probably pretty familiar with some of these forms. So we've got small multiples and spark lines and icons, et cetera. And I'll go into details about all of these. And these visual forms work for many reasons. But one is that they let you make comparisons. We'll start with tiny sequences of graphics, also known as small multiples. And these are so successful because we don't have to rely on memory, right? Every bit of information is in front of you at the same time. So we can easily see changes or patterns or differences. Here, it's planets, but we've also got first lady hairstyles or food trucks or dressing appropriately for different climates or the distribution of deaths in the 1870s or fashion color trends or telegraph signals or highway safety or clocks around the world or bird wing span or last but not least, Bill Murray's hats. And the reason we can make comparisons so easily is because these small multiples take advantage of the built-in capabilities of our visual system. And this is something that Rob mentioned. It's called pre-attentive processing. And whether it's color or shape or size, we can tell immediately when something is different without really having to focus on it. So technically, pre-attentive processing refers to cognitive operations that can be performed prior to focusing attention on any particular region of an image. But basically, this is the stuff that you notice right away. And our minds are really good at spotting one or two differences when everything else is the same. This example, you can find Waldo. Or in this example, this is not hard. But obviously, this is not where Waldo hangs out. Where he goes, I can't find him at a glance and I need to spend a ton of actual effort. Our experiences with Waldo are typically something more like this. So some MIT researchers actually studied what happens when people saw a scene like this and they used eye-tracking devices to see how people actually go about finding Waldo. This is what happens when you search for Waldo. And as you can tell, it's not very straightforward. So Waldo kind of thwarts our pre-attentive processing. We can't see him despite the fact that he's right there in plain sight because he doesn't stand out in any clear way or color or size or orientation. And obviously, this is for a reason, right? Waldo is purposely hard to find because his surroundings were constructed to hide him. But in general, we don't want our graphics or data visualizations to be this much work to understand. If someone had to search this hard to find the information you were presenting, it would be kind of a bummer. So if you want to be clear, avoid this Waldo strategy. Instead, take advantage of these pre-attentive features. Here, and maybe you can still maybe see it, the use of color draws your eyes into specific lines of red text. In this example, the gray lines are government claims about the drone program, and those red lines are official statements that it doesn't exist. So we're using the pre-attentive feature of color to show contradictions. Here, it's the use of size used to highlight how much longer movie credits have gotten over the years. So whether it's size or color, contrast, et cetera, it helps to have the point you want to get across encoded in one of those pre-attentive features. And you'd be surprised at how many times the most important thing in a data visualization is not the most noticeable. So the last two graphics I showed were also special members of a category of we things I like to refer to as tiny text. This is exactly what it sounds like. You make the font really small, and tiny words can help call attention to differences over time, like this piece, which compares different additions of the origin of species, or they can help us explore terms used in Hong Kong policy addresses for the last couple years, or see the rise and fall of Fortune 500 company rankings. Small things can also help us show a step-by-step process. And many examples of this sort of thing involve tiny people, like these graphics that show figure skating spins, or triple axles and toe loops, or aerial skiing, or snowboarding tricks, and they're not just useful for the Olympics. So here you see the process of all the planes taking off from an L.A. airport in a day. Or what happens to we chickens before they end up at a supermarket near you. Or the phases of the moon. And these process graphics also seem to show up a lot in dance moves. So for those of you who've been waiting to learn thriller, how's your chance? Or for that matter, any of these other moves. Here's an older graphic using little mini feet. And just as we things are useful in dance, they're also used in art. And some of you might remember Michael Ed Emberley, who taught us to draw silly monsters and animals using some combination of circles and squares and lines. We've also got process graphics like this one. You've seen many of these today. One of the many steps of creating a Japanese woodblock print, or how to make an origami elephant. And we things can also be used to orient someone, to give them kind of a bird's eye view. And one of my favorite features of Sublime Text is this little mini map on the side which shows you a zoomed out smaller version of the page you're working on. And I have no idea if this was actually the inspiration, but I definitely noticed it when this graphic came out in the Washington Post that has a little mini map on the left side of the regular size map that scrolls down as you move along 14th Street. Same idea here, where you see where you are on Fielder Avenue as you move horizontally through the photographs of houses. These were damaged in Hurricane Sandy. And mini maps can also give you more context for a story, like in this example where the route of a long dog sled race in Alaska is filled in as you scroll. Here's a vertical version of the same thing, following a drive from St. Petersburg to Moscow. Or in this train route along the modern-day Silk Road, which is visually tied to corresponding images along the route. Another benefit of We Things is that they pack a punch. So a tiny graphic can say a hell of a lot without taking up too much room to convey a lot of extra meaning. So in some cases this happens by swapping tiny things in for words. So the book, The Information, is full of these little in-line pictures, like little arrows to convey into nations in speech, or a sequence of little dots to show an early idea for Morse code. Galileo decided to stick tiny pictures of Saturn into his writing and use them as just sort of another part of the sentence. Another old example is this version of Euclid's Elements by mathematician Oliver Byrne, who illustrated the whole thing with geometric shapes right in line with the text. And we've also got many graphics that many of you are probably familiar with, spark lines. These are tiny charts that usually show variation over time. Now you can even put them in your tweets. Another familiar example, the icon, and we use icons and symbols all the time to convey a lot of pretty crucial information, like what's down the road, or which door to go in, or how to play and pause and rewind. And on the web, these are especially prevalent. Social navigation icons you see all the time. And if you think about it, they actually tell you quite a lot about how to find your way around a website or where to search or how to like something. The Noun Project is a collection of icons that you can use for free, and there are lots of other sort of free icon sources like this. Graphical fonts are also icons. So here's an example of a font called State Face, which makes it easy to embed a little wee state into a graphic or table. But keep in mind that while some icons carry meaning, they don't all carry the same amount. So icons work because they're recognizable, right? And if people aren't quite sure what they mean, then they kind of lose that power. And new icons may take some time to become commonplace. So a study of search icons found that the lone magnifying glass is often not enough to convey search, especially when it doesn't look exactly like the magnifying glass that we're all used to. Instead, it helps to give people a couple more clues, like placing the icon on the top right-hand side of the page or placing it within something that looks kind of like a text field. On a similar note, not everyone knows that the hamburger icon stands for menu, and it's definitely not as universal as, say, a peace sign. Another analysis found that making the icon look more like a button or actually including the word menu made people much more likely to actually understand what it meant. So make sure that if your icon is new or unclear, you add some extra information. And, of course, this doesn't mean that you can't make up your own icons as long as you provide context. So you may never have seen a man writing a fish before, but in this case, it obviously represents a fish hatchery employee. I mean, what else could it be? And one more benefit of WeeThings is that they can help us differentiate individual elements. So you often see these graphics with lots of little small circles, and these imply small individual things, and you can easily guess that they are multiple kind of distinct elements, and you might try to hover or click on them, but the little dots make it clear that these are distinct. Here's another example. So now I'm going to broaden the scope of WeeThings a little bit. We've been talking a lot about physically small things, small things in space, but there's also a different kind of more abstract idea of WeeThings, and that's small things in time. The tiny moments, the interactions that we spend very little time on, they might only take like two seconds, but can make a really huge difference in our experiences and our understanding. So I want to talk about micro interactions. So what are micro interactions? You can think of these as kind of small contained moments. So changing a setting, logging in, favoriting or liking something, giving a rating, importing or exporting or searching or sorting or syncing or formatting or saving the list goes on and on. And I'm definitely not the one who came up with this term. There are a couple of great sources on tiny details and micro interactions, and some of the examples here I've just stolen from these places. And these interactions might seem trivial at first, like who cares about a hover state on a button or a confirmation box, but I think they are really important, and the details really do make the design, especially when it comes to interaction. So let's look at what we things can do to help make our interactions better. One thing they can do is give hints. And little things can help. Oh, good, you saw that. I was worried it would be too small. Little things can help direct someone's attention to what they're supposed to do, to what will happen once they do it. Okay, okay. Or I didn't actually make this. Just Google Waldo and GIF or something, it'll show up. So little things can help direct people's attention to what they should be paying attention to, and they can let people know whether or not they actually successfully completed something. So keep in mind that some hints are better than others, and we can't really say the guy in the red striped shirt and have anybody find Waldo. This is not helpful. So it's important to kind of give real hints. So hints can take a number of forms. One is by taking advantage of affordances. In the physical realm, this refers to attributes of an object that make it do what it does. A wheel affords rolling, a light switch affords flipping. In the online world, we depend more on perceived affordances, like buttons that look like buttons or links that look like links. And a lot of this is just convention, right? Like there's nothing about blue underlined text that means link, but we've just gotten used to that idea, and they've become sort of established over time, and we use them now to give people a clue as to what they can actually do here. Here's an example of a pretty obvious hint. I see a blinking purple circle and think, okay, I can click here. But this gives me no clue as to what will happen when I click that arrow, right? I can guess, but I'm probably better for everyone if I'm not going around the Internet clicking on things and guessing at what will happen. And that's where Feed Forward comes in. So Feed Forward is kind of like feedback, but it happens before the action. And it gives me a clue not only of what I can do, but what will happen once I do it, and sort of knowing what will happen before you perform the action. And that means that I can perform that action with confidence. And here you can see that a little black strip on the side of the menu comes out when I hover, and I can guess that when I click on the button, some sort of sidebar or something will come out, and that's exactly what happens. So Feed Forward is not just that I can click, but also what my clicking will actually accomplish. Feedback is another kind of hint, and feedback tells you basically the result of your action, right? So whether it was a successor or a failure. And this is important. Like, did I sort the thing correctly? Did I select the right state or search for the right term or go to the next screen in a sequence? Every action should be acknowledged. And then feedback can sort of turn into another hint as to what will happen next. So let's look at some hints in the wild. Here are some nice ways of providing feedback. A series of dots along the bottom of the page. These are both actually on your phone. And as you scroll, they highlight. It also hints at the direction that, or as you swipe rather, it hints at the direction and you just swipe in order to go to the next one. Here are another kind of other swiping examples. Hints that I need to sort of go right or left or the arrow gives me some information. There's also words like swipe to begin or slide or slide to unlock. I really wish that people would kind of make up their mind about what's the direction and the word to use. Right now I feel like it would be a little confusing. But another example, a lot of these kind of new fangled article templates these days want us to scroll down. Okay, so we often see something like this, a big fat arrow pointing down with the word view. Or here, we've got the very bottom, it's a little small. We've got a pair of arrows with the word scroll to read. But somehow these instructions always remind me of the push-pull signs on the door. Like usually if it needs a sign, it's not very well designed. So how do we design interactions that labels and instructions are not necessary? And actually in the case of scrolling on the web or swiping on the phone I think this might be pretty easy. Here's an example of a website that has no arrow or button or scroll or view instruction. Yet I immediately know that there's content underneath because I see a little part of it. And the website resizes at every window size to always show me this little sliver of content. And I think this works actually a lot better than having a big arrow. Or on a phone this can work too. When I go to share an image, I get a bunch of icons of different possibilities. And there are more to the right and you might have to look closely, but I know instantly because I can see a little sliver of them, right? There's no need for a C-more label because I can tell that I'm sort of missing something there. And this is just something to keep in mind. I try to live by this advice from Dom Norman in the design of everyday things. If it needs a manual, it's probably a failure and I don't know if we need to go that far, but typically less manual is usually a good thing. Something else we things are good at is providing data to you up front instead of making you go out and seek it. And this actually takes the need to interact usually right out of the picture. So Chrome shows you a little icon of a speaker. If there's music playing in one of your tabs, you don't have to go and click around and find it. The calendar app shows you the date without you having to open it up and find it. The clock app shows you the time. Note that the weather app does not do this for no good reason and for all the weather app cares, it's always partly cloudy and it does not have to be this way. This is another weather app that does exactly what most people use the weather app for. Someone please change this. Speaking of weather, Google shows you the wind strength and direction in the size and direction of its arrows. Chrome shows you all the little instances of a term you search for on the page and little tick marks bringing the information forward to you. I don't know why we don't see more of this. This website rather than just telling me office hours includes what time it is at the office and this seems really simple. Computers know the time. It saved me the trouble of calculating time zone differences and just tell me what I wanted to find out. Often we know, we have some context or some information about the people who are coming to our site or users on a phone that we can use to actually make their lives a little bit easier. Two more examples. Here the eyedropper shows me the color I've selected and Amazon shows me the number of items in my cart and both these cases information that could have been hidden behind another interaction or step was brought to the top. Microinteractions can also help us prevent errors. As an intro to this, let me tell you about my favorite machine in the world, the coffee grinder. With a coffee grinder, it's literally impossible to hurt yourself because it only works when it's closed. This is unlike, say, a blender. This is really good. You see all sorts of products where this is not the case and one very painful example is the instant soup cup which falls over and leads to scalding burns pretty often. This is actually one of my favorite collection of wee things. It's an actual picture and an actual scientific paper about the angle at which you need to tip the instant soup cup container to make them fall over. This happened. Science is great. So why are so many soup containers tall and narrow? You'd think they would all be flat and wide if we really want to prevent horrible burns, but this doesn't seem to happen very much. In the online realm, I mean, we're not getting as dramatic as burning, but this means doing like little things that make it impossible for me to screw up. So here Gmail knows I use the word attached, so it prevents me or at least gives me a heads up before I send an email without that attachment. Here I am stopped from accidentally being born in the future by a little warning sign. Here's what... It's great, right? Okay. Here's what not to do. The top says, cancel this payment and your options are okay, cancel. So yeah, whatever possible, I mean, prevent mistakes, right? Be clear. And while many wee interactions are invisible and we don't even notice them, some of the best ones we do notice and they add little moments of surprise. And these can be clever little transitions like this example where the menu icon transforms into an X to become the close button. I was so overjoyed when I found this. Or sort of using context to predict what I might be needing right now. So this app called Waze knows the time of my typical routes. And so here is asking me if I'm driving home because it happens to be 6.30 when I drive home at that time. So it's able to guess for me little things that acknowledge that my memory is limited and I forget immediately when I start typing what I was supposed to fill in. So here the input label just moves up to the top so it's still there, it just moves out of my way. This can also mean little notes to your users that are funny or have some personality. So if you're uploading something to Dropbox that will take a long time, it tells you to grab a Snickers. If your text gets too long, the voice just stops counting the characters entirely and says, really? The Vimeo cancel dismiss button is labeled I hate change. And all of these things take into account that you're designing for real people who have a sense of humor. And then there are little tiny interactions that are just fun, like shaking your phone and getting a snow globe effect on your photographs or pressing the spinner over and over again to get a new prediction about who will win the Senate. And these are not always explicitly about conveying information but they're tiny moments that we can make some kind of emotional connection to the user in delight of something we might overlook sometimes or not bother spending time on. But I think it can really make a difference and I think it's worth whenever possible to try to make those connections and spend some time and effort on the details even if they are very small. Thanks.