Gray-out conundrum

Question

As we're approaching the release date for v2.5.0 of Rubberduck (an open-source VBIDE add-in), we're facing a bit of a dilemma regarding a specific type of tree nodes in one of our toolwindows:

The idea is to show library/project references in the treeview, and somehow convey whether a particular reference is in use or can be safely removed.

We've decided to gray-out reference nodes that aren't actionnable - either because they're locked-in (the VBA standard library and the host application's object library can't be removed), or because they're in use and removing them would break something.

But this is surprising to users that expect reference nodes that aren't in use (and therefore are actionnable) to be the grayed-out ones... and to me that seems a very reasonable expectation to have.

How can we reconcile contradicting user expectations and make it clearer for everyone?

Locked-in library references show up with a little padlock icon, so I think we've got those covered.

But what's the UX best practice for showing a UI element as "disabled" in a case like this?

Answer 1

To me, greyed-out list items mean those that are "of little interest" - in context that would mean references that are currently unused. You already have padlocks to indicate non-actionable items, whether or not they're used. Unlocked references should be removable.

Consider how modern VS handles this - references are removable, regardless of whether or not they are in use. Your project fails to compile afterwards, but it's your choice.

A good middle ground might be to indicate whether or not references are in use (greyed or not), but allow any of them to be removed (if unlocked). For removals of in-use references, prompt an "are you sure" dialog.

Answer 2

To account for good User experience, you can indicate the references that are in use or not (the difference can be colour) and indicate those that cannot be tampered with (use of padlock icons as you've mentioned).

However, you could also tweak the arrangement just like you have it in the sample picture that all unactionable elements, references in use and those not in use are always grouped together (adding a little indicative text might help too).

Answer 3

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

I tried to prepare a simple showcase how you might prefer to apply it onto your case. Even I preferred to use the color markers on the left side of the folder names, you may try to apply it on the right-most part alternatively.

The colors are up to you but I reccomend red one for locked ones, grey for not used or defaultly intended ones (which you may choose or try on some users dependent to the platform), and green dot for availability.

If you have further questions, please feel free to comment or edit your question as well to be answered more directly.