What is the best way to indicate to the user to type/select production numbers

Question

I need to ask to the user for this fields: area planted, area harvested and the yield.

I got this approaches:

1

2

3

Obviously the three fields are numbers, they are between 1 and 40 for the first ones, the last one (yield) between 100 and 2000.

I'm considering that the user always have a mouse, but I'm not sure about the 1st mockup with the slider control, maybe the user can get confused trying to setup the correct value.

Ideas, or a better way to do this.

Answer 1

Each control has its application.

The slider is best when the user can graphically see the result of their input in real time. This can include:

• Move to around some reference marks on the slider (e.g., just a little below Overcrop).

• Move in reference to another slider’s position (e.g., plant as many in the current fields as in another field).

• Adjust visual effect on an image or data in a separate pane (e.g., picture contrast or font size).

• Adjust aural effects (e.g., volume of sound).

They are also good for reading the relative value at a glance –the slide position cues the user whether the setting is a lot, a little, or in between. Approximate comparisons among sliders is also easy.

In any case, use sliders when users aren’t so interested in a number as achieving a certain relative sensory configuration. It implies the user isn’t after an exact value (e.g., they’re not copying a number to three significant figures from another window), but just want something that “looks good.” Trying to slide to a Yeild exactly 1401 is going to be pretty much impossible for a reasonably sized slider control.

I assume one cannot harvest more than one planted, which means the allowed range for Harvested changes depending on the current Planted value. I think it would be confusing to change the value of 10 pixels of movement on the Harvest slider (i.e., dynamically set the far right to equal the current Planted value). This implies that if you use sliders, you should use dual sliders, where a single track has two draggable pointers. The one pointing up is Planted while the one point down is Harvested. Dragging the Planted to less than the Harvested value “catches” the Harvested pointer and drags it down too. The Harvested slider can’t be dragged beyond the Planted, or, alternatively, dragging the Harvested beyond Planted drags the Planted higher too. The latter may be a handy way for experienced users to simultaneously set both Planted and Harvested if usually they're the same value. Proper graphic design of the sliders exploiting a mechanical metaphor (e.g., including a "hook" on the Planted slider that "catches" the Harvested slider) can cue the user of the dependence between the two sliders.

The dependence of Harvested on Planted is harder to handle with the other controls (e.g., implies some ugly error messages for text boxes), so this may be one more reason you may favor sliders.

Sliders should respond to keyboard input (cursor keys), so mouse versus keyboard use should not be an issue.

Text boxes are best when the user needs to read and/or enter a precise absolute amount to multiple places. The fastest and most accurate way for the user to enter 3.141593 is to type “3.141593.” Likewise, if the user needs to distinguish 3.141593 from 3.141594, it’s a lot easier by reading a text box than looking at a slider position. Text boxes are also the most compact control and are especially good when the user is copying and pasting the value from another location.

Text boxes can be slower and less error tolerant since by default they accept unconstrained values. In practice numeric input will have an allowed range (as you do) and maybe precision (e.g., integers only or no fractions of cents). And, of course, you need to handle input of letters in an effective manner. Text boxes require keyboard input (unless the user is pasting), so you may need to consider mouse-to-keyboard transitions when comparing input efficiency.

Spinners are best when the user generally needs to make small adjustments to the current or default inputs (i.e., make a few clicks up or down). For example, if your Harvested value defaults to your entered Planted value, and generally Harvest is equal to or an acre or two less than Planted, then spinners would work well --it's easier to make a couple clicks than change a 38 to a 36. For large jumps, spinners can get tedious, like setting the alarm on your digital clock.

Spinners can be a problem when precise values are needed because either that means a lot of clicking (if your increment is too small) or the user can’t enter a value smaller than an increment (if your increment is too large). You could put in dual spinner buttons, one for fine adjustment and one for coarse. If you have trained users, you could also put in expert short cuts, like use Ctrl-click of the button to increment a large amount, or (usually better) jump to the extreme amount.

Like sliders, spinners should respond the cursor keys, so mouse versus keyboard use should not be an issue.

Of course, you can use different controls for different fields. Maybe Planted and Harvested should be sliders, while Yield is a text box, depending on how they match up to the conditions above. You don’t have to worry about consistency in this regard.

You can also combined the controls for a single field if more than one of the above conditions apply either to different users or different tasks or times. It’s typical for spinners to also be editable text boxes so users have the choice of clicking a button or typing in a value. A slider can likewise show the current numeric value in an editable text box. When the user types a value, the slider jumps to the correct position in real time. Add left and right arrow buttons to each side of the slider, and now it has spinner functionality, letting the user make a fine adjustment with one click, rather than trying to drag the slider one pixel, which is a lot harder. User testing is likely necessary to see how effectively your users can choose the right input mode for combined controls.

The usual platform style guides (e.g., Windows 7) provide detailed advice on choosing a control.

Answer 2

I would not use sliders for this sort of specific number entry - the easiest way is to get the user to type the exact number in and give an example of the value so that users have an expectation of whether to use integers or real numbers, and also inform them of the units as well as the range of acceptable value, assuming that you are going to bound the data entry somehow. You could also make it clearer that the second value is going to have an upper limit of whatever the first value is.

For example:

Where you adjust the second 1-40 helper text to be 1-X when the first box is filled in, and the inline Units helper texts are filled in according to your needs and disappears on entering a value.

Answer 3

Sliders aren't appropriate for for data input, they are used for tuning settings. They mean that you can't just type in your numbers, which is the most efficient way to do this. They also have resolution issues (the "steps" of the slider, which is even worse in your case because your value ranges are so different).

You need to decide between 2 and 3. The third approach seems to provide all the ways that the second one does, plus some additional ways (mouse wheel, the up/down buttons on the keyboard and on the screen). But it doesn't automatically mean that it's the best solution. If the form is going to have pre-existing values (maybe default, maybe saved from last time), and the user just needs to adjust them by a few units, then the third option is better. However, if the form is blank, then it's best to keep the interface clean and just have them type the number in - especially when the values are between 100 and 2000, noone is going to do this with the stepper control. This is also true for the 1-40 range, where most users may be tempted to use the stepper only when the number is a single digit.