1

I'm wondering about how to create a useful implementation of a toggle switch.

(think iOS style: enter image description here)

It is meant to be used in web applications. Because of that, an important point is, that after switching the toggle on/off in the UI, a request is send to the server, then (sooner or later) the server responds, if the action succeeded or not (via asynchronous JavaScript).

So I used the search and found a similar question with an accepted answer:

Toggle Switch with Delayed State Change

A loading animation while waiting is of course a good idea.

But my question is:

How to handle a failed request?

Improve this question
1

2 Answers 2

Reset to default
3

After the loading animation you should go back to the original position an communicate that the action was not performed. If you could even state why the better. For exampele somthing like "XY could not be switched on due to missing internet connection"...

enter image description here

Improve this answer
1
  • +1 Is there a reference for the examples provided in your answer? To help make the response more complete, consider adding some references or explanation for your reasoning and how it answers the question.
    – Michael Lai ♦
    Aug 5, 2018 at 22:23
2

A failed request should be clearly indicated to the user. And succeeded one as well.

It's important to consider an indication of both possible scenarios since the process of confirming a request can happen so quickly (when an internet connection is good enough), making a user wonder whether there is a Save button to persist the changes.

Indication

An indication of successful request completion can be a check mark placed next to the toggle (or the panel where it's contained).

To indicate a failure, a cross sign with an appropriate description can be placed next to the toggle (or, similarly, its panel). A good option might be to show a pop-up (or an overlay above the toggle) with a suggestion to repeat the failed request.

Other Factors to Consider

A user can scroll away or switch to another page while the toggle is updating its state, thus seeing no indication of the toggling result. Depending on the overall approach, it's might be a good idea to notify a user in case of a failure in such cases as well.

Improve this answer
1
  • 2
    +1 yes, it is definitely about providing good feedback to the user regardless of the status or result of the action from the user or a change in the state of the UI component.
    – Michael Lai ♦
    Aug 5, 2018 at 22:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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