AJAXリクエストのUI更新で楽観的または悲観的である必要がありますか？
ユーザーがサーバーにAJAXリクエストを送信するために何かをした後にUIの更新を処理するのに最適な方法をチームで話し合っています。
検討しているオプションは次のとおりです。
- サーバーからの成功応答がまだない場合でも、UIを即座に更新し、変更されたアイテムを追加/更新/削除します。 AJAXリクエストが失敗した場合、エラーダイアログが表示されます。
- オブジェクトを変更し、「更新中」の状態を表示します。
- サーバーが実際に成功の応答を返したときにのみUIを更新します。
3つのケースすべてで、AJAX要求がまだ処理されている間、アプリケーションが要求でビジー状態であることを示します。
たぶん、これは実行されているアクションとそれがどれほど重要かによって異なります。これらのアプローチと一致することはどのくらい重要ですか？
@Barfieldmvs応答はおそらく正しい方法です。ajax呼び出しの進行中に「更新中」の状態を表示し、正常な（または失敗した）応答が戻ったときにこれをクリアします。これの利点は、どのような形式の応答もなしにajax呼び出しが終了した場合、「更新中」の状態は通常短時間だけ表示されるため、何かが間違っていることを示す明確な兆候があることです。
おそらくもっと重要なのは、ユーザーに実際の状態を示していることです。危険ではないときにディスプレイを「完了」に設定するのは危険です。ディスプレイが閉じるだけで、返されるエラーメッセージが表示されない場合があります。悲観的であるが、不明な状態を示しているということは、ユーザーが要求が送信されたことを認識しているが、まだ完了していないことを意味します。
職場でも解決すべき同様の問題がありました。しかし、私たちの場合は制約が多かったため、少し簡単でした。
つまり、アクションが成功した場合、UIに小さな変更を適用する必要がありました。多くの要素をすばやく編集できることが要件の1つであったため、ステータスを表示および更新したくありませんでした。
1つのアイデアは、楽観的なアプローチを取り、失敗した場合は後でユーザーに通知することでした。ただし、一部の操作はまだ保留中の操作の結果に依存している可能性があるため、これは不可能でした。そのため、ユーザーからの入力を受け取るために他のUIのビットを利用できるようにしながら、応答が成功し、その特定のバケットのインライン「読み込み」アイコンを表示するときにのみ、UIを更新する必要がありました。
依存関係がない場合は、楽観的なアプローチをとってもかまいません。失敗した場合は、ユーザーに問題の原因を指摘してください。
ただし、依存関係がある場合はおそらく良い考えではありませんが、問題を最小のコンポーネントに限定することは可能です。
楽観的なアプローチを見たいのですが、私のアクションの結果は、まだ確認されていないことを示すスタイル（灰色のテキスト、無効なボタンなど）で表示する必要があります。保留中のアクション（ある場合）の結果として実行できるアクションは、確認されるまで無効にする必要があります。
成功または失敗したことがわかったら、一時的なスタイルを削除して、関連するボタンまたはリンクを有効にするか、エラーが発生した場合はそれをすべて削除してエラーメッセージを表示できます。
決定的なルートをたどる方が確かに簡単ですが、フィードバックはすぐにはいきません。
UIの構造に依存します。アプリがサーバーに保存されているかどうかをアプリが認識せずにユーザーが[保存]をクリックした後、UIから何かが消える楽観的な更新を使用する場合、ユーザーが10秒後にページの別の部分を使用し続けると、UXが不良になる可能性があります。保存が成功しなかったことをアプリがパイプします。
状態についてユーザーに正直になり、何かが起こっていることをページにあるローカライズされたインジケーターで試してみることをお勧めします。このようにして、ページでの作業の継続を妨げることはなく、保存が行われなかった場合にUIのローカライズされた領域を反転させることができます。
情報をローカルに保存し、新しいコンテンツでページを更新すると思います。サーバー側で問題が発生した場合は、警告を出し、保存されているローカル情報を必要な回数だけ再送信できるようにします。
また、常にサーバーが情報を受信または処理していないかどうかを常に示します。これにより、エンドユーザーに適切な情報が提供され、手がかりがなくなります。
このようにして、UIは不適切なフィードバックを提供せず、ユーザーが入力したデータの損失を防ぐことができます。サーバーがデータを紛失したり、ファイルキャビネットの下でネットワークがキックしたりするため、データを入力してロードするよりも悪いことはありません。 （はは）
だから答える：3つすべてを実行してください！
進行状況の変化に応じて、必ず更新する必要があります。
- 情報を保存
- 保存されたローカルを表示する
- サーバーに送信
- 進行状況バーを表示します（または進行状況の回転インジケーターは適用されません）。
- 失敗した場合は警告し、再送信を促します。成功時に進行状況を非表示にし、一時的に通知してから成功を非表示にします。