Каталардын иерархиясы жана артыкчылыктарды чагылдыруу

1) Эмне үчүн ката иерархиясы керек

• Эмне туура эмес болгонун түшүндүрүп,
• эмне үчүн маанилүү экенин
• эмне кылыш керек,
• бир нече каталар болсо, артыкчылык берүү.
• Каталардын иерархиясы когнитивдик жүктү азайтат, оңдоону тездетет жана кадамдардын конверсиясын жогорулатат (каттоо, төлөмдөр, KYC).

2) Критикалык деңгээл модели (Severity)

1. Info (маалымат) - "Толук эмес профиль, кийинчерээк толтурса болот". бөгөттөп жок.

2. Notice (көңүл) - "Лимит дээрлик түгөнүп калды". Биз иш-аракет кылууну сунуштайбыз.

3. Warning (эскертүү) - "Форматтын дал келбегендиги, маалыматтар жарым-жартылай сакталган". Бул тоскоолдук кылышы мүмкүн.

4. Error (ката) - "Туура эмес формат/милдеттүү талаа бош". конкреттүү иш-аракет бөгөт коюу.

5. Critical (критикалык) - "Төлөм/коопсуздук тобокелдиги четке кагылган". Сценарийди бөгөттөйт, дароо кадамды талап кылат.

• Бир экран - бир негизги статус.
• Бир нече каталар менен: Биз жогору жактан критикалык көрсөтүп, биринчи катага туруктуу бурулуп жатабыз.

3) Артыкчылыктарды чагылдыруу принциптери

1. Визуалдык иерархия: түс/сөлөкөт/калыңдыгы/контраст критикалык өсөт.
2. Мейкиндик жакындыгы: таандык болгон талаага/аймакка жакын ката.
3. Фокус жана жылдыруу: биринчи ката үчүн auto-scroll + көйгөйлүү талаага фокус.
4. Бир негизги callout: маанилүү көйгөй жөнүндө жалпы баннер/алерт + жергиликтүү кеңештер.
5. Токендердин ырааттуулугу: Info/Warning/Error үчүн түстөр/сөлөкөттөр/ариптер продукт боюнча өзгөрүүсүз.
6. Жашоо убактысы: жергиликтүү каталар - али оңдоло элек; баннерлер - жабылганга/оңдогонго чейин.
7. Биз абалды чаташтырбайбыз: "бош" ≠ "ката", "күтүү" ≠ "ката".

4) Визуалдык тил (UI-токендер)

• Info - бейтарап көк/боз,
• Notice - amber/сары,
• Warning - кызгылт сары,
• Error - кызыл,
• Critical - каныккан кызыл + карама-каршы фон.
• Иконалар: info ⓘ, notice, error/, success.

• Талаанын астындагы Inline-билдирүү (минималдуу кадр).
• Row-callout сап/карта.
• Page-alert (баннер) - жалпы/сын үчүн.
• Микроанимациялар: жумшак көрүнүшү, "тартылуу" макети жок.

5) ката тексттер: Formula жана мисалдар

Formula: Эмне туура эмес + Кантип + (Эмне үчүн/чектөө).

"Датанын форматы туура эмес. DD форматында киргизиңиз. ММ. GGGG"

"Файл өтө чоң (макс. 10 МБ). Кичирээк файлды жүктөп алыңыз"

"Текшерүүнүн жетишсиз деңгээли. KYC өтүү - бул ~ 2 мүнөт талап кылынат"

"Төлөм банк тарабынан четке кагылды. Башка ыкманы көрүңүз же банк менен байланышыңыз"

Анти-үлгүлөр: "Ката 400", "Бир нерсе туура эмес болуп калды", стресстик кадамдарда юмор.

6) Татаал формадагы иерархия (каттоо/КУС/төлөмдөр)

1. blur боюнча Inline-валидация: жергиликтүү каталарды дароо кармайбыз.
2. Global submit текшерүү: "Белгиленген талааларды оңдоо" баннерин жана тизмени/казыктарды көрсөтүү.
3. Каталар боюнча навигация: клавиатура/табуляция, "Катага өтүү # 1/ #N".
4. Оңдоо тартиби: адегенде бөгөт коюу (Error/Critical), андан кийин Warning/Notice.
5. Контекстти сактоо: киргизилген маалыматтар ката болгондо жоголбойт.

7) Сценарийлердин өзгөчөлүгү

7. 1 Төлөмдөр/корутундулар

Critical: провайдер/банк тарабынан четке кагуу, шектүү иш.
Error: карта талаасы/IBAN, сумма/жыштык боюнча лимиттер.
Warning: жай тармак/убакыт күтүү.

Текст: "Төлөм банк тарабынан четке кагылды. Башка ыкманы көрүңүз же банк менен байланышыңыз. Комиссия эсептен чыгарылган эмес"

7. 2 КУС/коопсуздук

Critical: документ жасалма/бөгөттөлгөн өлкө/көп эсеп.
Error: окулбаган документ/дата дал келбегендиги.

Текст: "Документтин сүрөтү бүдөмүк. жакшы жарык менен так сүрөттү жүктөп"

