How to handle multiple objects on the same day in my timeline?

Question

I am making an app where a series of posts are shown side by side chronologically. Then on the same page, there is a timeline at the bottom where each post is represented by a colored tick. You can see it here

As you see, there is a track pin at the bottom in the exact middle showing you where the post you are currently viewing shows up at the timeline. When you scroll through the posts, the timeline adjusts to always show that corresponding tick under the pin.

Also, when you scroll the timeline every time a tick passes under the tracker pin, the post updates to that corresponding post.

Right now its done on a day by day basis. Each tick is a single day and if there is more than 1 post in a day like in that gif, they are drawn in the exact same spot. The problem is that now, when they scroll to that day using the timeline, they only see 1 post and don't understand that there is more than 1 post in that day - even though they can scroll to it in the upper posts section.

I am not sure how to handle this case. Should I alter the appearance of the tick to show 2 somehow? Or should I add a page control (those multiple horizontal dots that show the active "page"?

What would be the most intuitive for the user?

PS. This will eventually be a fitness app. The purpose of this view is to show progress over time in a particular exercise. One reason the posts are broken down by day is that there is not much chance for progress over the course of a single day - most people work out at most once a day.

Answer 1

It is important to structure your data correctly if you want to be able to display it consistently and logically in the interface.

Current there is no real indication of the scale of the timeline other than that each tick is a post, so the scale could be over the period of weeks, months or years. If you are only providing a window of time that the user can scroll through (e.g. current week), then it also needs to be clear.

In terms of the ticks, if your minimum unit of time is day, then you can either space them out vertically to show the number of posts in a day by stripes (although this won't work very well if there are too many in a day), or you can increase the width of the tick mark for the day and stack multiple pins side-by-side and somehow group them visually (e.g. with a box).

People might only do workouts once in a day, but it can involve multiple exercises. You'll have to consider the underlying data you want to display before working out the best way to design for it.