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

enter image description 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.

  • In order to indicate multiple posts on the same day, I'd suggest filling up the bar for that day with icons (a la pearls on a string). Yet another way you can do it is by having a bubble with the number of posts show up right on top of the red bar for days with more than one post. I hope that was not confusing! – Vikram Deshmukh Nov 9 '18 at 22:23
  • It's better to add a static image for illustration instead of a live link. For one, once your site changes, your link is useless for illustration. Additionally, my NoScript extension makes your link meaningless for me. – virtualnobi Nov 10 '18 at 18:09
  • Stay organized. Really simple. – ligma Nov 10 '18 at 18:11
  • @virtualnobi it needs to be a gif though so that you can see how the timeline updates and moves – BigBoy1337 Nov 11 '18 at 18:34
  • @ligma Im not sure what you mean – BigBoy1337 Nov 11 '18 at 18:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.