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 :
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!