I'm currently making a website for my company, which will allow our clients to configure some of our internal programs easily, without just using a regular form.

Description of the requirements

The user has to be able to create populations, each of them having 2 properties :

  • A type of event they correspond to ;
  • A time period, which translates to when the event happened. That time period has to be shown as relative from today, so dates are represented as "Today", "Day - 1" (yesterday), "Day - 2" (the day before), etc.

An example :

"A person bought an article, from D-7 to D-14"

The event type here is "Purchase", and the recency is -7 to -14.
In practice, there are around 20 possible types of events like "Purchase", and the date can range from today to around 2 years ago.


I'm having trouble finding a good way to represent this in a user-friendly way, and allow them to add their populations however they want. I made a simple mockup of what I have currently (using the plugin Vis timeline), but not only is the plugin a bit stiff/rigid, I'm wondering if there is a better way to present this.
How would you do it? Using which JS plugin, if any?

Mockup of the current UI : Current UI

What this means : Some population 1 visited the website at least once in the last 4 days (counting today), and some other population 2 subscribed from 2 days to 5 days ago.

Issues with this :

  • Scrollwheel is bound to zooming (unzoom to see more days at once), left-click drag allows the user to scroll on the timeline. Creating "Blocks" is done through double-clicking, or Shift+click-drag. I feel like this is not easy enough to grasp.
  • You can resize blocks by dragging the sides, but the automatic snapping provided by the plugin is terrible and really hard to use, in every way possible.
  • When there are more than ~4 groups, the timeline also starts scrolling vertically when left-clicking. It's not easy to use at all either.
  • Without a "First-time user" tutorial, I think it's too complicated to use or even understand what's happening exactly.

Here is another UI with which you could represent such a form : enter image description here

I probably left out important details, feel free to ask for more. Thanks for taking time reading this!

  • Firstly, I don't understand your question - it seems like there are fixed events on the timeline (user bought something yesterday), but then you write about editing... what? The event in the past? Secondly, the issues you list sound more like requests to the developers of the control you use, not like design issues. You'll probably get more reactions if you clarify/focus your question. Apr 26, 2017 at 6:28
  • It is kind of hard to explain indeed, sorry. The timeline has types of events - Purchase, Visit, Subscription, etc. - denoted as "Groups". You can add (edit) the timeline by adding blocks (= population), which correspond to (1) a type of event, and (2) a recency. So, adding a block from D-1 to D-4 in front of the Visit type of event will translate to "That population visited <the website> at least once from yesterday to 4 days ago". My problem is that using this kind of display (the timeline) might not be the best way to declare I'll edit the question once I'm at work to clarify stuff. Apr 26, 2017 at 6:34
  • Is there a reason why the dates have to be relative to today? If not, there are some really great plugins that would let a user quickly and easily select a date range: daterangepicker.com/#examples / sensortower.github.io/daterangepicker
    – invot
    Feb 6, 2018 at 21:18

2 Answers 2


To me the main glaring howler with your first mock-up is that you refer to times in the past, but spread them to the right of the current day. This breaks western conventions of time moving away from the past and into the future, from left to right. Avoid doing this!

Secondly, the word 'population' seems superfluous here. Population 1 and population 2 are simply 'users'. There is no need for these labels to be there, and once you remove them there is really very little to recommend your first mock-up as a viable option.

I vastly prefer your second mock-up. Using natural language can help clarify complex 'technical' tasks into clear, human-readable outcomes.

That being said, in this day and age, do we really need to go with 'D-1' instead of 'yesterday'?! Use moment.js with it's relative time and humanize options to create a fully readable sentence formed form the same drop downs. 'The user visited between yesterday and five days ago' totally works for me. You can populate these relative times into one or two drop-downs, or include a date-picker. Test with users to see what they find more acceptable. Either way, once the range has been selected, ensure that it is displayed in a legible format.

While we're on natural language, there's that 'population' again! The sentence we constructed above is not an example of a population. It may be an example of an alert, a condition, a requirement, etc... get your thesaurus out and find the word that best matches your use case - then use that word! If you are building a list of alerts, say that as simply as possible.

Summary: Go with your second mock-up, but strive to use human-readable text rather than machine speak with all your inputs and labels.


To me, it sounds like adopting existing UI conventions for calendars and making appointments would be your best bet.

Do you have to always specify these population groups relative to 'today'? Rather than specifying two numerical values for D-, is there any reason why you couldn't specify start and end dates using a standard calendar dropdown? This could make it much more intuitive for people.

They way you're displaying these groups seems to make sense - it looks like a standard gannt chart layout. there should be plenty of plugins and extensions for these.

  • About the relative dates, the issue is that entering set dates (for example, 2017/04/19 for the start, 04/26 for the end) translates to "During the past week" only for today. The user has to understand that, even though he inputted those dates, in one month it will also mean "the past week", and not "between 04/19 and 04/26". (Was that even remotely clear? :[ ) -- About the resemblance to Gantt charts, pretty good idea, I'll check that out. Apr 26, 2017 at 12:05

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.