3

I've seen a lot of posts here about greying out or hiding controls and menu items, but this question is about greying out or hiding informational icons in a selection list.

I'm curious on your thoughts on greying out versus hiding an icon (to represent a service) in a selection list. Let's say we have a travel itinerary with two legs. Each leg of the trip is identified by a number, and icon for the service and the origin/destination. A user can select via checkbox, which legs they want to use this service, if available. So for this example one leg has the service, the other does not – the reason it does or does not have the service is not important in the decision, and additionally, the service may or may not be available in the future on this leg. Currently, when the service is not available, we are disabling the checkbox (to 40% grey) to not allow that leg to be selected. The question is do we also grey out the service icon or remove it completely (keeping the space it occupied open, leaving gap) in the table view.

It's (I think) a well known standard that unavailable, disabled or otherwise non-selectable items are greyed out. Hiding icons I have not seen very often, and my initial impression is that something is missing, but it's unclear if it's missing the service or the page is broken.

I'm interested to hear your feedback.

Improve this question

3 Answers 3

Reset to default
1

With assumptions and without seeing the example:

Graying out a control typically means its read-only, static or not editable. A missing element means, well, that it does not exist. If the icon is tightly coupled with the control (its a clickable element or the like in context) then it should appear as the control does.

My other opinion is a screen with high data density or large table of data having an empty cell is an effective way to use negative space as information (about what is missing). Edward Tufte's (an followers') ideas about information design could be helpful.

Improve this answer
2
  • Thanks for your insight - to help clarify, the screen itself has a fairly high amount of information density; however this portion of it will usually be 3 or fewer options/lines, separated into a sub section container. Additionally, the icon is coupled to the control as it is the option you are selecting (or not) - though it could be argued not tightly, as it's the third piece of information in the line after the control and trip identifier. I'll see if I can get an example visual.
    – jimmyball
    Commented Oct 23, 2013 at 14:43
  • 2
    I'd like to help further but unfortunately I can't comment on visuals without seeing them. The only contributions I can make would be theoretical and not applied. Its sort of like describing a red apple to a blind person. Good luck!
    – Ken
    Commented Oct 24, 2013 at 16:49
0

Whenever I see disabled content, I always wonder why I don't have access to that content. Maybe I can read the text, but I cant take any action because the controls have been disabled. Instead having some info on why that content is disabled would make sense.

But I believe the best approach is to avoid showing the disabled content. Just hide everything that goes with it. Show the user what he needs and will be able to do with the content, rather than showing content that he doesn't need to know about.

Improve this answer
0

When constraining a user in his options you must deliver proper feedback. In the rare occasion you are creating something for a niche that does not need this feedback and understand why it is greyed out, then you are okay.

But I do not really think it is the case here, just disable it. (With disabling I mean completely removing the option.) The user does not know what he or she needs, so you can assume they do not know what they miss either!

Improve this answer

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.