Why Design is Worth the Time - posit::conf(2023)

Hello, everyone. Good afternoon. I'm Gabor Chardy. I'm a software engineer at posit. And I would like to welcome you to the next session about compiling design for apps and dashboards, I guess, documents. Please join me in welcoming our first speaker, Laura Guest.

Hello, hello. Do I have a microphone? Can you hear me? Are we good? Okay, cool. So hi, everyone. My name is Laura. Oh, this is not the right slide. That's fun. There we go. So my name is Laura Guest. And as a compliment to the many how-to-build beautiful things that you're hearing at this conference, I want to talk about why the design is worth the time, specifically coming at it from an angle of leveraging cognitive science to amplify impact.

So I'm going to step back for a quick second. And to start, I want to explain where I'm coming at, where I'm coming from to get at this presentation. So who am I? I do not have formal design training. What I have done is I've worn many hats. I've worked in ML image analysis. I've worked for political campaigns. I've built strategic plans for national malaria elimination. I've worked in national health insurances. I've worked in the EOC for COVID. And recently, I work in development for a military family-related NGO. So I think many people in this room have a similar weird winding path through the world of data. And the thing that my career has had in common is a similar story that occurs all the time. And that's I have five minutes to communicate three months of work to a busy decision-maker to get them on side, to choose a path that we think has the most evidence behind it.

So let's talk about this communication. Who in the room has heard a version of this sentence? The data speaks for itself. Don't worry about making it pretty. Has anybody? Yeah. Pretty good. So I am a firm believer that the data can speak for itself when the data collects itself and the data cleans itself. In the meantime, you are the translator for your data. You speak for the data. You have to take the time to make it pretty to give it a fighting chance, right? So I'm not going to reveal anything groundbreaking or revelatory today. But what I hope to do is give you a little bit of that semantic, the semantics and the science to back up that feeling of like, I want to make it pretty. I need to have a little more time. Come on, boss man. Give me a couple hours to just make this look a little bit better.

You are the translator for your data. You have to take the time to make it pretty to give it a fighting chance, right?

Attention: making them look where you want

So I'm going to focus on three areas today. There are many. But these are the three I've identified for today. The first is attention. The second is memory. And the third is beauty. So let's start with attention. And I define that as making them look where you want them to look without them having a choice. So we're going to play a game. I have a couple of games. Just yell out answers when you got them. So the first game is the how many fives game. Cole Nussbaumer, Naflik, I've seen leverage this game the best. If you need a primer on how to do storytelling like this, her book is a great entry point.

All right. I have various numbers. I think there's six. I don't know. Seven. Okay. I'm going to make one small change. I'm going to rearrange the numbers and make one small change. Now do the same thing. How many fives are there?

Like I said, none of this is groundbreaking. You know this in your gut. But the science behind this, all right? So the reason is that I'm leveraging something called your sensory memory. That is the first second in which your eyes glaze across something. Specifically with this, it's your iconic memory. It's the first couple of nanoseconds. The first fraction of a second. So it's well beyond the scope of this short talk. You can Google it. Sensory memory. What's happening here is that you're seeing this pattern of red splotches before your brain can even catch up to the fact that you're seeing five of them or that they're the numeral five. The great thing about this is that sensory memory is completely outside of cognitive control and an automatic response. Any person whose eyes glaze over this screen will remember that there were five red fives.

Okay? So color is one factor we can use. There are many. I'm not going to talk through each of these, take a picture if you need it. But you all know all these without having to think about it. These are inbuilt to the human brain, right? Length, the longer something is, the more of the thing. The size, the width, the enclosure means they're grouped together. If you want to get into detail on these, Cedric Scherer has a ggplot2 class he does for the workshop time. Highly recommend. So again, none of these are groundbreaking, but they ensure that your core idea is delivered to those in your audience. Again, without having that choice.

So a couple more games to drive home this point. So just shout out what you see first. There are no wrong answers. All right. Ready? Sun. And I heard boat. So the sun, obviously there you're leveraging the color, maybe enclosure, because things are kind of leading toward it. Position, it's in the middle. But I also heard the boat. And I heard a dock over there. And those are larger. They're in the foreground, right? But most people went to the sun, right? Because there's that difference. All right. Here's another one. A, red, train. Yeah. So you might be seeing different things here. There's things that are competing for your attention. We're leveraging the color. The blue is brighter. There's hue and color in there. When they're competing things on a slide, your eye's ping-ponging around because there's competing pre-attentive attributes, right? Your eye's being tugged.

All right. So let me try another one. Yeah. Okay. So when there's just a lot of stuff on a slide and you can't focus on any one thing, we know from eye tracking studies from marketing that you're going to look either in an F shape or a Z shape. That's what the human eye is going to do in Western cultures. So if my prime image that I want to draw your attention to is on the bottom right, I have to leverage one of these attributes in order to make you look at that thing first. Notice I haven't hidden any of the data on this slide. It's still there. I'm just using color in a targeted way, right? And using that attribute to draw your eye toward it.

