アプリケーションがビジーのときにUIをブロックするためのベストプラクティスは何ですか

Question

私はTwitterを使用してWebアプリを作成していますBootstrap with PHP on server side。私のアプリはjQueryを介して通常のajaxリクエストを行い、特定の部分を無効にしたいサーバーが処理を完了し、コントロールをクライアント側に戻すまでUIを使用します。

同じためのベストプラクティスは何でしょうか？

Dominik Oslizlo · Answer

ここに私の心に浮かんだいくつかがあります：

これまでのベストプラクティスは、システムをまったくフリーズさせないことです。より良い、より効率的なサーバーサイドを検討してください。もちろん、これは状況によっては実行できない場合もありますが、最初に確認することをお勧めします。ユーザーにシステムがビジーであることをどのように伝えても、正常に機能していることを常に示す方が良いためです。
上記のオプションを使用できない場合は、少なくともこれらの時間を制限してください。
バックグラウンドで処理できる場合-実行します。ただし、システムのロジックが原因でそれができない場合があります。しかし、ユーザーがその間に何かを操作できる場合は、操作を許可してください。
（システムのロジックにより）バックグラウンドで処理できない場合は、ユーザーコントロールをブロックする必要があります。
適切に通信する必要があります。 インターフェイスを暗くして適切なテキストを表示する（eg "システムがクエリを処理するのを待つ"）およびsystem busyアイコンを表示します。ユーザーがシステムが完全にフリーズしていると感じないように、アニメーション化する必要があります。しばらくすると、とにかくこの感覚が得られるので、言い訳をするために、特に処理にどれだけの情報が必要かという説明が必要になる場合があります。
できれば、進行状況を伝えます-進行状況バーを表示することを意味します-パーセントまたは時間で-処理の量が表示されますまたはそれがどれだけかかるか。
システムのロジックの観点から可能な場合は、ユーザーが処理をキャンセルして、完全に応答するインターフェイスに戻ることができます。
「面白いユーザー」にいくつかのコンテンツを含めてください。たとえば、AppStoreのTiny Thiefゲームを見てください。レベルの読み込み中に、ユーザーにはいくつかの画像で構成されるストーリーが表示されます。ユーザーがストーリーを通過すると、レベルが読み込まれるため、実際にはユーザーは読み込みにまったく気づきません。ゲームとはまったく異なるシステムでもそれを行うことができます。「ご存知ですか？」と表示して処理中のヒント。

Hynes · Answer

正直なところ、状況によって異なります。

特定のUIを無効にすることが理にかなっている場合があります。これは、eコマースWebサイトで定期的に発生します。注文を送信すると、ほとんどのeコマースWebサイトは「今すぐ注文」ボタンを無効にします（視覚的にはそのままですが、ユーザーのカーソルが変化し、ボタンにアニメーションが読み込まれるなど）、ユーザーが誤って複数回注文することを防ぎます。。

詳細については、ベイマードインスティチュートの "Users Continue to Double-Click Online" をご覧ください。

ただし、場合によっては、アクションをバックグラウンドでキューに入れ、UIを無効にしない方が良い方法です。これは、モバイルアプリでの興味深いアプローチになっています。たとえば、Instagram内では、写真が気に入った場合、アプリは自動的にハート/いいねボタンを選択した状態に変更します。サーバーと通信しているか、通信していない可能性があります。しかし、それは最終的にその状態が真であることを前提としています。そのため、アクションのローカルキューが保持され、最終的にはサーバーと同期されます。これにより、アプリは実際よりも速く感じられます。また、アクションが完了するのを待っているように感じないため、エンゲージメントがさらに促進されます。

詳細については、Luke Wroblewskiの記事「モバイルデザインの詳細：アクションの最適化 =」を参照してください。

missdefying · Answer

私は最近、この特定の問題のあるアプリケーションに取り組みました。

特定のアクションに対して無効化されるアクションがセクションにグループ化されるように、インターフェースを設計しました。ユーザーが数ミリ秒以上かかることがわかっているアクションをトリガーすると、操作中に使用できなかった領域がグレー表示になり、システムがユーザーの要求を実行していることを示すメッセージが表示されました。

ここにはいくつかのキーがあると思います：

バックエンドプロセスで影響を受ける領域を無効にするのみを確認してください。いくつかのコントロールが無効になっている場合は、ボックスでオーバーレイします。ボタンだけの場合は、アクションが実行されていることを反映してボタンのテキストを変更します。
発生していることと、リクエストを処理していることをユーザーに正確に通知します（または、アクションによってトリガーされないものである場合は、最新のデータを取得します）。 ユーザーは、機能へのアクセスをブロックしている理由とその機能を理解する必要があります。
アニメーションを使用なので、システムがフリーズしていないことがわかります。
大まかに教えてください所要時間。プログレスバーはすばらしいですが、プロセスにかかる時間（API呼び出しなど）がわからないため、使用できないことがよくあります。
すべての操作でタイムアウトを設定。何かが60秒で終了することがわかっている場合は、プロセスを強制終了し、エラーが発生したことをユーザーに通知します。