2

We're building a grid view in our product UI which currently has a checkbox per row for selection. Action panel appears on top of the grid once you select a row.

However, you can perform action on a single row at a time only. We were wondering if we should replace the checkboxes with radio buttons, since it's a single select use case.

Appreciate design help for this.

Madhura

  • It is interesting that you open up an action panel at the top of the grid when you select a row because what happens when you have a large number of rows and the user has to scroll back up to perform the action (if you automate to go back up the screen it is frustrating if the user wants to change their selection). I would try to open the action panel where the action takes place. But you are right in changing them to checkbox if you can only select one to perform an action. – Michael Lai Jun 14 '16 at 2:12
2

I would remove the radio button and checkbox.

Then add a button (called actions or even an icon like an ellipsis) which displays a popover inline with where you have clicked. This is so you can still see the row that you are performing actions on at the same time as the list of actions.

If every row will always have an 'actions' this could even appear on hover of the row (if visual clutter is an issue with it always being visible on every row) - but make sure you consider an alternative for touch screen if you do this.

Mockup

enter image description here

1

If you mean the input field itself (as a visible element) then the answer is none of them, you don't need to add it since the whole row will be selectable, therefore adding a redundant input element will cause some non needed friction.

If you mean the form element disguised as a clickable row (which is a very common way of doing this), then as you say, it should be a radio button, because you can select only one item at a time. Otherwise, if you use checkboxes, you'd be allowing multiple selections.

However, keep in mind that this is not the only way to do it, and making the row active on click should be enough. Since you click and fire, additional elements are redundant and not needed at all, and users will discover the affordance with the first interaction

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.