What is currently regarded as best practice in UI design for displaying actions that are not available in the current context.
For example, A page displays customers who can have many associated contracts. I do not wish to allow the user to delete a customer if there are active contracts. From a usability and UI perspective what is considered the best for the user experience.
- Always show the delete option but warn the user when he selects it that the option is unavailable because there are active contracts.
- Show the delete option but grey it out.
- Do not show the delete option at all
Always showing the option has the benefit of consistency and the relevant actions are consistently in the same place etc, but conversely what is the point of showing them something they can't do.
Greying the option out still has consistency but does not allow them to select the action that they can not perform.
Not showing the option at all lacks consistency but will perhaps not be so confusing.
Before yesterday I would not have even asked the question and would have gone straight for option 2 (Greying out) however having watched a user try to click on the greyed out image many times and eventually asking me why they couldn't click on the button I am no longer sure what the best option is.
What do people with usability and UI testing experience feel is the best option?
Best Answer
My approach (and recommendation) would be that the button be grayed out as per your option #2.
When the UI is sparse and sufficient real-estate is available, having inline (up-front) contextual hints (such as the question mark approach suggested by Freddy, next to the button, detailing the problem in-line e.g. always display under the disabled button "No users to delete. Add some by going to (link)this tab(/link)!") can be desirable.
However, such inline hints or question marks that appear occasionally can complicate layout or hamper the effectiveness of the interface when real-estate is at a premium. In such cases it may be better to have an overlaid hint (a baloon or tool-tip) that appears when hovering over the disabled button as well as when clicking on the disabled button (i.e. the user manifests intent by approaching the disabled button with his/her cursor); the tip should explain why the button is disabled and grayed out, i.e. "There are no users to delete."
The above should take care of all (typical as well as pathological) cases. It combines the advantages of your #2 and #3 options, with hopefully none of the disadvantages.