Sometimes it's impossible. You have to use other tricks and tactics. There are many out there, but layers, progressive disclosure, which is showing things at that time. Sometimes it's hard. This is one of the coolest diagrams I've ever seen. It just takes you like 45 minutes to even see what's going on.

Memory: keeping it in their heads

Okay. So let's move on to the next item. Memory, which I define as keeping it in their heads long after you've left the room. So we're going to step back into cognitive science for a second and we're going to talk about something called cognitive load theory. Big words. What it means is that our working memory is limited. In other words, our brains can only absorb so much information when new ideas are shared or presented to us. This is why it's hard to cram for an exam, right? This is why you can't take a tutorial in R or Python and know it all. There's only so much we can absorb.

So it's broken down into three categories. The first is the intrinsic load, just inherently how difficult is the thing. Beginners R is way more easy than advanced R. 2 plus 2 equals 4 is way easier than differential equations. This is generally unchangeable. So we're going to talk about the other two sections. Extraneous load, how the information is presented. This is where you have the most control as a presenter or creator of a dashboard or a report. You tend to think about this in data visualization, but also think about it in scaffolding of literally how the information is presented. Here we have the little RStudio GUI, right? There's a scaffolding there. You know where to look for things. So it's easy to get to the information to get to that new specific item. The third part is the germane load or connecting the dots. Broadly you can think about this as the work that has to be put in to permanently keep something in your head. Think about it like literally connecting the dots, like data storytelling or analogies, right? You're connecting it to something that's already in your brain. Again, this is a light level. I'm keeping this simple.

So your goal is to make sure that you're maximizing the things that need to be maximized and minimizing the things that need to be minimized. Intrinsic load, locked, fairly unchangeable. You want to minimize distraction, turn down that extraneous load, and turn up the germane load, maximize that story so that they learn it and it stays there.

So how? Again, you know these things. You can think about heat maps. You've minimized that distraction. You haven't put that wall of numbers in, and you're focusing in on that story about where are those colors. The scaffolding is known. It's a square. Things go across. You can also think about this in the terms of schematics, right? There's a scaffolding there. There's a layout. There's a flow. You're trying to guide people through information. But sometimes you need to make choices. This is from Alberto Cairo, and this is COVID information by county. The color's county. Depending on what you want to communicate, there's a better or a worse way to do it. Is time the thing you're talking about, or is the county the thing you're talking about?

And when you think about all these things in concert, this is why maps are so effective, right? So think about everything that's encoded in here. We effectively have a heat map, concentration, right? The colors are census group types. So you can see there's densities. That's that heat map. You have the organization of the schematic of the map, north, south, east, west, you know, the water, the coastline of Chicago. You can emphasize the story you want to tell with these various choices. So this would take dozens of tables to walk someone through to get what all of your brains are getting in an instant by the way I've organized that information through careful design choice.

I don't want you to just think of this in terms of data visualization. I also want you to think about this in terms of the fonts you pick. So this is one of my favorite studies. It's from 2008. I'm sure there have been repeats that find the same thing, but I love this. So this study found that people are more likely to engage in a given behavior the less effort it requires. Not groundbreaking. Pretty standard human. They gave an exercise regimen to two groups of people. The only thing they changed was the font. That's an aerial, the clean looking aerial, and then a brush script. All right. And they asked the people, there were five metrics they were tracking. The first was how hard do you think this is going to be to complete? How long do you think it will take you? Then they were asked to complete the exercise. And then how long did it take them? And how hard was it? Every single one of those metrics was worse simply by changing the script. They estimated that it took almost double the amount of time only because of brush script. Right? So this slight increase in cognitive load made people think this was harder. If it's hard to read, it's hard to do. So it's not just data viz. It's also the fonts you choose.

If it's hard to read, it's hard to do.

Beauty: making people want to engage

How do you break this apart? All right. Let's go to this third point. And I'm going to bring it all together. So the third point is beauty. Very subjective, I'm aware. So I'm defining this as making people want to engage more often or more deeply. So I'm going to tell you a story from this book about this soap. This is a great book if you like design. So this is the method brand soap. So when they were creating this brand of soap, this new soap, they wanted to design something that looked beautiful on your countertop. People were tired of those ugly soap containers. They had a weird little lid. They didn't look pretty. And they wanted to design something that looked good on the countertop. So they designed this. They sent it out to a whole bunch of people. Asked them their feedback. The problem was that they hadn't managed to master the little lid thing that sits upside down. And these things leaked all over the countertop. They still found that their test groups wanted to buy this soap over their competitor, even though it leaked on their countertop, because it looked better on their countertop.

So aesthetic designs in general look easier to use and have a higher probability of being used whether or not they're actually easier to use. It's not groundbreaking, but I find it incredibly interesting. So beauty, subjective. But the results are objective. So if you think something's pretty, it's going to elicit a positive emotion in your brain. And they do this by fMRI mapping. They do all this crazy stuff. But when you can find a positive emotion, information is processed more quickly. Information is remembered longer. And the credibility and trustworthiness, you perceive those both to be higher. So this all comes from positive emotions. I think everybody in here has a favorite weather app on their phone that they like better than all the other weather apps. The information is exactly the same. But you like one better because it's designed in a way that is pleasing to you.

