Tuesday, March 10, 2015

Check all / uncheck all checkboxes with regards to usability


I'm just wondering as to your thoughts on the best way of providing check/uncheck all functionality for an HTML table with multiple rows, that has a column of checkboxes.


Some possibilities:


Extra checkbox in table heading, similar to Gmail. e.g. [ ] Is enabled?


Check all link in table heading. e.g. Is enabled? (check all)



Check all link in table footer directly underneath the checkboxes.



Answer



I find this approach pretty self-explanatory (no need for "Select all"):


screenshot
(From: http://www.ibm.com/developerworks/web/library/wa-jquery1/)


However, the keyword here is "I find"! @ChrisF has some good points in his answer, but I guess that you will have to compare the different approaches with real users in order to find out which solution is the best fit.


A few pointers on the shown approach, though:



  • Make the response immediate. i.e., all boxes should be un/checked instantly on the client (no round-trip or delayed form submit) in order to meet the user's expectations.

  • Let the "Select all" UI widget be the same as the ones for each item. It's still a check box -- this just affects the entire column (and is thus placed in the column heading).





EDIT



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...