I have a table where a user needs to select a row before being able to proceed, however I also have a case where some values need to be displayed but are not selectable.

How would you got about this?

My initial thoughts are to use a combination of icons, visual styling and some explanatory text. But I am not sure that the right message comes across as it stands - nor do I have any ideas that could work on an icon for not-selectable unless I use a disabled check box, which I believe to be misleading as it looks as though you could do something to make it selectable.

enter image description here

All answers welcome!

  • Is there only this view mode or this is some kind of edit mode where the checkboxes appear? – Alvaro Nov 23 '16 at 11:13
  • @Alvaro There is only this one view mode as you are already within editing the parent. – J4G Nov 23 '16 at 11:24
  • 3
    Why is the item unselectable? How come you must display it if it is not selectable? Can you put it in a different section (selectable items vs. other, unselectable items)? Can you include a column that has the reason for its selectability, by which the user can understand the differences between the rows (even if every item on the screen is unselectable at the moment)? – ErikE Nov 23 '16 at 20:26
  • 1
    As @ErikE states, the reason why it is unselectable is very important here. – user31143 Nov 24 '16 at 10:38
up vote 28 down vote accepted

Keeping the checkbox disabled should be alright, if you are concerned about it you can make use of tooltips to explain the user why it is not selectable when he hovers over the field.

Some thoughts about the design:

The checkboxes you are using don't let the un-selectable checkbox be understood as their border coincides with the container. Make them smaller.

Also I would put them on the left as it is more common.

I don't think it is necessary to put the row in a different color or opacity to show it is not selectable. This might actually bring some confusion, as it might be asociated with some other reason. Keep it simple:

Action = Select
Action performed on -> checkbox
Action not available => different checkbox(preferred) or no checkbox

enter image description here

  • 1
    The only caveat is: How do you make it obvious that a checkbox is disabled when all are disabled? By comparison, it's easy, but for someone unfamiliar with your system, it might not be. Then again, this might not be an issue if you don't expect your system to be used without any training. – ecc Nov 23 '16 at 16:57
  • There needs to be consistency and as there are selectable fields and non-selectable fields depending on the page I would keep the inactive checkbox. You are right, it is made by comparison. But the comparison might also be made with the other elements opacity, and this is a reason to keep the checkbox the same color of the text. This last comment is just an hypothesis though, it would need user-testing. – Alvaro Nov 23 '16 at 17:11
  • The image includes the country China a few times. Perhaps right hand side checkboxes are more common there? – Tim Nov 23 '16 at 18:27
  • @Tim, Depending on the user's context the layout should act accordingly. I do not know if that is the case. For example, if the language used would have been RTL then it would make sense (chinese is not written RTL afaik) – Alvaro Nov 23 '16 at 18:33

I'll give you a fine solution and then ill explain

enter image description here

Back in time, it was much easier for the users when almost every website used similar colors and designs with interactive forms, because when the users learn it on this website, then they will know it on every other website.

enter image description here

However, nowadays designers are enforcing more identity into their designs including the interactive forms. Which is slightly derived out of the common patterns, and new patterns are introduced as well.

But, try as much as possible to stick to patterns, they might not always be sexy, but it comes at the price of how self-evident your design is.

If you analyze your design, you had to use a gray shade of the Check icon enter image description herein order to indicate that it is a check box, while if you just decrease the size of the box a bit, it will better indicate that it is a checkbox.

Which then gives us the ability to use the gray background to indicate whether a box is enabled or disabled.

In the enabled mode, you can use which colors of your theme you desire, for example, I used purple for the box border, and you can also color the check icon itself.

When it is disabled, we just take life away from it, by turning it into black and white.

Regarding your concern, with disabled checkboxes can be misleading, you can add a tooltip when a user hovers the disabled field, explaining why it is disabled.

If the user only needs to select exactly one row before proceeding, consider replacing the checkbox with a Select button. You could make it so the button is only visible on items which are allowed to be selected.

In an ideal world i would simply hide the row that is not selectable, but as you said you have a case where you need to show it, and without more context about why it needs to be shown i can't be sure if my response is applicable. anyway...

I would not have any kind of checkbox showing for the un-selectable line. Checkbox should be on the left as Alvaro already mentioned. I would also suggest you have a checkbox in the title row that can select all rows.

Another option could be to do a strikethrough on the font for the un-selectable line, but this depends on what the information is and why it's not selectable.

  • Good catch the "select all", I noticed it after creating the image. – Alvaro Nov 23 '16 at 16:28

I agree, don't have any kind of check box for something that can't be selected. Then make the distinction even clearer by having "select" buttons for values that should be.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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