We've all seen those terrible news pages that have ads everywhere and flashing things and all this stuff. It doesn't feel true. Something about it feels like they're lying to you. So you prefer the one that's cleaner and less in your face, right? So it somehow feels more true, even though it's exactly the same information.

So let's bring this all back together somewhere where we all kind of feel comfortable. Vignettes, right? This is not where you think about when you think about beautiful design, simple vignettes. But think about how this is working with attention, right? The use of color, right? So I'm using the blue to show you where links are. The use of the white space, the little icon, the ggplot hex sticker, hex logo, right? That is connected in your head so that you remember things. We're using these clean sans serif fonts, like that exercise regimen study. There's a standard layout for all of these. When you're going to a package that you've never seen before, you know if you click on the reference, you click on the articles, you know how it's going to be laid out, and there's literally links galore connecting everything to everything else. So you know where you're going. And it also just feels better somehow than the standard documentation. I don't know why. It just feels, it's the same information, it just feels better. And again, you know, it's a serif font and a sans serif font. It's a less friendly feel. There's not as much color. The layout's clunkier. You can still navigate around, but you don't want to play with it. You want to play with the vignettes, right? You want to experience them.

So you know, at the end of the day, you want to leverage these three items, many more, but these are three good core ones to start with. Your attention, make them look where you want them to look. Memory, keep it in their heads for a long time by making it easy for them to keep it in their heads. And then beauty. If you think it looks really good and friendly and you're happy with it, odds are other people are going to too. We're all humans, we all have human brains. We're kind of going in the same direction. So at the end of the day, you speak for the data. You can back it up. Get yourself a little time to make it pretty. Thank you.

Q&A

So as a data scientist, what are some good ways to start thinking about design and improving, you know, the design of your work? Yeah. I think one of the great ways is working, I think the easiest avenue in is theming, right? We want to work with our like corporate colors or your team colors. So if you bring that idea of an identity together, you're relying on other people to get that scaffolding together, right? So we have the same colors, we have the same fonts. So that's one way to start that's an easy avenue. The other part is I do this a lot is I find someone who doesn't know anything I'm talking about and give them my presentation, my dashboard, my report, and ask them, what do you get out of this? Tell me what you get. You don't write any code, but tell me what you get out of this. And they're going to find five points for me. And some of them I'm like, yes, I wanted you to focus on that. And some of them are like, what are you talking about? And so that can help guide me toward, okay, well, I'm not hitting this point correctly. I need to work here and working in that feedback loop. Hope that's helpful.

Yeah, that's very helpful. Another question is, any sense yet for how these principles can transfer over for people with visual disabilities? I am not an expert in that area. But I do really appreciate the, there are a lot of websites out there. I use the Adobe site. But there are a number of places where you can put whatever you're designing into these to show what it looks like with color blindness. And so a lot of the times, you know, we'll want to use the default blue scale something. But if you push it into that, you'll see that maybe someone with color blindness isn't seeing the same thing, right? And so that's when you need to leverage those other pre-attentive attributes, size, length, enclosure. Some rely on colorblindness, or rely on color where it makes it difficult for colorblind individuals. Some rely on enclosures. And then at the same time, for those that are visually impaired, you always need to talk through, if you're giving a presentation like this, you need to guide people around what you're talking about. So if they can't see anything, they're at least following along.

Right, right. Next question. How do you give critical design feedback? Cautiously is the right way. Usually when, I do a lot of this feedback for people in my organizations. And usually I start by asking, what do you want to tell me? And you'll get that elevator pitch out of them. Or they'll ramble around in circles about, well, we tried to do a thing, and then the thing didn't work, and then that other thing. And then we tried this model, but that model was too difficult, so we moved to this model. And I say, OK, who are you delivering this to? Analysts or the C-suite? If it's the C-suite, they just want to know your model worked, most of the time. If it's the analyst, they want to know what models worked and didn't work. And so you need to make sure that synthesizing into the one point that you're trying to make, and then going from there, rather than saying, I have all this information, and I need to bring it down. So starting from that core point, and branching out from there, tends to be the way I direct people.

Question from anonymous, importantly. What should I do if my corporation has a terrible color branding screen? Quit. No, I'm just kidding. I've worked with our brand team to try and develop sort of alternate colors that I can use in reports. Our standard color palette is not great for color blindness. And we have red and blue. And I'm like, everything has to be in our red, white, and blue color scheme. And I'm like, well, now everything that's red is important. And so I've tried to be like, OK, well, what greens can we use that aren't related to our color palette? And I've worked with that design group, and they trust me. And again, these are mostly internal documents, so I don't need to adhere to our theme in the world. But again, collaboration is the key to the game. And then also, you've got a brand book, so pick some of the other colors. Ways to work around it. Thank you.