What not to do

This is the strangest quantity selector I’ve ever seen on desktop. A perfect example of what NOT to do:

 

This dropdown list is clunky and takes up a lot of space yet it’s performing a very mundane task. And to make matters worse it’s performing it poorly. 

If someone wanted to select a large quantity like 50, they would have to scroll all the way off the page. This might not be very practical if the person in question is using a touchpad or a mouse without a wheel. Having to hold and drag down the range selector just doesn’t make for a great user experience.

The bad user experience isn’t limited to large numbers. A relatively small number like four or five would require a whole lot of unnecessary mouse movements.

This dropdown would be even worse on mobile where it would probably cover the whole screen.

 

What should you do instead?

It doesn’t matter if it’s on desktop or mobile, there are only two viable approaches that would guarantee a great user experience: 

 

Steppers

A stepper with a default value of one is a good approach. Plus and minus signs on either side can be used to increase and decrease the order value. This is more space efficient and minimizes the number of mouse movements.

 

Editable field

An editable number field with a default value of one is also a good approach especially on mobile. A customer can just type the quantity of the product they want into the box.

 

Combining both approaches

A combined stepper-editable field is the best approach. Plus and minus signs on either side can be used to increase or decrease the quantity of the product by one while large numbers can be directly typed into the box to reduce the number clicks required to increase a quantity from say 10 to 50.

 

EXAMPLES