空状態

Empty state

一覧や検索結果が0件のときに、その旨と次にとれる行動をあわせて示す案内画面。

  • りんご
  • みかん
  • ぶどう
  • もも

○ 使う場面

  • 検索・フィルタの結果が0件になったとき
  • 初回利用でまだデータが1件もない状態(オンボーディング直後の一覧など)

× 避ける場面

  • 読み込み中で結果が確定していないとき(→スケルトンスクリーンやローディングスピナー)
  • データが存在しないのではなく、エラーで取得に失敗しただけのとき(専用のエラー表示にする)

別名

エンプティステート、0件表示

近縁種との比較

空状態は単独の部品というより、他の一覧・検索UIの「0件だったときの状態」として現れる点が特徴である。良い空状態は単なる空メッセージではなく、条件のリセットや代替提案といった次の行動を必ず提示する。

近縁種違い・使い分け
スケルトンスクリーン読み込み中でまだ結果が確定していない状態を示すスケルトンスクリーンとは、結果が0件だと確定した後に出す点で区別される。
ローディングスピナー同じく読み込み中を示すローディングスピナーとも、結果が0件だと確定した後に出す点で区別される。

分類

機能・役割
  • ナビゲーション
  • 入力・操作
  • 表示・整理
  • フィードバック・状態
表示レイヤー
  • インライン
  • 固定・追従
  • オーバーレイ
  • 全画面・遷移
複雑さ
  • 単体パーツ
  • 複合パーツ
  • セクション