UI for Inputting Numbers Efficiently

Question

I am developing a web app that requires a lot of numeric adjustments to be done very quickly by a user.

Here is an example:

Possible Solution

The only reasonable suggestion I could come up with is a popover on-focus.

We could have a popover next to the item containing a list of adjacent values, when the text box is focussed.

Update: Note that when the text box is focussed, the user will be able manually input "3.45" using their keyboard, normally.

I want to stress that the numeric inputs need to be as frictionless as possible, and that the adjustments will be minor, for example changing 2.45 to 2.47.

Answer 1

Since the users are only making small adjustments I believe a good and simple solution would be to enlarge the increase/decrease buttons. That would make it trivial to change the values. If you also make it easy to use the keyboard to move around and adjust values you have good support for mouse, keyboard and touch interaction.

Personally I liked your popup idea. It's something powerful about actually seeing the value you are looking for and simply click at it. It might require relatively advanced interaction but the cognitive load is probably low.

I took your idea and tried to improve it by presenting the values so that they all can fit on the screen. I also positioned the popup so that the current value is centered around the mouse which makes it easy to do small adjustments.

Answer 2

Rather than adding extra interactions, try to use the actual ones extending the functionality.

Right now the user can:

• type a number
• click the down/up arrow to go down/up a number

If I understood correctly, going up one unit means going up 0.01. This is alright if the user will only want/need to move from the default assigned value one or two clicks (from 2.67 to 2.69). If the case is that the user might want to move from 2.67 to 3.04 the up/down buttons become useless and the user can only enter the number typing.

To solve this limitation of buttons only permitting go up down 0.01, my suggestion is:

let the user drag the down/up arrow so values increase/decrease according to the mouse Y value. This way the user can manage the input both typing and with the mouse with total precision and enough flexibility.

You can make use of some Gesture education tips or Tooltips. Also you might want to use a UI that makes the buttons a little bigger.

Answer 3

Switching between keyboard and mouse takes time. (Check out the Keystroke-level Model.) Think about how much longer it would take you to fill out a long form if you had to click in each next field rather than just typing Tab to switch fields. So for maximum efficiency, you'll want to avoid having the user use the mouse to click radio buttons, drop-downs, draggable widgets and such.

Provide just text fields (and set up the correct tab order) and let users keep their hands on the keyboard.

Answer 4

1. I think pop-up lists are a horrible solution. They require precise movements, after first getting to the field. Here are a few alternative solutions, most of which can be implemented without cross-interference.

   • You can expand the arrow key mappings, from:
   • up increasing the value by 0.01,
   • down decreasing the value by 0.01; to include
   • right increasing it by 0.1,
   • left decreasing the value by 0.1 for bigger numerical adjustments. This assumes that one hand moves the mouse and the other stays on the keyboard, so a parallel WASD mapping will probably come in handy. Then you can add SPACE for jumping to the next value and SHIFT for jumping back.

2. The presence of a Number Pad significantly affects the direct number entering speed, but unless you know they have one, it's safer to assume they don't. If the application if for protracted use without a NumPad and direct value entering proves useful, you could create a virtual NumPad in the application. Using YUI-HJK-BNM for 1-9 and O for zero works after some repetition. Another placement of this virtual NumPad that feels more abstract, but creates more fluent movement is YUI-HJK-NM<. All these assume an American QWERTY keyboard layout and require significant remapping for other layouts. As detection might prove problematic, I would strongly suggest allowing the users to tweak their virtual numpad bindings.

3. One major drawback of your current solution is navigating between entries. TAB probably works, but you want a counterpart on the right of the keyboard. It sounds like the perfect job for ENTER

Answer 5

Answering from my phone, so I can't check whether this is already possible: * allow the use to change the value step wise by using the cursor keys on the keyboard*. Allow them to make a 10 times bigger step by pressing shift at the same time.

Source of idea: try changing numerical cc properties in Firefox inspector. :)

Answer 6

Your illustration would work for a primarily mobile app. It's very similar to Angular's GMD Select widget, except that would appear over (on Z-axis) the control, not next to it.

If your users expect to enter lots of numerical information regularly, they might be inclined to use the keypad. If this is the case (some research may be in order), I would apply the following:

1) Numerical input: Performed via keypad, advance to next field with Enter or tab (if there's no conflict, you could support both)

2) Increment: Since you have no mathematical operations in this mode, allow increment/decrement with keypad +/- and/or cursor up/dn, with PgUp/PgDn for larger increments. Don't allow the scroll wheel to change values unless the list is open... users could inadvertently change values as they're scrolling down the page.

This is not an either/or solution, you need to consider all your users' possible devices and skill levels. A beginner will probably use the mouse until they develop their skill with the application, at which point they'll want something faster.

I would definitely support more than one method for each interaction... providing multiple paths to success, whether keyboard, mouse or touch, is a good thing.

Answer 7

For me, the obvious solution to have an UI that is easy to update quickly by a user is to make the inputs editable.

If the changes can be done just in an interval, it is even better, you can let just the last part of the number editable and display before the value that is fixed. For example, if 2.67 can be changed with values between (2.61, 2.69), display 2.6 and implement an inline edit for "7".

A second option is to let the UI as is it now and limit the selection. A tooltip is not a practical use in my opinion.