I was trying to design a Timeline Navigation component for a responsive page. So i started with mobile view(320x480) and made a wireframe. Please check the wire frame below

Timeline Navigation wireframe

Why i designed like this because,

  • as a user i like to concentrate on the main content, which is a series of events based on a timeline
  • as a user i can also filter the timeline based on selecting multiple year, month and date.
  • the timeline navigation is a off canvas container. when ever a user what to filter click the timeline icon, then as timeline navigation menu will slide in and create his filter.
  • in the component under selecting year, there is will a series of years. so to scroll between the series i put two buttons up/down

UPDATED: Timeline mockup

timeline design mockup

1 Answer 1


Did you intent to post a picture of the actual timeline? Because it is not there :)

In terms of the filtering, I read the filter applied above as:

"Find events from september 2015 that fall on the dates 2nd, 18th OR 19th."

Seems like a weird way to filter a timeline. Fine if I want to get a timeline of what I'm doing on the 3rd of january, march and june in years 2012, 2014 and 2015, but who filters dates like that? What is the chance that I would be doing something related on the 3rd of january in both 2012 and 2015 (3rd day hangover, maybe :p)

What I think you want to do is to set a range of dates and basically show a subset of the timeline within that range. Depending on how you design the timeline, this could be solved simply by zooming up the timeline, thereby hiding dates beyond the visible bounds.

Maybe the problem you are trying to address is the fact that there might be a lot of activity within very short time and you want to clear that up. My argument is that filtering by dates is probably not going to be great, as there is rarely a semantic correlation between a specific date each month (payday, maybe, but that might shift from the 28th to the 31st or maybe even 1st in some cases).

Don't you have some more semantic metadata you could use to filter your timeline?

As an example, say it is a CV visualized on a timeline, you could pinch to zoom in on a specific fragment of the timeline. There you realize that there is too much activity to see what is going on, so you filter the timeline to show "internships" or you filter it to show "jobs involving PHP" or something similar.

Also for the visual design of the timeline, I had to do a responsive site with a timeline recently. I ended up having a horizontal timeline on desktop-size displays and a vertical one for mobile devices. Seemed to work well for me. Just a quick tip.

Hope this helps?

  • thank you for the response. Sorry for not posting the timeline, its not yet wire framed - just a thought. Actually what i meant by timeline is a list of conferences from past and upcoming events. why i thought about multiple date selection because as a user he can check like what conference are there on this month end and next month end also he can go back to past events and see the information like speaker, documents, etc. May be its a false thought. Also why i designed this navigation to keep user in same place without more interaction simply click/tap the dates, month etc .... Commented Jun 28, 2014 at 12:59
  • ... limiting the user not to spending more time in finding dates. Commented Jun 28, 2014 at 13:00
  • 1
    Ok, so the user story for filtering might be something like: As a frequent conference guest I want to be able to see what conferences are hosted at specific days so that I can use the day I have off in (insert town) to go to a conference. In that case I see the need for searching specific dates, but probably not many of them. For filtering dates I would see it as date ranges that could then be set to individual days if that's what he has left. But still, I think having some metadata (say: "javascript meetups") would benefit you more. An interactive timeline is quite powerful on its own.
    – zkwsk
    Commented Jun 28, 2014 at 13:05
  • i just added a timeline mockup. i also thought about filter by category or tag like you suggested, that feature is also there but only thing he can do by searching. Commented Jun 28, 2014 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.