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.
The buttons will also be easier to click because of the increased target size and non-adjacent placement. The adjacent button placement of outdated number pickers makes it easy for users to misclick. The buttons are tiny and too close to each other.
Subscribe to read the full article
Become a paying subscriber of UX Movement Newsletter to get exclusive access to this article and other subscriber-only content.
Affiliate
