App interface for changing relational percentages

Question

Has anyone ever seen or used a good app interface (web or mobile) for changing relational percentages? E.g I need to change 3 amounts to make up £100 and I need to be able to use any permutation to do it.

Only approach I can think of is sort of slider, where you could click and drag dividing lines between pots of money to adjust the amount in each pot. Labels inside the lines would need to update dynamically to show the updated amount in each pot:

I'm not massively happy with this solution though, and I also need to be confident it would be usable if the number of moneypots changed to 10, for example (I don't know the maximum number of pots at the moment but am assuming it wouldn't go beyond 10).

Any suggestions gratefully received!

Answer 1

HumbleBundle.com has a interesting UI for addressing this. They sell a bundle of indie games and let the user choose how much each developer receives, how much to donate to charity and how much to leave as a tip for Humble Bundle.

Answer 2

I have had this problem many times, but never found a good solution. I have tried (and used, imperfect as they were, mostly because I didn't have a better way) several approaches.

1. The one you propose. The problem is: what happens when you change a slider? If you change the amount next to it, the functionality would depend on the order of pots. What if you want to shift money from A to C? You'd have to first move slider between A and B, then B and C. It gets progressively worse as you have more pots.

2. With a bar chart. Each pot is represented with a bar (duh). What I did at first when a bar was lowered was to distribute it over other bars; you could select them with a check box. That way you could lower bar A with 10 dollars, and if you had checked bar B and C but not D and E, then B and C would increase with 5 dollars. This looked good visually in demos (hey look when you move the bar the rest moves too!) but worked crap in practice. Nobody could figure out what the checkboxes were for until you told them.

3. Simply let the user enter numbers, in normal entry boxes, in a list. This looks crappy but is very understandable and fast for real users (i.e., users who actually use the product, not just gee and gawk at pretty interfaces). However the big problem is (as always...) modality. When do you check if the numbers add up to the required total? I always checked the totals of the numbers as they were being entered, and displayed the background of the edit boxes red if they didn't add up correctly. In another case I just moved the whole thing to a modal dialog so that I could check it there. Of course modal dialogs are always a cop-out.

The next time, I want to try the following (if I have time): represent each pot with a circle with the amount in it, and all those circles (each pot) are arranged in a circle themselves. Each circle, when you select it, shows additional UI controls that says 'move amount:' and an edit box and a spinner. You can enter an amount there, and then drag it to another circle. This way, you can move money from one circle to another, and the total will always remain the same. Disadvantage is that you can't easily see how the total amounts in each pot relate to each other proportionally (maybe by using the circle size?) and that you can't split money over multiple other pots (which is something I may be willing to sacrifice). Maybe I would order the circles from big to small, so that it would look like a shell spiral pattern of some sorts, that would show the user relative positions immediately. When the amounts are close to each other it may not add much though and the jumping of the circles may be confusing. I'm not sure yet, there's quite a bit of room for experimentation :)

(in my use cases it wasn't usually money that was moved around (although it was in a few cases), but that makes no difference for the UI of course).

Edit:

By request, here is a mockup. In this case, the circles are sorted by size. Maybe a fixed position is better, I guess that would require experimentation.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

As Roel has pointed out, not everything that looks good in mock-ups works in real life. The main problem in this interaction that it's easier to be performed when visualized but using finite shapes, such as circles or bars, is impossible because we need to account for situations when users assign more than is available. Therefore, our conditions for a good user experience splitting values into buckets to are:

1. Independent editing of each bucket
2. The ability to add/remove buckets
3. Knowing how much is left to be assigned
4. A visual representation of distribution
5. No restrictions of user actions except for accepting with invalid assignments

Here's what I propose:

^{download bmml source – Wireframes created with Balsamiq Mockups}

With this setup, we accomplish all of the goals because users have total freedom of action:

• they can use either the slider or the clicker to assign values
• they can add or remove buckets
• they know how much is available, used, and left

Moreover, if they go overboard, there can be up to four visual cues notifying them of the invalid selection:

1. a message on top of the form (optional, can appear automatically or when a user tries to submit the invalid selection)
2. red highlights of the values in the available/used/left table (an exclamation mark can be added to help color-blind users)
3. disabled pie chart distribution (optional, if the pie chart is present)
4. disabled submit button (optional, not shown)

Answer 4

I created two mockups for you. Have you considered something like this:

and here's a version with Split and Merge buttons to allow users to add or delete without a right-click menu (so it can work on mobile devices.) Clicking Merge would allow the user to select two or more blocks and then combine them (not shown.)

Another benefit of heading in this direction is that zoom + and - buttons on the top right corner will allow the user to split or delete thin slices effectively, even on a mobile device. It will also allow them to see small labels that would normally require a tooltip hover on a device with a mouse. While zoomed in, a preview of the overall picture will need to appear below.

I believe that a secondary, permanent visualization should contain a swatch with the value and color for each space. This way, a mobile or desktop user could easily see that the overall design contains 352, 368, 35, and 745 without needing to zoom in or hover their mouse. The ordering should always match the primary visualization.

Depending on your application, the ordering might not matter. If so, you could have a button to rearrange the bars in the order that's best, such as decreasing or increasing. A subtle hint to the user to click the Reorder button should be provided after manipulating the bars. It would not be a good idea to auto-reorder whenever a user releases the mouse because it would be very confusing.

Answer 5

How about the Humble Bundle direction but adding the ability to lock a slider so it doesn't adjust once locked.

D

Answer 6

I was always fond of bar charts ;) I suppose you could just add a bar for each pot and when user slides one of the bars then others change proportionally. But this still is some kind of slider :(

Answer 7

Following on from Christian's comment, I had a look at the Superfund ring-chart. Each segment goes live when the mouse hovers over or near it. By clicking and dragging the mouse up or down, the value of that sector increases or decreases respectively.

Using Raphael JS, I produced something with similar behaviour, and with linked input text boxes, to give two ways to enter the data:

But I haven't been wildly happy about it: it wasn't really that intuitive.

So I'm now working on a redesign using a modified version of the Jquery multislider widget:

Values can be changed by dragging the separator bars, by entering numbers in the text boxes, or by pressing up and down when the cursor is in one of the text boxes.