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 ?

  • All three are indeed valid, but the pros and cons depends on the content and the context. Could you describe a bit more? What are you showing, and why? Static data or dynamic content? Jan 15, 2014 at 13:26
  • 1
    @JørnE.Angeltveit Details added !
    – Alex
    Jan 15, 2014 at 13:38
  • Does timeline play ordering role only, without any dates? Then the simpliest way is to use an ordered list. Jan 15, 2014 at 13:46
  • @AlexeyKolchenko No, there are approximate dates (day in the month) but it doesn't have to be "perfect". I edit the lines.
    – Alex
    Jan 15, 2014 at 13:57

4 Answers 4


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:
enter image description here

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.

  • 1
    Good points on horizontal vs vertical scrolling. The "bottom to top" alternative is indeed useful for certain data, though. Facebook, Google+, my e-mail inbox etc etc ;-) Jan 15, 2014 at 13:29
  • 1
    @JørnE.Angeltveit: True! Just edited my answer full, inserted your thoughts. Thank you Jan 15, 2014 at 13:53

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

  • I like the idea of having data only on one side. To me the layout would look more organised and even consistent with how it would appear on mobile phones. But most examples on that come up when you google, show data on 2 sides of a vertical timeline. I'm wondering if there is an advantage to using that style, i cant figure. Do you have any ideas?
    – DB3184
    Oct 16, 2015 at 9:50

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


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

  • I think this is the easiest to interpret
    – J4G
    Oct 8, 2014 at 11:05

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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