空の状態でのUXフィードバック
1）空の状態とは何ですか、なぜそれらが必要なのですか
空白の状態は、メインコンテンツが一時的に存在しないスクリーン/ウィジェットです。最初のアクションの前、クリーニングの後、ゼロの結果、ダウンロードエラー、権利/アクセスなし。
空の状態ターゲット：- 「なぜここに空いているのか」を説明してください。
- セクションの値を表示します。
- 明確な次のステップを提案する（またはから選択する以上）
- 不安を軽減し、グルーミングを防ぎます。
Good empty state=context+benefit+action。
2）空の状態タイポロジー
1.はじめて空-ユーザーはまだ何も作成/設定していません。
2.Zero Search/Filter：クエリは結果を返しませんでした。
3.一時的なvoid：データがロードされているか、キューが実行されています。
4.制限/権利：アクセスできず、検証レベルが不十分です。
5.ユーザーはクリアしました：ごみ箱/履歴クリア。
6.技術的な問題：ネットワーク/サービスの失敗、再試行。
3）設計原則
文脈：我々は空虚のための特定の理由について話している。
値→アクション：まず、このセクションの理由、次に何をすべきか。
1つの主要なCTA：必要に応じて-セカンダリ（詳細/FAQ）。
簡潔さと特異性：1-2文+クリアボタン。
ビジュアルサポート：アイコン/イラストは意味をサポートし、気を散らさない。
行き止まりを避ける：常に前進する方法があります。
調子の一貫性：友好的で、穏やか；重要なステップ（支払い、セキュリティ）で冗談はありません。
A11yとローカライズ：スクリーンリーダーで読み取り可能で、正しく傾斜しており、行の長さを考慮しています。
4）空の状態フレーム（テンプレート）
タイトル（オプション、1行）-クレームの値または理由。
テキスト（1-2文）-「why is empty」+「what's next」。
プライマリCTAが主なターゲットアクションです。
セカンダリACS/link-ヘルプ/ルール/ドキュメント。
視覚（任意）-24-96 pxの容易なイラストは、積み過ぎません。
5）スクリプト化されたパターン
5.1初期登録/最初のゼロ
目標：最初の成功したアクションにつながります。
テキスト： 「パーソナライズされた推奨事項を表示するには、プロファイルに記入してリードを選択します。」
CTA：プロファイルの入力/リードの選択。
ヒント：マイクロフォース/タイムインジケータを追加：「それは~ 1分かかります」。
5.2検索/フィルタ=結果ゼロ
目的：助けは要求を調節します。
テキスト： 「何も見つかりませんでした「ライブブラックジャック。「「ブラックジャック」を試すか「、プロバイダ：X「フィルタ」を削除します"
CTA：「リセットフィルタ」セカンダリ：「オープンディレクトリ」。
5.3支払い/財布が空
目的：方法付加/最初の補充を刺激するため。
テキスト： 「支払い方法を保存してください-詰め替えと引き出しは速くなります。」
CTA： "Add Payment Method'セカンダリ："Rules and Fees"。
5.4認証/アクセス
目的：制限と撤退ルートを透明に説明します。
テキスト： "このセクションは、身元確認後に利用できます。それは通常2分までかかります"
CTA： 「Get Verified」セカンダリ：「なぜ必要なのですか？」
5.5 transit/temporary voidのデータ
目標：待機不安を軽減する。
テキスト： "あなたのデータを収集します。これは通常30秒までかかります。あなたはページを残すことができます-すべてが準備ができたら通知します"
CTA： 「わかりやすい」セカンダリ：「次はどうなるの？」
5.クリーニング/取り外しの後の6
目標は、アクションを確認し、次のステップを提案することです。
テキスト： "履歴をクリアしました。新しいトランザクションは次のリフィルの後に表示されます"
CTA：「トップアップ」。
5.7エラー/リトレイ
目標：回復の明確な経路。
Text： "データの読み込みに失敗しました。ネットワークを確認するか、もう一度お試しください"
CTA：「繰り返し」セカンダリ：「システムステータス」。
6）マイクロテキスト： 既製のテンプレート
最初のゼロ（ディレクトリ/お気に入り）：- "最初のゲームを追加すると、選択したゲームがここに表示されます。［お気に入りに追加］"
- 「{query}」には何も見つかりませんでした"リクエストを絞り込むか、フィルタをリセットします。［フィルターをリセット］"
- "まだ保存された方法はありません。支払いをスピードアップするためにカードまたはウォレットを追加します。［メソッドの追加］"
- "この機能は年齢確認なしでは利用できません。~ 2分かかります。［年齢確認］［なぜ？］"
- "私たちは過去24時間の統計を数えています……これは通常30秒までです。完了したら通知を表示します"
- "サービスは利用できません。既に修理中です。後で試してみるか、ステータスを確認してください。［繰り返し］［システムステータス］"
7）ビジュアル言語とイラスト
CTAとの議論を避けるために軽いモノクロ/ツートーンのイラストを使用してください。
寸法とインデント-コンテンツカードのように（視覚的な整合性）。
ストレスの多いシナリオ（支払い/セキュリティ）でユーモラスなシーンを描写しないでください。
8）ローカライズと可用性
ラインの長さのために在庫を置きます（DE/TR長い）。
数値形式、通貨、日付をローカルに翻訳します。
スクリーンリーダーの場合：role=「status」、 aria-live=ダイナミクスのための「polite/assertive」。
画像にのみ意味を入れないでください：テキストで複製します。
320 pxの可読性とWCAGコントラストを確認します。
9）メトリクスと実験
主な指標：- 主要な空のCTAのCTR；
- 「最初の成功」（アクティベーションイベント）への変換。
- 最初のアクションへの時間
- 進歩のないスクリーンへのリターンの頻度；
- 検索結果ゼロの割合
- シナリオサポートの呼び出し。
- 特定のヘッダと一般的なヘッダ;
- CTAアクション動詞と中立；
- 時間の見積もりを追加する
- 二次CTA （FAQ）の存在とボタンの順序；
- イラストvsアイコンvsビジュアルなし。
10）アンチパターン
「ここは空です」説明やステップなし。
重要なステップでジョーク（支払い、セキュリティ）。
コンテキストなしで1つの詳細CTA。
受動的なlien： "追加する必要があります。"積極的に書く："追加します……"
長い段落：1-2文の最大値。
フォーム内のラベルの代わりにプレースホルダ-A11yと理解を悪化させます。
隠された制約（「瞬時」、遅延は可能ですが）。
11）プレリリースのチェックリスト
- それが空である理由は明らかですか？
- 1つの文でセクションに値がありますか？
- 主要なCTAは1つあり、必要に応じて二次CTAはありますか？
- テキストは短い（≤ 140文字）と特定ですか？
- 必要に応じて時間/労力の見積もりを追加しましたか？
- トーンはスクリプトにマッチしますか？
- ローカライズとA11yチェック（アリア属性、コントラスト）？
- 画像はCTAを支配していませんか？
12）例の前後
ゲームカタログ（First Zero）
前： 「まだここには何もありません」
後： "あなたのテープを収集します。お気に入りのジャンルを3つ選ぶ-おすすめを始めましょう。［ジャンルを選ぶ］"
ゼロサーチ
前： 「何も見つかりませんでした」
After： 「high-limit roulette」では結果はありません。「High-limit」フィルタを削除するか、「roulette」を試してください。「［フィルタのリセット］」
支払い
前： 「いいえ支払い方法」
後： "あなたのカードや財布を保存-補充と出金が高速になります。［追加方法］［料金と条件］"
検証
前： 「アクセス不可」
後： "セクションは、身元確認後に利用可能です。所要時間は~ 2分です。［検証を受ける］［なぜ重要なのか］"
13）設計システムへの組み込み
UIキットにpropsを含むEmptyStateコンポーネントを追加します：- 'title'（文字列、オプション）
- 'body'（短いテキスト1-2文）
- 'primaryAction {label、 onClick}'
- 'secondaryAction {label、 href/onClick}'
- 'icon/illustration'（オプション）
コンポーネントの横にあるi18nファイルにテキストを保存し、キーと説明を維持し、トーンマップ（状況のトーンと語彙）を接続します。
14）クイックコンストラクタ（コピーと使用）
パターン1-最初のゼロ：- 見出し：「最初のステップから始める」
- テキスト：「興味を選択するとすぐにここに推奨事項があります。」
- CTA：「リードを選択」
- セカンダリ：「それはどのように動作しますか？」
- Text： 「{query}」によって何も見つかりませんでした"フィルタをリセットするか、クエリをリファインする"
- CTA：「リセットフィルタ」
- セカンダリ：「カタログ」
- テキスト："年齢確認後に利用可能な機能。通常は2分までです"
- CTA：'年齢を確認'
- 二次：「なぜ必要なのですか？」
- テキスト："当日のデータを収集します。これは通常30秒までです。完了したらお知らせします"
- CTA：「良い」
最終チートシート
Context+value+action-1つの「スタック」で。
視覚的な重量の競争のない1つの主要なCTA。
短いと特定：1-2文。
常に行き詰まりから抜け出す方法：デッドエンド画面はありません。
ローカライズとA11yはコンポーネントレベルです。