Looking for an easy, user-friendly way to group people based on recency

Question

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.

Question

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 :

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 :

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

Answer 1

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.

Answer 2

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.