Story-Telling, Design, and Data Visualization

I recently gave a presentation at the Oakland D3 meetup, organized by the amazing @seemantk.

The presentation is about an hour long, so I wanted to summarize some of the topics I discussed. This post is an overview of the talk, along with some notes. You can watch the presentation here (or the video above).

User-Driven Experiences

This sounds so nebulous: 'User-Driven Experiences.' It's as seemingly meaningless as 'synergy,' but in my mind it is a clear philosophy. I'm a developer, and I sometimes get so wrapped up in thinking about code that it's hard to step back and see the purpose that code serves. We write code to create a product, which is (at least in my line of work) consumed by people.

Since people use our products, we can do well to place the person's experience at the forefront of our design and development processes. What do I mean? Every decision we make - color, font, data visualization type - should be carefully thought about in terms of how it will impact the user's experience.

First, decide what kind of experience you want the user to have. Then, pick the visualization type that best will deliver that experience. If you're already set on using a cool force layout visualization, you may miss the larger picture if that visualization type isn't the most effective for the story you're trying to tell.

Analyzing Experiences with Interest Curves

Maybe a user-first approach still sounds abstract. So, in an attempt to make it more clear, let's analyze what an experience looks like. As with any kind of data, there are an infinite number of ways to visualize an experience. We could look at an experience in terms of flow, which can be very helpful when designing games. We'll save flow for another talk, and focus instead on Interest Curves.

One way to visualize an experience is to think of it in terms of interest over time. This is just a tool - the above curve isn't some universally perfect example of a good experience - but it's pretty damn good. Most successful books, movies, and games follow this general shape.

A great experience often starts with a hook. Sometimes it's cheap, like an explosion or a character death. But whatever method is used, the goal of a hook is to pique your interest. Then, we need to let that interesting experience sink in, to allow the peaks of interest to be meaningful. It eventually culminates in a climax, which is ideally the peak of the entire experience. This can be applied to any kind of experience - not just a game or movie - but also physical experiences.

This applies equally to data visualization. While a bar chart may not represent a temporal dimension, users experience your visualization over time. People must process what the data visualization is trying to tell them, and if you just throw all the data at them it's a bad experience. If you can instead craft the experience to have peaks and valley of interest, it could be more powerful.

Loading Bars

We often overlook one of the strongest parts of the experience - the initial loading experience. This is our hook. If we can ease the user into an experience, or give them a taste of what it will be like, we can help craft these peaks and valley of interest. I talked a little bit about this a previous blog post on misleading users, and you can jump to the discussion on loading bars in my presentation

SVG Filters

We can't talk about chart junk without talking about filters. Tufte is right in saying that chart junk obscures the data:ink ratio; but how important is a high data:ink ratio is people have a bad experience? What's better: a forgettable visualization (i.e., story) with a perfect data:ink ratio; or a memorable story which creates interest and sparks discussion that uses decorations and chart junk? Depending on your audience, the answer is almost always the latter.

If you're designing for scientists or white papers, decorations make the audience unhappy. But, if you're designing for the general public, sometimes decorations can create a more compelling experience. Maybe it's not a 'pure data viz,' but is that truly the end goal? SVG Filters are a tool that can be used to create 'chart junk,' or to also craft a more compelling experience.

You can check out some of my thoughts on filters: enhancing data visualization with SVG filters and using SVG filters to create a fog of war effect, or jump to the discussion of the power of filters in my presentation.

Games

Game designers grapple with unique design problems. They have to somehow integrate audio design, animation, UI design, gameplay, art, storytelling, and numerous other disciplines together. Games have the highest ceiling of difficultly in terms of experience crafting. A successful game must be successful in creating experiences using numerous art forms, then bring all those individual experiences together to craft a larger, more coherent experience in a player's mind. If we view design as a search problem, then games can provide a wealth of inspiration.

I talk about data visualization in games, and you can also jump to the discussion on games in the presentation.

Data Visualization Driven Game Design

I'm currently working on a game which focuses on data visualization help improve your gameplay experience. More information can be found in a previous post, or you can watch a demo of it.

End

Feel free to check out the presentation, which goes into more depth for each of these concepts. Slides of the presentation can be found on github.