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:


download bmml source – Wireframes created with Balsamiq Mockups

The question is, what UI design allows to enter those ratios with minimum effort?

I thought about some "one click & drag" interface like this:


download bmml source

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, 2015 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. Aug 4, 2015 at 7:51

2 Answers 2


As myself and others have mentioned recently, a good way to intuitively represent and modify percentages is a vertical bar chart with sliders/handles:

enter image description here

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)? Aug 4, 2015 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). Aug 4, 2015 at 13:08
  • 1
    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. Aug 4, 2015 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:


download bmml source – Wireframes created with Balsamiq Mockups

"Remains" is the amount of required work decreased by already divided amount in resource fields. So user has to get to "Remains=0" state, when Average price is calculated and OK button is enabled. Dialog is used for groups with 2+ resources only.

Reasoning behind this decision:

User knows the exact absolute value he has to divide. So instead of rough percentage, he has to divide that absolute value down to zero. Then the weighted average can be evaluated and confirmed by dialog.

I am accepting PicelSnader's answer, thanx for help.

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.