1

These modals is for an ecommerce site for product bundles that users are allowed to customize. The customization is a result of one or more item in the bundle being out of stock. Users can basically replace the missing item. The steps are as follows

  1. Select product bundle
  2. Click on customize
  3. Increase items in bundle and/or
  4. Add new items

I'm stuck in between combining 3 and 4 in one modal as shown in B or only selecting them as shown in A. Image showing Modal A and B

Improve this question
2
  • In your screenshots, are these lists of substitute product options? Or are we looking at the checkout experience (whole cart)?
    – Izquierdo
    Commented Jul 23 at 19:39
  • They are lists of substitute product options.
    – charles dim
    Commented Jul 25 at 10:26

1 Answer 1

Reset to default
0

Seems like there are two different situations here. If the user can add more than one of a specific item to the bundle, Option A will not work, since it is a toggle - add it or don't. Option B appears to allow the user to change the NUMBER of a given item they want to add. I think your solution needs to take that requirement into account.

I can't tell if the box at the top is meant to just be a filter for the list, or an area to reflect what products the user has selected FROM the list. If it is a filter field I'm not sure how those capsules got in there or why it is not simply a text entry that immediately filters the list below. Either way I think it would be a good idea to have an area of the screen that DOES reflect all of the items the user has selected or deselected so they can see their updated bundle at a glance before they commit to it.

UPDATE: Based on our exchange below, here's a quick mock-up of what I envisioned, including both a way to remove items from the capsules as well as show how many of an item is represented by each capsule), and keep the Add New function below that, with the filter box:

enter image description here

Just a thought, take it for what it is.

Improve this answer
3
  • The box at the top shows items selected from the list. I'm just wondering if it will work in case B. I don't think it'll be so intuitive.
    – charles dim
    Commented Jul 27 at 7:33
  • Is case B the situation here, that they can add more than one of an item to their bundle? If so, then be is clearly the way you need to go. One question: do you need a search/filter box at the top? How long can these list of items get in a given bundle? Either way, it seems like you could put the “bundle at a glance“ list up there in B as well, perhaps with a label and not bounded like an input field (which is what it looks like version A)
    – Mattynabib
    Commented Jul 28 at 12:57
  • I added a very quick mockup to my response above to illustrate what I meant.
    – Mattynabib
    Commented Jul 29 at 12:29

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.