6

Building a feature for desktop,tablet and mobile which uses a timeline to show the latest update. the amount of updates on the timeline is unpredictable. For mobile we have already used a vertical timeline where the latest update is on top (the mobile app is only available in portrait mode. For the web and tablet version would it be a better experience to use a horizontal timeline, as i've seen in most cases timelines on desktop have been horizontal. however these are mostly cases to represent history.

Therefore what which side would the latest update be on a horizontal timeline. on the left or right? and what are the problems faced by horizontal timelines on desktop. a challenge i foresee is horizontal scrolling being un-intuitive.

enter image description here

Improve this question
3
  • What is the content on your timeline? Is it big enough to fill the screen if the timeline runs vertically? or is there some other content you could freeze in place next to it (like a legend or a key)? Also which direction does your timeline move in - past to present or present to past? Finally, what is the problem you are trying to solve by switching from vertical to horizontal scrolling other than the "better experience" you've suggested?
    – Roux Martin
    Oct 20, 2015 at 8:52
  • @AMeen Akbar, can you add some visuals? Also, is there a reason you can't employ paging, and that all history must be visible?
    – Daniel Brown
    Oct 20, 2015 at 15:45
  • @DanielBrown added some visuals. and yes all the history should be available on the page itself. however it wont be more than 2 elements in a normal case
    – Blue Ocean
    Oct 21, 2015 at 1:42

3 Answers 3

Reset to default
4

Like anything in UX, it will depend on your context. For example, if the data displayed in timeline is about payments, or changes you have made to something (let's say you changed a file in an app, or updated your avatar), then the latest activity should be on top, and left in a horizontal layout.

However, if your timeline is about history, it's better to place latest event on the right extreme (or end). Of course, speaking of a layout for western people, or any other culture used to LTR reading direction.

In order to think the best option, you can apply the following approaches :

Approach 1

Whenever the timeline is a representation of a cumulative process, where each event will be a consequence of a previous one, it's better to show preceding events first, then "build" the experience that will end with your last instance. Obviously, history is the more direct example, same as any social science.

See image below taken from this question

enter image description here

Approach2

On the other side, if your last process replaces the previous one, then you can display the last process in first place, since previous instances are basically logs of former statuses. A profile edition is a good example: while previous instances may be of interest (for example to get back to said instances), they really don't influence the current status, therefore aren't needed to give context to the newest instance.

See example below, taken from Lessons learned while designing a timeline:

enter image description here

Approach 3

Finally, you have a 3rd less common option: when timeline contemplates steps in the future. This could happen for processes in development where there's a planning. for example, building an app: let's assume you're in a stage where you're building high fidelity mockups, then you'll have all instances between this and final deployment (and further) in the future, while previous instances like research, wireframing and sketching will be in the past. IN this case, you'll need to load the initial (current) spot in the middle, then future instances will be placed to the right, previous instances to the left (and again, the opposite if RTL direction is used).

As for the how to deploy this in a visual way, see the image below: enter image description here

This will apply to any horizontal layout, the important part is to categorize the current instance on a higher level than previous or future instances. While this would represent the 3rd case I mentioned, it also applies to the other options as long as you have moved from the initial instance

UI Implementation and Inspiration

If you need some help with visualization approach, take a look to Dribble's timeline tag, all of them dealing with any of the mentioned 3 cases in different ways

Improve this answer
2
  • Thanks a lot Devin. Approach 2 seems the most relevant to my case. If approach 2 was to be applied as a horizontal timeline would the latest update by on the left or the right side?
    – Blue Ocean
    Oct 22, 2015 at 2:08
  • Latest update should be on the left. Also, it keeps consistency with your current mobile approach since updates will be ordered left to right and top to bottom
    – Devin
    Oct 22, 2015 at 2:19
2

Vertical Timeline is the best method to show the data in sequence. It is more intuitive for users.

Horizontal method is used when there is image gallery sort of thing is to be displayed so that that right left gesture performs as next and previous.

Lets take an example of numbering. We always write as below 1 2 3 4 5

Why we don't write in our mathbook as 1 2 3 4 5 6 7 8 9 10 11 12 13 14...enter image description here .

Improve this answer
1
  • I've updated the question with more context.
    – Blue Ocean
    Oct 20, 2015 at 9:03
2

If the goal is to display latest updates, and not the whole story from the beginning, where the whole timeline should be also in focus, and the timeline is quite long, I would rather use vertical layout, latest updates on top.

However, if the timeline is short and has to be in focus, it better be horizontal, latest updates on the right. And whereas horizontal scroll is counter-intuitive, horizontal flicking through a stack of cards isn't. So I would treat a timeline as a stack of cards, each card showing one timeline point (see wireframe). This way you will have enough space for the key point content.

Horizontal timeline should come from left to the right, as we are used to read content and as we are used to follow the storyline, which is exactly what timeline should represent (flip r-t-l for Arabic and Hebrew readers).

enter image description here

Improve this answer

Your Answer

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

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