Any examples or suggestions for working with timelines [closed]

Question

I'm going to be writing an application that needs to handle linear work flows. For simplicity, there are two types of entries:

• Events: A trigger condition that allows you to move forward. It may have an estimated time, but is something you pass when something is done.
• Timer: Once a task has started, it ends at a particular time.

I'm looking to build an editor to create the work flow and a separate interface to guide the user through the workflow. I would like the user to see the past and future with decreasing importance the further away the time is from now. I was considering taking a traditional timeline type view, like the following, but either put it on a wheel (top down view) or just make the scale logarithmic from the center.

Has anybody seen an interface that accomplishes something similar or have any interesting suggestions ?

Answer 1

I don't know if it is what you are looking for, but a few days ago I saw a timeline that looks great. It's from an iPad app, called iStreamer. Is the best timeline I've seen...

Answer 2

We made something close to that for The Swedish Association of Health Professionals. Mainly ment as a visualization of their activity over time and as a exploratory entrance to some of their content. Sadly it seems to have lost it´s place in the grid and has slipped down to the footer of the page but check it out: http://vardforbundet.se/

Answer 3

I'm trying to break your question down into a few sections.

Have a look at Google's Finance graph:

In particular, notice the scroll bar that gives a view of the place of the viewable section within the overall timeline.

I think I need a little more info to understand the exact functionality of the trigger and timer, but since you've mentioned tasks, I can share the latest component I've been working on - a roadmap that shows project milestones and tasks:

The icons mark the due dates of milestones (your triggers?) and tasks, but you can easily add an indication of their start as well.

Last - regarding the logarithmic scale or the top down view of the wheel - I think the idea is cool, but I'm afraid the users will not get it and it'll be very hard to indicate:

• The logarithmic scale in particular - if you simply apply this scale, but to the user the timeline looks linear, they might estimate something off the center, without realizing the distortion.
• I love the top view of the wheel, but I've learnt that quite a few people don't envision 3d geometry too well, and they might not realize how to estimate the difference between two points that are not in the center.

Answer 4

What if you used something that has a similar effect to a Fisheye menu. When the cursor is over the timeline, the area around it expands/magnifies.

So for the normal view, the scale is linear. When the fisheye lens is over a certain section the scale of the timeline is also expanded.

http://www.ajaxdaddy.com/demo-interface-fisheye.html

Answer 5

Perhaps a smart zoom in/out function for your timeline could work, which would visually probably result in something between a wheel and logarithmic timeline (more a Bell curve). Maybe the timeline on Dopplr.com can inspire you.

Also Matt had a very interesting keynote during DxF2009 about time, where they described a project called "Here & There". It may be a little bit to much, but it's really inspiring when you have to come up for interface solutions concerning time.

(I'd love to post the links, but can't because of a low reputation...sorry)

Answer 6

I've got this one bookmarked with "timeline" tag: http://marcinignac.com/wp-content/uploads/2010/03/cambridge_gatwick06.png

maybe this is of some inspiration...

Answer 7

You can indicate the importance of a time section by making the text describing the event smaller for those events that are far away from the "current time". This way you won't distort your timeline, but the reader's eye will be immediately drawn to larger font.