Direct user flow to exclusively mutual forms

Question

I have a form where a user is presented with two options. They can either select (via a checkbox grid) flags for products, and exclude some specific items from that list, OR, specify only the items they want to include (regardless of the state of flags). I'd like to present this to the user in an intuitive way. This is for a web application.

What options could I use for this? There are other parts of the form that are hidden within an accordion (but are required, which makes me think it shouldn't be in an accordion), and an accordion within an accordion doesn't feel right. I could take the other controls out of the accordion, and hide these within their own accordion, but then the rest of the form gets really long.

The idea of a tabbed pane came to mind, but it seems a bit overkill for two tabs.

Answer 1

Your form has two options, I would consider the first option as filter, user can toggle the filter to control the second option, list of products. User also can exclude/include the item from list.

Duo to the information for accordions is insufficient , I assumed you meant that they were categories of product and made your form too long.

below is my simulation:

In addition, I added a extra category which named Selected, user can manage selected items by it.

Answer 2

For your main point, using something that toggles visibility that is distinctly different from your accordion interaction is key here - left-right division between the choices if your accordion is up-down, for example. Also - if this choice is the primary choice the user makes before making choices in the form itself, it can be used as the frame for the form that follows, such as checkout flows that start with giving a choice between entering CC info or using a Paypal account.

The catch about accordions for forms is that they may confuse users, since it's important for users to know what they're submitting in that form as they go along - hiding things they've chosen along the way can get in the way of their understanding and (in some cases) willingness to fill out your form: http://baymard.com/blog/accordion-and-tab-design

However, tab-style and inline accordion form layouts can muddy this relationship, making it unclear if the fields in each “sheet” are mutually exclusive or if switching between them simply toggles their visibility but not the actual form. This can make users uncertain as to which fields in the form will actually be submitted, which is highly problematic as this leads to a sense of unpredictability and the fear of potential data loss (obviously very undesirable sensations to invoke in a user filling out your forms, e.g. during the checkout process).

So if you use an accordion, make sure that what it hides is obvious to the user and serves a purpose. If used as steps in a flow, the hybrid approach is pretty tried-and-tested: http://www.demacmedia.com/design-user-experience/checkout-debate-multi-step-one-step-or-accordion/

In short:

...each section opened up for me and I could see the number of steps from the beginning. I was able to focus on one section at a time and was happy to save a little time compared to reloading a new page for each section. I wasn’t sure if I needed to click the next heading like a button or submit my info in each section though… so then I tried to hit the back button to go to the previous section and ended up back at the cart.