Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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)

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Top to bottom (data aligned)

mockup

download bmml source

Bottom to top

mockup

download bmml source

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

share|improve this question
    
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? –  Jørn E. Angeltveit Jan 15 at 13:26
1  
@JørnE.Angeltveit Details added ! –  Alex Jan 15 at 13:38
    
Does timeline play ordering role only, without any dates? Then the simpliest way is to use an ordered list. –  Alexey Kolchenko Jan 15 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 at 13:57

4 Answers 4

up vote 10 down vote accepted

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.

share|improve this answer
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 ;-) –  Jørn E. Angeltveit Jan 15 at 13:29
1  
@JørnE.Angeltveit: True! Just edited my answer full, inserted your thoughts. Thank you –  dTDesign Jan 15 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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

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

timeline

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

share|improve this answer

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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