ローディング

定義

ローディングは、いま画面が何かを読み込んでいる最中だということをユーザーに伝えるための状態です。 くるくる回るスピナーを見せたり、実際のコンテンツが入る場所にグレーの骨組みだけを先に敷いておく スケルトンを使ったりして、もうすぐ中身が埋まることを予告します。サーバーからデータを受け取っている あいだ画面をまっさらな白紙のままにしておくと、ユーザーは止まっているのか壊れているのか分からず 不安になります。ローディング表示はまさにその空白の時間を埋めて、いま一生懸命動いているので もう少し待ってほしい、という合図を代わりに伝えてくれます。一覧を読み込むとき、画面を初めて開くとき、 ボタンを押して保存するときのように、結果がすぐに返ってこないほとんどの場面でこのローディング表示が活躍します。

なぜ重要か

人は画面が反応せずに止まっていると、実際にかかった時間よりもずっと長くもどかしく感じます。 何の表示もない数秒は永遠のように感じられ、ユーザーはリロードを押したり、いっそ画面を閉じて しまったりします。ローディング状態はこの不安をなだめる仕掛けです。何かが進行しているという 視覚的な合図があるだけで、人はずっと辛抱強く待てるようになります。とくにスケルトンは、最終的な 画面がどんな形で埋まるのかを先に見せてくれるので、実際の速度は同じでも体感速度が目に見えて 速くなります。結果がいつ来るのか予測できるようになるだけで、待ち時間の質が変わるのです。 逆にローディング表示がないと、どれだけサーバーが速くても画面が鈍く頼りない印象を与えてしまいます。 結局ローディング状態は、実際の性能を超えて、ユーザーが待ち時間をどう感じるかという体感の問題を 扱う仕掛けなのです。同じ3秒でも、よく設計されたローディングの前では短く感じられ、何の表示もない 静けさの前ではただひたすら長く感じられます。

よくある間違い

• ごく短い待ち時間にまでローディング表示を出してしまうことです。0.1秒で終わる処理にスピナーが パッと点滅すると、かえって画面が雑然と不安定に見えます。目障りなちらつきだけが残ります。
• 1秒以上かかっているのに、何の表示もなく画面をそのままにしておくことです。ユーザーは止まったと 勘違いして同じボタンをもう一度押したり、離脱してしまったりします。
• スケルトンの形が実際のコンテンツと全然違うことです。骨組みと実際の画面のサイズや位置が ずれていると、中身が入ってくる瞬間にレイアウトがガクッと跳ねて、かえって散らかって見えます。

実務のヒント

• 待ち時間が短く結果の位置を予測しにくいときはスピナーを、入ってくるコンテンツの場所がはっきり しているときはスケルトンを使いましょう。スケルトンは最終的な姿を先に見せるので体感速度を目に見えて高めます。
• 1秒以上かかる処理には必ずローディング表示を置き、ごく短い待ち時間にはあえて出さないように しましょう。一瞬のちらつきは、かえって画面を不安定に見せてしまいます。
• スケルトンのサイズと配置は実際のコンテンツにできるだけそっくり合わせましょう。場所が正確に 予約されていれば、中身が埋まるときにレイアウトが跳ねず、なめらかにつながります。

関連概念