One of the reasons I love designing for the web is the constantly shifting landscape, both in terms of audience and tools. With each technological shift in the brief history of the Internet, designers have evolved and created new systems for people to navigate online spaces. In the last few weeks, there’s been a good synergy between what I’m working on and what I’m seeing online. I’ve noticed several sites that are using visualization methods to entice visitors to explore and navigate content.
These visualizations methods aren’t entirely new, but in the context of the ever-expanding, often vast amounts of content generated by social sites, they’re critical to our experience and our ability to discover new information and patterns. Social sites can include everything from bookmarking applications, news, blogs, wikis, music sharing, knowledge applications, mobile, photo and video media sites, forums, social networks – anywhere the public or a member can contribute to either the content or conversation.
Each of these types of sites and communities generate their own particular flavor of data, but there are similarities in how we can explore the fluid and hybrid space of social data. As designers, we’re constantly seeking new ways to present this information in compelling and suitable ways.
Database-driven sites introduced the freedom for designers to provide visitors with dynamic navigation – sorting and switching between different views, whether that’s showing a range of data (show 25 results) or a set of criteria (all restaurants within a five mile radius). While news sites and portals were already showing us recency and time-based posts, blogs made the element of time even more important with daily posts, monthly archives, permalinks. Blogs took the social aspect of forums to a whole new level by fueling conversations online through comments and trackbacks, and they gave the web a personal voice.
Now in this era of social software and user participation, time, conversations, and people have become even more critical to the experience.
We expect that a popular blog post will only stay on del.icio.us popular page for a mere 24 hours due to algorithms to deal with new volume. We know that the “digg effect” can cripple servers and drive mass amounts of traffic to your site in a fraction of time. My partner, Max, recently had a post on Digg’s home page and received 16,000 uniques in 20 hours. At the Digg version 3 launch party, founder Kevin Rose quoted that Digg gets 8.5 million unique visitors a month.
We’re not only creating content but also sharing our data – what we’re bookmarking, our upcoming events, news we’re reading, stories we recommend, ratings and reviews, photos and videos, our music playlists – the list goes on. We’re not only sharing, we’re also surveilling and discovering through our friends and other users on the various sites we belong to.
Rather than pure content and information, today’s new sites are increasingly complex and integrated paths of “data” – 1. the content that is contributed to a site and 2. the paths and actions that people take and 3. the relationships that form between content and people. So, how do we enable discovery in this environment? By expanding our use of visualization methods to present content and activity. Below are four examples of this type of discovery.
At the Digg version 3 launch party last week, Kevin Rose showed off Digg Incoming, a new feature that will launch in July. Digg Incoming shows the popularity and activity of stories being dugg in real time by members of the site. A slider allows you to narrow or broaden your time period for viewing. Hovering over stories show titles and clicking on one pops up the story headline and stat view. One of the other views shows comments and activity clustering around a post as users traverse from one story to another. This is one of the most exciting visualizations I’ve seen. Given the sheer volume of stories and activity on Digg, it’s becoming impossible to find new, noteworthy stories or to see what was popular at any given time unless it was on the home page. This certainly gives me a method to explore and discovery the stories I’m interested in based on live activity.
What I’d really like a Digg Incoming to tract my own online habits, as both record and navigation/discovery from my own patterns :)
For now, you can see my partner, Max Kiesler’s DesignDemo of Digg Incoming for a view of the interaction which he edited out of the Diggnation podcast. Incidentally, Digg worked with stamen design, the guys behind Mappr who I interviewed for eHub last year.
Newsmap is a project by Marcos Weskamp and Dan Albritton and won a Prix Ars Electronica Net Vision Award of Distinction in 2004. The application visually reflects changes of the Google News aggregator. “A treemap visualization algorithm helps display the enormous amount of information gathered by the aggregator. Treemaps are traditionally space-constrained visualizations of information. Newsmap’s objective takes that goal a step further and provides a tool to divide information into quickly recognizable bands which, when presented together, reveal underlying patterns in news reporting across cultures and within news segments in constant change around the globe.” Visit Newsmap and also see Max Kiesler’s DesignDemo of Newsmap.
BBC News Most Popular Now
The BBC News site uses a visualization map to show a live stat of its most popular stories. Stories are sorted in the left pane, and can be geographically targeted using the map to the right. It’s a great way to scan international headlines and get a pulse for what’s popular by BBC News readers as well. Visit BBC News Most Popular Now.
Musicovery is a music discovery station that allows browsing based on the tempo and genre of the music. As you selected options, circles and connected tendrils of bands and music streams float out. Clicking on one plays that song or station. Unfortunately, the site is now down temporarily because “the number of visitors has reached such a level that given the way we currently operate the broadcast the cost has become too high…We plan to rapidly provide the service again on a more sustainable basis.” See Max Kiesler’s DesignDemo of Musicovery instead for a view of the interaction.
If you have suggestions of other current visualizations, please feel free to leave a comment. I’ll be sharing some of my own work on this in the future as well.