Should we use check boxes or not and select rows on click

Question

We have a CMS like panel where user needs to manage orders. We have table which you can see below. A friend (who is known experienced in UX) says we should remove checkboxes and select/discard rows on click. I say it isn't proper to do this because users like to click on empty spaces and rows get selected when user is copying any value from a row. Selected rows has a slightly blue background also. I'm asking what is the best solution from UX point of view.

A: We should remove check boxes and select/discard row on click.

B: Keep checkboxes and use row selection on row click.

C: Keep only checkboxes and don't select on row click.

Here is the table

Answer 1

This is an affordance question :-)

The great thing about check boxes is everybody knows what they are, and what you need to do to interact with them.

Row select is not so well known and it certainly isn't blindingly obvious in the way that check boxes are, although the row select interaction is easily learned.

Row select can have its challenging situations though, e.g. the situation you described, or if you have additional triggers in cells (e.g. hyperlinks, buttons etc), and you definitely need to get the "selected" styling spot on, because you need the styling to boost its affordance. Changing the mouse-cursor as you hover over a row also hints at its affordance.

Answer 2

Checkbox selection sounds kind of legacy... I think spreadsheet-like selection, like this one, is a way better UX.

Answer 3

Audience & scenario
Being a CMS system, you are not targeting casual users like the chubby woman that purchases cat chow online, but people (not necessarily smarter than said woman) that use the UI as kind of a working tool, over and over, right?
Also, things (like how to select a row) have to be learned only once, right?
Thus, a user might be intrigued about how to select a row the first time, and use this knowledge many times in the future.
Affordances
This is a desktop application, right?
Then the power of #hover# is available.
When your happy user is hovering a link you make the pointer look like the well known hand of the links.
Else when the user is hovering a part of the row when she can click to select it, you switch to the arrow decorated with a plus sign to communicate that selection is available.
Additionally, when the pointer is over an already selected row, you can use an arrow decorated with a minus sign to say that by clicking there the row can be deselected.
If the whole row changes its background color immediately, your user gets the feedback she expects and gets even happier.
Usability
Oftentimes the rows widths exceed the window's.
If you placed the checkmarks at the beginning of the rows you would be forcing the user to scroll horizontally, and she wouldn't be that happy any more.
Moreover, if she is selecting the rows based on the content of a column that's far from the row start, then she could make a mistake due to parallax error and now her boss will be unhappy too.
Ideally the users would look and click right there in order to be safe (and happy).
If you need multiple lines selection, the ideal is to do it by clicking a row after the other, no control key down.
The contiguous selection idiom (select one, then other holding shift) should be available.
Use both
You can add a first thin (square cells) column that, when hovered, shows a checkmark background image, and a title like "click a row to select it" to educate the fearful users.
That cell, when hovered, would also change its background to mimic that of the selected row (but only this cell).
This way you keep both dinosaur and millennial users happy (I'm a dino).
Also, clicking the header of the checkmark column can be used, if useful, for selecting or deselecting all.
Final pledge
By all means, do not force your users to click in a tiny 12x12px box in order to select a row!
Yes, I'm talking about the checkbox.
And don't add offense to insult by forcing them to scroll horizontally!

Answer 4

Only selection will be a challenge to discard the rows but supporting it with checkbox tick will bring clarity as user will be aware of possibility for action.

And if the rows have or will have different CTAs like order completed or order rejected. These actions can also be performed by selection of check boxes and clicking on related CTA.

Example: If a user want to complete multiple orders: He can select the rows and click common CTA for ORDER COMPLETE.

Answer 5

It seems each row in your screenshot has multiple hyperlinks that can take the user to other resources within the application (Customer, SKU, Source, ID, etc). Assuming this is correct, I would recommend against allowing the user to click the row to select it. I think this makes the UI awkward and potentially confusing.

Option "C: Keep only checkboxes and don't select on row click", is the cleanest and most straight forward from my perspective.

Example:

If the user clicks within the SKU cell (the white-space around the link), the row would be selected. If the user clicks within the same SKU cell again, but this time happens to click the link, they are redirected to another page.

For novice users, they may not realize exactly why this happened. For those who do, they now have to be more precise and careful with their clicks. In either case I don't believe it is a major problem, because the users will quickly learn and adapt. But personally, I think it's the kind of minor inconvenience that I would rather not implement.