私が取り組んでいるWebアプリケーションでは、典型的な変数(接続速度、PC速度、関係するデータの量、ホストの負荷など)に応じて、通常数秒以上かかるいくつかのアクションがあります。これらについては、特定のコンテキストに応じて、進行状況バー、または「お待ちください」メッセージが表示された読み込み中のスピナーを表示します。 (これからは、両方とも「待機インジケーター」と呼びます)
これはうまくいきます...アクションが実際に1秒以上かかる場合。しかし、アクションの実際の所要時間が約500ミリ秒未満の場合、待機インジケーターが現れてすぐに消える効果はグリッチのように見えます。
この状況を改善するには、少なくとも2つの方法が考えられます。
より良い実践を示すかもしれないこの分野の研究はありますか?これに優れたソリューションがある特定のサイトはありますか?ベストプラクティスとは何ですか?
表示するために特定の時間を待つのではなく、待機インジケーターを(css遷移を使用して)1秒以上フェードインしようとしたところ、非常に良い感じがしました。待機時間が実際にはわずか100msの場合、待機インジケーターが表示され始めて、それが消えたのがほとんどわかりません。
待機時間が特定の事前設定時間を超えた場合にのみ、待機インジケータを表示するだけで済みます。
私が保守しているアプリケーションでも同じことを行っていますが、インジケーターを表示する前に1秒待つのは十分な時間であり、インジケーターを点滅させたりグリッチのように見せたりせずに迅速なプロセスを完了することができます。
それがかかった時間を示してみてはいかがですかさらにあなたの砂時計の動作に?
また、技術者で「500ミリ秒で完了」と表示する代わりに、「1秒未満で完了」と表示する
モバイルGmailもこれを行います。ローディングインジケーターは画面下部のリボンです。更新が完了すると「更新済み」と表示されます。非常に目立たないが、何かが読み込まれていることは明らか。
Basecampモバイルには事前に読み込みインジケーターがあり、予想よりも時間がかかる場合は、「読み込み中です。しばらくお待ちください」と表示され、余分な長い読み込み時間が確認され、アプリがフリーズしないことを確認します。
私は2段階のアプローチを採用します。
ユーザーが何らかのアクションを開始したら、ボタンを無効にして、ボタンの横に[Loading something]を少し表示します。
システム内のすべての「アクション」を測定し、250〜500ミリ秒(実際のクライアントサーバーのラウンドタイムによる)にかかるアクションを使用して、「より大きな」ロードアニメーションを追加します。
私たちのウィンドウズフォームアプリケーションの「すべての」アクションでは、マウスカーソルで少し待っているスピナーを開始します。遅いジョブは、画面の中央に「大きな」待機中のスピナーを開始します。本当に遅いジョブは、「大きな」待機スピナーの隣に進行状況バーまたはパーセンテージを表示します。
「待機」を表示しますボタンを押したとき(つまりearlyとして)。ほとんどの場合、高速充填プログレスバーまたは非常に短い寿命の砂時計は楽しいであり、エンドユーザーにとって(このプログラムは高速です!)、「グリッチのように見えるもの」は見たことがありません。 」