I have a formula which is used to calculate certain scores. The formula has some parameters (shown in the image below) including a Weight parameter that is changed dynamically (the rest of the inputs are not relevant right now). The sum of weight needs to be 100, like a pie chart.

Weighted Parameters

I feel that this is not quite obvious enough for the the user but I have been unable to find any best practice to follow in this situation. Maybe I need to visualize the weight values somehow, but I'm not sure how.

How can this be enhanced or changed to be more understandable? Do you know of any well executed examples (or customized UI controls) for this kind of data and behaviour?

  • 2
    Who are your users? Are the sophisticated enough to understand a number scale and the concept of numerical weighting? Or would they be better served by a simple 2-3 value "Less important -- More important" scale? – Alex Feinman Apr 23 '13 at 19:24
  • They are not that sophisticated, not quite technical people, we can use your idea, and it could be applid to Free Events and Maximum Events too.Thanks for the input! – Zoltan Veres Apr 24 '13 at 10:13

Often, role-laying games has encountered a similar problem. The player has to balance the limited character-points between the different skills.

They sometimes solve this with scroll bars, or spin-buttons. But the real magic (pun intended) is when allocating more point (or percentage) to one item automatically draws out points from the other items. This maintains a limit on the total number of points allocated, and also maintains the proportions between those other items.

The user can quickly understand the behavior of the system, as his actions (increasing importance of an item) clearly and immediately affect the other items (reducing their importance).

It is a nice and quite intuitive way to balance out the relative weigh of several items.


download bmml source – Wireframes created with Balsamiq Mockups

| improve this answer | |
  • + 1 That's a great solution, however what @JohnGB pointed out in his answer,the problem applies to this solution too: Lets say I increase the first line from 26% ->46% (rest of the controls are decreasing), and i increase the second line to from 4% -> 10%, than the first line will be decreased, but i want that to remain 46%, so i go back to the first line and increase, etc.I need to make a lot of adjustments, to achive my desired weight ratio. – Zoltan Veres Apr 22 '13 at 10:41
  • Do you have any ideas how overcome this problem? – Zoltan Veres Apr 22 '13 at 10:46
  • 2
    As I recall, the role-playing games added the option to "lock" an item. When an item is locked, it's weigh is not changed by the other items. Let's say item A is locked, and I increase the weigh of item B, then items C and D are decreased, but item A remains. – Dvir Adler Apr 22 '13 at 11:16
  • 1
    See the lock buttons I added in the mock-up (they might be drawn in an unlocked state). – Dvir Adler Apr 22 '13 at 11:19
  • Yes, sorry about that, i like the idea! – Zoltan Veres Apr 22 '13 at 11:27

From a UX perspective, there is no reason that the sum has to be 100. You may be thinking in terms of percentages, but it is trivial to scale them up or down to make the net effect 100.

What usually matters in weighting is the weight of a single item relative to the total weight. You can easily calculate this, so there is no need to burden a user with your mathematical requirements.

Let's say that the total of 'Weight' is 200, and you have an item with a 'weight' of 50. The the relative weight is just:

relative weight = actual weight * (ideal total weight) / (actual total weight)

So, relative weight then = 50 * 100 / 200 = 25

| improve this answer | |
  • You're math is right about the sum of weights, but it is still hard for the user to calculate the remaining percentages (or visualize it), even if he using 200, 500, or 1000 as total weight.i think it's easier to calculate with 100% instead of 500, or 1000, but that's just my opinion, that's how my brain works :). Your suggestion is useful and it should be implemented in order to be more bulletproof, but I'm looking for a more intuitive solution.There should be one. – Zoltan Veres Apr 21 '13 at 15:56
  • If I decide to change the weighting of one item from 20 to 40, it is much easier to think that I am increasing the weighting of that item than it is to then have to recalculate every other weighting to get the total to 100. – JohnGB Apr 21 '13 at 16:23
  • It should automatically recalculate the rest of the values, in your case decrease the rest of textboxes with 5 equally. At least that's what think it will be ideal. – Zoltan Veres Apr 21 '13 at 17:12
  • 3
    @VeresZoltan Try increasing three weightings from 20 to 40. Each time you change one, the other two change as well. That would make it almost impossible to then increase multiple values by the same relative amount. – JohnGB Apr 21 '13 at 17:43

Also a good model would be the model of split-panels, only vertically.

To show you a quick mockup:

enter image description here

The buttons are there to expand on the loss of the neighbour and the <-|-> sign is a mousecursor on hover.

Colors and the connecting shapes are to make relationship visual.

Really just an idea, yes, the usual way is the character slider, but this is what came to my mind.

| improve this answer | |
  • 1
    this works well as long as no weight is very small compared to the total – jk. Apr 24 '13 at 11:39

If you use something that sums to 100, use percent, as this is very clear what it means. You can also use marks like 20 of 100, 20/100, but the idea of having scroll bars is very good. I remember from Paradox games (Europa Universalis, for example), one can block a slider by double-clicking it, so modifying another slider has no effect on this one.

| improve this answer | |

If you want the user to understand the concept of weight I think you would need to visually indicate how much "weight" he or she can distribute. You need some kind of "weight" container that is emptied as the user distributes it.

It's the same idea from role-playing games as Dvir Adler suggests, but more literaly: user has X points to distribute in Y containers.

The visual implementation of this concept should include:

  • Visual representation of the initial container and destination containers
  • Control to move weight from initial to destinations
  • Control to move weight from destinations to initial

This can be tricky for the user if you want a lot of detail in how the weight is distributed (100 points, for example), but simplifiying to 10, you can implement this interface with information bars and [+] and [-] buttons in every destination container.

| improve this answer | |

Reading the question, I understand it as if the "Weight" is NOT supposed to be used interactively, but is part of a feedback, and that it is calculated at all times.

So, if the user changes "Excessive Acceleration" from 1 to two, the "Weight" should be recalculated automatically from 20, 20, 20, 20, 20 to 33, 17, 17, 17, 17 (crudely rounded which gives us 101%, I know - and this is another issue with percentages).

The simplest way of giving the users a better understanding is to:

  1. Don't put the "Weight" in input boxes.
  2. Add a % sign after each "Weight" value, i.e. 20%, 20%, 20%, 20%, 20% instead of 20, 20, 20, 20, 20.
  3. If you want a simple visualization, a bar graph could come in handy. It should probably look something like the right side part of Aadaams image, and should be of the same height as the table. You might also want to put boxes in corresponding colors in the table as legend (beware of color blindness, though).
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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