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. alt text

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

7 Answers 7


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...

  • I like this approach. My data is linear, but fitting descriptors into the data points would benefit from this approach.
    – Jim Rush
    Commented Oct 6, 2010 at 15:13

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/

alt text

  • I like that one and yes, its page placement doesn't seem right at all.
    – Jim Rush
    Commented Nov 11, 2010 at 12:19

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

Have a look at Google's Finance graph: alt text

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:

alt text

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.

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.



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)

  • Oh, you can include the links, just not as links... That is: just type the text of the link in your answer, but don't use the button to make them clickable. If they contain HTTP://, the stackexchange engine will probably make them clickable automatically anyway. The button is more for links with a different text/title than the URL itself. Commented Oct 6, 2010 at 7:18

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...

  • That link doesn't show anything in my browser. Commented Nov 12, 2010 at 2:48

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.