We have a problem with chronological order in a horizontal list. What would be the best practice in this case (please check attached sketch)? To give a context, we have a feed with containers (that have horizontal scroll) like the ones in the sketch with activity boxes inside. These activities are made in chronological order. The question is should the newest activity box go to the left or to the right with the scroll positioned right to have it in view?
3 Answers
Generally, time-based lists, as you have described in your sketches, would normally flow in the standard reading direction so that the earliest item is read first and the latest, last. This also works in a vertical sense (top = earliest, bottom = latest). This can be seen in all sorts of applications such as calendars or schedules where both the vertical and the horizontal ordering are practised.
However, if the list is more closely related to the longevity of items then items that have been within the system longer may be regarded as more important than newer items and so the order will run in reverse: Older items first, newer items last.
It is vital to consider the way that items in the list scale in importance in either direction and choose the best direction based on which one puts the most important items first
I suggest using option A. Since we read (and view pages) from left to right this will allow users to explore more. In option B going back seems like a weird experience, I expect people to browse through less blocks this way.
First there are some principles that you should apply:
Showing the app state + Visibility of the added item: If some item is added there has to be a clear visual clue that this has happened, the new item should not appear under the fold.
Flow (adding the the previous one): If the user is adding something editable (or at least removable) you should gave them an easy access that item, simply because it's very likely that they want to apply some action to it right in that moment, so you don't want to put rocks in their way.
After this you should really evaluate if that scrollbar is really necessary, because it introduces UX problems. e.g. the one you are presenting. If possible you may try a grid system or a vertical alignment instead of horizontal. Horizontal scrolling is pretty dead (and it should be).
Also in this particular case, where you are managing schedules/hours the right mental models would be to go from present to future, so adding the future events at the end.
But again, try to re-evaluate you general design.