12

Consider the following simple scenario: User has 2,352 cookies in his account. Now, he is prompted with a message, "How many cookies would you like to eat?" Given he can enter any number from 1 to 2352, what is the most intuitive, easy to understand and user-friendly way to ask for his input here?

Traditionally, this has always been a text field where the user simply types in the number and is done. I'm wondering whether there's a better way, or, should I just stick to text fields? I'm not sure why, but, this kind of interface feels rather ancient as of today.

Some would use sliders here, but, I believe these are more of a burden than anything when dealing with large amounts (i.e., thousands).

Improve this question
0

4 Answers 4

Reset to default
10

If the user is expected to specify the amount down to the last cookie then a text field (or other discrete input control) would definitely be necessary. Trying to fine tune a value using an analogue control alone is a tedious task, as you also indicated, and should be avoided.

You can however find a combination of the two, maybe with some neat selection feedback:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Personally I believe however that in the context of this application you're developing, if you assume that the users want to be in total control of what the input should be, and there is no margin for error, then I would drop a slider all together. In that case a slider would be a redundant control and never be utilized by the user due to its inaccuracy.

I wouldn't worry about it being ancient or outdated. Input fields are tried and tested and does what they're supposed to. Eg. could you imagine if a web banking service starts using sliders instead of input fields for specifying amounts of money you want to transfer..? In such a case I would leave that service immediately!

Improve this answer
1
  • @Mahn glad you liked my ideas! it was an interesting question to ponder as well, which was why I voted it up! =)
    – AndroidHustle
    Commented Jun 26, 2012 at 13:44
3

I would suggest you use something more specific to that particular context.

Why won't you use a knob (like this jQuery plugin) and change the ui a little so the background is an actual cookie? It would immediately give the idea of the percentage (it is basically a pie chart) and could easily integrate all the information needed for the user.

Improve this answer
5
  • This is a neat idea actually. I was kinda looking for a global approach but I will definitively think of these knobs where I see fit in the interface.
    – Mahn
    Commented Jun 26, 2012 at 13:41
  • I find knobs are not very easy to use in a computer environment. Though they provide great feedback on the selected value (for some contexts at least), their affordance of rotating them is just hard to actually do using a mouse or even using your fingers on a glass, flat surface. You cannot hope to achive a very precise selection of a value that way.
    – André
    Commented Jun 26, 2012 at 14:07
  • That's true, but it does provide a nice feedback. As long as you can actually type in the number, and as far as I can see you can with this plugin, it's an alternative to a plain boring text box, wherever it fits.
    – Mahn
    Commented Jun 26, 2012 at 14:23
  • I don't think it's easy to achieve a very precise selection @André but the inclusion of the TextField inside the knob (you can try it in the link I provided) allows the user to achieve a precise selection using the TextField or a general selection based on the perception of the percentage of the value (I want to give roughly 30% of my cookies)
    – jpsstavares
    Commented Jun 26, 2012 at 14:24
  • Pie charts are generally considered bad for visualising data, because it's hard to read them accurately. I would imagine that the same goes for a knob. Turning the knob might be made easier by simply letting the user drag, as if it were a slider. That might be counter-intuitive though.
    – Jørgen Fogh
    Commented Jun 27, 2012 at 18:21
2

In general a text field is a good fit for this. One trick that can make it feel less awkward to adjust the value of a text field is to look at what Adobe does, e.g., in Photoshop. Adobe refers to these things as "scrubber" controls.

Basically the gist is that you can click and drag on the field label and the field behaves as a slider, or (of course) you can enter a number directly.

Improve this answer
4
  • Doesn't the fact that there is a blog posting explaining this "awesome option" indicate that this UI is not all that discoverable and therefor perhaps not all that awesome?
    – André
    Commented Jun 26, 2012 at 14:18
  • 1
    It's interesting though. Indeed a bit obscure in that it is not obvious for the user, but it can serve as an alternative input method e.g. provided that there's no space for a full blown slider.
    – Mahn
    Commented Jun 26, 2012 at 14:20
  • 1
    The beauty is that you don't need to use the feature to interact with the control, but it provides flexibility for your power users. The only visible affordance the UI provides is the cursor changing to a resize cursor.
    – Kit Grose
    Commented Jun 26, 2012 at 14:23
  • 1
    Photoshop fields also allow the user to enter simple mathematics, e.g. 2*4+10 and it'll dynamically change it to 18. That's especially useful for dimensions and those sorts of things (since you often know the way to calculate the value mathematically better than the absolute value when specifying dimensions)
    – Kit Grose
    Commented Jun 26, 2012 at 14:25
0

With my little experiance i wouldnt suggest slider or even a knob or mix and match of both. I would rather ask you whats the most possible averaged value for the text input field? if there is a range of averaged values then try to work around with knobs and sliders or up/down. otherwise just use the simple text 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.