Қателер сатысы және артықшылықтарды көрсету

1) Қателер иерархиясы не үшін қажет

• не дұрыс болмағанын түсіндіру,
• оның неге маңызды екенін көрсету,
• бұдан былай не істеу керектігін айту,
• егер қателер бірнешеу болса, басымдықтарды белгілеу.
• Қателер сатысы когнитивтік жүктемені азайтады, түзетуді жылдамдатады және қадамдардың конверсиясын арттырады (тіркеу, төлемдер, KYC).

2) Сындылық деңгейлерінің моделі (Severity)

1. Info (ақпараттандыру) - «Профиль толық емес, оны кейінірек толтыруға болады». Бұғаттамайды.

2. Notice (назар аударыңыз) - «Лимит таусылды деуге болады». Әрекет етуді ұсынамыз.

3. Warning (ескерту) - «Пішім сәйкес келмейді, деректер ішінара сақталған». Кедергі келтіруі мүмкін.

4. Error (қате) - «Жарамсыз пішім/міндетті өріс бос». Нақты әрекетті бұғаттайды.

5. Critical (сындарлы) - «Төлем қабылданбады/қауіпсіздік тәуекелі». Сценарийді бұғаттайды, дереу қадамды талап етеді.

• Бір экран - бір басты мәртебе.
• Көптеген қателіктер кезінде: жоғарыдан сыни қателерді көрсетеміз және бірінші қателікке тұрақты түрде жылжытамыз.

3) Басымдықтарды жарықтандыру қағидаттары

1. Көрнекі иерархия: түсі/белгісі/қалыңдығы/қарама-қарсылығы сындылықпен өседі.
2. Кеңістіктік жақындық: қатысты өрістің/аймақтың жанындағы қате.
3. Фокус және жылжыту: бірінші қатеге авто-скролл + проблемалық өріске фокус.
4. Бір басты callout: сыни мәселе туралы жалпы баннер/алерт + жергілікті кеңестер.
5. Белгілер тізбегі: Info/Warning/Error үшін түстер/иконалар/қаріптер бүкіл өнімде өзгермейді.
6. Өмір сүру уақыты: жергілікті қателер - әлі түзетілмеген; баннерлер - жабылғанға/түзетілгенге дейін.
7. Күйді шатастырмаймыз: «бос» ≠ «қате», «күту» ≠ «қате».

4) Көрнекі тіл (UI-токендер)

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

• Өрістің астындағы Inline хабарламасы (ең кіші жақтау).
• Row-callout жолына/карточкасына.
• Page-alert (баннер) - жалпы/сыни үшін.
• Микроанимациялар: орналасуды «тартпай», жұмсақ пайда болу.

5) Қате мәтіндері: формула және мысалдар

Формула: Не дұрыс емес + Қалай түзету керек + (Неге/шектеу).

"Күннің пішімі дұрыс емес. КД пішімінде енгізіңіз. ММ. ЖЖЖЖ"

"Файл тым үлкен (ең көп дегенде 10 МБ). Кіші файлды қотарыңыз"

"Верификацияның жеткіліксіз деңгейі. KYC өтіңіз - бұл ~ 2 минутты алады"

"Төлемді банк қабылдамады. Басқа әдісті қолданыңыз немесе банкпен байланысыңыз"

Анти-үлгілер: «Қате 400», «Бірдеңе дұрыс емес», стресстік қадамдардағы әзіл.

6) Күрделі нысандардағы иерархия (тіркеу/АҚК/төлемдер)

1. blur бойынша inline-валидация: жергілікті қателерді бірден ұстаймыз.
2. 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) Сапа өлшемдері

Өріс/қадам бойынша Error rate (қатеге тап болған пайдаланушылардың үлесі).
Time-to-Fix (бірінші қатені түзетуге дейінгі орташа уақыт).
Қатеден кейін Drop-off (түзетпей қанша кетеді).
Пайдаланушылар/сессиялар бойынша қателердің қайталануы (recurrence).
Қате түрі бойынша қолдау сұраулары.
Иерархиядағы өзгерістерге дейінгі/кейінгі қадамды конверсиялау.

• Авто-скролл және фокус vs тек түсі/мәтіні.
• Себептердің нақты тұжырымдамасы vs жалпы.
• Жарықтандыру тәртібі (алдымен баннер → inline) vs (тек inline).
• Қатенің жанында «Талаптарды көрсету» сілтемесін қосу.

11) Шығарылым алдындағы чек-парақ

• Әрбір қатенің деңгейі бар (Info/Notice/Warning/Error/Critical).
• Түс/белгі/контейнер деңгейіне сәйкес келеді.
• Бірінші қатеге жылжыту және фокусты ауыстыру бар.
• Хабарлама не/қалай/неліктен екенін түсіндіреді.
• Терминдер глоссариймен сәйкес келеді; оқшаулау тексерілді.
• Қол жетімділік: aria-төлсипаттары, қарама-қайшылығы, дауыстап оқылуы.
• Қате кезінде деректер жоғалмайды.
• «Нөлдік нәтиже» және «күту» мәртебелері қате ретінде ресімделмеген.

12) «дейін/кейін» мысалдары

Күн пішіні

Дейін: «Қате 400»

Кейін: "Күннің пішімі дұрыс емес. КД пайдаланыңыз. ММ. ЖЖЖЖ"

Төлем

Дейін: «Төлем өткен жоқ»

"Төлемді банк қабылдамады. Басқа әдісті қолданыңыз немесе банкпен байланысыңыз. Комиссия есептен шығарылмаған"

KYC

Дейін: «Құжат қабылданбады»

Кейін: "Құжатты тану мүмкін болмады. Фотосуретті жарықсыз жүктеңіз, бұрыштар мен мәтін көрінеді"

Нөлдік іздеу (қате емес!)

Дейін: «Қате: ештеңе табылмады»

«Live roulette» дегеннен кейін нәтиже жоқ. «High-limit» сүзгісін алып тастаңыз немесе «roulette» әрекетін жасаңыз. [Сүзгілерді жою]"

13) Дизайн-жүйе компоненттері

``

Пропсы: `message`, `severity`, `ariaDescribedBy`, `compact`.
Рендер: мәтін + иконка, 'severity' бойынша түсі.

``

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

``

Өрістерге зәкірлер қателерінің тізімі, пернетақталық навигация, «№ 1 ауысу».

'' (логика)

Өріске/пішінге/қадамға ережелер, басымдықтар, схемалар (мысалы, JSON-Schema), хабарламаларды оқшаулау.

14) Жылдам сөз тіркестері

15) Процеске кіріктіру

Мәтіндерді валидация логикасымен бір уақытта жобалаңыз.
Компоненттердің жанында i18n жолдарын сақтаңыз, нұсқалаңыз.
PR чек-парағында: деңгейге сәйкестігі, aria-атрибуттардың болуы, дұрыс оқшаулау.
Өлшемдер және қолдаудың кері байланысы бойынша қателерді үнемі елеу.

Қорытынды шпаргалка

Деңгейлерді цифрлау: Info → Critical.
Басымдықты көзбен шолып және назарда көрсетіңіз.
Түзетуді қысқаша және нақты түсіндіріңіз.
Бос орынды қате деп атамаңыз.
Өлшеңіз және жақсартыңыз: error rate, Time-to-Fix, drop-off.