3

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:

  • Engage/Disengage
  • Advance/Retract
  • Open/Close

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.

As you can imagine, a simple toggle button:
Toggle Switch

Would suffer from the following issues in these applications:

  1. An instantaneous state change would contradict the actual state since the door has not opened yet, or the hydraulic cylinder has not retracted yet.
  2. 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:

Delayed Toggle Buttons

The picture describes a 4 step process:

  1. The device is in the retracted state (indicated by green).
  2. The user presses the advance button.
  3. The device is changing states (indicated by yellow).
  4. 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?

  • Is this action able to be cancelled through by these same controls? – maxathousand Dec 19 '17 at 21:33
  • Much like an ordinary toggle switch, the action (toggle, if you will) cannot be cancelled. – Nick Miller Dec 19 '17 at 21:56
6

I ran into the exact same problem for a project I'm working on.

My solution was to provide immediate visual feedback that the click was effective, but then indicate that it's still working.

delayed switch status

  • Nice... what effect (purpose) does the "Manual" button have? – Kevin Fegan Jan 23 '18 at 2:22
  • @KevinFegan sorry, that was just a part of the UI that controlled a separate feature. – maxathousand Jan 23 '18 at 4:35
3

Simplest solutions will be just to tell the user, using text or an icon.

Toggle switch

Multiple switches.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.