The Optimal Design for Number Pickers

Selecting input values

Selecting numeric quantities on forms hasn't always been easy. The traditional number picker component has such poor usability that users often struggle to use it.

For one, it has tiny buttons on the side of a text field that are difficult to click. It also uses up and down arrow cues that don't always clarify its affordance. The text field is also so prominent that users aren't sure whether to type in their value or click the buttons.

The outdated number picker needs a more modern and optimal design. Instead of tiny buttons on one side, place large circular buttons on the left and right of the input value. Doing this maps to how numbers progress on a number line.