エラー階層と優先度のハイライト

1）エラー階層が必要な理由

• 何がうまくいかなかったか説明する
• それが重要な理由を示してください、
• 次に何をすべきかを提案します、
• エラーが複数ある場合は優先順位を付けます。
• エラー階層は、認知負荷を低減し、修正を高速化し、ステップ変換（登録、支払い、KYC）を増加させます。

2）重大度モデル

1.情報-"プロファイルは不完全であり、後で完了することができます。"ブロックしません。

2.注意-"限界はほとんど使い果たされています。"行動をお勧めします。

3.警告-"フォーマットの不一致、データが部分的に保存されます。"干渉することができます。

4.エラー-"無効なフォーマット/必須フィールドは空です。"特定のアクションをブロックします。

5.重要-"支払い拒否/セキュリティリスク。"スクリプトをブロックします、すぐにステップが必要です。

• 1つの画面-1つのメインステータス。
• 複数のエラーの場合：上からクリティカルを表示し、最初のエラーまで安定してスクロールします。

3）優先順位付けの原則

1.視覚的階層：色/アイコン/厚さ/コントラストがクリティカルに増加します。
2.空間近接：それが属するフィールド/ゾーンの近くにエラーがあります。
3.フォーカスとスクロール：最初のエラーに自動スクロール+問題フィールドにフォーカスします。
4.1つのメインコールアウト：重要な問題+ローカルプロンプトに関する一般的なバナー/アラート。
5.トークンシーケンス：Info/Warning/Errorの色/アイコン/フォントは製品全体で変更されません。
6.寿命：ローカルエラー-まだ固定されていません。バナー-閉じる/固定する前に。
7.状態を混同しないでください：「empty」 ≠ 「error」、 「waiting」 ≠ 「error」。

4）視覚言語（UIトークン）

• 情報-ニュートラルブルー/グレー、
• 注意-琥珀/黄色、
• 警告-オレンジ、
• エラー-赤、
• クリティカル-豊富な赤+対照的な背景。
• アイコン：情報ⓘ、通知、エラー/、成功。

• フィールドの下のインラインメッセージ（最小フレーム）。
• 行/カードごとのロウコールアウト。
• Page-alert（バナー）-一般的/重要。
• Microanimations：レイアウトの「けいれん」なしの柔らかい出現。

5）エラーテキスト： 式と例

数式：何が間違っている+修正する方法+（理由/制約）。

"無効な日付形式。DD形式で入力します。MM。 YYYY"

"ファイルが大きすぎます（最大10 MB）。より小さなファイルをダウンロードしてください"

"検証の不十分なレベル。KYCを取る-それは~ 2分かかります"

"支払いは銀行によって拒否されました。別の方法を試してみるか、銀行に連絡してください"

アンチパターン：「エラー400」、「何かが間違っていた」、ストレスの多いステップでユーモア。

6）複雑な形式の階層（登録/ACC/支払い）

1.ぼかしのインライン検証：ローカルエラーをすぐにキャッチします。
2.送信のグローバルチェック：「マークされたフィールドを修正」バナーとリスト/アンカーを表示します。

3.エラーナビゲーション： キーボード/タブ、「エラー#1/# Nに移動します。」

4.修正順序：最初のブロック（エラー/クリティカル）、次に警告/通知。
5.「コンテキストを保存」（Save Context）-エラーが発生しても入力は失われません。

7）シナリオの特異性

7.1支払い/出金

クリティカル：プロバイダ/銀行による拒否、疑わしい活動。
エラー：カード/IBANフィールド、金額/頻度の制限。
警告：遅いネットワーク/タイムアウト。

テキスト： "支払いは銀行によって拒否されました。別の方法を試してみるか、銀行に連絡してください。料金は請求されていません"

7.2 CCS/安全性

重要：偽造/ブロックされた国/マルチアカウントの文書。
エラー：読み取り不可能なドキュメント/日付の不一致。

テキスト： "ドキュメントの写真がぼやけています。シャープな画像を明るくアップロードする"

