13

So my question is a bit open ended. Basically, I am looking for possible solutions to the problem of lots of tabular data with check boxes. For example, if we look at Facebook's Account Notifications page we see this:

Facebook with overwhelming number of check boxes

Now I realize that Facebook is purposefully making this difficult because they don't want you to stop notifications, and a lot of the problem would be solved if they made the column headers behave as check/uncheck all, but it still looks pretty ugly.

Making them expandable/collapsible sections might also help (you are only seeing a forth of the page - these rows keep going and going like the energizer bunny), but I feel like there should be something more viable you could do in addition to that option.

I tossed around the idea of only showing checked boxes and making unchecked ones show on hover of the row, but I'm not sure if that would be confusing for the user.

Anyway, I am looking forward to any ideas you guys might have on the subject.

Improve this question

4 Answers 4

Reset to default
8

I would go down a similar sort of route as 37Signals do with their to-do lists in BaseCampHQ: have the essential information displayed closer to the item (they're too far away in the OP's screenshot above), so you get an uncluttered appearance, and maybe I'd even go a step further and go without the box around the ticks. And then on hover, show the interactive check boxes at left so that you can change the settings, something like the mockup below.

enter image description here

Improve this answer
5
  • I think the idea of showing unchecked boxes on hover is great! It reduces noise by hiding irrelevant information, and makes it far clearer what emails you will be getting.
    – Fox
    Commented Jul 21, 2011 at 13:56
  • 9
    In my opinion, if you show checkboxes only on hover, so it'll confuse users, because they won't see where to click. Default checkboxes work much better on settings-list like this. Totally agree to put checkboxes closer to text and highlighting row a bit on hover.
    – Dmytro Semenov
    Commented Jul 21, 2011 at 14:48
  • 1
    I like the idea of only showing the check boxes on hover but, like Dmitry, not sure if it would be confusing when a user first goes to interact with it. Maybe having the first row show the check boxes when the page first loads and then going to only showing them on the hovered row?
    – Matt Lavoie
    Commented Jul 21, 2011 at 15:02
  • 2
    Yes I like the idea of having them in the first row as a hint. I would have the hover activate right across the row (ie not just over the text) to maximize the likelihood of 'discovery'. Although I agree with default or 'apply to all' checkboxes generally, I wonder how often the user actually want to choose ALL email/sms or NO email/sms. Mind you I suppose it's more a matter of it being a shortcut - eg selecting to have none and then selecting a few. I think it'd get confusing if there were batches of these list all open at once as you describe, so I'm with the expanding sections idea.
    – Roger Attrill
    Commented Jul 21, 2011 at 15:27
  • I think with the considerations that were made in the comments, this answer best adapts the original example. Of course if anyone has any other ideas or things they would do differently for, say, more complex tabular data, I would love to hear it.
    – Matt Lavoie
    Commented Jul 22, 2011 at 16:18
2

I like your idea of having a master (tristate) checkbox for each section. Maybe consider using a treeview and moving the checkboxes to the left.

Improve this answer
1

A solution I have used in the past replicates desktop functionality in web apps and works like this:

  1. Click to select a row
  2. Shift-click to select multiple rows
  3. Use action buttons or an action menu at the top of the table to then select an action for the selected rows (such as enable email notifications)

This solution is more scalable in that you can easily add more actions, and it certainly displays less checkbox clutter. The disadvantage is that users may not realize the shift-clicking multiple rows is an option though hint tips or instructional text can be used to educate users about this functionality.

Improve this answer
0

For more complex tabular data - say, the Facebook example, but with six types of notifications rather than two - one option would be to combine hiding the checkboxes by default with the ability to edit a "row" or a "column".

On hover for a checkbox, as in Roger's answer, you would show the checkbox (ticked or not, as appropriate), and allow the user to change that setting. You could highlight the "active" row and column to help the user understand what setting is being changed.

On hover for a row, show checkboxes for the entire row with text that says "click to edit". Clicking the row shows all checkboxes for the row, with a master checkbox at the far left to check/clear all boxes in the row, a save button at the end of the row to return the user to normal view and a cancel button to return without saving. For a section with many rows, you might even want to hide the other rows so that the column headers appear directly above the checkboxes, but that could be a bit disconcerting to the user if the row is moving up and down in the table. (Highlighting the active column might be enough.)

On hover for a column header, show checkboxes for the column with text that says "click to edit". As with rows, all checkboxes for the column would be shown, with save and cancel buttons at the bottom of the column and a master checkbox at the top to check/clear all boxes in the row.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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