How to display a timeline?

Question

My question seems easy but I have to display a time line in a small area due to layout constraint. And I have to write some "actions" to do throughout the line (1 to 4 words). Sometimes I have two distinct actions at the same time. These actions are mostly static. The user must see all the timeline at once and can't scroll or move the timeline. The goal of this timeline is to display all the user's actions required during the month for a specific process.

I don't know how to dispose this line in order to make it clear and understandable.

I thought about three versions. Here is simplified mockups.

Left to right (but data overlapping)

^{download bmml source – Wireframes created with Balsamiq Mockups}

Top to bottom (data aligned)

^{download bmml source}

Bottom to top

^{download bmml source}

Which one is the more coherent and understandable ? There is any alternative ?

Answer 1

Your first solution is the classic one. The most of the timelines on the web are made with this solution. Just google "timeline" and take a look to the pictures. But you said, you only have a small area to use your timeline, so this could be tightly. I would use a version, where you have the line at the bottom of the page and just show up the events upwards. For example:

The second and third example are modern timelines, used by many websites (refer to the comment by Jørn E. Angeltveit on this answer). Here you should ask yourself what is the most important in your timeline. You want to tell the user the whole story, so start from the beginning, or are the youngest events the most important?

• When you use the "Top to Bottom" solution, the user will see first the oldest events, best to show up a history of a company.

• When you use the "Bottom to Top" solution, the user will see first the newest events, best example are social networks like facebook.

This two solutions are also best practise for mobile usage, and you can also write more than 1 - 3 words without loosing any overall view.

Hope could help you to make up your mind.

Answer 2

I think I would not opt to put data on both sides of the line for any of the variants. At least, not the same kind of data. You could consider putting something like significant changes in the environment on the left side, while the right side has all the events that you're trying to interpret.

(Vertical) direction is dependent on the use case: are you likely to be more interested in the most recent events only, or do you need the whole historical context? Note that for a longer time line, that means that your most recent events will end up below the fold. For horizontal graphs I'd only use left-to-right for the direction of time.

Finally, I find your way of putting multiple events at the same time confusing. The connection between the labels suggest a connection between the events to me. Instead, I'd put them one above the other (for vertical time lines) with the connecting lines to the time line at an angle so it is clear they both occur at the same time but no other relation is suggested.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

Your mockups made me think about some classic representations of timelines.

They are easy to understand and allows a lots of interactions.

Answer 4

I normally see timelines horizontally however, on the web, it's far easier to scroll up/down than left/right so depending on the context and rest of the web page, I think a bottom to top timeline would work well for usability (most recent events at the top - similar to how Facebook timeline works).