1

Currently I have been asked to help someone create a component/popup that appears above a table that can allow users to select a time window (the terminology used here is "bin") that will then update the table based on the selected value. Although it may already be clear, a bin is the concept of segmenting a large amount of data into fixed time interval.

For example, if I have a "YEARS" worth of data and I have processed it into bins that hold "1 Days" worth of data then I would have 365 bins.

What is a good component that could allow users to select a single bin from a large potential range of bins?

Keep in mind data can be over a time period of 2 years and also have been "bin'ed" in to 15min segments. Also It could be 1 day time period "bin'ed" in 6hour segments.

[Wireframe concept I made when speedy development was in mind] [enter image description here]1

Improve this question
2
  • Hi @ClintCC, thanks for an interesting question :) Can you define the user requirement for the bin selector a little bit more to help answer the question? Is it only used to select a single bin over the entire time period or can it also be used to select a range or any number of bins within the time period?
    – Michael Lai ♦
    Commented Jul 12, 2018 at 23:24
  • Sure! @MichaelLai currently there is only support for selecting a single bin which will house only the records for the time scope of that bin.
    – ClintCC
    Commented Jul 13, 2018 at 1:48

1 Answer 1

Reset to default
1

It looks like that you are able to create a custom UI component for this feature, which would give you a bit more flexibility in design, however, just because you can customize doesn't mean that you should.

Let's break down the input and output that the user requires and see how well your design applies.

Input from user

  • a single selection of a bin from a range of values

It looks like you are using the left and right arrows to adjust the selected value, which means there is probably a default value that the marker (round dot) is sitting on. This is more suited to smaller number of incremental values where the precision and accuracy of the selection is not a problem.

However, if there are lots of bins to select from, it may be easier to use the marker as the 'slider' in combination with the arrows. Here is an example where the slide is used as the control

enter image description here

Output from interface

  • range of values available for selection
  • current value selected by the user

The output from the interface helps the user to quickly locate the particular bin that they want to make the selection for, but because the slider has a fixed width the increment size (reflected by the step marker - example) will change depending on the number of bins created (and therefore it cannot be displayed clearly on the slider).

enter image description here

The display of the current value selected by the user allows the user to match the area on the slider, and therefore make adjustments until the correct bin is selected. Alternatively, this can also be used as an input for the user to enter the value directly, and the marker on the slider should also reflect the change in the value entered as shown in the example below.

enter image description here

Hopefully this gives you some idea for the input and output that you can try to customize for your control, or if you have other information that might help to design a more suitable control please feel free to comment below the answer.

Improve this answer
1
  • Thanks for the in-deapth look at the relationship between component and user input. The screen I'll explain the functionality I was going for with the image I uploaded. This is indeed a slider, ideally with soft snapping to bins. Allows move over large parts of time but no 1:1 slider anxiety. However, This is bad for high number of bins that will trigger snapping continuously . Thus, the arrows are a "Bin" by "Bin" movement, allowing precise movement to the location. I considered this but stuggled with the idea that I could allow input of a day but bins can be larger then a day.
    – ClintCC
    Commented Jul 13, 2018 at 6:55

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.