ローディング スピナーは UX キラーです! これが代替案です
公開: 2021-04-29私たちはあなたが待つのが嫌いであることを知っています。 みんなしている。
2017 年の調査で、Google は次のことを発見しました。
- 1 ～ 3 秒の読み込み時間で、直帰率が 32% 増加しました。
- 1 ～ 5 秒の読み込み時間で、直帰率が 90% 増加しました。
- 1 ～ 6 秒の読み込み時間で、直帰率が 106% 増加しました。
正当な理由がない限り、人々は待つことを好みません。待ち時間が長ければ長いほど、その理由は積み重なっていきます。 これが、システム ステータスの可視性が、UI デザインに関する Nielsen の 10 のユーザビリティ ヒューリスティックの 1 つである理由です。 システム ステータスの可視性とは、次のことを意味します。
「デザインは、妥当な時間内に適切なフィードバックを通じて、何が起こっているかを常にユーザーに知らせる必要があります。」
そこでローディング インジケーターの出番です。良いローディング インジケーターは次のとおりです。
- アプリケーションが動作していることをユーザーに知らせます。
- 待機を許容できるようにします。
- ユーザーに何かを見てもらいます。
UI デザインで最も一般的な読み込みインジケーターは、ご想像のとおり、読み込みスピナーです。
しかし、境界を押し広げ、革新的なソリューションを発見するために、一般的な慣行に疑問を抱かなければならない場合もあります。 この場合、ローディング スピナーには、設計者があまりにも長い間見落としてきた欠陥があります。
スピナーの設計: スピナーの読み込みがうまくいかない理由
ローディング アニメーションに関する限り、特に 10 秒以上待機する場合、ローディング スピナーは残念な選択です。 なんで？
短い話から始めましょう。
ローディング スピナーについて最初に思い出したのは、10 年以上前のことで、ユーザー エクスペリエンスについて学ぶずっと前のことです。 学校のコンピューター室で、運命的で恐ろしいものに出会いました。友人と私はそれを「死の糸車」と呼ぶことを学びました。 macOS 待機カーソルの珍しい名前ではないことがわかりました。
How-To Geek の macOS 待機カーソルの画像。
死の糸車と同じように、スピナーをロードしてもフィードバックはありません。進行の兆候はありません。 それらは無限に渦を巻いており、アプリケーションが進歩したかしていないかについては何も教えてくれません。 ユーザーにとってはいらだたしく、急いでいるときはまったく怒りを覚えます。
次のような質問をすることがあります。
- ロードはいつ終わるの？
- ほぼ完成ですか？
- 壊れていますか？
しかし、あなたの質問は答えられないので、あきらめます。
さらに悪いことに、スピナーは時間を遅くします。
ワークアウトの途中で、タイマーが終了するのを切望したことはありませんか? または、授業を逃れるのが待ちきれませんか？ このような場合、時計を見てあてもなく待っていると、時間がぐらつきます。 スピナーも同じことを行いますが、カウントダウンの利点はありません。 彼らはレストランでお腹が鳴るのを待っているようなものです。 ただ、シェフが注文したかどうかはわかりません。
確かに、アニメーションの読み込みは実際には時間を制御しませんが、作業を楽しむことは作業に対する認識に影響を与えます。 私たちが楽しい時間を過ごしているとき、時計は速くなります。 待つのが嫌になると、遅くなります。
繰り返しになりますが、スピナーはユーザーにあきらめを促します。
さらに、コンテンツがユーザーにとって価値のあるものであること、つまり期待を超えないまでも満たすことが望まれます。 たまたまページが期待どおりのものでなかった場合、スピナーを長時間見つめていたことによるフラストレーションが加わり、被害がさらに大きくなります。
確認するには、読み込みスピナー:
- 進歩の兆しを見せません。
- ユーザーの質問に答えられない。
- それよりも待ち時間が長く感じます。
- ユーザーの期待に応えません。
ローディング アニメーション オプション
ローディング スピナーに対するユーザーのフラストレーションを解消する最善の方法は、最初からそのフラストレーションを取り除くことです。 つまり、存在しなくなるまで待機時間を短縮するか、別の進行状況インジケーターを使用します。
繰り返しになりますが、適切な読み込みまたは進行状況インジケーター:
- ユーザーの時間の認識をより速く感じさせます。
- アプリケーションが進行しているという感覚を与えます。
UX デザインで使用される主な 2 種類の進行状況インジケーターは、不確定進行状況インジケーターと確定進行状況インジケーターです。 決め手は時間です。
読み込みにかかる時間がわからない場合は典型的な読み込みスピナーを使用し、わかっている場合は進行状況バーなどの確定インジケーターを使用するという考え方です。 明確な読み込みアニメーションは、ユーザーがどれだけ長く待たなければならないかを、完了率、残り分数、バーがいっぱいになるなどのヒントで示します。
マテリアル デザインの不確定な進行状況インジケーターと確定的な進行状況インジケーター。
この戦略の問題点は、読み込みにかかる時間を正確に把握できないことです。 あなたは知識に基づいた推測をすることができますが、それだけです。 これが、多くのカウントダウン インジケーターが次のようにカウントされる理由です: 残り 10 分、残り 9 分、残り 8 分、残り 7 分、残り 10 分、残り 8 分など。 読み込みが完了し、最終的には 0 になりますが、ユーザーが乗車する前ではありません。
アニメーションの読み込みを最大限に活用する方法
スピナーとプログレス バーの代替ソリューションについては、以下で説明します。 それでも、より伝統的なルートを選択したり、UX 調査を実施したりして、これらがオーディエンスにとって好ましい選択であることがわかった場合は、従うべきガイドラインがいくつかあります。
まず、ローディング スピナーは 10 秒未満の待ち時間にのみ使用します。 10 秒を超える遅延の場合は、明確なインジケーターを使用して進行状況の錯覚を作成し、ユーザーの関心を長く維持します。
スピナーやその他のロード アニメーションをデザインする場合:
- できるだけ創造的で楽しいものにする
- オンブランドにする
- できるだけ正確な完了見積もりを提供する
- ユーザーが待機している理由を説明する
– 結果を計算するまでお待ちください。
– セットアップ中ですので、しばらくお待ちください。
– データを収集しています。
– 30 個のファイルのうち 21 個がチェックされました。 - ページが 1 秒未満で読み込まれる場合は、アニメーションを使用しないでください。
Hacker Noon のローディング画面 gif の例。
ローディング アニメーションを改善することはできますが、それはこの記事の目的ではありません。 ローディング アニメーションがどれほど面白いものであっても、待ち時間が強調され、明確な進行状況が得られないためです。
それがスケルトンスクリーンの目的です。
スケルトン画面でのプログレッシブ ロード
スピナーとスケルトン スクリーンを比較した調査では、スケルトン スクリーンの方が速く認識され、ユーザーの満足度が高いことが明らかになりました。 それで、この想定されたヒーローは何ですか？
ご存知のように、スピナーの読み込みは、ユーザー インターフェイスが完全に読み込まれるまで画面を占有し、その時点ですべてが一度に表示されます。
スケルトン画面は異なる戦術を使用し、ロードが進むにつれて UI の各部分を明らかにします。 インターフェイスのデザインのスケルトン アウトラインから始まり、ロードが完了すると要素が表示されます。 この戦略は段階的進行と呼ばれ、詳細は通常、スケルトン アウトライン (プレースホルダー UI とも呼ばれます)、テキスト、画像の順に表示されます。
Facebook Engineering の Facebook スケルトン画面のサンプル。
LinkedIn、Instagram、Facebook、Google などの有名企業で使用されているスケルトン スクリーンは、受動的な待機を能動的な待機に変えることで、読み込み画面のエクスペリエンスを向上させます。
受動的な待機とは、スピナーがぐるぐる回るのを見ているときのように、何もせずにただそこに座って待っているときです。 アクティブな待機とは、待っている間に進歩しているように感じる何かをすることです。 スケルトンの読み込みは、画面が更新されるたびに処理する新しい情報をユーザーに提供することで、アクティブな待機を促進します。
このように、スケルトン画面は、待機時間から焦点を外し、目の前で起こっている実際の進行状況の証拠に焦点を合わせ、読み込みプロセスがより速く感じられるようにします. また、ロードされたものと残っているものを明らかにするため、ユーザーは正確なユーザー インターフェイスの期待を構築できます。
Instagram のプログレッシブ読み込みの動作。
スケルトン画面を実装するときは、プレースホルダー UI が最終的な UI の外観を正確に表していることを確認してください。 そうしないと、期待と現実の間にギャップが生じます。
Medium や Google Images などの一部のツールや Web サイトでは、プログレッシブ イメージ ロードを利用して進行に別のステップを追加しています。 プログレッシブ画像読み込みは、画像が完全に読み込まれる前に、画像の主な色またはぼやけたバージョンを表示することです。
また、ロードを示すために、スケルトン画面内でロード アニメーションを設計することもできます。 たとえば、Facebook では、スケルトン画面のグレー表示されたテキスト バーが、ページの読み込み時に独自の読み込み動作を実行します。
ユーザーは、左から右へのローディング モーションと、ゆっくりとした安定したローディング モーションを備えた画面を、より高速であると認識します。
スケルトン画面の懸念事項
いつものように、批評家がいます。最大の懸念は、優れたコンテンツを期待しているユーザーにとって、灰色のブロックが退屈で魅力のないソリューションであるということです.
ある程度、この懸念は骨組みの画面の要点から外れています。つまり、急速に進行中の優れたコンテンツをほのめかしているということです。 ユーザーはロード画面をまったく期待したり望んだりしませんが、スケルトン画面は、インターフェースが機能しており、数秒で利用可能になることを知っているという快適さを提供します.
もちろん、各進行段階の間の待機時間が長すぎると、灰色のブロックがいらいらします。 待ち時間が長ければ長いほど悪化します。 これは、最初に確立したように、誰も長く待つのが好きではないため、すべての読み込みインジケーターに当てはまります。
スケルトン画面を使用すると、複数の進行フェーズを実装して、ユーザーのフォーカスをアクティブにし続けることができます。 灰色のプレースホルダー UI からすべてを一度に表示する、設計の不十分なスケルトン画面があり、目的を達成できません。 効果的なプログレッシブ ローディングでは、コンテンツの準備が整うとすぐにコンテンツを表示し、ユーザーに情報を提供し、興味を持ち、希望を与え続けます。
待機時間が理想よりも少し長い場合は、プレースホルダー UI を表示してコンテンツを読み込む前に、スピナーを数秒間使用することを検討してください。 そうすることで、プレースホルダー UI が実質的な進行状況を示すようになる限り、わずかな時間を稼ぐことができます。
読み込み時間が長すぎる場合は、待ち時間を短縮することが常に最善の選択肢であり、優先事項となります。 Web サイトが遅くなる理由はたくさんあります。
テスト: 優れた UX はユーザーから始まる
ユーザー エクスペリエンスはユーザーから始まります。ほとんどの人にとって正しい答えであっても、すべての人に正しい答えはありません。 そのため、優れたユーザー エクスペリエンスを提供するには、まずアイデアをテストして、視聴者に最適なものを確立する必要があります。
昔は、最高のスピナー デザインを提供することが、できる限りのことでした。
さて、適切に設計されたプログレッシブ ローディングは、検討する価値のある代替手段です。 知覚される待ち時間を短縮し、進歩の感覚を提供し、ロードするために何が残っているかを示し、ユーザーの期待をアドバイスします。
しかし、だからといって、ベスト プラクティスに疑問を抱くのをやめる時が来たというわけではありません。 長くて有益でないローディング アニメーションを使用する時代は過ぎ去ったかもしれませんが、いつの日か、スピナーをローディングする場合と同じように、スケルトン スクリーンの制限を克服するものがあるでしょう。
それまでは、UX を改善する方法について詳しく知りたい場合は、お問い合わせください。 私たちは戦略について話すのが大好きです。