Web 2.0 Expo: Web Design, Social Data CollideWeb 2.0 Expo: Web Design, Social Data Collide

Cutting edge Web design needs to be data rich without turning itself into overloaded data porn, according to interaction designer Hannah Donovan, formerly of Last.fm.

In a workshop presentation Monday at Web 2.0 Expo, a UBM TechWeb/O'Reilly Media event in New York, Donovan put a particular focus on "attention data," including new forms of passive data collection propelled by collection methods like Facebook frictionless sharing, where applications such as Spotify use their connection to Facebook to automatically post song tracks that the user is listening to. Last.fm offers something similar, the option of "scrobbling" or automatically tracking your listening habits, ostensibly for the purpose of recommending new songs but also as data that music publishers can mine. Other services such as Google Latitude take a similar approach to gathering location data, and yet others gather information about how we exercise or even how we sleep.

"Some of this is borderline creepy," she acknowledged--particularly when it happens in a way users don't understand or expect. She herself found that when she integrated Spotify with Facebook, it took certain starred entries in her music library that she had been tracking to share with her sisters and exposed them as a public playlist--in a way she didn't anticipate or appreciate. Application designers should be particularly careful about making assumptions about how users want their data used.

[Measuring social media remains a black art. Get Social Media Measurement Expert Tips to improve the value of your analytics.]

Donovan, who is currently consulting and working on another music-related startup, said the abundance of social data both actively and passively posted is creating great opportunities and challenges for interaction designers. This trend has been building momentum since about 2005, when the use of Web application programming interfaces (APIs) became commonplace, suddenly making it easy to mash up data from many sources. Around the same time, data storage began to become "ridiculously cheap," big data technologies and techniques began to proliferate, and cloud computing helped make realtime search and comparison applications practical.

"This is a really intense timeline of technological advance," she said.

To make this flood of data useful in social media, designers need to let users see the most relevant of their own data and that of their friends in a way that makes sense. That doesn't necessarily mean flashy, 3-D graphics or screens full of infographics--a trend she finds richly deserving of satire.

It's more important to get the basics right, Donovan said. Graphics should be like characters in a story you are trying to tell.

When she ran through her catalog of common design patterns, one of them turned out to be the plain English sentence--where the data-driven variables are inserted into a sentence about how many friends you've made or how many views a piece of content has received. Sometimes, that's actually the most compact way of conveying certain types of information. It also serves to break up other graphical elements and, done right, can include language that adds to the personality of the site, she said.

Basic charts like a line graph (for continuous data) or a bar graph (for discrete data) are often still the best, Donovan said. She also recommends sparklines, a compact form of line graph created by data visualization hero Edward Tufte.

"These things are not necessarily new, but the way we're using them for attention data is new," Donovan said.

Other graphical display techniques that specifically crop up around social media include "counters." A counter by her definition is a simple display of no more than three key metrics at the top of a profile or home page that provides a concise snapshot of performance. Then there are leaderboards, which show rankings, which are essentially adapted from other realms like sports.

"You need to treat each thing as a discrete tool," Donovan said. "Don't try to flip an egg with a fork."

In addition to understanding all the ways of displaying information, designers need to know where the data is coming from. They need to know the difference between a data dump and a live feed, and when dealing with a live feed they need to have a plan "for what happens when that service goes down--because that will happen," she said.

In particular, designers should learn to speak the language of APIs, she said. That isn't as scary as it may sound to the non-geek. "I think of an API as being like a style guide," like the editorial guidelines for fonts, headlines, and image dimensions designers have worked with for years, she said. "It tells you here's the stuff you can get, and here is the format you can get it in."

In the best case, developers and designers should work together to figure out what the API should be--what you ought to be able to get out of it, and what format that ought to be in. Social media thrives when the data is delivered in a way that allows you to make comparisons, like which of your friends are also listening to similar music and which people you don't know share tastes like yours.

"If you can't make comparisons, it's not as much fun," Donovan said.

Attend Enterprise 2.0 Santa Clara, Nov. 14-17, 2011, and learn how to drive business value with collaboration, with an emphasis on how real customers are using social software to enable more productive workforces and to be more responsive and engaged with customers and business partners. Register today and save 30% off conference passes, or get a free expo pass with priority code CPHCES02. Find out more and register.