I'm designing a responsive timeline for an orthopedic patient rehab service, and running into an interesting problem with listing separate events on the same day. Our patients have a prescribed care program, over the course which they're given different exercises and content to interact with. All of this is broken down on the timeline (the UI is a vertical line along which the individual events are plotted in dots with corresponding cards explaining the events), but sometimes different events can occur on the same day (ex. getting prescribed a new exercise and given a new form to complete). I've experimented with assigning these multi-events a single "dot" on the timeline, with the two (or more) cards stacked tightly on top of each other. But I'm wondering if there might be a better solution? Thanks in advance for your feedback!
How to list 2 different events happening the same day on a vertical responsive timeline?
Hi Conor, welcome to UX.SE! Do you have a mock-up of what you currently have, or what you've tried? I think I understand you, but I'd like to make sure.– maxathousandJul 19, 2018 at 20:20
Really not sure what your timeline view looks like, but this is what came to mind. In this case, could you not just show multiple cards for each event on the line? Something like the following might work:
download bmml source – Wireframes created with Balsamiq Mockups
This also concisely indicates that on December 12 there were 2 events by placing the count in the dot on the timeline.
thanks so for the response @maxathousand ! I uploaded a reference mock of what i was considering. I was going for a more contained card ui for the dates + content because the different events in the rehab program have different corresponding content (ex, 1 event might be a form to fill out, the next might be an exercise video) so it made sense to not have all that content "free-floating" if that makes sense. Then again, having all that differing content might not be ideal UX on a timeline UI. I'll give it some thought, but your answer is super helpful. Thanks again!– ConorJul 20, 2018 at 16:03
No problem, your mockup looks good! My main suggestion was just to place the total count of "entries" (if greater than 1) on the "bullet" itself. It might require increasing the size of those "bullets" a bit, but that would also make sense, as it represents a greater number of events. Jul 20, 2018 at 16:17