Checkboxes or Radio Buttons in a Table

Question

I'm working on updating a table with a new design. Currently, our table allows users to select only one option across three different tables, each in its own tab. This selection is made using radio buttons, which seems unusual since radio buttons are rarely used this way in tables.

For the new design, I'm considering using checkboxes. The idea is to disable the other options once an item is selected. I also thought about using a dropdown, but we don't have a component that supports embedding a table within a dropdown.

Does anyone have any suggestions for improving this design?

Answer 1

Checkboxes and radio buttons are both problematic in this situation.

Checkboxes will give the wrong impression, since they normally allow multiple selections so using radio buttons seems the better choice. However, since the tables are in different tabs, just a part of the available options are visible. When something is selected in a hidden table, how will users know that it unselects when they select something in the visible table?

What you need (or rather what your users need) is an explicit option to deselect the current choice to make a new selection. This is how:

• Add buttons to the tables (instead of checkboxes or radio buttons) for selecting.
• When the user clicks a button, a text appears above (or at least near) the tabs that states the current selection. A button also appears there that is labeled something like "undo selection", "reset selection", "choose a different thingy" or whatever is most clear to users in the given context.
• When a selection is made, all other buttons in the tables disappear or are inactive until the "undo" button gets clicked.
• When nothing is selected yet/anymore, the text and button above the tabs can disappear or be replaced with a placeholder message like "Please make a selection in one of the tables".