# Effective entry of fractions divided to multiple elements

There are several resources divided into groups with different count (from 1 to 10). User has to enter an approximate usage of every resource in group, so average group cost can be calculated. This requires percentage utilization of resources inside the group, which is unknown, but user has to enter some assumption as ratio between them. In the following example average cost for Group A is 17.75, and Group B is 20.

``````                 Cost         Expected utilization
Group A
Resource 1      10                   0%
Resource 2      15                  80%
Resource 3      25                   5%
Resource 4      30                  15%
Resource 5      40                   0%
Group B
Resource 1      20                 100%
Group C
Resource 1      20                 100%
Resource 2      40                   0%
``````

Note that cost of the resources gradually rises, but in different steps.

Sum for every group is considered 100% and user has to find the ratio, how to divide 100% to every resource.

``````Number of resources in group:
1   Nothing to divide
2   Simple slider 0-100%
3   ????
``````

I want to avoid this kind of dialog: The question is, what UI design allows to enter those ratios with minimum effort?

I thought about some "one click & drag" interface like this: This doesn't work for following reasons:

• not working for 4+ resources (problem to set more than one resource to zero)
• it requires a lot of space
• when one resource outweighs the others, it is problematic to divide the smaller ones
• Are there any constraints or rules here? Like relation between cost and expected utilization? or can the user allot any percentage to any resource? – Adit Gupta Aug 3 '15 at 16:59
• User is aware of resource cost. So yes, he can speculate how to divide all resources to find the best price. But only constraint is group sum of 100%. In other words, he can't pass percentage between groups. – Frantisek Kossuth Aug 4 '15 at 7:51

As myself and others have mentioned recently, a good way to intuitively represent and modify percentages is a vertical bar chart with sliders/handles: With (editable) numbers for each part. By default I'd set them to have equally large portions, so for group A, 20%, group B is a full 100% for one resource, and C is 50/50.

• Great tip! How do you handle zeros (sliders may overlap)? – Frantisek Kossuth Aug 4 '15 at 11:08
• Could you, please explain, how to adjust the other fractions, when moving particular slider? For example the one between purple and red part - if I slide it left, does the other two move? That can be a problem with eye-hand feedback (you see something, hand moves the slider to new position, but before you get there, position of the target changes). – Frantisek Kossuth Aug 4 '15 at 13:08
• I would only move the one slider. So if you move the middle slider, only red and purple change size. That way you only have to worry about 2 values in your head instead of (theoretically) infinite. Zero-sliders are an interesting problem, but I think an elegant solution would be to only count the colored pixels as width. In my example the bar is 250 pixels wide but would be only 250 'wide'. Yes, sliiightly counter-intuitive that the split isn't at the center, but it's what comes in to my mind right now. – PixelSnader Aug 4 '15 at 18:37

My summary what was implemented (client's decision):

All resources inside every group have some expected utilization. User has to divide that number among the resources in this dialog: 