0

I'm trying to make an easy-to-use site that calls for selection of multiple percentages.

The site is for servers/bartenders/managers to input the total for the night, input what each group's (servers/bartenders/etc) percentage of the take is, and then probably a dropdown or slider for number of employees in that group.

My question is, what is the best way to make this as easy to use as possible. My current method of a 0-100 slider, moving at 0.5% per step is pretty hard to use, and I'm sure would be even harder on mobile. Is there a more user friendly option?

Improve this question
3
  • What is the platform? Some bars are using iPads with touch controls instead of computers. The available inputs would make a difference.
    – Chromarush
    Commented Aug 25, 2015 at 17:46
  • Honestly, right now I'm just making a simplistic proof of concept. Simple website, presumably accessed by both Android and iPhone users. But every time I make it a slider - it's awful to use, and every time I make it a textbox or dropdown, it feels like there has got to be a better way.
    – Timotheus
    Commented Aug 25, 2015 at 17:52
  • 1
    If you're controlling this down to .5%, a slider is the wrong control. It's not a great solution for precise control. A simple number input with up down incrementers for adjustment is probably better.
    – plainclothes
    Commented Aug 25, 2015 at 19:22

3 Answers 3

Reset to default
2

A good way to display big amounts of data is to use knobs rather than sliders. They are fun, users like them and you can add very specific ranges, not to mention you can add nice skeuomorphic styles.

You can see a jQuery knob script here or a CSS based approach if you want to go the skeuomorphic path. If you use Bootstrap, try ExtendBootstrap

Finally, something simpler like Knobby

Improve this answer
1
  • 1
    As great as knobs are in the physical world, they can be a real pain to use in the virtual world.
    – DA01
    Commented Aug 25, 2015 at 21:41
2

If I am picturing this correctly, you have a possibility of 200 choices (0-100 at .5 intervals). That means if you put this slider on an iPad screen (like Chromarush stated a lot of bars are using now for portability) youd have to fit it on a <6 inch screen (iPad 3 portrait dimensions). Even if you took up the whole width of the screen, fitting 200 tick marks on your slider would leave you with 0.762mm between ticks, landscape mode would give you 0.9891mm spacing, not exactly easy to use or visually pleasing.

For an input with this many choices your only real option is typing in the number, it may not be the prettiest design but it is by far the simplest to use.

If you want to try to make it look nicer you could implement something like this (image stolen from here):

enter image description here

Giving the user the freedom to type in the number, step through intervals as needed, or drag the bar closer to the desired input. But this is a bit unnecessary as they will soon realize it is easier to type in "94.5" than it is to use the other controls.

Improve this answer
1

General besst practice would be:

  • if it needs to be a specific number, use an input field
  • if it can be a 'fuzzy' number, slider might be OK.

In your case, you're looking for a specific number. A slider will likely be frustrating to use. Go with an input field.

Improve this answer

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.