Join Bill Shander for an in-depth discussion in this video Defining your narrative, part of Learning Data Visualization.
So, visualizations are more than just data or charts or maps. At their best they're a story. Humans really have been telling each other stories as their primary means of communications and education for really tens of thousands of years. Whether around a campfire or using modern media. The fact of the matter is that there is a lot of power to the phrase, once upon a time. We're wired for stories. And visualization takes work to create stories out of it.
And some of that work really has nothing to do with the visualization. It really is about the storytelling aspect to it. Just like great design is really about strategy and thinking and planning before the first stroke of the paintbrush. It's no less so in visualization. Visualizations, especially interactive ones, aren't necessarily consumed in a linear way like a book. You can't necessarily control how your user processes the information you give them. But, you can structure a story in a narrative way, with a narrative process.
You can encourage users to walk through the information in a linear, progressive way, even though you can't force them to do it. And so, let's look at stories. The fact is that stories have a very simple structure. Every one has a beginning a middle and an end. A more nuanced view includes a few more elements. Thee beginning of the story and then the protagonist faces a serious challenge, and then there's the middle of the story and then there's some sort of climax. And then there's the dénouement, that's sort of like the, after the climax as things start to wrap up all the way down into the grand finale where the book closes.
If you think about your visualization in these terms as much as you can, you really can't go wrong. And so, we're going to design a visualization together using this structure as our guiding principle. So, the first thing you do is you define a headline, and there may be more than one headline. In fact I recommend that you go through the process of thinking of more than one. I like to think of it as coming up with a New York Times headline which is a very serious and journalistic and straightforward headline. And then there's the New York Post version which is a little bit more salacious. And, you know, crazy and scandal ridden.
You know, sort of the fun one versus the serious one. And sometimes for your visualizations you may lean one way or the other. But play around with headlines. A headline is the most important top line summation of the story you're trying to tell. You can also think about the headline in terms of what will people tweet when they share your visualization? And you also want to, when you're coming up with your headline actually use blank spaces, when you're thinking about it for the data parts. So, in other words, you want to minimize bias. So, if I'm coming up with a headline about you know, the best place to get a hip replacement is blank.
because in my visualization I'm going to be finding the answer to that question, but the headline and the main point of it is the best place to find a hip replacement is. That portion you want to lay down pretty hard and fast on your info graphic. So then, you know, your next point in a hierarchy of your data visualization is your introduction. So, in an infographic like this it's of course just a paragraph. It's establishing the premise and the context for the visualization, before diving into the data. And it belongs below the headline at the top of the page to draw the eye there first.
And so again, this is conceptual and structural, using the story as our adding principle. This of course is not meant to be in the design quote, unquote. If you think of it in the story point, that's the beginning of our story is the headline, and the introduction. Now let's move on to the challenge. So, there are lot of ways to add the quote, unquote challenge to visualization. One is simply to add a callout. Like, you know, a big bolded text like this that calls out the main idea. Of the story you're trying to tell, or the problem that's being addressed, or the question that your visualization is meant to answer.
So, in this wire-frame, you know, this bold type will really draw the eye. In a real graphic, of course, it could take different visual forms. And so, if we move on into the meat and potatoes of this story. So, we've setup the premise. We've gotten the user into it. Now, we're going to load them up with data, the meat and potatoes. And here's where the chart with all the detail and the interactivity and the imagery is going to go. In this gray area in the middle. This is where the user is going to spend most of their time, really exploring and playing around and looking at the data. So how do we introduce the climax? The, the sort of pivotal moment in the experience? And we're going to look at two different scenarios.
One is a static infographic and one is an interactive chart. So, in a staticing infographic, you have information here in this example, this wire frame that's really meant to be consumed linearly. Of course, people are going start on the left if their left to right language readers. Their going to follow the arrows, and you know, more likely than not, end up on the right-hand side. But, if I have a climax, a big story, a special thing that I wanted draw attention to. I'm going to highlight it, maybe in a visually interesting way. So, I'm going to create a focal point that's going to contain the climax.
It could actually contain the conclusion or the challenge too. This type of a visual, you know, focal point treatment. This might draw the eye there first, of course. And now I've killed that linear progression experience because someone's going to read this first. But again, the idea isn't necessarily to enforce linear consumption of the content it's just to use that structure when you're thinking about it. And now, if I was trying to do this in an interactive graphic, the approach might be a little bit different. You can enforce a linear consumption of the content by having a next button and making your users click next and next, to reveal one piece of the story after another; exactly how you want to tell it.
And then you can do the big reveal at the end of that process, right? So now, we have the exact same visual structure as the static infographic; but we're forcing the user to get to it piece by piece, bit by bit. Or another way to do it is to have sorting and filtering buttons. So, you might put your filters in a certain order, and again assuming people are going to go left to right, which is relatively safe assumption but not always. You can encourage a user to use certain filters first. Clicking on the left and then when they click on that filter you might be able to highlight certain things.
When the data reveals one bar is taller than the others and you can use a call-out to highlight something interesting that happened there. So again the user is progressing through the content. And there isn't necessarily a denouement. Sometimes you know, you have that shiny object syndrome where they'll come into interactive. A filter, filter, find something interesting and then they just leave, right? You don't get the opportunity to conclude things for them. It's hard in that situation to offer conclusions and to deconstruct things for them sometimes, but it's a really good exercise to try to think how you would do that.
So, if you go back to our static infographic. It's really easy to offer a conclusion on the page, right? So, we're used to seeing it in the lower right hand corner. You have a box with sort of the small print, the footer. It's very easy to see structurally. I would also strongly recommend that you always include your sources. Where did this data come from? Why should I believe you? Why is it valid? That's sort of part of the conclusion in a story structure. In an interactive infographic, you can also offer more conclusion like things.
So, after your users go through this deep exploration process, they're trying to find deeper information and their own They can deconstruct the info themselves quite a bit. But then, maybe at the end there's a next button and they click through and you can sort of offer them this summed up view of the data. Maybe you have a spokesmodel celebrity who's going to come on camera and speak to the users about the most important conclusion from the data. So, there are a lot of ways to in, introduce conclusions and denouements into interactivity even though you'll never guarantee that people will experience them.
I think it's very helpful to think of every project, even your nonlinear interactive ones, within that linear storytelling framework. It helps you work through functionality logic as well as the hierarchy of information and it also helps you measure your success. Did I present the conclusion, the finale to my users in a way that they're most likely to consume it? Even though you're not always telling a linear story, it's a really helpful way to think about things.
- Channeling your audience
- Understanding your data
- Determining the information hierarchy
- Sketching and wireframing your ideas
- Defining your narrative
- Using typography, color, contrast, and shape to convey meaning
- Making your visualization interactive