website design - Greyed-Out vs Invisible

What is a good criterion or rule-of-thumb for determining when a control should be greyed-out and when should it be completely invisible?

Answer

It depends an awful lot on how you expect the application to be used.

If all your users are power-users (like Photoshop in @edgarator's answer) then you typically want to grey out rather than hide - you want your users to know that the feature is there, and they're going to be using your app for a while.

However if your users are less technical or (more likely) only occasional then you don't want to clutter the interface with controls that they're never going to get round to using. They're not going to hang around to find out why a particular action or control is disabled.

In these cases I switch to a few rules:

• 
  

  If the action is never going to be available to the user (for instance if they don't have rights or they haven't purchased the feature) then always hide it. I hate blank buttons on the dashboard of a new car.

  
  



• 
  

  If the action can be enabled by user action on the same page/screen (for instance a next button that needs a mandatory input box filled in first) then mostly disable.

  
  


• 
  

  If the action can be enabled by the user by doing something on a different page/screen then it comes down to whether you want them to go find how to enable any greyed-out options. Usually I find that it means you'd be better off rethinking how the pages/screens flow through what the user is trying to do.

  
  


• 
  

  If there is a lot of disabled functionality, for instance a whole extra block of form inputs then it's a judgement call. I tend to hide it and then highlight it should the user need it.

  
  

Basically the goal is always that the user can use it with the minimum of manual, so grey out something when you want them to know that there's something they can do to enable it. Hide an action to avoid distracting them.