Web App Masters: Ways to Present Information

by Luke Wroblewski March 22, 2011

At the Web App Masters Tour in Philadelphia, Stephen Anderson shared his personal experiences utilizing visualizations to illustrate complex topics and relationships. Here are my notes from his Useful & Engaging Ways to Present Information talk:

  • Visual thinking can help explain concepts. You can use information presentation to communicate concepts, manage tasks, and even shop!
  • Look for visual ways to make complex information easier to understand. Example: creating a set of unique packages required a high degree complexity. Stephen made a visual diagram explaining how the cards needed to be sorted. This diagram was used on the factory floor and by manager of the order. It helped make the complex easier to understand.
  • Data visualizations are very powerful ways to look at lots of information but lack an emotional connection. Great for large data sets, computer generated, not content specific, reusable tool, etc.
  • Infographics are usually human generated, composed of smaller data sets, content specific, and not reusable.
  • In between data visualizations and inforgrpahics are useful and engaging ways to present dynamic information richly presented in a custom designed format that shows relationships.

Process

  • Step 1: spot an opportunity/define the activity. What do people want to do or know? Look for places where you or others are confused.
  • Step 2: identify information objects & attributes (assigned to objects), relationships (or dimensions)
  • Objects are the things you are pulling in together. Objects can be: numbers, metadata, any info in a spreadsheet, anything you can get via an API (photos, images, text info), anything you can calculate from base data (diff between two numbers), anything you can derive from data (sentiment analysis).
  • Attributes: image, title, length, owner, activity, etc.
  • Relationships are based on: location, alphabetical, time, category, hierarchy, and networks. Ways objects can relate to each other.
  • Test with real data: photos & orientation, watch your character lengths, reduce any noise, be frugal with colors. There are so many things you can use colors on –save them for the important things.

Engaging Stories

  • Visual elements can make things emotionally engaging. Our brains crave pictures. We learn by association, naturally chunk information, process visuals more quickly, delight in the unexpected, and understand through stories.
  • Pre-attentive processing. Happens in milliseconds –we see patterns right away. Our brains are tuned to find visual relationships before we even know what we’re looking at.
  • Short-term memory is where the real sense making takes place. Visuals free up space in short term thinking to devote to more complex processing.
  • How do we encourage people to take action? Is there a story suggested by your data? Can the visuals compel you to action?
  • Complex information can be made easier in places – find a place & make it happen.