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.
Answer
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 :
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
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:
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: 
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
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
No comments:
Post a Comment