2

I have the current situation: I need to associate items from two categories (let's call them "Recipes" and "Steel Grades") based on a range of numeric values from another category (let's call it P).

For a given Steel Grade "Foo": if 0% <= P < 1%, we should have Recipe "XYZ"; if 1% < P <= 5%, we should have Recipe "ABC", if 5% < P <= 100%, we should have Recipe "JKL", and so it goes on.

The problem is: the user must be able to change this configuration. So in the example above, there are three ranges, but the user must be able to add or remove new recipes (for example, add a new recipe "MNO" for range 5% < P <= 10%, and then recipe "JKL" would be valid for 10% < P <= 100%).

Can someone help me present this is in a nice, simple way?

The first thing that comes to my mind would be an editable table with four columns, "Steel Grande", "Min. P", "Max. P" and "Recipe". The user would add rows to the table and fill them manually. However, I think the usability would be terrible; imagine if a new recipe would be added for range 7%-8%: besides adding the new range, the user would have to edit the existing min/max values from the other ranges (since there should be no overlap between ranges).

(This system is used exclusively in desktop version, so there's no need for mobile functionalities.)

EDIT: I'm adding some images as an example to my original idea.

Initial state

Imagine we have the configuration above. "Bar" has recipe "ABC" if 0% <= P < 20%, and recipe XYZ if P >= 20%. Now imagine we want to change this config so we have a new recipe "DEF" if 10% <= P < 20%. The goal is to have a new row in this table, such as in the example below:

Final state

(note that a new row was added, and the existing ones were updated so we have those ranges covering from 0% to 100%)

Improve this question
3
  • Can you show the table with the four columns? It is very hard to follow which numbers do what and what you are referring to with range.
    – Nash
    Sep 28, 2021 at 7:47
  • @Nash I added a simple prototype explaining what was my original idea
    – TC55
    Sep 28, 2021 at 12:46
  • I accepted Nash's answer because I think it's a nice solution and might be helpful if someone else finds this question in the future. That being said, considering that this is a minor functionality in our system that is rarely used, we ended up using a more simple approach that would be faster to implement, since we already use a table component opposed to not having a slider component. We went with our initial approach of using a table but, instead of having two columns for "Min. %P" and "Max. %P", we left a single column for "Max. %P". It is implicit then that the minimum value for a given r
    – TC55
    Oct 1, 2021 at 15:10

1 Answer 1

Reset to default
1

I would build something like a partitioning UI.

Range sider UI

If that is not in scope, you can always switch the percentage inputs in your table with dual range sliders. Then I would add validations that highlight the row if two sliders overlap.

dual range slider

Improve this answer

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.