アニメーション化された進行状況インジケーターを有利に展開するためのベストプラクティス

公開: 2017-01-31

PCを使用したことがある場合は、システムの起動時に表示されるアニメーション化されたWindowsシンボルに気付いているかもしれません。今日見られるものに発展するには、デザインとアニメーションの進化が必要でしたが、Windows 1995に戻ると、画像はまったく動きませんでした。考えている方もいらっしゃるかもしれませんが、なぜこれらのアニメーションインジケーターを使用するのでしょうか。

しかし、これを考慮してください。アクションが完了したことを確認するために、空白の画面を待って見たいですか？または、画面が再び表示されるまで、何か意味のあるもので楽しませ続けますか？

ユーザーインターフェイスデザインの最も重要な機能の中には、システムステータスとしてその進行状況を表示する機能があります。ユーザーは、システムがそのアクションを認識しており、それに応じて応答しているかどうかを知る必要があります。アニメーション化された進行状況インジケーターは、広範なテキストまたはビデオ機能を使用せずに、ほぼいつでも操作の現在のコンテキストを表示できます。これにより、進行状況がバックグラウンドで完了しているときにシステムステータスを提供するのに理想的です。

システムの進行中にユーザーと対話することが重要なのはなぜですか？

アプリやウェブサイトからの迅速な対応が気に入らない人はいますか？これはユーザーにとって大きな意味がありますが、不変の一貫性で実行することはできません。アプリケーションの速度を妨げる可能性のある特定の要因が常に方程式に追加されます。これらの要因には、主にインターネット接続の不良、高負荷によるパフォーマンスの低下、さらにはプログラムの障害が含まれます。このような状況では、ユーザーの緊張を最小限に抑え、アプリが機能していて進歩しているという安心感をもたらすことが最善の策です。そのためには、ユーザーの忍耐力に時間がかからないように、ユーザーにフィードバックを提供する必要があります。

ユーザーをフィードバックに夢中にさせる

待機時間は、ユーザーがアクションを実行するとすぐに始まります。しかし、それをさらに悪化させるのは、システムの進捗状況を表すための適切な指標がないことです。ユーザーは当然、システムに時間がかかっているという通知を表示できない場合、アプリが応答しなかったと想定します。結果は、アプリが時間内にフィードバックを提供しなかったという理由だけで、横行するクリックからユーザーの放棄にまで及ぶ可能性があります。

進行状況を再開したり、システムを更新したりするために配線されたアクションは、ロードに予想よりも時間がかかる場合に行われることがよくあります。繰り返しになりますが、フィードバックがない場合、バックグラウンドで行われたとしても、リクエストの応答を示すことはできません。そのため、必要なときにいつでもアプリのシステムの進行状況を示すために、アニメーション化されたインジケーターを導入する必要があります。

1秒より長くかかるアクションに進行状況インジケーターを使用するにはどうすればよいですか？

通常、アプリの読み込みに1秒もかからない場合、進行はほとんど妨げられていないように見え、ユーザーはフォーカスを失うことはありません。ただし、読み込み時間が1秒を超える場合は、ユーザーの関心を維持するための対策を講じる必要があります。短い遅延が目立つようになり、ユーザーはアプリケーションで実行されているタスクの有効性についてさまよい始めます。

そのため、アプリは進行状況インジケーターを介して応答し、待機の信頼できる理由を提供し、制御不能になる前にユーザーの不確実性を減らす必要があります。ロードに1秒未満かかるアクションは、必ずしもアニメーションインジケーターを必要としないことに注意する必要がありますが、画像は可能です。アクションが実行されるたびに画面上で点滅し続けるアニメーションは、ユーザーの方向を混乱させる可能性があるため、これをお勧めします。アニメーション化された進行状況インジケーターは、長時間の待機の影響を中和し、ユーザーをアプリやWebサイトに引き付け続けるために最適に使用されます。

進行状況インジケーターの種類

