As seen in the very popular answer:
"Should a toggle button show its current state or the state to which it will change?", we have very good guidelines for implementing toggle buttons.
Unfortunately, there appears to be an use-case that is left untouched. In machine controls applications, it is very common to do the following actions:
Note: These could have been just as easily worded as adjectives.
This could be referring a hydraulic cylinders, valves, or doors, and often, a Human Machine Interface (HMI) will provide users the ability to toggle these states. The caveat is that these actions take time to complete, and there is a delay before the state changes.
Would suffer from the following issues in these applications:
- An instantaneous state change would contradict the actual state since the door has not opened yet, or the hydraulic cylinder has not retracted yet.
- A delayed state change may confuse the user since he/she may not know if the application is processing his/her request.
Effectively, the desired workflow involves the initial click/tap, a period where the state is changing, and finally an indication that the state has changed. However, a UI with two buttons and a progress bar is a bit clunky and takes up a lot of space. Or buttons with colors to indicate the state is unintuitive. Consider what a typical control panel might look like:
The picture describes a 4 step process:
- The device is in the retracted state (indicated by green).
- The user presses the advance button.
- The device is changing states (indicated by yellow).
- The device is in the advanced state (indicated by green).
How can we create a toggle switch for delayed state changes that remains compact, intuitive (or unambiguous), and exposes the 'in progress' state to the user?