Jump to content

  • Log In with Google      Sign In   
  • Create Account


Input method to emulate multiple sliders?


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
21 replies to this topic

#1 Orymus3   Crossbones+   -  Reputation: 6840

Like
0Likes
Like

Posted 05 May 2013 - 11:58 AM

Hi,

 

I'm currently struggling with a player input / User interface issue I'm trying to fix and would like your feedback.

 

I'm working on a project where you manage a single resource towards various poles.

 

Think of it as trying to manage people to do different tasks:

'how many people should do task "a"'

'how many people should do task "b"'

'how many people should do task "c"'

...

 

Now, most games I've seen use multiple 1-dimension sliders and some form of a total.

Many of them will make it so that when you increase one slider, it will automatically substract from one of the others in such or such way.

 

I find this system to be suboptimal at best and irritating to use, but lack more efficient implementation to really substantiate it.

 

Since there are 6 different allocations in my game, I initially went for a sort of hexagon where you could just drag your allocation balance, but it was limited in that, if you would move towards B, you'd also inherently move closer to A and C, while moving away from D,E,F and my system really doesn't have much correlation by proximity.

 

I was wondering if you know of, or have thought about potential implementations to make manipulating such a system simpler and less irritating?


Edited by Orymus3, 05 May 2013 - 11:59 AM.


Sponsor:

#2 Anthony Serrano   Members   -  Reputation: 1133

Like
1Likes
Like

Posted 05 May 2013 - 02:57 PM

With 6 variables, I'd say the only workable option is sliders of some sort. The geometric method (i.e. your hexagon idea) requires, if all the variables are intended to be uncorrelated with one another, an (n-1)-dimensional figure for n variables, and there's not really a convenient and intuitive way to place an arbitrary point in a 5D space.


if you don't like the idea of other sliders automatically adjusting when you move one, consider instead making the sliders a bit more indirect: instead of directly controlling the resource allocation for each pole, they dictate the weight of each pole in determining the final allocation.

