Web App Masters: Steps to Beautiful Visualizations

by Luke Wroblewski May 24, 2011

At the Web App Masters Tour in Seattle, Noah Iliinsky talked through principles and approaches to building powerful data visualizations. Here are my notes from his The Steps To Beautiful Visualizations presentation.

Types of Visualizations

  • Analysis is for when you don’t yet have a story to tell. These are interactive pieces that don’t have a specific goal. A way to explore and play with data to get a sense of what’s there. Get in and see if you can find interesting things happening.
  • Visualizations are generated by software. Need to create an algorithm, update it.
  • Inforgaphics are manually drawn and elements are placed by a person. They tend to be less informationally dense and more aesthetically pleased. But you can’t just pour new data into an infographic.
  • Education vs. persuasion. Does the visualization have a point of view or is it for just for visualization?
  • Complexity in visualizations stems from the number of different information axes represented. Why is more complexity difficult? Large number of targets on the page with only a finite number of visual properties available to encode knowledge.
  • Why are qualitative relationships difficult to represent? You need to create a language and explain it to people. There are fewer conventions than in quantitative relationships.

Creating Visualizations

  • Make good choices. This is a very hard thing to do. Understand your goals and your users’ needs. This is a deep topic. Then choose: what to include, where to put it, how it looks.
  • Afterward, start thinking about designing. Notice you are making choices, then make then intentionally.
  • Inform/educate: do you need a broad overview or focused details?
  • Persuade: do you want to get a raise, oppose war?
  • If you can’t concisely articulate your goal, you’re doing it wrong.
  • Different goals require different methods.
  • Your success if defined by your customer’s success.
  • If you are not paying for it, you’re the product not the customer. Do user research –understand people’s hope’s desires & dreams.
  • Arbitrary design choices make people think. Your audience gets a fixed amount of brainpower –make them spend as little time as possible on decoding. So they can spend time on valuable content.
  • What to include: only present necessary information. When you remove, it makes it easier to find what you are looking for.
  • Tempting to put all you know on the page –but that adds more targets
  • More detail can be good & bad; redundant encoding is good. Extraneous treatment is often bad.
  • Four types of content: data, redundant encoding, decoration, and noise. Noise needs to be removed.
  • Where to put things on the page: people ascribe meaning to location, relative placement matters and absolute placement matters.
  • Axes gives you information for free: about targets, and when searching. Axes are often under utilized.
  • The first thing people think about encodings is “why is that different?” don’t waste people’s time telling them something is different for no reason. People will detect patterns, and ascribe meaning to patterns and pattern violations. Our brains are magnificent pattern making machines.
  • Motion at the peripheral is more likely to get noticed because it is a pattern violation –leverage patterns that people will see anyway,
  • Establish patterns intentionally and stick with them. Things that are the same, should look the same, things that are different should look different. Preserve order in placement and lists.
  • Pick appropriate encodings: color, shape, line, shading/textures, brightness/saturation, size/weight/boldness/etc, placement, numeric labels. Brightness has some order, physical intensity has ordering, placement has lots of options.
  • More redundant encoding helps people differentiate data.
  • Whether something is decoration or noise depends on your intended audience. “To the intended audience” validates design choices.