ゴール

ローディング中に良く見かける「ぐるぐる」ってなぜ必要か？を理解する。

やったこと

Reactで開発していく中でよく使うコンポーネントの一つである、「ぐるぐる」コンポーネントを使い回せるよう作成した。使っているCSSのライブラリはTailwind CSS。

export const Loading: React.FC = () => {
  return (
    <div className="w-full h-full flex justify-center">
      <div className="flex self-center">
        <div>Loading...</div> {/* ここにローディング中に表示したい文字やアイコンなど */}
      </div>
    </div>
  );
};

あれ、でもなぜこのぐるぐるは必要なんだっけ、、？と疑問が湧いたので調べてみることにした。

そもそもなぜこのぐるぐるが必要なのか

ぐるぐるを調べると名称は「プログレスインジケータ」らしい。ではこの「プログレスインジケータ」がなぜ必要か。調べていくと以下二つの理由がありそうだということがわかった。

①ユーザーがアプリ内での混乱を防ぐ
②ユーザーが感じる待ち時間が短くなる

①ユーザーがアプリ内での混乱を防ぐ

以下二つの例を見比べてみる。

プログレスインジケータなし

プログレスインジケータあり

例えばある通販サイトを開いた際の挙動だったと想像してみる。
ただ真っ白い画面が表示されて数秒変化なかったら、自分だったら離脱してしまいそう。
でも「プログレスインジケータ」がある画面であれば、5~10秒くらいは待てそう。（サイトによってはもう少し待てるかも）
一つコンポーネントを追加しただけなのに、UXは劇的に向上する。

②ユーザーが感じる待ち時間が短くなる

ある調査では

WebサイトがローディングしているときにCTAすることによって、ユーザーの体感スピードが上がる
ref: https://www.webprofessional.jp/how-to-take-advantage-of-the-psychology-of-speed-perception/

という結果が出たそう。記事中のCTAという言葉はweb上ではインタラクションと言い換えても大きく齟齬はなさそう。インタラクションとは

人間（利用者）によるコンピュータやソフトウェアへの働きかけ（操作など）と、対になる応答（表示の変化など）の組み合わせ、および、その連続や反復のこと
ref: https://e-words.jp/w/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3.html

つまりローディング中に「Loading...」とソフトウェアから人間に応答することによって、ユーザーの体感スピードが上がる、ということが言えそう。

上記二つの理由から「プログレスインジケータ」が必要そうだと考えられる。

まとめ

• 「プログレスインジケータ」でユーザーが画面描画を待つ体感時間は短くなる
• もっと範囲を広げるとユーザーにわかるように何かを応答(表示)することはユーザー体験のために大事

参考記事

• https://goodpatch.com/blog/progress-indicator
• https://www.webprofessional.jp/how-to-take-advantage-of-the-psychology-of-speed-perception/
• https://e-words.jp/w/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3.html