Web UI for categorizing a list of items

Question

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.

Answer 1

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.