空状態

定義

空状態は、画面に表示するデータがまだ一つもないときに現れる画面です。登録したばかりで 何も入っていないカート、一件も届いていないメッセージ受信箱、検索結果がゼロの一覧などが すべてこれにあたります。この瞬間をただの真っ白なページのまま放っておくと、ユーザーは 画面が壊れているのではと不安になります。うまく作られた空状態は、いま何がないのか、 なぜないのか、そして次に何をすればいいのかを短く案内し、とっつきにくい白紙を次の行動へ 自然につなげる案内板に変えてくれます。データがないという事実そのものよりも、その空白を どう説明し、どう埋めるように導くかのほうがずっと大切です。

なぜ重要か

空状態は、ユーザーがサービスで最初に出会う画面になることがよくあります。登録直後は 当然まだ何のデータもないからです。このとき画面が空っぽだと、ユーザーは何から始めれば いいのか分からず、そのまま離れてしまいがちです。逆に空状態が最初の一歩をていねいに 案内してくれれば、ユーザーはすぐに何かを始め、サービスへ自然に足を踏み入れます。 だから空状態は、事故や例外ではなく、次の行動への招待として扱うべきです。また検索結果が ないときのように一瞬だけ通り過ぎる空状態でも、なぜ結果がないのか、どうやって試し直せば いいのかを伝えれば、ユーザーは行き詰まらずに探し続けられます。第一印象とつまずきの瞬間を 同時に受け持つ画面なのです。何もない瞬間こそ、サービスがユーザーをどれだけ細やかに 気づかっているかが、かえってはっきりと表れる場面です。

よくある間違い

• 空っぽの画面を何の案内もなく、ただの白紙のまま放置してしまうことです。ユーザーは データがない正常な状態なのか、画面が壊れているのか区別できず、何をすればいいのか 分からないまま離脱しやすくなります。
• データがない状態と、読み込み中の状態を区別しないことです。まだ取得している途中なのに 結果がないと決めつけてしまうと、ユーザーはありもしない問題で混乱してしまいます。
• 次に何ができるかの案内はなく、残念だという言葉ばかり並べてしまうことです。共感の メッセージだけではユーザーは次の行動へ進めず、結局は画面の前で立ち止まったまま、 何をすべきか見つけられなくなります。

実務のヒント

• 空状態は、アイコン一つ、一行の説明、そして次の行動を開くボタンの組み合わせを基本の 骨組みにしましょう。この三つがそろうだけで、白紙が自然と次の行動への招待に変わります。
• 何がないのかだけでなく、なぜないのか、どうやって埋めればいいのかまでいっしょに 伝えましょう。とくに検索結果がないときは、キーワードを変えてみるといった具体的な 次の一手を示すと親切です。
• データがない空状態と、まだ読み込んでいる最中のローディング状態は必ず別々に扱いましょう。 この二つを混ぜてしまうと、ちゃんと届いている途中のデータを、ないものと誤解させて しまうことがあります。

関連概念