空の状態とUXヒント

1）空の状態が必要な理由

• なぜ空なのか、
• 次に何をすべきかを示します、
• 安全な最初のステップを提供します、
• 不安を軽減し、サポート時間を節約します。

2）空の状態の類型

1.初めて-ユーザーはまだ何もしていません。
2.ゼロデータ-エンティティが作成されていないか、リストが空です。
3.フィルタ/検索（結果なし）-条件はすべて除外されます。
4.エラー/一時的に利用できない-ネットワーク/サーバーですが、データは原則的に使用できます。
5.権利/制限なし-アクセス拒否、QAS/ロール/制限が必要です。
6.メンテナンス-計画された作業、待っています。

3）空のカード構造

アイコン/イラスト（オーバーロードしないでください；コントラスト≥ AA）。

一行の見出し： 「ここにはまだ空です。」

理由/コンテキスト： "あなたはまだ追加されていません……"/"フィルターが一致していませんでした"

1-2アクション（CTA）：プライマリ（メインシナリオ）、セカンダリ（代替）。
救助へのリンク（オプション）。
ページレベル：通常のナビゲーションとフィルタを維持します-画面を行き止まりにしないでください。

html
<section class="empty" role="region" aria-labelledby="empty-title">
<svg aria-hidden="true" class="empty__icon"><!-- … --></svg>
<h2 id = "empty-title "> It's empty for now </h2>
<p> Create the first campaign or change the filters. </p>
<div class="actions">
<button class =" btn btn--primary "> Create campaign </button>
<button class =" btn btn--ghost "> Reset Filters </button>
</div>
<a class =" help" href = "/help/campaigns "> How it works </a>
</section>

4）トーンとテキスト（UXコピーライティング）

はっきりと親切に。「エラー0x……。」を避ける...."

理由→アクション。"VIPフィルターはすべてのエントリを除外しました。フィルターをリセットしますか？
罪悪感はない。ユーザーを虚しさのせいにしないでください。
1つの考え、1つの文。
ローカリゼーション：文化的比喩を避ける。ブックマーク+テキストの長さの20-30％。

5）イラストとビジュアル

中立、目立たない；暗いテーマでは、イラストの軽さを高めます。
意味の唯一の媒体としてイラストを使用しないでください。
スケールは固定されています。グリッドやベースラインを壊さないでください。

6） CTAと代替案

プライマリCTAは次の主なステップです（create/deposit/subscribe）。
セカンダリ-「デモを参照」、「インポート」、「フィルターをリセット」。
選択制限：最大2 CTA；残りは「More」です。
リスク/支払い-結果とキャンセルについての透明なテキスト。

7）シナリオによる空の状態

7.1最初の実行

3-5ステップのハイドチェックリスト：「支払い方法を追加」「、プロバイダを選択」。
スキップボタン+ガイドリンク。

7.2データがありません

なぜ空+CTA Create/Importなのかを簡単に説明します。
ヒント：「CSVを読み込むことができます」（テンプレートへのリンク）。

7.3フィルター/検索

アクティブなフィルタと「リセット」ボタンを表示します。
クローズマッチまたは代替クエリを提案します。

7.4エラー/利用不可

"私たちは問題に直面しました。後でもう一度お試しください"+"再試行"/"システムステータス"