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?

  • 2
    "I have a lot of visual clutter between rows (even though they alternate color), so adding color makes sense" Would adding color not increase the visual clutter? Is there a way to get rid of the visual clutter? Sep 17, 2012 at 8:45
  • Is the interface going to be used frequently by the same people? In this case, you may expect them to learn how to see/use it. Also don't forget color blindness. Sep 17, 2012 at 8:47
  • Wouldn't it be an option to give the rows slightly more vertical space then? It might reduce the clutter. Otherwise, I think your analysis is correct: checkboxes affort clicking on them, and the icons you present don't.
    – André
    Sep 17, 2012 at 8:48
  • Since the tables are so big (lots of columns and thousands of rows) increasing the space between the cells would only make scrolling more painful than what it really is... Hehe...
    – edgarator
    Sep 17, 2012 at 11:25
  • @BartGijssens alternating colors may add more "things" but that's not the same as increasing clutter; keeping rows clearly distinct, even if it involves adding border lines or color, makes it easier to focus on one row
    – Ben Brocka
    Sep 17, 2012 at 12:15

2 Answers 2


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

  • 4
    To me, these checkboxes look disabled or fixed in position somehow. I'm not sure I'd discover otherwise because I don't think I'd try hovering over something that seemed non-interactive. I do think that custom checkboxes are a good way to massage the 'weight' of interface elements, though. Sep 18, 2012 at 8:44
  • 1
    I agree that the light gray makes the checkboxes appear disabled. Also, having both the checks and the X increases the visual clutter and both look checked. If for some reason, you had all boxes with the X they would look checked rather than unchecked.
    – 17 of 26
    Jun 4, 2015 at 13:14
  • Another option is to eliminate the check box altogether and instead have the whole row clickable. The row background could be made like green for on and off would be the light gray. Sep 26, 2017 at 13:22

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.

  • I like the comment on the usefulness of Balsamiq for these decisions. Thanks.
    – André
    Sep 18, 2012 at 8:00

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.