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.

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

mockup

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:

mockup

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:

mockup

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?

share|improve this question
1  
"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? –  Bart Gijssens Sep 17 '12 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. –  Alexej Froehlich Sep 17 '12 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 '12 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 '12 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 '12 at 12:15
show 1 more comment

2 Answers 2

up vote 3 down vote accepted

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
1  
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. –  Jimmy Breck-McKye Sep 18 '12 at 8:44
add comment

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.

share|improve this answer
    
I like the comment on the usefulness of Balsamiq for these decisions. Thanks. –  André Sep 18 '12 at 8:00
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.