How do you indicate that an item is not selectable?

Question

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.

All answers welcome!

Answer 1

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

Answer 2

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

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.

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 in 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.

Answer 3

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.

Answer 4

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.

Answer 5

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.