Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

mockup

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?

share|improve this question
    
Checkboxes on the left side supports the left-to-right reading. The most important action for the table, the selecting function, should be the first information. Table actions are thus self-describing. –  sysscore Mar 1 '13 at 10:36
add comment

3 Answers

up vote 6 down vote accepted

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.

share|improve this answer
1  
Agreed. Here are more reasons to put them on the left. * Similarity to the basic checkbox * Similarity to a checkbox list. * The checkboxes support actions on more than one item at a time. Controls for actions on individual items usually appear at the end of a row. Putting the 'group action' checkbox in the same location as the 'single item action' controls might lead to problems in anticipation of the function of those controls. –  user1757436 Feb 28 '13 at 20:46
    
Also just move your buttons to the left and the justification for putting the checkboxes on the right disappears. –  Dan Metheus Mar 1 '13 at 3:24
    
But it might not be a good idea to move the buttons to the left because it might break the convention for the rest of the application. –  Michael Lai Mar 1 '13 at 5:38
    
You could even argue whether the buttons are really needed. If you don't normally get a large number of notifications, and if this is a web applications, why not provide a hover over for the message that allows you to mark as read or delete? Just a thought... –  Michael Lai Mar 1 '13 at 5:40
    
@MichaelLai That would make it unusable on any touch device, which isn't a good idea. If you were only targeting PCs then that would be a decent solution though. –  JohnGB Mar 1 '13 at 10:05
show 1 more comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.