10

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

data grid with check boxes

13
+50

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.

  • If I may attempt an executive summary: "C." :) – weir Aug 21 '16 at 12:06
  • 1
    "C" would be the quickest to build & test and has the best affordance. However, while row select does have some challenges, you can make it work effectively& efficiently but it will take some additional effort to improve its affordance. So it all boils down to how much time you have and effort to make it work. I am a big fan of keeping things simple. – SteveD Aug 22 '16 at 8:25
  • 1
    You can add that there is a lot of library implementing table/grid system, most of them have the checkbox which is always for selection, but row clicking isn't always implemented as row selection, sometimes is row double clicking, and somtimes single or double clicking won't even trigger the selection. – Walfrat Aug 23 '16 at 6:39
4

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

  • What happens when you have links, editable fields or dropdowns on that grid? – Hasan Gürsoy Aug 23 '16 at 8:51
  • You can use something like event.preventDefault / stopPropagation to prioritise the link / editable field / dropdown over the row selection. It's pretty intuitive to understand clicking on those will select them over selecting the row. That said I agree checkboxes are a good standard to keep. – visualbear Aug 23 '16 at 11:01
  • How are these mutually exclusive? You can easily have both selection on the rows together with a checkbox on the left side. – Bluewater Aug 23 '16 at 14:09
  • 2
    In the example given in the answer, try to select the person name to copy it and see what happens. Also, when you see checkboxes, you immediately know that the rows can be selected. It's not that obvious with click selection. – Marques Aug 24 '16 at 19:18
4

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.
regular hand pointerWhen your happy user is hovering a link you make the pointer look like the well known hand of the links.
arrow with plus sign cursor pointerElse 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!

  • Additionally (unrelated to this Q), I'd suggest you add a display:block; rule to the links inside the table cells. This way your users will be even happier by not having to capture small text link targets. – Juan Lanus Aug 23 '16 at 20:11
  • You can fix the checkbox column to the far right, allowing users to scroll across but not lose sight of the checkbox. – mrmac Sep 28 '18 at 20:49
  • @mrmac: Yes! Some grids can fix cols or rows (like Excel). It can be the far left or the far right, as long a it is always visible. These are solutions for grids with many clickable cells. Else allow selection by clicking anywhere in a row as Ben Harrison said. It's easiest for the user and the developer as well. – Juan Lanus Oct 2 '18 at 19:01
  • @JuanLanus: Is there any application that is following this pattern? Could you share some examples? – essdeepee Oct 11 at 7:17
  • @essdeepee Not exactly like I say, but some UIs that I can't show. To get the gist open an Excel spreadsheet and click a row number to select the whole row. We are all used to that. – Juan Lanus Oct 12 at 18:54
2

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.

2

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.

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.