web-dev-qa-db-ja.com

トグルスイッチの状態を処理する方法

トグルスイッチの便利な実装を作成する方法について疑問に思っています。

(iOSスタイルを考えてください: enter image description here

Webアプリケーションで使用するためのものです。そのため、重要な点は、UIでトグルのオン/オフを切り替えた後、リクエストがサーバーに送信され、アクションが成功した場合not(非同期JavaScript経由)。

だから私は検索を使用して、受け入れられた答えを持つ同様の質問を見つけました:

遅延状態変更付きトグルスイッチ

待機中の読み込みアニメーションはもちろん良い考えです。

しかし、私の質問は:

失敗したリクエストをどのように処理しますか?

1
voodoocode

アニメーションを読み込んだ後、元の位置に戻って、アクションが実行されなかったことを伝えます。あなたが理由を述べることができればもっと良いです。たとえば、「インターネット接続がないためXYをオンにできませんでした」のようなものについて...

enter image description here

3
BrunoH

失敗したリクエストは、ユーザーに明確に示される必要があります。そして、1つも成功しました。

リクエストを確認するプロセスは非常に速く(インターネット接続が十分な場合)発生する可能性があり、ユーザーに Save 変更を永続化するボタン。

表示

リクエストが正常に完了したことを示すには、トグル(またはトグルが含まれているパネル)の横にチェックマークを付けます。

失敗を示すために、適切な説明の付いた十字記号をトグル(または同様にそのパネル)の横に配置できます。失敗した要求を繰り返すように提案するポップアップ(またはトグルの上にオーバーレイ)を表示するのが適切なオプションです。

考慮すべきその他の要素

トグルが状態を更新している間、ユーザーはスクロールして別のページに切り替えたり、別のページに切り替えたりすることができるため、トグルの結果は表示されません。全体的なアプローチによっては、このような場合でも障害が発生した場合にユーザーに通知することをお勧めします。

2
Pavel