web-dev-qa-db-ja.com

UIの変更に最小限の遅延を設定しても問題ありませんか?

私はしばらくの間、モバイルおよびWebアプリケーションを作成しています。私は主に非同期タスク、双方向データバインディングなどを使用しています。サーバーまたは内部サービスからデータが届いたときにUIを更新または変更しています。ここで問題があります。

たとえば、ログインの場合:

Androidアプリとそれにログイン画面があります。ユーザーが[ログイン]ボタンをクリックすると、キーボードが非表示になり、「ログインしています。しばらくお待ちください」というダイアログが表示されます。 '。

ログインプロセスに1/5秒未満かかる場合があります。遅い接続やその他の重いWebリクエストの場合は、さらに時間がかかることがあります。

繰り返しますが、優れた処理能力とインターネット接続を備えたデバイスの場合、その短時間で、

  1. キーボードを隠して
  2. 待機ダイアログを表示し、
  3. 応答が到着したら、待機ダイアログを削除します
  4. ページ全体を変更します。

そのため、UIが非常にわかりにくくなっています。接続が遅いため、読み込みダイアログを削除したり、遅延を設定したりできません。どんな反応が得られるかわからないので、この混乱を防ぐためにアニメーションを使用する方法を見つけることができませんでした。

Web(Angular)アプリでも同様です。ページを読み込んでいます。その後、到着するデータはユーザーの前でUIを変更するだけです。読み込みダイアログがありますが、要素の表示/非表示により、ページ全体がバックグラウンドで移動します。

私はページを完全に暗くし、最小の固定待機時間(1.5秒など)で読み込みメッセージを追加することを考えていました。これはこのような状況に適したアプローチですか、それともUIの更新に関するものを完全に誤解していましたか?代替案があれば歓迎します。

4
MmtBkn

応答時間:3つの重要な制限 のアイデアに基づく、Jakob Nielsenによる、はい、進行状況ダイアログの表示を遅らせることは理にかなっています。この記事は、あまりにも多くの情報をあまりにも早く表示すると、「ディスプレイの慣性の原則に違反します(画面上の変化が急速に点滅し、ユーザーがペースを維持できないか、ストレスを感じる)」と述べています。この問題はあなたの解決策が避けているものです。

UIの変更を遅らせることに加えて、「ログイン、お待ちください」ダイアログを変更してUIをあまり変更しないことで、ディスプレイの慣性の原則を守ることができます。ログインフォームの上に新しいウィンドウをポップアップする代わりに、フォーム内の[ログイン]ボタンの下にメッセージを表示できます。または、ログインフォームの中央にある透明なオーバーレイにメッセージを配置することもできます。

遅延はどれくらいの長さですか?ニールセンの記事によると、ユーザーの「思考の流れ」は、ユーザーのアクションの1秒後まで続きます。 「通常、0.1秒を超え1.0秒未満の遅延の間は、特別なフィードバックは必要ありません。」つまり、最初の1秒間は、[ログイン]ボタンを無効にするなどして、ユーザーが[ログイン]ボタンをクリックしたことを微妙に示す必要があります。 1秒後、UIをさらに変更して、「ログイン中...」というテキストをスピナーで表示できます。

遅延しているUIの変更が、インターフェースの上に透明なオーバーレイを配置する場合に使用できる別の手法があります。オーバーレイを1秒後に即座に表示するのではなく、最初から徐々にフェードインさせます。したがって、アクションが0.2秒以内に発生した場合、オーバーレイはユーザーが気付くほどフェードインしません。アクションに5秒かかる場合、オーバーレイはフェードインしてそこに留まり、ユーザーはメッセージの突然のジャンプを目にすることはありません。

ActiveUI のピボットテーブルインターフェイスで使用されている手法を見ました。計算に時間がかかるクエリを実行すると、「読み込み中...」の透明な白いオーバーレイとスピナーが徐々にフェードインして、テーブルの現在の値をカバーします。新しい値が読み込まれるとすぐに、オーバーレイは消えます。

1
Rory O'Kane