7. 3 Издөө/чыпкалар

Бул ката эмес, нөлдүк жыйынтык.

Текст: "{query}" боюнча эч кандай жыйынтык жок. "Провайдер: X" чыпкасын алып салыңыз же "{alt}" деп аракет кылыңыз. [Чыпкалоо]"

8) Жеткиликтүүлүк (A11y) жана техникалык талаптар

Каталар скринридерге жарыяланат: aria-live = "assertive" үчүн критикалык, "polite" үчүн башкалар.
ката менен талаалар: aria-invalid =" true", aria-describedby боюнча билдирүү.
Фокус биринчи катага которулат; табуляция тартиби логиканы сактайт.
WCAG AA боюнча контраст; сөлөкөт текстти алмаштырбайт.
Текст маанисин жоготпостон үн чыгарып окулушу керек.

9) Локализация жана юридикалык тактык

Жаргон жана маданий метафоралардан алыс болуңуз.
Терминдерди (глоссарий) макулдашуу: "төлөм четке кагылды", "лимит ашып кетти", "верификация".
Жергиликтүү форматта мөөнөттөрдү жана чектөөлөрдү көрсөтүү: "15 мүнөткө чейин", валюталар/даталар.

10) Сапат Metrics

талаа/кадам боюнча ката rate (ката туш колдонуучулардын үлүшү).
Time-to-Fix (биринчи катаны оңдоого чейинки орточо убакыт).
ката кийин Drop-off (туура эмес, канча).
Колдонуучулар/сессиялар боюнча каталарды кайталоо (recurrence).
Ката түрү боюнча колдоо көрсөтүү.
Иерархиядагы өзгөрүүлөргө чейинки/кийинки кадамды конверсиялоо.

• Auto-scroll жана фокус vs гана түс/текст.
• Себептин так формулировкасы vs жалпы.
• жарык тартиби (биринчи баннер → inline) vs (гана inline).
• Катанын жанына "Талаптарды көрсөтүү" шилтемесин кошуу.

11) чыгаруу алдында чек тизмеси

• Ар бир катанын деңгээли бар (Info/Notice/Warning/Error/Critical).
• түс/сөлөкөт/контейнер деңгээл менен дал келет.
• Биринчи катаны жылдыруу жана фокусту жылдыруу бар.
• Билдирүү түшүндүрөт/кантип/эмне үчүн.
• Терминдер глоссарий менен дал келет; локалдаштыруу текшерилди.
• Жеткиликтүүлүк: aria атрибуттары, контраст, үн менен окуу.
• Маалыматтар ката жоголгон эмес.
• "нөл натыйжасы" жана "күтүү" статусу ката катары берилген эмес.

12) мисалдар "чейин/кийин"

Дата формасы

Чейин: "Ката 400"

Андан кийин: "Датанын туура эмес форматы. DD колдонуу. ММ. GGGG"

Төлөм

Чейин: "Төлөм өткөн жок"

Кийин: "Төлөм банк тарабынан четке кагылды. Башка ыкманы көрүңүз же банк менен байланышыңыз. Комиссия эсептен чыгарылган эмес"

KYC

Чейин: "Документ кабыл алынган эмес"

Кийин: "Документти таануу мүмкүн эмес. Сүрөттү эч кандай жарк этпей жүктөп алыңыз, бурчтар жана текст көрүнүп турат"

Нөл издөө (эч кандай ката!)

Чейин: "Ката: эч нерсе табылган жок"

Андан кийин: "Live roulette" боюнча жыйынтыктар жок. "High-limit" чыпкасын алып салыңыз же "рулетка" аракет кылыңыз. [Чыпкалоо]"

13) Дизайн системасынын компоненттери

``

Пропсы: `message`, `severity`, `ariaDescribedBy`, `compact`.
Рендер: текст + сөлөкөт, 'severity' боюнча түс.

``

Пропсы: `title`, `description`, `severity`, `actions[]`.
Параметрлери: 'info | notice | warning | error | critical'.

``

Талааларга казык каталарынын тизмеси, клавиатура навигациясы, "# 1ге өтүү".

'' (логика)

Талаа/форма/кадам боюнча эрежелер, артыкчылыктар, схемалар (мисалы, JSON-Схема), билдирүүлөрдү локалдаштыруу.

14) Fast сөз айкаштарынын үлгүлөрү

15) процесске киргизүү

Тексттерди валидация логикасы менен бир убакта долбоорлоо.
компоненттеринин жанында i18n саптарды сактоо, чыгаруу.
PR чек-баракчасында: деңгээлге шайкештик, aria-атрибуттардын болушу, туура локалдаштыруу.
Метриктер жана кайра байланыш колдоо боюнча каталарды дайыма кыйкырат.

Акыркы шпаргалка

Санариптештирүү деңгээл: Info → Critical.
Артыкчылыкты визуалдык жана фокуста көрсөтүңүз.
Оңдоону кыска жана так түшүндүрүңүз.
Боштукту ката деп атабаңыз.
Өлчөө жана жакшыртуу: error rate, Time-to-Fix, drop-off.