0

I have a web page that displays a list of 100+ items (where each item is a row containing an image plus some metadata) that I would like the user to categorize into "A" or "B" or neither but not both.

I thought about using radio buttons on each row since that enforces the "not both" requirement but the problem is radio buttons can't be unselected. One workaround would be to make "None" a third radio button.

Another way is a dropdown, which would also require a "None" option.

The last way I could think of are 2 checkboxes that use javascript to enforce the "but not both" requirement. Since checkboxes can be unchecked, this method allows for the "None" option.

Would like to hear thoughts on which is the best option either from above or something different.

  • Whatever you do, make sure that your website supports easy navigation by using the keyboard. Make sure that users can easily jump from the widgets in one row to those in the next by as few keystrokes of the tab key as possible. – Schmuddi Sep 17 '19 at 8:46
2

100+ items is a long list, and I think it's important to make categorizing fast, and also to give the user a feeling of progress through the list. With that in mind, I would set up each item with a single tap/click control for A or B. Once selected, items would move to the relevant (maybe collapsed) list elsewhere in the page. If the user wants to change their selection, they can expand the list and undo their selection.

Here's a super-quick demo: https://codepen.io/benjamin-hull/pen/QWLVpyN

A couple of things that might affect the best solution:

  • Is 'none' a finished state? If it is, you might need an explicit 'none' control
  • How often do you expect the user to change their mind? If it's more than just occasional "Oops, undo", then this might not be the best approach.

Lastly, if this is a mobile app, then swipe left/right a la Tinder might be very fast and low-friction.

| improve this answer | |

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.