0

I am looking for a ui control type which allows adjusting the ratios between at least 3 different scalar quantities.

For example, adjusting the composition of a chemical solution, such that a user can set it to be composed of 50% X, 30% Y and 20% Z.

Currently I am using 3 sliders ranging from 0 to 1 for X, Y and Z, and then normalizing the values in the sliders to derive the actual composition.

I am looking for a more compact and intuitive alternative, ideally in a single control. An ideal solution would not take up space for each component, as there are multiple such sets to display in a limited area.

Furthermore, the context is a real-time environment, where the user must make adjustments quickly, as if in a video game. In this sense, sliders provide a good response as they're easy to grab and drag.

Accuracy is less important than responsiveness and intuitiveness.

Improve this question

2 Answers 2

Reset to default
1

Personally I think the other answer with input is a good option as it's more accurate and still pretty fast once the user gets used to tabbing (and shift-tabbing). Although I would set them out horizontally to allow for more sets on screen at a time.

But as you don't like it, and you may have a valid reason not to (for example, no keyboard input), then my suggestion is to look at a multi-value slider. Something like this:

enter image description here

The main issue with this however, is that you are going to need to play around with the display labels to ensure they don't overlap while still indicate clearly which section they belong too.

One possible workaround for this is to make 0% values a fixed with, as can be seen in my second example above where Y = 0%.

Improve this answer
1
  • I think this is a promising direction. I can see the downsides of it as you've clearly explained but I will definitely try to make an implementation of this.
    – Rotem
    Aug 13, 2020 at 0:37
2

Why not just use three input fields w/ a total?

  • It requires the least physical dexterity, unlike a slider.
  • It also affords the most precise input.
  • You can use tab index so the user doesn't have to use a mouse if they are on desktop.

enter image description here

It's a fairly common pattern (you often see this on budgeting and financial sites, when allocating adjustments to a portfolio) and drives home the fact that x, y, and z are parts of a whole.

Improve this answer
1
  • While a good answer, it draws focus to the lack of context in my question. This solution is less than ideal in my case because (1) there are many such ratio compositions to display in a small space (2) accuracy is not very important (3) user responsiveness is crucial, they need to adjust the ratios quickly based on real time events. I will add more context in the question.
    – Rotem
    Aug 12, 2020 at 0:55

Your Answer

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

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