I hereby present a challenge to the Internet…
Challenge: Design an improved numeric input field that could trump the 40+ year version we’ve all used… the standard horizontal string of digits.
Over time software developers have improved many fundamental aspects of graphical user interfaces constantly raising the bar for both design & usability.
We now have several enhancements on input controls that have become standard. Date inputs present calendars, Integer inputs contain spinners, multi-line text inputs contain character counts and auto expand to not require scrolling etc.
However dealing with numeric input is much more tricky. There’s some improvements that have been made in mobile for numeric inputs to present the numeric only keyboard… But beyond limiting the input to digits and decimals there isn’t really anything you can do to improve the actual input control.
Realistically here’s the set of constraints a numeric input field should be able to handle.
- The field must accept any valid number input between Negative Infinity and Positive Infinity
- The field must accept decimal values
- The field must support input from the keyboard (physical or software based)
- The field must support pasting input from the clipboard (on OSes with a clipboard)
- The field must support dragging input from elsewhere in the OS (on OSes that support this)
- The field should support locale based input, thus 49.99 in English could be entered as 49,99 in French locales
I’d argue that the first 2 bold constraints are hard requirements, and that the remaining are softer, ideal requirements
The shear number of possible values that a user could enter is truly infinite… and here in lies the rub… trying to design a specialized input control for data input of an infinite number of possibilities doesn’t allow for providing a special, customized control.
Don’t get me wrong though as soon as you alter or remove any of those constraints above other options do become available.
e.g. If you need to provide a field for input of an integer value between 1 and 10 you could use a <select> element to constrain input.
Or with HTML5 you could use an <input> of type range that can present a visual slider.
Neither of these allow for pasting in input but one could argue with such a small range of input this paste option feature is less of a need/requirement.
So… do you think you can come up with a better design that increases usability while handling the required constraints?
I’d love to see what ideas or creative solutions you might have. I’ll admit I’m pretty adamant that there simply isn’t a better option, however I’m totally open to, and would love to be proven wrong too!