エンプティステート
Empty state
別名: 空状態、Blank slate、Zero data state、0件表示
生態（さわってみる）
- りんご
- みかん
- ぶどう
- もも
該当する項目がありません
一言定義
一覧や検索結果が0件のときに、その旨と次にとれる行動をあわせて示す案内画面。
分類
使う場面
- 検索・フィルタの結果が0件になったとき
- 初回利用でまだデータが1件もない状態（オンボーディング直後の一覧など）
避ける場面
- 読み込み中で結果が確定していないとき（→スケルトンスクリーンやスピナー）
- データが存在しないのではなく、エラーで取得に失敗しただけのとき（専用のエラー表示にする）
近縁種との比較
エンプティステートは単独の部品というより、他の一覧・検索UIの「0件だったときの状態」として現れる 点が特徴である。読み込み中でまだ結果が確定していない状態を示すスケルトンスクリーンや スピナーとは、「結果が0件だと確定した後に出す」という点で区別される。 良いエンプティステートは単なる空メッセージではなく、条件のリセットや代替提案といった次の行動を 必ず提示する。
実例リンク
アクセシビリティ
- role
- 結果件数の変化はフィルタ操作の一部としてスクリーンリーダーに伝わるよう、件数表示や領域を aria-live で更新する実装が望ましい
- 補足
- 単に「0件です」で終わらせず、条件のリセットや別の提案など次の行動を必ず用意する。本サイト自身のフィルタ0件表示（/ 上の catalog__empty）もこのUIを実例として使っている