Error hierarchy and priority highlighting

1) Why you need an error hierarchy

• explain what went wrong
• show why it matters,
• suggest what to do next,
• prioritize if there are several errors.
• The error hierarchy reduces cognitive load, speeds up correction and increases step conversion (registration, payments, KYC).

2) Severity model

1. Info - "Profile is incomplete, can be completed later." Does not block.

2. Notice - "The limit is almost exhausted." We recommend action.

3. Warning - "Format mismatch, data partially saved." Can interfere.

4. Error - "Invalid format/required field is empty." Blocks a specific action.

5. Critical - "Payment Denied/Security Risk." Blocks the script, requires an immediate step.

• One screen - one main status.
• For multiple errors: show critical from above and scroll stably to the first error.

3) Principles of priority highlighting

1. Visual hierarchy: color/icon/thickness/contrast increase with criticality.
2. Spatial proximity: an error near the field/zone to which it belongs.
3. Focus and scroll: auto-scroll to the first error + focus to the problem field.
4. One main callout: general banner/alert about a critical problem + local prompts.
5. Token sequence: colors/icons/fonts for Info/Warning/Error are unchanged throughout the product.
6. Lifetime: local errors - not fixed yet; banners - before closing/fixing.

7. Do not confuse states: "empty ≠" "error," "waiting" ≠ "error."

4) Visual language (UI tokens)

• Info - neutral blue/gray,
• Notice - amber/yellow,
• Warning - orange,
• Error - red,
• Critical - rich red + contrasting background.
• Icons: info ⓘ, notice, error/, success.

• Inline message below the field (minimum frame).
• Row-callout per line/card.
• Page-alert (banner) - for general/critical.
• Microanimations: soft appearance, without "jerking" the layout.

5) Error texts: formula and examples

Formula: What's wrong + How to fix + (Why/constraint).

"Invalid date format. Enter in DD format. MM. YYYY"

"The file is too large (max. 10 MB). Please download a smaller file"

"Insufficient level of verification. Take KYC - it takes ~ 2 minutes"

"The payment was denied by the bank. Try another method or contact your bank"

Anti-patterns: "Error 400," "Something went wrong," humor in stressful steps.

6) Hierarchy in complex forms (registration/ACC/payments)

1. Inline validation on blur: we catch local errors right away.
2. Global check for submit: show the "Correct marked fields" banner and the list/anchors.

3. Error navigation: keyboard/tab, "Go to error # 1/# N."

4. Order of correction: first blocking (Error/Critical), then Warning/Notice.
5. Save Context - Input is not lost when an error occurs.

7) Specificity of scenarios

7. 1 Payments/withdrawals

Critical: rejection by provider/bank, suspicious activity.
Error: card/IBAN field, limits on amount/frequency.
Warning: slow network/timeout.

Text: "Payment denied by bank. Try another method or contact your bank. The fee has not been charged"

7. 2 CCS/safety

Critical: document forged/blocked country/multi-account.
Error: unreadable document/date mismatch.

Text: "The photo of the document is blurred. Upload a sharper image in good light"

7. 3 Search/filters

This is not a mistake, but a zero result.

Text: "No results for "{query}." Remove the "Provider: X" filter or try "{alt}." [Reset Filters]"

8) Availability (A11y) and specifications

Errors are declared to the screener: aria-live = "assertive" for critical, "polite" for others.
Fields with error: aria-invalid =" true," aria-descripedby per message.
Focus moves to the first error; tabbing order preserves logic.
Contrast by WCAG AA; the icon does not replace text.
The text should be read aloud without losing meaning.

9) Localization and legal accuracy

Avoid jargon and cultural metaphors.

Agree on the terms (glossary): "payment rejected," "limit exceeded," "verification."

Specify terms and restrictions in local format: "up to 15 minutes," currencies/dates.

10) Quality metrics

Error rate by field/step.
Time-to-Fix.
Drop-off after an error (how much they leave without fixing it).
Recurrence by user/session.
Support calls by error type.
Step conversion before/after changes in hierarchy.

• Auto-scrolling and focus vs color/text only.
• The exact wording of the reason vs general.
• Backlight order (banner → inline first) vs (inline only).
• Adds a Show Requirements link next to the error.

11) Pre-release checklist

• Each error has a level (Info/Notice/Warning/Error/Critical).
• The color/icon/container corresponds to the level.
• There is scrolling to the first error and focus shifting.
• The message explains what/how/why.
• Terms match glossary; localization verified.
• Availability: aria attributes, contrast, readability aloud.
• Data is not lost on error.
• The "zero result" and "waiting" statuses are not marked as errors.

12) Before/after examples

Date form

Before: "Error 400"

After: "Invalid date format. Use DD. MM. YYYY"

Payment

Before: "Payment failed"

After: "The payment was denied by the bank. Try another method or contact your bank. The fee has not been charged"

KYC

Before: "Document not accepted"

After: "The document could not be recognized. Upload a photo without glare, corners and text are visible"

Zero search (not an error!)

Before: "Error: nothing found"

After: "There are no results for "live roulette." Remove the "High-limit" filter or try "roulette." [Reset Filters]"

13) Design system components

``

Пропсы: `message`, `severity`, `ariaDescribedBy`, `compact`.
Render: text + icon, color by 'severity'.

``

Пропсы: `title`, `description`, `severity`, `actions[]`.
Options: 'info | notice | warning | error | critical'.

``

List of errors with anchors to fields, keyboard navigation, "Go to # 1."

'' (logic)

Field/form/step rules, priorities, schemas (for example, JSON-Schema), message localization.

14) Quick phrase patterns

15) Process embedding

Design the texts simultaneously with the validation logic.
Store lines in i18n next to components, versionize.
In the PR checklist: level compliance, aria attributes, correct localization.
Regularly review metrics errors and support feedback.

Final cheat sheet

Digitize levels: Info → Critical.
Show the priority visually and in focus.
Explain the correction briefly and specifically.
Don't call emptiness a mistake.
Measure and improve: error rate, Time-to-Fix, drop-off.