「読み込み中」のテキストまたはスピナーは、画面上で最小時間滞在する必要がありますか？
私が作成しているアプリでは、ユーザーがボタンをクリックしてより多くのコンテンツを読み込むことができます。これには1秒または最大X秒かかる場合があります（X秒が経過すると、タイムアウトエラーメッセージが表示されます）。ボタンがクリックされると表示され、コンテンツが読み込まれると消える「読み込み中」のテキスト（現時点ではスピナーになる可能性があります）があります。
私の考えは、ユーザーがクリックするとすぐに読み込み状態を表示することです。コンテンツの到着が「速すぎる」場合、読み込みが非常に短時間表示されるため、ユーザーは何かが表示されたことを認識しますが、それが何であったかを理解できません（奇妙に見えます）。
一方のコンテンツはできるだけ早く到着する必要がありますが、他方の情報を同化するための最小時間（おそらく2秒？）なしに情報を表示するのは奇妙なことかもしれません。
正しい方法は何ですか？
読み込み状態を実装する方法に関する特定の解決策を探していません、@ Majo0odはコメントに 非常に便利なリンク を提供しました。 根拠および/または関連するケースまたは情報がある場合はその情報を探しています。
この状況でFacebookが使用するソリューションは、できれば素晴らしいものです。ページの「スケルトン」がすぐに表示され、利用可能になると、実際のコンテンツがスケルトンに入力されます。スケルトンボックスは、進行状況を示すためにアニメーション化されます。
- ページがすばやく読み込まれると、スケルトンは実際のコンテンツにすばやく置き換えられます。スケルトンが同じサイズに近い場合、ユーザーは違いに気付かないこともあります。進行状況インジケーターをすぐに非表示にすることで、「ちらつき」や衝撃の影響を受けません。
- ページの読み込みに時間がかかる場合、スケルトンはユーザーが期待できることをユーザーに示し、アニメーション化されて、バックグラウンドで作業が行われていることを示します。
これは、同様の効果を達成する方法を説明するブログ投稿です。実装の詳細を求めていなかったと思いますが、これは実際の効果を示しています。 http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html =
ジェイコブニールソンの調査によると、スピナーを追加した場合、1〜9秒が許容時間であり、最小値は1秒です。
この記事をご覧ください Website Response Times ：
3つの応答時間制限は、1993年に私が書いたときと同じです（ヒューマンファクターのパイオニアによる40年の研究に基づく）。
- 0.1秒で瞬時に反応します。つまり、コンピューターではなくユーザーが原因で発生したように見えます。
- 1秒は、ユーザーの思考の流れをシームレスに保ちます。ユーザーは遅延を感じることができるため、コンピューターが結果を生成していることがわかりますが、全体的なエクスペリエンスを制御でき、コンピューターを待つのではなく自由に動いていると感じます。この程度の応答性は、良好なナビゲーションに必要です。
- 10秒はユーザーの注意を維持します。
多くの場合、10秒の遅延により、ユーザーはすぐにサイトを離れます。
あなたが考慮すべきもう一つの側面は、あなたがウェブサイトにプログレスバーも持っているなら、あなたは変化を起こすべきだということです。リファレンスについては、この記事を参照してください プログレスバーvs.スピナー：どちらを使用するか ：
スピナーは、プロセスの読み込みにかかる時間をユーザーに伝えません。長いプロセスに使用すると、アプリに問題があるのではないかと不思議に思うでしょう。フィードバックがないと不確実性が生じ、ユーザーは最悪の事態を想定します。彼らは、ロードするのに長い時間がかかり、待機するのを妨げると想定します。焦りが始まり、戻るボタンを押すか、アプリを終了する可能性があります。
これが本当に問題である（そして私がそれが確かではない）場合、最も簡単な解決策は、コンテンツが読み込まれた後に読み込みスピナーの削除をアニメーション化することです。
この方法（仮説で説明しましょう）で、コンテンツが0.05秒で読み込まれた場合、読み込みスピナーはおそらく表示されるのに十分な時間だけあり、回転を開始しませんが、削除プロセスには1秒かかる場合があります。
削除アニメーションは、フェードと縮小、フェードと移動、またはユーザーがスピナーを認識するのに十分なスクリーン時間を提供するその他のもののブレンドである場合があります。また、ロードスピナーが不要になり、操作できなくなり、コンテンツがロードされて準備ができたことを伝える必要もあります。
読み込み中のスピナーが完全に削除されてコンテンツとやり取りするのを待つ必要がないことは明らかです。
なぜそれが心配だとは思わないのですか？
一般的に認識可能なスピナーを使用する場合（そして使用する必要がある場合）は、ほんの少しでも、視聴者が彼らが見たものを知るのに十分な情報を提供し、コンテンツの読み込みが非常に速い場合はそれを無視します。
予測できない期間の操作を処理するための私の通常のアプローチは、あなたが提案しているものと正反対のことをすることです。 ）期間。
これにより、インジケーターの点滅が速くなり、間違いのように見える問題が回避されます。
- 操作がすぐに完了する場合は、結果をすぐに表示し、「ロード」インジケーターが表示される前に表示をキャンセルできます。
- 操作に長い時間がかかる場合は、ユーザーが実際に遅延したことに気付くのに十分な時間が経過する前に、インジケーターがスケジュールどおりに表示されます。
スピナーを遅らせる正確な時間は、実行中のタスクと、ユーザーが期待する時間はある程度かかりますが、ユーザーが「たぶん私のクリックしませんでした」と再試行してください。 （必要に応じて、読み込みスピナーを、クリックが受信されたことを示すさらに微妙な非永続的なインジケーターとペアにすることで、これを軽減できます。）
これは、ブラウザのキャッシュに既にあるかどうかに関係なくデータを表示する場合に最も便利です。つまり、ブラウザにすでにデータがある場合は、すぐに表示できます。そうでない場合は、サーバーのラウンドトリップを待機する必要があります。つまり、非常に高速な応答、比較的低速な応答、およびその間の応答がほとんどないことになります。
これをWebに実装する簡単な方法は、すべての「遅延表示」ロジックをCSSに詰め込むことです。DOMに関する限り、リクエストが行われたときにスピナーを表示し、リクエストが完了したときにスピナーを削除するだけです。非常にシンプルで、タイミングロジックは不要です。 CSSアニメーションを使用すると、次のように、ユーザーが表示する必要があることが確実になるまでスピナーを非表示にできます。
@keyframes delayVisibility {
0% { opacity:0; }
99% { opacity:0; }
100% { opacity:1; }
}
.spinner {
animation: delayVisibility linear 1s; /* exaggerated; 1s is too long */
}
あなたの問題の解決策は Material Design Motion Guidelines にあります。
モーション持続時間と速度 仮説は、次のことを指定します。
要素が位置または状態間を移動する場合、その移動は待機を引き起こさないほど十分に速くなければなりませんが、遷移を理解できるほど十分に遅くなければなりません。ユーザーが頻繁に目にするので、トランジションは短くしてください。
そして、これは適切に聞こえます。技術的には、ユーザーは、ローダーが移行を完了するのを見るのに費やされた時間の300msなど、別のことに煩わされることはありません。
アニメーションは、Webサイト/アプリケーションの環境内で自然な流れを利用するために、Webサイトおよびアプリケーションに組み込まれています。アニメーションが途中で突然終了した場合、コンテンツがアニメーションの1秒未満で読み込まれたために、ローダーがフィードバックとスムーズな遷移を提供するという主な目的が無効になります。
したがって、ローダーの反応時間は待機が発生しないほど十分速いが、トランジションが十分に遅いという条件で、ローダーの遷移を完了することが正しい選択だと思います。わかります。
Vigetからのこの記事 は、読み込みアニメーションを途中で停止するのではなく、サイクルを終了させることを提案しています（その機能のコードを示しています）。
正しい方法は何ですか？
一般的な考え方は、特に、対話がプロセスに関与している場合、ネイティブの期待を損なうことなく、ディスプレイ上でユーザーに理解させる何が起こっているのかを示すことです。
だから、あなたがしたいことは、ローディングインジケーター（text/animation/icon/etc）を適用することですローディングボタンの隣に（画面の中央でローディングを使いたくない、たとえば）、ただしa）Kartik Iyerの発言十分遅いとb）Madalina Tainaの発言 "<1秒"と "> 1秒"に注意を払います。
あなたにとってそれが誰なのかを理解することは非常に重要です。現代のテクノロジーに携わっている技術的なオタクの子供たちのためにそれをするなら。 24時間年中無休、またはキーボードとマウスを備えたPCを使用するのに苦労している高齢者のために。
操作にかかる時間を事前に知らなければ難しいです。これに対する1つの解決策（@MajoOodで指摘された記事を読んでいないので、そこで言われていることを繰り返す可能性があります）は、進行状況インジケーターのUIにスペースを割り当ててラベルを付けることです。次に、操作が進行状況インジケーターのオンとオフを実際に確認するのに十分な時間がかかっていない場合は、スペースの恒久的なラベルによって、何が起こったのかが視聴者に通知されます。ラベルを変更して、最新の操作にかかった時間を含めることもできます。