I work on a gaming web app. The user (player) has to assign people to different kind of activities on multiple views. Each view has 1 to 5 activities and a max amount of people. The user can assign 0 to MAX people split between the activities. The max amount of people will increase through the time.

Here a example for one of these views. Let's say there are 3 activities (A, B, C) and 10 people available. Below some example of possible distributions:

           A | B | C | Total
 case 1:   10| 0 | 0 | 10
 case 2:   3 | 3 | 4 | 10
 case 3:   1 | 0 | 2 | 3
 case 4:   0 | 1 | 3 | 4

The user will regularly update these assignments. And I'm looking for a way to manage it easily.

I thought about the following elements/ui.

Sliders : the percentage of people assigned is important, that's why I thought about sliders. Sometimes the user doesn't care if 4 or 5 people are assigned to an activity, he just wants a 50-50 distribution. Con: it's not easy for the user to define a specific amount of people (number input next to the slider?)


[+][-] buttons with input number: the user can click on plus or minus buttons or directly define the number of people assigned to the activity. Percentage could also be displayed next to the input. Con: the user can't assign all the remaining people available without calculation (or spamming [+] icon).

(source: bootsnipp.com)

Zero, decrease, increase, max: may be something similar to page navigation could also be useful. It's like [-][+] but also allows the user to assign all the remaining people if needed. May be arrows aren't a good UI choice but just to give you an idea:


What do you think? Should I try a mix with [-][+] and min/max with the percentage displayed? Is the sliders could help?

  • Are the numbers staying in the 3 tasks/10 people range? If so, you could also move little avatars around via Drag&Drop (no answer, just another alternative, sorry :-) Commented Jul 22, 2015 at 10:32
  • @virtualnobi It's around 1 to 5 tasks but 1 to 10000 peoples if needed !
    – Alex
    Commented Jul 22, 2015 at 11:55
  • is it preferable to show the data horizontally or vertically or any is possible? Commented Jul 22, 2015 at 16:22
  • there are to many variables here: the step of the increment, the needed accuracy of the step increment, the input needed for the data, etc, first you have to priorize them to find and answer. Without this information I can think of 5/6 solutions depending on what is more important Commented Jul 22, 2015 at 16:30

2 Answers 2


It seems you're working on a strategy game. Such games usually have units and resources and most of them have an info-bar to show their distribution.

For desktop games, keyboard is used to give commands and directional movements while the mouse is used for trivial and advanced movements, drag and drop, selection, etc.

In your case, I think it's better to keep things simple and let the user define the distribution with their keyboard rather than using a range element. It will be faster and easier for the user and I think gamers will prefer quick assignment of units with their keyboard rather than using sliders or range picker elements. Consider the following mockup:


download bmml source – Wireframes created with Balsamiq Mockups

The user can simply assign units for each activity. Unused units can be shown explicitly so that the user does not have to calculate the number of remaining units. These values can change dynamically (0 to MAX) as the game progresses. This is inspired from the distribution of resources in games like AoE 2, Starcraft 2, etc.

enter image description here

Hope this helps!


Better solution is to use Disk partition kind of UI:-

enter image description here

With this kind of UI, users can

  1. Allocate people in one control, compared to having one control per activity.
  2. Visually get the rough percentage allocation of people for diff activities.
  3. Re-sizing the boundary line b/w two activities will change the allocation.
  4. Details of the allocation can be provided below the respective block.

There are few corner cases like:-

How will find and increase the allocation for an activity having no people allocated.(This is not a problem if min allocation is set)

How to show details for an activity with small allocation, etc.

But worth considering for its advantages.

  • This is simillar to slider with multiple thumbs, difference being thumb position defines the selected value, but in above UI boundary of the block with same color defines the allocation size.
    – Chetan
    Commented Jul 22, 2015 at 10:48

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.