Constraints
This is when the interactive options and functions of an interactive product are temporarily restricted. Such restrictions may be imposed to prevent users from making mistakes or from following dead end paths when completing tasks that require multiple steps. For example, on certain pages, the menu items of a website may be temporarily disabled and, to spare the user unnecessary frustration, those items may be greyed out to signal that they are disabled.
Box 2 From Leonardo’s painting observations to interaction design principles
Greying out disabled controls as a form of constraint while allowing active controls to stand out creates a mapping between the status of controls and their perceivability. This is a well-established convention in interface design, and the reason why it is so well established is that it is consistent with the way in which our visual perception works in the real world.
Leonardo da Vinci was the first to highlight, when discussing the art of painting landscapes, that the further away objects are, the blue-greyer and lighter they appear. This is a physical phenomenon due to the way in which light is filtered through and reflected within the atmosphere, such that the greater the distance between our eyes and an object, the greater the ‘discolouring’ effect. Of course, the implication is that if ‘discoloured’ objects are far away, they are also out of reach. Therefore, greying out controls to signal that they are there but temporarily ‘out of reach’ is not just an arbitrary convention, but rather one that is implicitly grounded in our experience of the physical world, and that is probably why it is so well established.