For example, if all six sliders have the same value, they all receive 1/6 of the total resources, regardless of whether all six are at 100% or at 10%. (i.e. the amount of resources devoted to each pole is equal to (total resources)*(that pole's slider value)/(the sum of all slider values).)

#3 Orymus3   Crossbones+   -  Reputation: 6840

Like
0Likes
Like

Posted 05 May 2013 - 06:32 PM

Interesting.

My concept thus far was to drag portions of a pie chart so that each element became more or less important.  This was however, not very user friendly.

 

Perhaps I'll look into less geometric avenues. I'm pretty sure I'm not the first to tackle this problem, perhaps its all a matter of presenting it differently?



#4 Luckless   Crossbones+   -  Reputation: 1730

Like
0Likes
Like

Posted 05 May 2013 - 08:27 PM

What ever choice you go with, make sure it includes the ability to lock a given value so you can toggle which ones you are actually changing at the time.

 

What about having the different tasks be variables that you can drag around and group in a tree structure. Have the root be your entire resource amount, and then be able to group your different tasks however you want in multiple levels to manage their ratios.

 

So say you have the 6 options, A: Military, BCE... as 'everything else'. (I have no idea what your tasks are)

 

R is your root pool, from R the player chooses to split between two nodes: A and BCDEF. The sliders adjust the split of the entire node above, leaving nothing more. 

 

The player then chooses to split three ways, BE, CF, and D. each node gets a slider, and in this case BE and CF split again and get their final slider adjustments. 

 

Dragging any value around in the tree should auto adjust the tree such that the amounts each.

 

So if I were to split 50:50 between A and BCDEF, A gets 50, BCDEF gets 50.

 

Then I split 15:20:15, BE gets 15, CF gets 20, D gets 15.

 

Later I change my mind and want to group D with A, so I drag D over to A's node. D joins A's node out of Root, and they split off into their respective leaf nodes. But since no values actually change on a simple move the split out of Root turns to 65:35, and AD splits to 50:15. I can then go back and adjust the Root split back to 50:50, which then auto adjusts the values in the sub trees based on their previous ratios.

 

 

This is the only way I can see any kind of improvement over "Moving one slider splits the difference among all other unlocked sliders" method that seems to be the common solution.

 

 

(I should patent this idea.)


Old Username: Talroth
If your signature on a web forum takes up more space than your average post, then you are doing things wrong.

#5 mippy   Members   -  Reputation: 1002

Like
1Likes
Like

Posted 05 May 2013 - 11:32 PM

Argh! I had tasks planned for today and now this interesting problem came up :/

  • Is it possible to make the variables dependent on each other?
  • You could perhaps group them into pairs, then one slider would be manipulating the proportion between two variables instead of one.
  • Is it integers or real values you are manipulating? Sliders work well for real values but for integers you could use some "add/remove" buttons.

My best suggestion is to use a "megaslider":

n5Aue.jpg

All values are stuffed into the same slider. The black box indicates how much stuff you have unused. When you slide any arrow, the value of that variable changedand the segment is getting changed proportionally. In the lower image the light blue arrow has been manipulated to the right. As a result, the purple arrow is pushed to the right and the black box is reduced.

  • It's clear that they all use the same resource pool.
  • You see the proportions of the values.
  • Problem is that if some of the values are supposed to be small and some large, it might lead the user into thinking that they should all be large. Example: if soldiers/priests/worker proportion is perhaps 40/2/5000, it will be poorly represented in this system.
  • You can attach nice icons on the arrows.

Edited by mipmap, 05 May 2013 - 11:54 PM.


#6 Acharis   Crossbones+   -  Reputation: 3415

Like
0Likes
Like

Posted 06 May 2013 - 01:23 AM

if you don't like the idea of other sliders automatically adjusting when you move one, consider instead making the sliders a bit more indirect: instead of directly controlling the resource allocation for each pole, they dictate the weight of each pole in determining the final allocation.

For example, if all six sliders have the same value, they all receive 1/6 of the total resources, regardless of whether all six are at 100% or at 10%. (i.e. the amount of resources devoted to each pole is equal to (total resources)*(that pole's slider value)/(the sum of all slider values).)

This. I have seen the "other bars adjust as you click one" in the old games and I did not like it. The only one that is fine with me is the proportional/percentage system (you move one to the right and then you have to move all other to the left - this way you have 100% in the first one and 0% in others).

Europe1300.eu - Historical Realistic Medieval Sim (RELEASED!)


#7 Orymus3   Crossbones+   -  Reputation: 6840

Like
0Likes
Like

Posted 06 May 2013 - 06:52 AM

What about having the different tasks be variables that you can drag around and group in a tree structure. Have the root be your entire resource amount, and then be able to group your different tasks however you want in multiple levels to manage their ratios.



So say you have the 6 options, A: Military, BCE... as 'everything else'. (I have no idea what your tasks are)



R is your root pool, from R the player chooses to split between two nodes: A and BCDEF. The sliders adjust the split of the entire node above, leaving nothing more.



The player then chooses to split three ways, BE, CF, and D. each node gets a slider, and in this case BE and CF split again and get their final slider adjustments.



Dragging any value around in the tree should auto adjust the tree such that the amounts each.



So if I were to split 50:50 between A and BCDEF, A gets 50, BCDEF gets 50.



Then I split 15:20:15, BE gets 15, CF gets 20, D gets 15.



Later I change my mind and want to group D with A, so I drag D over to A's node. D joins A's node out of Root, and they split off into their respective leaf nodes. But since no values actually change on a simple move the split out of Root turns to 65:35, and AD splits to 50:15. I can then go back and adjust the Root split back to 50:50, which then auto adjusts the values in the sub trees based on their previous ratios.

 

*Brain needs image to understand*

I think I'm a visual type of person. Didn't quite get the tree structure from your idea (which also means I didn't understand the idea).

 

Is it possible to make the variables dependent on each other?
You could perhaps group them into pairs, then one slider would be manipulating the proportion between two variables instead of one.

 

They are really standalone items and are not related to one another. It's basically like saying, my city has 1000 population, 100 of which I want to work in healthcare, 200 of which I want to work in retail, 200 of which I want to work in schools, etc. They are all strictly different and shouldn't represent a binary choice (a or b) but a complex decision (a or b or c or d or e or f)

 

Is it integers or real values you are manipulating? Sliders work well for real values but for integers you could use some "add/remove" buttons.

I'm using integers (actual population count) but could represent them as proportions in %. That really doesn't matter so long as its user-friendly.

I've indeed toyed with the concept of various side-by-side boxes with their own +/- buttons. So far, this is the best looking system but its still very complex.

 

All values are stuffed into the same slider. The black box indicates how much stuff you have unused. When you slide any arrow, the value of that variable changedand the segment is getting changed proportionally. In the lower image the light blue arrow has been manipulated to the right. As a result, the purple arrow is pushed to the right and the black box is reduced.
It's clear that they all use the same resource pool.
You see the proportions of the values.
Problem is that if some of the values are supposed to be small and some large, it might lead the user into thinking that they should all be large. Example: if soldiers/priests/worker proportion is perhaps 40/2/5000, it will be poorly represented in this system.
You can attach nice icons on the arrows.

 

I had such a slider in mind as well. It is incredibly hard to be precise though, and its much harder for the user to determine what will happen (how can I make the blac box grow? as they'd be expecting that dragging section A will transfer to the section besides it (B)).

Still interesting though.

 

This. I have seen the "other bars adjust as you click one" in the old games and I did not like it. The only one that is fine with me is the proportional/percentage system (you move one to the right and then you have to move all other to the left - this way you have 100% in the first one and 0% in others).

How exactly does it work? Do you have any example I could check?



#8 Luckless   Crossbones+   -  Reputation: 1730

Like
1Likes
Like

Posted 06 May 2013 - 08:58 AM

Quick sketch of my idea. Yay for MS Paint!

 

Drag stuff around, push nodes together to join them. Could also vary the size of the bubble based on how much you are allocating. Makes it easy to swap stuff around. In this example the player could use the left side of the tree for the 'fixed' values, and the right for ones they are adjusting. The actual amount allocated to a given task would stay fixed when moving the node around the tree, so you fiddle with numbers on the right, then when you are happy with one you toss it into the left node, and the computer calculates how much it was set to and adds that to the slider going to that node. 

 

 

It could even be expanded to have a section above the Root for Fixed Values. If you only ever want X number going to a given Task, and this doesn't change if your root pool grows, then drag them up top. As more is added to the root it flows down to the lower nodes and adjusts all the ratios as needed. Again if you drag something out of the fixed values section to the lower part, then it wouldn't actually change the assigned numbers, just adjust the sliders as needed to keep everything the same.

 

 

 

Mipmap's slider could also work well, but I would want to be able to drag and drop the sections to reorder stuff. That way you can quickly adjust two values accurately when you are already at max resource usage. Moving units from the left most to the right most would be annoying otherwise, as you would have to adjust each value.

 

 

Another option could be a more visual option. Your options are then pools, and to change the value of one you click and drag different sized circles from one to another. They could auto sort based on different sizes, and would need to be played with to get good values that work well in game. Add two or three units to one task? Drag two or three small icons from one to the other. Major changes? Drag that 50% ball out of one. Maybe keep a center 'table' so you can drop a large value there and it splits into smaller ones. Double click on a large ball and it splits into smaller or something. 

 

Not sure if that would really be more usable than just a text box, and the user directly enters changes.

Attached Thumbnails

  • Tree.jpg

Old Username: Talroth
If your signature on a web forum takes up more space than your average post, then you are doing things wrong.

#9 mippy   Members   -  Reputation: 1002

Like
1Likes
Like

Posted 06 May 2013 - 09:10 AM

  • What kind of device are you building this for? I was assuming you are building for desktop (keyboard and mouse).
  • What is the range of the variables? 10s, 100s or 1000s of units to manipulate?

Here is another one:

 

ntm6z.jpg

 

You select the variables (x) you would like to manipulate and then spin the "wheel" below.


Edited by mipmap, 06 May 2013 - 09:23 AM.


#10 Acharis   Crossbones+   -  Reputation: 3415

Like
0Likes
Like

Posted 06 May 2013 - 09:18 AM

Acharis, on 06 May 2013 - 09:21, said:

This. I have seen the "other bars adjust as you click one" in the old games and I did not like it. The only one that is fine with me is the proportional/percentage system (you move one to the right and then you have to move all other to the left - this way you have 100% in the first one and 0% in others).

How exactly does it work? Do you have any example I could check?

? It's the simpliest system possible... Old Settlers used it: http://imageshack.us/f/337/settlers.jpg/

Europe1300.eu - Historical Realistic Medieval Sim (RELEASED!)


#11 Orymus3   Crossbones+   -  Reputation: 6840

Like
0Likes
Like

Posted 06 May 2013 - 09:33 AM

Quick sketch of my idea. Yay for MS Paint!

 

I feel a bit mindblown by this.

 Wouldn't just dragging the items individually into each pool be easier?

 

What kind of device are you building this for? I was assuming you are building for desktop (keyboard and mouse).

Currently so, but it would be possible to port to an environment where you drag (mobile).

 

What is the range of the variables? 10s, 100s or 1000s of units to manipulate?

From 0 to approx 1000.

 

You select the variables (x) you would like to manipulate and then spin the "wheel" below.

I agree it adds some "fun" in manipulating it.

 

? It's the simpliest system possible... Old Settlers used it: http://imageshack.us/f/337/settlers.jpg/

Totally misunderstood your original statement :)



#12 Luckless   Crossbones+   -  Reputation: 1730

Like
1Likes
Like

Posted 06 May 2013 - 11:00 AM

Well, you were looking for other options. I haven't actually tested the tree based sorting sliders, but in theory it works very well. 

 

If done well so that everything flows smooth and fluid, then it lets you accurately complex ratios and quickly balance stuff in various ways. 

 

Say I want a ratio of 2:3 for A:B, then I can drag them into their own subtree together and put them at 2:3. Any other adjustment anywhere else will always keep those two as 2:3, and adjust their values accordingly. 

 

Many users may well choose to just use a full flat structure, setting the value for one and then locking it, but the option is there for players who want to use the more detailed tool.


Old Username: Talroth
If your signature on a web forum takes up more space than your average post, then you are doing things wrong.

#13 Orymus3   Crossbones+   -  Reputation: 6840

Like
0Likes
Like

Posted 06 May 2013 - 11:48 AM

I understand the use now. Indeed, consistency of ratios is something cleverly achieved by this system.

It isn't critical for my system though, and the added complexity would probably turn the players off. You see, with my system, this is an operation the players will need to tackle repeatedly for several different populations, therefore I want to keep a clean design. The reasoning behind leaving the sliders behind was to replace it with something simpler. A hierarchy, while in theory (and from a computer's perspective) simpler in design, is actually more complex to grasp with a single sweep, and I'm looking for a more simple graphic depiction of the system.

Perhaps I'm trying to achieve something that can't be conceived of in 2d :)



#14 Acharis   Crossbones+   -  Reputation: 3415

Like
0Likes
Like

Posted 06 May 2013 - 12:36 PM

How about "moving population" like in MOO2?


Europe1300.eu - Historical Realistic Medieval Sim (RELEASED!)


#15 Luckless   Crossbones+   -  Reputation: 1730

Like
1Likes
Like

Posted 06 May 2013 - 01:11 PM

How about "moving population" like in MOO2?

 

I didn't play much MOO2, and really can't remember how that worked. Can you post a description? 

 

 

Personally I'm starting to think that maybe just going with some kind of system that is visually similar to a table with a pile of coins and cash may be your best bet for something more simple than the traditional slider system. Most people are fairly familiar with counting physical money. Have buttons to quickly 'combine' stacks in to nice, easy to see blocks of higher values, or drag them to a spot to split them up into piles of smaller coins. 


Old Username: Talroth
If your signature on a web forum takes up more space than your average post, then you are doing things wrong.

#16 Acharis   Crossbones+   -  Reputation: 3415

Like
0Likes
Like

Posted 06 May 2013 - 01:44 PM

I can't :) It was too simple to describe :) You was clicking then draggind and you moved the population to another "box". That way you were determining the priorities.


Europe1300.eu - Historical Realistic Medieval Sim (RELEASED!)


#17 Orymus3   Crossbones+   -  Reputation: 6840

Like
0Likes
Like

Posted 06 May 2013 - 04:57 PM

Personally I'm starting to think that maybe just going with some kind of system that is visually similar to a table with a pile of coins and cash may be your best bet for something more simple than the traditional slider system. Most people are fairly familiar with counting physical money. Have buttons to quickly 'combine' stacks in to nice, easy to see blocks of higher values, or drag them to a spot to split them up into piles of smaller coins.

 

Clever.

Not sure what to replace coins with though, unless I divide a system much similar to the roman army:

Legion = > Cohort => Centuria => Legionnaire.

Merging some legionnaires would return a centuria, and so on and so forth (with different numbers obviously). I feel though that it could be taxing on the numbers I can tackle. I can't quite make a centuria and a half unless I allow it?

 

Perhaps sliders is the way to go afterall...



#18 Luckless   Crossbones+   -  Reputation: 1730

Like
1Likes
Like

Posted 06 May 2013 - 06:31 PM

Just abstract it to "Worker Tokens".

 

Each worker is its own token. Toss a bunch of them in the "Change Machine" and it spits back whatever combinations work best, like real world coinage/bills. Tokens to represent 1, 5, 10, 25, 100, 200, 500, 1000, etc, as needed. 


Old Username: Talroth
If your signature on a web forum takes up more space than your average post, then you are doing things wrong.

#19 Orymus3   Crossbones+   -  Reputation: 6840

Like
0Likes
Like

Posted 06 May 2013 - 09:33 PM

I can easily envision how you'd break the units into smaller pieces, but the reverse process might be tedious (regroup 50 individuals in groups of 10 or 5 might require a lot of manipulations).



#20 Luckless   Crossbones+   -  Reputation: 1730

Like
1Likes
Like

Posted 06 May 2013 - 09:40 PM

Use an auto gather function. Pick up one token and shake it over the pile of that given group, and stuff automatically groups into a reasonable number of the various sized tokens.

 

Or just have it do it automatically without user involvement if loose tokens sit around too long. 10-15 seconds maybe. 

 

Aim to have at least 2 of a given level of of token out before lumping them into the next highest token. So if you have 5 singles, they wouldn't auto join into a 5 pt token, but add two more and the 'extra' 5 singles merge into 1 5pt. That way you rarely have to manually break a stack if you just want to toss a few around. 


Old Username: Talroth
If your signature on a web forum takes up more space than your average post, then you are doing things wrong.




Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS