0

The scenario: A user can add individual items to an order, or use a template to get started, which preselects several items. If a template is used, the user can de-select items that they don't want to include in the order, and adjust the quantity and units on items. For example, the user can choose 3 green apples, or a box of green apples. The template gives the user a rough idea of how to get started with an order.

The question: Some items contain variants, such as milk in the example below. We would want the user to easily add or remove specific kinds of milk. The system would provide defaults on the sub-items - in the below example, by default, there would be 5 units of regular milk and 5 units of strawberry milk in this order, but the user should be able to adjust the kind and quantity of each kind of milk.

Here is the pattern I've come up with (very early on):

Weekly Shopping List with several checkboxes next to items, some of which are indented to form a subset

I see at least two potential problems with it:

  • Indenting the checkboxes visually throws off the select all / deselect all function. In fact, I'm wondering if subitems should behave differently with it. If the user deselects all and then selects all again, it seems like it could get messy with subitems, and items that were previously set to a quantity of zero.
  • In this design, there isn't a total for each "main" item, such as milk in general, so it's on the user to keep a total in their head if they want to add combinations together. (It seems impossible to do this when the user can mix or match unit types.)

Is this too complex to work with a checklist? Or are there considerations that might make it work?

2 Answers 2

1

For what I understand from the question is that quantities are the same most of the time and therefore pre-filled. What isn't clear is if this is about adding products with quantities in a reusable way. If it is, I suppose that items with 0 (zero) quantity won't get checked or are grayed out. If the idea behind "Milk" in the example is to select the group as a whole and add all items in it that have a quantity set, I wouldn't bother users with a sub-checklist. But if it is a requirement that all subitems need to be selected as well, I would omit the idea of selecting groups/categories since that can make things look messy and surprise people when they want to select all/none.

So either omit sub-selecting...

enter image description here

Or omit selecting groups/categories:

enter image description here

2

I think check list and quantity input together are redundant and conflicting in functionality.

  • If the quantity is "0" the check list must be deactivated
  • If the checklist is activated it implies to set a default quantity or add a different one
  • If these fields are not near, as in the example in the question, it forces the user to travel to both sides of the table, left ⇄ right, which favors the omission
  • Having to click on the product and then on its quantity makes the functionality of both elements redundant.

With a quantity input and an X button to remove the product would be enough:

enter image description here

Source image from dribbble.com

Regarding the unit or box purchase, some online stores allow buying packs adding an icon below the quantity / capacity of the item, which modifies the purchase unit when is selected. In this case, the default purchase is per unit and the pack is optional.

enter image description here

Note

E-commerce doesn't usually refer about packaging, but rather the number of items that can be purchased at one time. In this way, the type of purchase by box is somewhat obsolete (the right column of the table in the question image). The customer prefers to know the number of items purchased rather than the physical object that carries it. Most platforms have a product quantity rules service that allows restricting the number of product units that a customer can add to the cart at time, either from a button, an icon or from the quantity input field.

1
  • 1
    Thanks. I made a mockup that used deletions instead of checkboxes and while it was visually cleaner, it made me realize that once the item was deleted, it was a bit difficult to bring back (since this is a template). I also failed to mention that the "Items" view in my mockup uses checkboxes, and keeping checkboxes on both views felt more consistent. I appreciate your insight on product quantity rules - that's helpful for updating our nomenclature.
    – Izquierdo
    Nov 11, 2021 at 21:08

Your Answer

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

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