Timeline Views of the News
I've recently been doing a bit of research on real-time, data-driven timelines. Here are a few of the solutions that generally fall into the news/search results category. These are less visual and more functional, but that's what I was after in this case.
So What?
With so much buzz about infographics, storytelling, rich experiences, and the availability of data, it seems there's renewed potential in the timeline. As I've eluded to, real-time and data-driven seem to me to be the keys to that potential. As designers, we know that we can sit down with a list of dates, a series of events, and a collection of visual assets, and we'll crank out something that's engaging. I'm keeping an eye out for the interesting things that happen when we marry that visual, engaging component with the power of real-time data. I started with news results timelines here, but I'll be sharing more real-time timelines in a later post, so stay tuned. In the meantime, point me to any good examples that you know of.
Experimenting on Your Own
If you're looking to play around with something yourself (without starting from scratch), The Simile Timeline is legitimate and seems to offer a lot of possibilities:
Have you ever checked out BeeDocs? This is all those guys do. They have a pretty cool way to visualize timelines. http://www.beedocs.com/index.php
I haven’t found a good use for the visuals yet, but they are indeed cool.
Thanks George. I have glanced at BeeDocs before but haven’t spent much time looking into it. It seems pretty slick.
BeeDocs still isn’t getting at what I’m mostly focused on though, which is auto-data-import after timeline creation. In other words, with BeeDocs I create a t timeline, style it up, add events, images, etc, but it stops there. It’s all about presentation. There is no data being pushed to the timeline after I’ve created it.
It’s quite a different challenge when you design a timeline to account for ongoing dynamic import and display of content. You’re pushed toward designing a flexible timeline “system” and away from designing a tightly packaged timeline “piece” I guess.
Good point.
So we just need BeeDocs to be a web-service with an API :)
I like the idea of seeing news search results in a timeline, but I’m even more intrigued by the ideas we were talking about today - like, an auto-generated Flickr photo timeline that you could somehow tag photos to appear in. As a natural born documenter, any kind of organized timeline appeals to me ;)
Yeah I definitely think Flickr could do something cool with a timeline feature. I guess the temporary solution would be to create a set called “Timeline” and then add select photos to that set, making sure that your time stamps match the true chronological date of the photos (even if it’s from 1976 or whatever).
Flickr is toying with a timeline idea with their video clock (http://www.flickr.com/explore/clock/), but it’s just a stream of community uploads rather than anything an individual user can control. If you look here (http://www.flickr.com/groups/flickrclock/), you’ll see that Flickr hooked up with Stamen (http://www.stamen.com/) to develop it.
Hey Peyton,
You had me at timelines; I love them. Have you ever seen the work of Dan and Lia Perjovschi? They had a show at the Nasher in 2008 called States of Mind; Lia’s work includes many hand-done timelines. Their work is a bit hard to track down online, but you can see one of them in a blog post I wrote about design inspirations for Newfangled.
One other thing to check out: We’re about to go live with a new client-facing project management tool to help our PM teams collaborate with and deliver project info to our clients. The most important function of this new interface, for us and our clients, is the project schedule timeline (you can see a preview of it here). Even though we’ve always had various ways of communicating scheduling data to our clients, we’ve discovered that the visual timeline is the most effective tool. This timeline pulls data in real time from our internal systems, and cascades each project phase based upon where its progress stands relative to “Today” (you can see that there is a ‘today’ line that always indicates where you are in terms of the overall progress).
- Chris
I’d like to add my diploma thesis to your list of examples for timeline based news display. Timeline view was only one aspect of my work, but you might find it interesting.
For a quick write-up you can check out this text that I wrote when submitting to the Daylife Developer challenge (which is in English, the thesis is in German lanuage).
And the entire thesis is available on Issuu (unfortunately in German only but you might be able to get something from looking at the pictures ;-))
If you find this interesting and have any questions, feel free to ask.
@Sven,
Beautiful work! I’d love to read the entire thesis (nicely designed, itself, by the way). I’m going to see if one of my German-speaking coworkers can translate…
Chris
Hi Peyton, I found your post via Konigi, very interesting stuff!
Here’s something in the “more visual, less functional” end of the spectrum that I worked on recently:
Tweetpond - Ambient visualisation of Twitter
The basic idea with this visualisation is that the vertical axis is time – items fall deeper as they grow older. There’s also a post on News Pond that visualised news in a similar fashion back in 2003. Let me know what you think if you get a chance to have a look.
Cheers, Jussi
Chris,
I hadn’t seen the work of Dan and Lia Perjovschi, but it’s certainly interesting. You’ve also just reminded me that I need to keep a closer eye on what’s happening at Nasher since I’m close by. Thanks for sharing.
I like what you guys are doing with the PM/client tool as well. The timeline looks very clean and digestable. I especially find it interesting that you’ve discovered that the visual timeline is one of your most effective tools when communicating with clients. I’ve never seen testing/reports on the effectiveness of horizontal timelines vs other “views”, so that’s something I’ve been curious about as well. Would love to have a closer look at the tool and the timeline when you put it up. It’s quite impressive that you’ve tackled that challenge.
Sven,
All I can say is wow. Very impressive and intriguing. You’ve provided a lot of great reading. The blog post alone is a gem and really gets at the challenges:
“If the content is no longer embedded in a defined visual composition and context, new design strategies are needed. The designer has to think in classes, not instances: not the singular visual form is important — instead one has to design systems and principles that can then generate possible solutions. However, if form and content are supposed to relate to each other, a system has to be able to comprehend the content to some degree. Only then, a design system can adjust formal parameters accordingly.”
I’m eager to take a look at the prototype you’ve created and to read your thesis. From scanning through the thesis (but not knowing German), it looks like there’s a wealth of relevant information. I can look at your design of the thesis document and the screenshots of the various pieces throughout and respect what you’ve put together.
Are there still plans to put up a web version of the prototype at http://news.svenellingen.com/?
Thanks so much for sharing.
Christopher, Peyton:
Thanks, glad you like it!
Peyton:
Proper english documentation and a web version of the prototype are still on my to do list. But to be honest I’ll doubt that this will happen in the near future as I just don’t find the time to do it…
The prototype itself is really fragile and was built using only web technology. It heavily relies on some WebKit specificities and there’s probably nothing I can do against it (other than a complete rebuild in Flash or something, but that is clearly out of the scope).
In addition, the data being used comes from Reuters Spotlight API and Daylife’s DayPI—I’m not sure if it’s still working as I’ve not followed the development of those two APIs recently.
It’s really nice to hear that people are still interested in that topic and find my thesis valuable. This is of course great motivation for me to finally get my act together and translate the whole thing or to invest some more time in the development of the prototype…
Jussi,
Tweetpond is pretty amazing. Great work, and a very solid example of what I’m talking about. It’s highly engaging and visual, leverages dynamic real-time data, and uses the timeline component to enhance the experience. It’s also easy to use and quickly ascertained. I was hooked and just had to play with it for a while. The best is putting in a search and waiting for a new tweet to plop into the pond. Thanks for pointing it out and for sharing the details behind your work. Love the culture of sharing that Volkside promotes.
Acknowledging that yours is of course the best (wink), send along other Twitter timelines/visualizations if you have them. I have a number in my bookmarks, and these could be worthy of their own post at some point.
Thanks for taking a look Peyton, your comments are much appreciated!
Joanna Pineda wrote a comprehensive post on her favourite Twitter visualisation sites in her blog a while back, it’s worth a read.
These are probably my favourites in terms of design and visual effect:
http://www.twittervision.com/
http://www.twittearth.com/
http://www.twistori.com/
These ones are good as a Twitter ‘backchannel’ at a meetup or a conference:
http://www.visibletweets.com/
http://www.twitterfall.com/
And no, Tweetpond is by no means the best Twitter visualisation out there :) In fact it’s more of an experiment rather than anything else and I think there’s heaps more that could be done with it. For instance things like shapes, colours, rotation and X-Z position could all be used to carry further information in the visualisation and perhaps the whole thing could be hooked to an RSS feed instead of Twitter. Who knows what future brings!
Cheers, Jussi
Next entry: Book Review: Caffeine For The Creative Mind: 250 Exercises to Wake Up Your Brain
Previous entry: Insanely Awesome ExpressionEngine Tools You Can't Live Without
Recent Comments
Great videos. I am hoping that 2010 will be a successful year for many. 2009 was a tough year for a lot of people I know, even with their “passion.” But Hard work and determination...
- Chesterfield Eye Care on 'An Unedited Passion for Creativity'.
- Trevor Davis on 'Practical Uses of CSS3'.
- web design miami on 'An Unedited Passion for Creativity'.
Subscribe to Comments RSS