不確定：アニメーション化された待機インジケーターは、ユーザーと通信し、最後のユーザーアクションについてユーザーに通知するように設計されています。最も一般的で最も単純なタイプの待機インジケーターは「不確定」です。このようなタイプのインジケーターは、進行状況を完了するのにかかる可能性のある時間を認識せずに、アクションが完了するのを待つようにユーザーに指示します。不確定な進行状況インジケーターは、できれば2〜10秒以内の高速アクションに使用する必要があることはほぼ理解されています。それより長くなると、ユーザーの忍耐力に影響を与える可能性があります。これにより、Webサイトのバウンス率とアプリケーションの放棄が増える可能性があります。
決定：「決定」の進行状況インジケーターの場合、時間はアニメーション内でかなりの範囲になります。このようなタイプのインジケーターは、進行状況を完了するために必要な概算または正確な時間をユーザーに通知し続けます。それらは、開始した場所からの進捗状況、達成された量、および待機を終了するのにどれだけ多くかかるかを示すため、かなり人気のあるタイプの待機インジケーターです。これにより、ユーザーは、アニメーションを通じて進行状況が表示されていることを確認しながら、Webサイトやアプリケーションに継続的に関与する意欲を高めることができます。

ループアニメーションインジケーターと完了率インジケーター

ループアニメーション：ループアニメーションインジケーターは、おおよそまたは正確な読み込み時間を表示せずに進行状況を表すように設計されています。そのため、ループされたアニメーションの進行状況インジケーターの大部分は不確定です。たとえば、Windows 7の進行状況インジケーターは、進行状況を完了するのにかかる正確な時間のフィードバックなしで、同じアニメーションの繰り返しを表示するように設計されています。その上、それは起動機能からインターフェース操作のセットアップと他の形式のデータロードまですべてを含みました。これらの2つの理由により、ユーザーは、Webサイトまたはアプリケーションの読み込み時間を表すためにループ待機インジケーターを表示することを好みません。
完了率インジケーター：名前が示すように、完了率インジケーターは、アニメーションスパン、円、またはバーを0％から100％で埋めることにより、読み込みの進行状況を示します。進行状況を完了するのにかかる時間を示しているため、完了率インジケーターは確定待機インジケーターに分類されます。この特定の品質については、完了までに10秒以上かかるタスクに完了率インジケーターを使用するのが最善です。

調査によると、10秒は平均的なユーザーの忍耐力のしきい値です。それを超えると、ユーザーは無謀になり、さらなるフィードバックが提供されるまで焦ります。ロードに10秒以上かかるプロセスの完了率インジケーターを表示することで、ユーザーの忍耐力を損なうことなく、ユーザーをWebサイトまたはアプリケーションに夢中にさせることができます。

進行状況インジケーターを効果的に使用する方法は？

アプリケーションやWebサイトで進行状況インジケーターを効果的に使用することは、成功と失敗の違いを意味する可能性があります。ここでは、進行状況インジケーターがマークまで機能することを確認するためのヒントをいくつか紹介します。

