Table Checkbox side best practices

Question

When is it a best practice to allow for checkboxes to appear on the left/right and side of a table?

A wireframe came across my desk looking similar to the wireframe below. The justification the team gave for its placement is the checkboxes on the right so they are close to the action buttons at the bottom.

^{download bmml source – Wireframes created with Balsamiq Mockups}

When comparing this to systems like Gmail, Yahoo, and Hotmail they tend to place checkboxes on the left instead. Is it better to place these check-boxes on the left? Or would it bet better to leave them near their corresponding buttons on the right?

Answer 1

The pattern that most people are used to is for the checkboxes to be on the left. I don't see any particular reason why it would be beneficial for you to place them on the right, so rather stick to checkboxes on the left.

In general I would say that it is better to have them closer to the buttons that you will be using with the checkboxes, but here again there is nothing stopping you from having the buttons on the left rather than the right.

Answer 2

Even though I voted UP for the answer of @JohnGB , I still wanted to answer.

If you have all your "action buttons" aligned right for some reason, and your users have used to them being there. I would suggest you to go with the style you have taught your users and have the checkboxes on the right as well. But with right-aligned implementation, I must suggest that you put a hover effect for the whole row, because the "label" for the checkbox is in the other end of the table, and might otherwise be hard to check the right checkboxes. (Or even make the whole row as clickable selector for the checkbox.)

But if you have no existing buttons right-aligned, I would suggest you to do like @JohnGB said, use checkboxes as they should be used, before the "label" for the selection.

Answer 3

A very good reason to put them on the right are for your users who are using screen readers. These users will hear the contents of the row and last the checkbox vs hearing a checkbox without knowing the content of the row. They then have to hear the content and backup to the checkbox if they need to select the row. For these users it is a much better design and it has very little effect on those users who are not using screen readers.

Answer 4

Fitts's Law basically states that the time it takes for a user to complete a task is based on the distance a user must move the mouse arrow. So it's ergonomically faster to have the actions directly above or below the checkboxes. If the user is using a browser scrollbar, then it is most efficient to have everything be on the right side of the screen to decrease wasted mouse movement. This is particularly exacerbated in Enterprise Products, where a movement across the screen can result in hours of wasted time.

So the rule of thumb (best practice) is that the actions be directly above or below the checkboxes.

These days the whole row can be a selection and you can have a row hover state. So the checkbox can be on either side. The convention of it being required to be on the left is an old one.

The answer to the original question is 'it depends'. And what it depends on is the use case.

Answer 5

All UI Guidelines tells that labels for checkbox must placed on the right. This rule also using for tables. Look any mail client to make sure, that this rule take place.

Also buttons affects to selected items must placed on the right too.

But, the checkbox on the table have two problems, don't forget about it on your realization: 1. It is difficult to aim to small checkbox. Make that click to row check checkbox. 2. User can select multiple rows. User can select rows consequentially one by one clicks on checkbox. Sooner or later he makes mistake and all rows have been deselected. Make sure, that you UI provide select all rows and select several rows with pressed Ctrl/Shift keys.

Looks for Gmail to see this things.

Answer 6

Checkboxes should be on the left, near their label. The further the checkbox is from its label, the more work the user has to do to visually align them.

Even with alternate row styling, right aligning checkboxes can still lead to incorrect checkbox selection. In contrast, left aligned checkboxes are almost never selected in error. Sadly, cannot find a good reference source to support this practice, but I am surprised no one mentioned this before.