ローディングの表現がUXに与える影響
この記事は「DHU Kuriyaゼミ Advent Calendar 2024」12月21日の記事です。
皆さん、こんにちは！
今回は、Webサイトやアプリケーションにおける、ローディングの表現(ローディングアニメーションやプログレスバー)が、ユーザー体験にどのような影響を与えるのかメリットやデメリットを考えていきます！
ローディングアニメーション
YouTubeの動画を見ていると、読み込み中のくるくるが表示されますよね！
このくるくるは、「ローディングアニメーション」「スピナー」「プロセスアイコン」などと呼ばれています。
参考として、ローディングアニメーションの画像をご覧ください！
(特に何かを読み込んでいるわけではありません！)
パッと見ただけで、何かを読み込んでいそうな印象になる表現ですよね。。。！
ローディングアニメーションは、ユーザーが現在の状況を把握することができる表現であると考えます。
少しだけ待機すれば、動画が読み込まれたり、処理が終わりそうということを伝えることができます。
一方で、ローディングアニメーションが10秒表示され続けるなど、長めに表示されていると、問題なく通信できているのか、正常に処理が終わるのか、不安になるのではないでしょうか。
そこで、「プログレスバー」についても見ていきます！
プログレスバー
比較的、長い時間表示されてもユーザーに不安感を与えないのは、「プログレスバー」を用いた表現だと考えます。
例えば、スマートフォンゲームのデータアップデートがある時や、Webサイトにファイルをアップロードする時などに使われていることがあります！
データのダウンロードやアップロードにおいては、単体で使用されることよりも、「12% / 100%」のようなパーセント表示と合わせて使用されることが多いように感じます。
単体で使用する場合でも、左側から右側に進んでいくにつれて処理が進んでいることが分かるため、長時間処理に時間を要するようなシーンでは、ローディングアニメーションよりも適切にユーザーに対して状況を伝えることができます。
このように、同じローディングの表現でも、用途ごとに使い分けることが重要ですね！
では、ローディングの表現がUXに悪影響を与えることがないのか、考えてみたいと思います！
ローディングのデメリット
何も表示されないよりかは、ローディングの表現があることでユーザーに対して安心感を与えることができます。
しかし、安心感を与えているだけで、時間がかかっていることや、ユーザーの操作を止めているという状況には変わりありません。
時間がかかっていることが、ユーザーの環境によるものなのか、Webサイトやアプリケーション側のパフォーマンスの問題なのかを切り分ける必要があると考えます。
例えば、サーバー側の処理で時間がかかっていたり、重たい画像の読み込みが遅いというような原因の場合には、ローディングの表現で解決するのではなく、根本的な改善が必要なのではないでしょうか。
ローディングの表現に頼りすぎて、本来実施すべきパフォーマンスの改善が後回しになったまま、処理や読み込みに時間がかかっているのであれば本末転倒です。
あくまでも、パフォーマンスの良いものを作成した上で、ユーザー側の通信やデバイス等の環境による遅延や、処理にかかる最低限の待ち時間への対応として、ローディングの表現を使うのが良いのではないかと考えます！
Webサイトへのアクセス時に、2秒〜4秒ぐらい読み込み時間がかかると離脱するという3秒ルールのようなものもあるので、処理時間が早いことはとても重要ですね！
2024年に、ビッグローブ株式会社が実施したWebサイトの表示にストレスを感じる時間の調査では、「Webサイトの表示が遅く、ストレスを感じる時間は5秒未満が約4割」という結果が公表されていました。
動画や音声などの、リッチコンテンツが使用されることが増えているので、通信量は多くなっていますが、高速な光回線や5Gなどの通信環境の改善やHTTP/2、HTTP/3などのプロトコルの普及のおかげで補えている部分もありそうですね！
まとめ
今回は、Webサイトやアプリケーションにおける、ローディングの表現が、ユーザー体験にどのような影響を与えるのかを考えてみました。
ローディングの表現といっても、複数の方法があったり、用途によって使い分ける必要がありましたね！
また、Webサイトやアプリケーションの開発側としてできることをやった上で、ローディングの表現を使用するのが良いと考えました！
ちなみに、個人的な推しローディングアニメーションは、Google製品のローディングアニメーションです！
Google PixelシリーズやGoogle Nestシリーズでも見れます！
ローディングのシーンが一部載っている動画があったので、ぜひ見てみてください〜！(2:40〜)