1

I have an ecommerce site selling lollies. I'm having a hard time figuring out the best way to allow user selection of the number of battery cells they can buy.

I wanted to allow for the following amounts of lollies to be bought only: 1, 2, 5, 10, 20, 30, 40, 10n... where n is an integer.

This is because selling 17 lollies is quite annoying as they naturally come in strips of 5. If someone really wants to buy just 1 or 2 - they can, but the unit price is higher.

My question is how do I intuitively represent this for the eCommerce site?

eCommerce sites typically have steppers.

enter image description here

But wouldn't it be a bit weird that the steps are non-linear? Also, I feel that it sets the expectation that you can buy an integer number of lollies - which may frustrate the user?

The alternatives I can think of are drop down menus and a button grid that shows all the options.

enter image description here

I like the button grid because it shows all the options at once rather than having the user click the drop down menu - saving a click. The custom button would open up a input stepper for very large numbers (150 lollies for example).

What is the best way to allow the user to select the right number of lollies?

Improve this question

3 Answers 3

Reset to default
5

Usually, such "size" ( I will explain later why I use size and not quantity ) selections are provided because of the way the products are being packaged. So as a UX pattern you usually have to choose the "size" of the package and after the "quantity".

You would have boxes of candies that can have: 4, 6, and 24 candies per box. As a user, I would select the "size". But I want 5 boxes of 6 candies each. How can I go about it? In my example the user first selects the box size and then the quantity of boxes.

So in your example things are a bit confusing. If your example is real and lollies are in strips of 5 but can be easily ripped and sold individually then the limitation makes no sense and providing a price decrease/quantity decrease would be better.

It's difficult telling the user you can have 1 or 2 because we can rip lollies from the strip but not 3,4 even though we can rip strips but we don't like to.

enter image description here

Improve this answer
5
  • Yes the lollies can be ripped apart but this requires a lot more human effort. They'll have to pay $4 for 1 but only $10 for 5 (as an example), as it's a lot easier
    – John Hon
    Jun 12 at 7:58
  • However, I do think this method is a bit more intuitive. I thought about adding 1 lolly as a single "size" and a strip of lollies as another "size" but isn't it sort of confusing to the user? "If I order 5 single lollies - is that the same as ordering 1 strip of lollies?".
    – John Hon
    Jun 12 at 8:00
  • 2
    Let people indeed choose how many of a certain package size they want to order. Important is to show the quantity discounts to encourage people to choose packages and not single units.
    – jazZRo
    Jun 12 at 9:08
  • +1 for this answer and response from @jazZRo. A customer might think they want 30 but could be convinced to buy 40 if there's a good discount/deal to be had
    – Izquierdo
    Jun 12 at 14:07
  • 1
    also if you rip 1 from the strip, you'll have 4 left, so why don't sell 4? Same goes for 2, 3, 4, 6, 7, 43, 82 or whatever number. I think you should either sell by strip or by unity and simplify your life and the user's
    – Devin
    Jun 12 at 17:35
2

You should sell two different products then:

Product 1: 5 Lollies Strip, price $10

Product 2: Lolly, price $4

The rest as normal, client inputs quantity as any other product

Improve this answer
0

So I was thinking the button grid, but until 5. So "1, 2, 5, input" with the last field asking for input that are multiples of 5, since beyond that point the pattern is consistent.

The rest of the work will be on handling incorrect data (from a UX context) and showing error states when incorrect data is inputted. Also you can prefill the input with 10 and only increment and decrement by 5.

Design Example:

design example

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.