How to present weighted values

Question

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.

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?

Answer 1

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}

Answer 2

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

Answer 3

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

To show you a quick mockup:

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.

Answer 4

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.

Answer 5

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.

Answer 6

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).