7.3検索/フィルタ

これは間違いではなく、ゼロの結果です。

テキスト： 「{query}」の結果はありません"「Provider： X」フィルタを削除するか「{alt}」を試してみてください。［フィルターをリセット］"

8）可用性（A11y）および指定

エラーはスクリーナーに宣言されます：aria-live=「assertive」批判的なため、他の人には「礼儀正しい」。
エラーのあるフィールド：aria-invalid=」true」、メッセージごとにaria-descripedby。
フォーカスは最初のエラーに移動します。タブオーダーはロジックを保持します。
WCAG AAによる対照；アイコンはテキストを置き換えません。
テキストは意味を失うことなく声を出して読むべきです。

9）ローカライズと法的精度

専門用語や文化的な比喩は避けてください。
条件（用語集）に同意：「支払い拒否」、「制限を超えた」、「検証」。
ローカルフォーマットで条件と制限を指定します：「15分まで」、通貨/日付。

10）品質指標

フィールド/ステップによるエラー率。
修正までの時間。
エラーの後にドロップオフ（彼らはそれを修正せずに残すどのくらい）。
ユーザー/セッションによる再発。
エラータイプによる呼び出しをサポートします。
階層の変更の前後にステップ変換。

• カラー/テキストのみの自動スクロールとフォーカス。
• 理由と一般の正確な言葉遣い。
• バックライト順序（バナー→インラインファースト）vs（インラインのみ）。
• エラーの横にShow Requirementsリンクを追加します。

11）プレリリースのチェックリスト

• 各エラーにはレベルがあります（Info/Notice/Warning/Error/Critical）。
• 色/アイコン/コンテナはレベルに対応します。
• 最初のエラーとフォーカスシフトへのスクロールがあります。
• メッセージはwhat/how/whyを説明します。
• 用語マッチ用語集；ローカリゼーションを検証しました。
• 可用性：aria属性、コントラスト、可読性を声に出します。
• エラー時にデータが失われることはありません。
• 「結果ゼロ」と「待機中」のステータスはエラーとしてマークされません。

12）例の前後

日付のフォーム

前： 「エラー400」

後： "無効な日付形式。DDを使用します。MM。 YYYY"

お支払い

前： 「支払いが失敗しました」

後： "支払いは銀行によって拒否されました。別の方法を試してみるか、銀行に連絡してください。料金は請求されていません"

KYC

前： 「受け入れられない文書」

後： "文書を認識することができませんでした。まぶしさのない写真をアップロード、コーナーとテキストが表示されます"

ゼロ検索（エラーではありません！）

前： 「エラー：何も見つかりませんでした」

後： 「結果はありません「ライブルーレット。「「High-limit」フィルタを削除するか「、ルーレットを試してみてください。「［フィルタのリセット］」

13）システムコンポーネントの設計

''

'message'、 'severity'、 'ariaDescriptedBy'、 'compact'。
Render： text+icon、 color by 'severity'。

''

'title'、 'description'、 'severity'、 'actions［］'。
オプション：'info | notice | warning | error | critical'。

''

フィールドへのアンカーのエラーのリスト、キーボードナビゲーション、「#1に移動」。

'<バリデータ/>'（ロジック）

フィールド/フォーム/ステップルール、優先順位、スキーマ（JSON-Schemaなど）、メッセージのローカライズ。

14）クイックフレーズパターン

15）プロセス埋め込み

検証ロジックと同時にテキストを設計します。
コンポーネントの横にあるi18nにラインを格納し、バージョンを作成します。
PRチェックリスト：レベルのコンプライアンス、aria属性、正しいローカライズ。
メトリックエラーを定期的にレビューし、フィードバックをサポートします。

最終チートシート

レベルをデジタル化：情報→クリティカル。
優先順位を視覚的および集中的に表示します。
修正を簡単かつ具体的に説明します。
空虚を間違いと呼ぶな。
測定し、改善して下さい：エラー率、時間に固定、ドロップオフ。