空の状態システム
目的
空の状態システムは、表示するデータがない場合に表示される画面やコンポーネントを設計するためのフレームワークを提供します。空白の画面や単なる「結果が見つかりません」というメッセージを表示する代わりに、このシステムは空の状態をオンボーディング、教育、プロアクティブな発見の機会として扱います。潜在的な行き止まりを、ユーザーの勢いを維持し、システムの有用性を明確にする生産的な瞬間に変えます。
ユースケース
- 初回実行エクスペリエンス： ユーザーが初めてログインし、まだコンテンツを作成していない場合（例：空のダッシュボードやプロジェクトリスト）。
- 検索結果： ユーザーの検索クエリがゼロ件の結果を返した場合。
- フィルタリング： アクティブなフィルターの組み合わせにより空のグリッドになった場合。
- 空のコンテナ： 空のショッピングカート、クリアされた通知センター、新しいお気に入りリストなどの特定のUI要素。
- エラー状態： 権限や接続の問題によりコンテンツの読み込みに失敗した場合（二次的なユースケース）。
使用すべきでない場合
- ローディング状態： すぐにコンテンツが表示されると予想される場合は、スケルトンスクリーンまたはスピナーを使用します。
- 永続的な「デッド」ページ： リンク切れや削除されたリソースには404ページを使用します。
- 部分的なコンテンツ： 一部のデータは利用可能だが限られている場合は、空の状態ではなく標準のレイアウトパターンを使用します。
- パッシブな背景： デザイン上空白であることが意図されているセクション（例：余白や装飾的な空白）には使用しないでください。
入力
- 空のシナリオタイプ： これはユーザーがクリアした状態（成功）、初回実行状態（オンボーディング）、または検索失敗（発見）ですか？
- ユーザーの意図： ユーザーは何を達成しようとしていたか、または何を見つけようとしていましたか？
- コアバリュープロポジション： 現在欠けているコンテンツの主な利点は何ですか？
- 利用可能なアクション： ユーザーにとって「最善の次の一手」は何ですか？
出力
- 空の状態の設計図： イラスト、見出し、本文、およびプライマリCTAを含む構造定義。
- コンテキストロジック： 空の状態をトリガーするタイミングと場所に関するルール。
- 発見戦略： 空白を埋めるための推奨コンテンツや教育のヒント。
ワークフロー
1. 空のトリガーを特定する
なぜ状態が空なのかを判断します。適切なトーンを選択するために分類します：
- 初回実行（教育的）： 最初の「作成」アクションを促します。
- ユーザークリア（肯定的）： 完了を認識します（例：「すべて完了！」）。
- 検索/フィルター（ヘルパー）： 検索を拡大または方向転換する方法を提供します。
2. 視覚的階層を確立する
空の状態を「三点ルール」（空の状態用に修正）を使用して構成します：
- アンカー（ビジュアル）： トーンを設定する、気を散らさないアイコンまたはイラスト。
- コンテキスト（メッセージ）： なぜ空なのかを説明する明確な見出しと、それを変える方法を説明する本文。
- ターゲット（CTA）： コンテンツの作成やフィルターのリセットをトリガーするプライマリボタン。
3. アクション指向のコピーを作成する
- 見出し： 具体的に。「アイテムがありません」の代わりに「まだプロジェクトを作成していません」を使用します。
- 本文： 価値を提供します。「プロジェクトはタスクを整理するのに役立ちます。最初のプロジェクトを作成して始めましょう。」
- CTA： メリットに基づいた動詞を使用します。「プロジェクトを作成」または「無料トライアルを開始」。
4. 発見経路を提供する（二次アクション）
（検索のような）直接的な「作成」アクションがない場合は、代替案を提供します：
- リセット： すべてのフィルターをクリアするリンク。
- 提案： 人気のカテゴリまたは「もしかして：」の提案。
- 教育： ドキュメントやビデオチュートリアルへのリンク。
5. 技術的制約を定義する
- レスポンシブ対応： 空の状態が小さなビューポートでも中央揃えで読みやすいことを確認します。
- アクセシビリティ： 状態が動的に表示されたときに確実に通知されるように、適切なARIAロール（例：
role="status"）を使用します。
意思決定ルール
- ワンアクションルール： 潜在的な混乱の瞬間にユーザーを圧倒しないように、正確に1つのプライマリアクションに焦点を当てます。
- 共感はユーモアに優先する： 少しの個性は構いませんが、明快さと有用性を優先します。解決策を隠す「巧妙な」コピーは避けてください。
- 直接的 vs 間接的：
- ユーザーが修正できる場合（例：初回実行）、プライマリCTAを使用します。
- ユーザーが修正できない場合（例：検索失敗）、提案またはリセットリンクを使用します。
- 画像の関連性： 特定のコンテキストを強化するイラストを使用します（例：検索には虫眼鏡、ファイルにはフォルダ）。
制約
- アクセシビリティ： 空の状態のイラストには
aria-hidden="true"を設定するか、純粋に装飾的にする必要があります。テキストはWCAG AAのコントラスト比を満たしている必要があります。プライマリCTAおよびすべての二次リンク/ボタンはWCAG 2.2 SC 2.5.8（最小ターゲットサイズ24x24ピクセル）を満たしている必要があります。 - スケール： 空の状態は、置き換える実際のコンテンツのコンテナ幅を超えてはなりません。
- 一貫性： パターン認識を構築するために、サイト全体のすべての空の状態で同じビジュアルスタイルとレイアウトを使用します。
一般的な失敗パターン
- 「行き止まり」： 何かが空であることをユーザーに伝えるが、それを修正する方法は伝えない。
- 過剰デザイン： プライマリCTAから注意をそらす、複雑で重いイラストを使用する。
- ネガティブなトーン： エラーや失敗のように聞こえる言葉を使用する（例：「検索に失敗しました！」）。
- 一般的なコピー： 検索から初回オンボーディングまで、すべてに「結果がありません」を使用する。
- モバイルオーバーフロー： デスクトップでは見栄えが良いが、CTAを見るためだけにモバイルで垂直スクロールが必要なデザイン。
検証基準
- 空の状態が、なぜ表示されているのかを明確に説明している。
- 明確で実行可能なプライマリCTAまたは「リセット」パスがある。
- 視覚的階層が、ビジュアルからCTAへと目を導く。
- トーンがコンテキスト（オンボーディング vs 検索失敗）に一致している。
- 状態がアクセシブルである（コントラスト、キーボードナビゲーション、
role="status"または同等のライブリージョンによるスクリーンリーダー通知）。 - プライマリCTAがWCAG 2.2 SC 2.5.8（最小ターゲットサイズ24x24ピクセル）を満たしている。
- レイアウトがレスポンシブで、親コンテナ内で中央揃えになっている。