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.

  • Let me get this straight. You have 3 groups of form elements: A, B, and C. Groups A and B are mutually exclusive, the user will use either one or the other but not both. And group C is necessary whether the user chooses A or B. Right? If so, how many elements are in each group? Also, what determines whether the user will choose A or B? – bloodyKnuckles Dec 20 '16 at 0:36
  • Accordions are a poor choice for forms, if you're concerned about your form becoming lengthy and not wanted to muddy the water with sections that do not appear for all choices, consider a paged/stepped process, which makes the user unaware of the 'page' that does not concern them. – DarrylGodden Jul 18 '17 at 7:24

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:

enter image description here

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


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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