- ローディング画面は、システムが何をしているのかを可視化することで、ユーザー体験を向上させられる。
- 適切なローディング画面を作るために、考慮すべき点がいくつかある。
- デザインの前に、ローディングの仕組みを確認する必要がある。
- ローディングがユーザー入力を妨げるのか、進行状況を把握できるのか、どれだけ多くの情報を読み込むのか、モバイル体験はどうか、など。
- パッシブローディング（システムが事前に読み込むもの）なのか、アクティブローディング（ユーザーの行動に応じて読み込むもの）なのか、など。
- 一度に表示する量による変化
- 複雑なコンポーネントの場合は、1つずつ表示するほうがよいことがある。
- 比較的シンプルなコンポーネントの場合は、ロード完了後にまとめて表示するほうがよい。
- コンポーネントの数が多い場合は、遅延ローディングが必要になる。
- 無限スクロール、もっと見るボタン、ページネーションなどのアプローチを活用。
- 頻度による変化
- 継続的に変化する場合は、ローディングを見せるUIを最小限にすべき。
- Google Driveのリアルタイム保存UIが参考になる。
- ときどき変化する場合は、すぐにユーザーへ見せるのがよい。
- 閲覧中のコンテンツが更新されたので、画面を再読み込みするよう促すポップアップなど。
- 所要時間による変化
- 進行状況を明確に把握できるのか、それとも不確実なのかをまず検討する必要がある。
- 0.1秒未満の場合
- 即座に結果を表示すればよい。
- 場合によっては、疑似的なローディング画面を見せるほうがよいこともある。
- ユーザーにとって重要だと感じられる処理である場合（保存など）、あるいはユーザーがアクションを取れるだけの遅延時間が必要な場合（メール送信の取り消しボタンなど）。
- 0.1秒〜1秒の場合
- 非常によくある遅延時間で、ユーザーの目にも留まりにくいため、ローディング画面を追加しないほうがよい。
- 1秒以上の場合
- 1秒を超えた瞬間にユーザーは待ち時間を認識するため、適切なローディング画面を追加するのがよい。
- ロードされるコンポーネントが小さい場合は、ローディングスピナーがよい選択肢。 （ファイルアップロードなど）
- 画面が切り替わる場合は、スケルトンローディング画面がよい。
- 画像が主要コンテンツである場合は、主要な色を抽出してぼかし表示すると非常によい。
- 2秒〜10秒の場合
- 「5秒ほどかかります」のような時間表示は効果的なことがある。
- プログレスバーは常によい選択肢。
- いくつかの段階で構成される場合は、その段階を見せるのも方法。
- 明確な段階がない場合でも、一般的なメッセージを使える。 （サーバーに接続中 など）
- 10秒以上かかる場合
- 進行状況を明確に把握できるなら、パーセンテージや残り時間などを表示するのがよい。 （ファイルアップロードの50%など）
- ただし99%で止まるのは非常に致命的なので、その可能性があるなら別の方法を使うべき。
- さらに長くかかり、進行状況を明確に把握できないなら、完了時にメールなどで通知すると案内し、ユーザーが操作できるようにするのがよい。
- 完全にバックグラウンドで処理し、ユーザーのあらゆる操作を妨げないようにするのもよい。 （Google Driveのアップロード進行状況など）
3件のコメント
良い記事をありがとうございます。
. 私は250msまでは表示しないのですが、これを1秒まで延ばしても大丈夫かは分からないですね
ちょうどローディング画面に関する根拠を探していたところでした！ありがとうございます（笑）
要約が少し長くなりすぎた気もしますが……ともかく良い内容が多かったので、できるだけ持ってきました。
フェイクのローディング画面があると信頼性が高まる、という話は興味深いですね。Hacker Newsのほうでもその話題がかなり出ていました。