待機の理由についてユーザーに通知する：バックグラウンドで行われている読み込みの進行状況をユーザーに知らされないようにするのは、新人の間違いです。これにより、忍耐力を失い、アプリケーションやWebサイトを終了する傾向が高まります。さらに理解を深めるために、アニメーションの進行状況インジケーターとテキストを表示することで、ユーザーに情報を提供し続けることができます。どのプロセスが具体的にターゲットにされているかを示すことができます。たとえば、「グラフィックの読み込み」や「マップの読み込み」など、どのプロセスが実行されているかを読み取る読み込みバーとテキストを使用して、ビデオゲームの待機の進行状況を表示できます。
より長い期間を必要とするタスクの簡単な時間の見積もりを示してください：マイクロスケールに物事をとらないでください。簡単な見積もりを提供することで、ユーザーの関心を維持できます。あなたが守ることができない約束をだまして、ユーザーを苛立たせ、彼らを去らせることができます。
正確な所要時間を表示する：ただし、通常、ユーザーの平均待機制限よりも時間がかかる操作の場合は、進行状況インジケーターを確定することを選択する方が賢明です。正確な読み込み時間が脚光を浴びるので、理想的な選択は、完了率の進行状況インジケーターです。処理にさらに時間がかかる操作については、進行状況を強調するためにいくつかのステップを使用することを検討してください。
進行状況を維持する：タスクの読み込み中は、進行状況バーの一貫性を目指してください。いくつかの経験の後、プログレスバーは、アクションがどれだけ速く完了するかについての期待をユーザーに開発させます。その結果、進行中のフリーズは、ユーザーの期待に深刻な打撃を与える可能性があります。たとえば、バーが99％に達し、この状態が長期間続くと、大多数のユーザーはこの動作に不満を感じ、アプリケーションがフリーズしたと信じてしまいます。これに対抗するために、プログレスバーが瞬時に着実に移動することを示すことで、プログレスバーでこれらの一貫性のない遅延をマスクできます。
実際の速度よりも速くバーに進行状況を表示する：生の速度は、進行状況バーをより速く感じさせるために作成できる単純な認識によって表すことができます。これを実現するには、最初はゆっくりと移動し、最後を閉じるときにペースを選択するようにアニメーションを設計します。これにより、タスクを完了する時間を損なうことなく、スピーディーな進行の錯覚が生まれます。
気を散らすものを提供する：創造的な進捗指標を導入することで、ユーザーの時間の認識を大幅に減らすことができます。進行中にアプリが興味深いテキストまたは視覚的な詳細を表示する場合、アクションを完了するためにかかる時間からユーザーの心をそらす可能性があります。短い動画、興味深い事実、アニメーション、さらには些細なゲームなど、ユーザーを忙しくさせるためのさまざまなものを提供できます。

代替案–アニメーションの進行状況インジケーターに対してスケルトン画面を使用する

プログレスアニメーションの指標は、待つことから生じるほとんどすべての悪い感情を揺さぶることができますが、一部の聴衆はこれらの戦術に対してかなり回復力があります。進行状況インジケーターを使用せずにユーザーを待機させるいくつかの良い選択肢の中には、スケルトン画面と呼ばれる方法があります。一時的な情報コンテナとも呼ばれるこれらの手法では、読み込みバーを開く代わりに、進行状況をリアルタイムでユーザーに表示します。完全にストックされるまで、空白の画面がそのコンポーネントと要素で徐々に満たされることを想像してみてください。これにより、アプリケーションが読み込み時間で動作していて、表示された進行状況で待機が報われているように見えます。

これにより、オーディエンスはWebサイトやアプリケーションに関心を持ち続けるだけでなく、次のタスクを完了するためのトリガーの準備もできます。進行状況インジケーターもユーザーを満足させる優れた手段ですが、読み込みの進行中にスケルトン画面が維持するユーザー内のエネルギーを維持できません。

最終的な考え

アプリやウェブサイトの操作がどれほど迅速であるかは関係ありません。招待されていない処理時間が常に発生する可能性があります。完了率インジケーターや読み込みスピナーなどのアニメーション化された待機進行インジケーターを使用すると、進行中のプロセスとシステムの現在の状態をユーザーに安心させることができます。その結果、Webサイトまたはアプリケーションにとどまり、ロードを待って残りのタスクを続行する可能性が高くなります。プロセスが完了するのに必要な時間を計算するには、適切なタイプの進行状況アニメーションインジケーターを割り当てる必要があります。

ループインジケーターは2〜10秒かかる操作に最適ですが、完了率インジケーターを使用すると、より時間のかかる操作を支援できます。ループアニメーションとスケルトンスクリーンの場合、スケルトンスクリーンは数ミリ秒を超えるアクションを実行でき、それでもユーザーにクールに保つことができるため、スケルトンスクリーンを選択するのが最適です。