Are numeric “steppers” or “spinners” on text fields simply bad UX?

Question

Call them "steppers" or "spinners" or "spin boxes," but we've all seen and used these things:

Now, in a touchscreen environment this type of control might be useful, if the touch targets are large enough. Also in situations where the range of possible numbers is very small and benefits from more description and specificity, I can see them being useful. Hotel guests, quantity of items in a cart, number of airline passengers, etc:

(we won't get into the proximity issues with the above implementation)

BUT: Numeric stepper controls are often attached to text fields for numeric input, particularly in desktop use. There seem to be a number of problems with them, such as the Fitt's-Law-challenged tiny click targets and already noted issues of affordance and limited standardization of their secondary input methods, such as typing, using the mouse, keyboard up/down arrows, etc.

But if these are in place of or augmenting a numeric input field, and the user can simply type the exact value they want into the field... what's the point of having the stepper at all? Is this just a useless input control for this situation? Can someone give me good reasons to use these things as part of a text field? Are there any good studies on actual use and engagement with these things?

Thanks!

Answer 1

It gives additional control

First of all, I don't think it's bad UX. If anything, and unless demonstrated otherwise, it's very good UX.

With this kind of elements, you have multiple control options. All of them can be used for the same purpose, yet they're not redundant at all: depending on the case, you might choose to use one method or another. I can type the number, use a long press for large scrolling or short clicking on each button for single amounts. You can also use direct keyboard input, use keyboard arrows, use mouse, use a track pad, use touch screens and what not.

A simple example

Keep in mind these elements are not meant for large numbers. But let's assume we have to choose the number 1234. Going up and down clicking arrows until we reach 1234 would be very cumbersome, but we can simply input the number.

Now, let's say we have to go up and down by 1 number to choose a product. That would mean 1 mouse click, or arrow up, or touch gesture, depending on your device. Inputting the number would require you to leave your mouse, or open an on screen keyboard on mobile, look for the number, type it, then move away so you can see if the input has changed. A lot of effort for something that otherwise would require 1 click don't you think? But wait! I made a mistake, I want to add 1 more... I would need to do the whole process again or... just click once.

Coincidentally, I'm working on an interface that includes this exact type of input. Take a look to the image below:

What do you think would be more easy, specially considering Fitts' Law? To travel a few pixels to select these 3 options, or to click on an input, then move your vision off the screen to a keyboard, then enter a number, then click on another input and repeat the process 3 times?

Caveats

The above being said, the default elements in browsers might be a bit complicated to click, so it's a good idea to override native controls in favor of a clearer, bigger click area

In short

It's a risk free, no cost solution for a common problem that covers many different scenarios.

Answer 2

• Does the control achieve the goals of the customer?

• Does the control allow the customer to quickly and successfully select the data?

• Are there any customers for whom this control would be a hindrance?

  • What are the other options for controls?

  • Can we perform usability tests to see which control works best for our customers?

Those are the questions that you'll need to be able to answer in order to answer your question.

There are no hard and fast rules, there are no truly objective criteria.

Answer 3

A few points:

• You can argue that for someone who is completely new to user interfaces, the spinner buttons provide more affordance than a text field (the former may look like a buttons, what makes the latter look like clickable?)
• For small increments (1 or 2), a low-level GOMS analysis would yield lower physical load compared to using the keyboard.
• Accessibility: Some people require assistive technologies as they have difficulties using keyboards. For some, a pointer-based input (like a mouse) is easier to use.
• Some systems have no keyboard at all, this includes, but not limited to tablets (say, museum displays).
• If made a notable usage of devices like Raspberry Pi - you will appreciate the ability to use it with mouse only. The remote controls sometimes fail to connects and it's a bit of a hassle having to bring keyboard from somewhere. Much easier to keep a cheap mouse around it.
• Some people, like my mother in law, are very keyboard shy. It is, if you think about it, a rather intimidating device, often with more than 80 keys. It takes practice to memorise the location of each key - have you ever used French keyboard? Have you ever used dvorak? Some people will prefer the mouse at early stages. For an experienced pilot, a cockpit looks little intimidating; not so for all other people. By way of analogy, the mouse for some is like the control wheel on a cockpit for you - simple stuff.