3

I want to get my user to create a list of items. Then each item in that list needs to have a percentage assigned to it.

The tricky part is that the percentages need to add up to 100%.

So let's say the app is about customising a pizza top. The user will add items like so: onion 5%, cheese 45%, tomato 10% & mushroom 40%.

At the beginning the list is empty. So the first item will be 100% of the mix. I can deduct whatever percentage the user chooses for the second item from 100. But for the third and fourth items it gets difficult as I'm not sure which item I should deduct the item percentage from. Also there's a chance that the user wants to edit the percentages after assigning.

What's the best approach to this?

Improve this question
3
  • Is this a list that's already limited, or are the users adding from a large list of items, and then declaring a percentage? Can you give more context and perhaps show us some visuals of your efforts so far? This forum works best by displaying what you're working towards, and giving us a little more context and constraints. Who are these users? and why percentages?
    – Mike M
    Mar 24, 2019 at 14:38
  • Is having the distribution based on percentages a fixed requirement? I usually find it really hard to wrap my head around thinking in fractions of 100 when weighing different components. My thoughts are usually more like "I want X, and I want twice as much Y, and just a bit less Z". This leaves me with "weighted" ingredients like 1X + 2Y + 1.9Z. No idea what that is in percent - if anything, I'd expect the website to tell me; it's trivial to compute, after all. Maybe you can clarify whether you have any leeway in that direction in your question.
    – O. R. Mapper
    Mar 26, 2019 at 11:22
  • Thanks @O.R.Mapper your approach is interesting and, I think, easier and more convenient for the user. This can be implemented as a slider as well I reckon. With "nothing" on one side of the slider and "a lot" on the other side. Then depending on the number of items that have "a lot" selected, weight can be distributed. For instance if three items are "a lot" and one item is "a little" then we can calculate the numbers as a percentage with assigning a small value to "a little" like 4% then say "a lot" = (100 - 4) / 3. I like it!
    – Hoss Zamani
    Mar 27, 2019 at 0:57

4 Answers 4

Reset to default
4

Sliders are probably the best option like Yasintha's answer, but another possible option to explore is to have input fields and an indication of how much percentage is remaining.

enter image description here

That way you might not have to deal with:

  • Having the sliders auto-adjust when users edit the percentages, unless you integrate a 'lock' button
  • Users having a difficult time dragging the slider to a certain percentage amount

Or a combination of both sliders + editable numbers. But like Mike M's comment, some more information might help with the best solution!

  • Is this list with a set number of items? You might also have to take into account the interface of the amount of items.
  • Are there decimals in the percentages or are rounded to a whole number?

Links

Here are other questions I've encountered that help and provide me with good insight. Hopefully they'll be of some use for you as well.

App Interface for Changing Relational Percentage

Cumulative Percentage Between 4 Controls

Improve this answer
2

In this case, sliders are the best option.

enter image description here

Improve this answer
1
  • 2
    What do your other sliders do, when I move the onion slider to the right? Is the onion slider locked (there is no indicator that it is), or do you want to substract the same amount on all other sliders (I would not think this will be reasonable for all pizzas)?
    – allo
    Mar 25, 2019 at 11:22
2

Display the total percentage so users know when they go over, and by how much. Allow quick entry and editing for each item with minimal effort.

Use input fields, with a total at bottom, showing percentages remaining (or exceeded).

You can get quick input, keyboard shortcuts and tabbing from field to field. Users can quickly adjust to get to the total percentage needed.

enter image description here

Pro:

  • Accuracy
  • No need for the mouse (tab index)
  • Up / down arrow keyboard shortcut for increase decrease numbers
  • Input and feedback are vertically aligned (you don't have to move your eyes or get the mouse to adjust a slider)

A caution on using sliders

Sliders require lots of dexterity, and you have to be accurate with each control in order to reach 100% total.

The Nielsen Norman Group has a good assessment: Slider design: rules of thumb

Summary: Selecting a precise value using a slider is a difficult task requiring good motor skills, even if the slider is well designed. If picking an exact value is important to the goal of the interface, choose an alternate UI element.

enter image description here

Coordinating sliders increases complexity

If you choose sliders, you have potentially 2 – 5 total that you have to coordinate for the total percentages.

Using sliders, there are no keyboard shortcuts, tab indexes or quick movements to coordinate the total.

Improve this answer
1
  • Thanks @mike. Really great input. I've also thought about another way of doing this which I'll post about it soon.
    – Hoss Zamani
    Mar 27, 2019 at 1:03
1

Thanks all for the great input. It really helped. I've also come up with another idea which I think is more visually pleasant (when designed properly) and easier to understand for the user. The only drawback I've found so far is that the user has to use their mouse. So here's my idea (& excuse my very quick and dirty sketch):

1- At the beginning we have a circle control that shows the percentage of the first item (which is obviously 100% ) enter image description here

2- User adds the second item. By default the second item is half the percentage of previous one. But now the user has grips that they can move to adjust percentages.

enter image description here 3- Users adds the third item. Again half the percentage of previous item is assigned to it. But they can adjust by moving the grips.

enter image description here

Improve this answer
2
  • Adding, say, six items and distributing them uniformly might be a bit cumbersome. Also, what if you want to increase the fifth item and decrease the second item in turn? You may find yourself sequentially resizing the forth and the third item, as well. With that said, I find this way of displaying the distribution really intuitive and it's about the only one suggested so far that makes it inherently clear why adding to one item reduces others.
    – O. R. Mapper
    Mar 27, 2019 at 6:14
  • Why distributing them uniformly is wrong? I will say that distributing them no uniformly is annoying. It makes sure a user need to edit all the amounts. If it is a pizza, then most users will go for uniform distribution with maybe a lite bit adjastment. Like double cheese, but one portion of every other topping.
    – Ada
    Mar 27, 2019 at 8:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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