Check-boxes vs. Icons

Question

I have a table with hundreds of records. Each of the rows might have one or many check-boxes. Something that looks like this:

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

The problem is that unlike the example, the rows are very tight and the check-boxes are fairly close to each other vertically.

In order to reduce visual clutter I was suggested the following approach:

^{download bmml source}

The problem with approach number 2 (the one above this paragraph) is that the user might not get the feeling that the table is editable, and might take them from clicking the row to toggle between tick and X.

Then I thought that I could to something else:

^{download bmml source}

But then I don't know what's the whole point of making the control like that as clicking it will toggle true or false with a tick or an X over a checkbox.

So basically:

1. I find the check-box inviting to click (as it is standard)
2. I have a lot of visual clutter between rows (even though they alternate color), so adding color makes sense
3. While adding colour it doesn't make sense to have a check-box, since it is a solid way to identify from true and false
4. If I don't have the check-box I'm worried that the users wouldn't click the cell
5. Go to 1.

I find that all of the approached have pros and cons and I just can't decide between one or another. Is there any good practice?

Answer 1

Make the checkboxes lighter. They could change to black on mouse hover to make it more obvious that they are clickable.

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

Answer 2

I would just increase the vertical padding of the checkboxes. I think you are right to suspect that users probably won't guess that the icons are clickable.

Those colours are extremely eye-catching, and I suspect they will make it harder to parse the list for anything other than reading the true / false values.

Incidentally, I don't think Balsamiq is the best tool for look-and-feel decisions. Balsamiq is great at quickly sketching up workflows and broad interactions, but it doesn't give you enough visual fidelity to see what works graphically. Some things that work well in BMMLs don't in practice, and vice versa. I would give the options a go in Photoshop or Fireworks instead.