Санҷиши дохилӣ ва хатогиҳои UX

1) Принсипҳо

1. Ғамхории пешгӯишаванда, на ҷазо. Мо нишон медиҳем, ки чӣ тавр дуруст ворид шавем, пеш аз хатогӣ.
2. Маълумотро гум накунед. Ягон хатогӣ воридшударо нобуд намекунад; дастгирӣ бекор/Retry.
3. Лаҳзаи намоиш.

Пеш аз ворид шудан: матни ёвар (қоидаҳо ва намунаҳо).
Дар давоми: маслиҳатҳои мулоим/ниқоб/ивазкунии худкор.
Баъд аз (блюз/пешниҳод): хатои возеҳ бо дастури "чӣ гуна ислоҳ кардан".
4. Таваҷҷӯҳ ба иқтисодиёт. Як паём як сабаб ва як амал аст.
5. Дастрасӣ. Матн + нишона/ранг, пайванд ба майдон тавассути ARIA, ба майдони хатогии аввал равона кунед.

2) Қабатҳои тасдиқкунӣ

Синхронизатсияи мизоҷ: формат, дарозӣ, ҳатмӣ, ниқоб. Зуд ва арзон.
Мизоҷи асинхронӣ: беҳамтоии вуруд, чеки BIN/IBAN, API. Бо debunking.
Хонаи сервер: қоидаҳои тиҷорат, маҳдудиятҳо, баҳодиҳии хатарҳо, иҷозатдиҳӣ/ҳуқуқҳо. Ҳақиқати чораи охирин.
Қоида: ҳатто бо санҷиши идеалии муштарӣ, сервер матни ниҳоиро тасдиқ ва тавлид мекунад.

3) Вақт ва барҳамдиҳӣ

Санҷиш барои норавшан → фикру мулоҳизаҳои фаврӣ ≤ 100 мс.
Тафтиши асинхронӣ - дебет 250-400 мс пас аз таваққуфи вуруд.
Тасдиқи муваффақият - laconic ("Ok") ё тасвири сабз; бе "салом".
Дар "пешниҳод" мо рӯйхати хатогиҳоро нишон медиҳем ва фокусро ба аввал интиқол медиҳем.

js const debounce = (fn, ms=300)=>{let t; return (...a)=>{clearTimeout(t); t=setTimeout(()=>fn(...a),ms)}}

4) Хатогиҳои копирайтинг

Қолаб: сабаб → чӣ гуна ислоҳ кардан → алтернатива (агар бошад).

Хуб: "Парол аз 8 аломат кӯтоҳтар аст. Аломатҳои бештар илова кунед ё ибораро истифода баред.

Хуб: "IBAN дуруст ба назар намерасад. Дарозӣ ва аломатҳоро санҷед: A-Z, 0-9"

Бад: "Вуруди нодуруст".
Корбарро айбдор накунед; аз jargon ва рамзҳо канорагирӣ кунед.
Дар минтақаҳои ҳассос (пардохтҳо/ASC), мо аз тафсилоте, ки бехатариро ошкор мекунанд, канорагирӣ мекунем.

5) Намунаҳои намоиши паёмҳо

5. 1 Дар майдон (дар сатр)

' aria-veralid =" ҳақиқӣ"', текст в 'aria-describedby'.
Мухтасар, махсусан; бе сархатҳои дароз.
Ранг + нишона, аммо маъно - дар матн.

5. 2 Дар поён шакл (хулоса)

Рӯйхати ҳамаи хатогиҳо бо лангарҳои саҳроӣ.
Тугмаи "Гузаштан ба хатогӣ "/пахш кардани ашё фокусро иваз мекунад.

5. 3 Дар раванди ирсол

Блоки такрории такрорӣ (ҳолати "банд").
Бо гузашти 3-5 с - "Интизории тасдиқ"... бо такрори бехатар.

6) Ниқобҳо, маслиҳатҳои худкор ва исботкунандагон

Ниқобҳо набояд ба воридкунӣ/таҳрир халал расонанд. Вуруди ройгонро иҷозат диҳед, дар зери кулоҳ муқаррар кунед.
Маслиҳатҳои худкор: форматҳои намуна, ҷойгузинро ҳамчун ишора нишон диҳед, на қисми "зарурӣ".
Нормализатсия: фазои буридан, муттаҳидсозии регистрҳо, худкори формат (масалан, '+ 1 (___) ___ - ____') - аммо версияи "тоза" -ро дар маълумоти манбаъ нигоҳ доред.

7) Дастрасӣ (A11y)

Истинод: 'label' ↔ 'вуруд', хатогиҳо дар 'aria-descripedby'.
Интиқодӣ - 'нақш = "ҳушдор"', иттилоотӣ - 'нақш = "статус"'.
Мо диққати худро ба майдони хато бармегардонем, ': фокус намоён' мо мебинем.
Контрасти матн/нишона ≥ АА; маъно танҳо аз ранг вобаста нест.

html
<label for="email">Email</label>
<input id="email" name="email" aria-describedby="email-help email-err">
<small id = "email-help "> For example, user @ domain. tld</small>
<p id = "email-err" class =" field-error" role = "alert" hidden> Check email format </p>

8) Форматҳои байналмилалӣ ва маҳаллисозӣ

Номҳо/суроғаҳо: алифбои гуногун, дарозӣ, апостроф, гипсро иҷозат диҳед.
Санаҳо/асъорҳо/рақамҳо: Форматҳои вуруди маҳаллӣ ва сохторҳои қатъии дохилиро истифода баред (ISO/шумораи сент).
Телефон: вуруд ба формати байналмилалии '+ CC', худкор аз рӯи кишвар.
Забони паём: кӯтоҳ, фарҳангӣ бетараф; гузоштан + 20-30% дарозии хат.

9) Амният ва махфият

Нишон надиҳед, ки ҳисоб вуҷуд дорад/вуҷуд надорад - матни умумӣ: "Агар почтаи электронӣ сабт шуда бошад, мо почтаи электронӣ мефиристем".
Маълумоти ҳассосро маска кунед (PAN, шиноснома).
Дар қадамҳои муҳим (дархост/пардохт) истифодаи аблаҳӣ ва "такрори бехатар" истифода мешавад.
Гузоришҳо - бо ID-и коррелятсионӣ бе PII дар паёмҳо.

10) Нигоҳ доштани пешрафт

Лоиҳаи autosave (маҳаллӣ/сервер).
Ҳангоми хатогии пешниҳод - варақа пур карда мешавад; такроран таклиф карда мешавад.
Барои равандҳои бисёрқабата (KYC) - Қадамҳои анҷомёфтаро захира кунед.

11) Санҷиши асинхронӣ

Қарзҳои 250-400 мс; мо "санҷед"... -ро дар наздикии майдон бидуни бастани тамоми экран нишон медиҳем.
Нишондиҳандаи равшани муваффақият/нокомӣ бидуни "каҷ" -и тарҳ.
Вақти шабақа → "Тафтиш карда намешавад. Мехоҳед бо хатар идома диҳед? (агар лозим бошад) ё Redo.

js const checkUsername = debounce(async (v)=>{
state. usernameChecking = true;
const ok = await api. unique('username', v). catch(()=>null);
state. usernameChecking = false;
state. usernameValid = ok === true;
}, 300);

12) Варақаҳои пардохт ва KYC (мушаххасот)

Харитаҳо: формати PAN, истилоҳ, CVC - тасдиқи воридшуда; хатогиҳо - бидуни ифшои сабаби рад кардани бонк.
A2A/wallets: санҷиши қобили қабул будани кишвар/маҳдудиятҳо, матнҳои возеҳ дар бораи комиссияҳо/мӯҳлатҳо.
KYC: талаботи зина ба зина ба суратҳо/ҳуҷҷатҳо, пешнамоиш, андоза/намуди файл, вақти санҷиш, махфият.
Бозии масъул: паёмҳо бетарафанд, бо амалҳои "Set limit "/" Help ".

13) Антипаттернҳо

Нишон додани хатогиҳои "ҳар як аломат" бе debunking.
Варақаро дар хатогӣ барқарор мекунад.
Паёми "вуруди нодуруст" бидуни майдон/қоида.
Иттилооти интиқодӣ танҳо аз рӯи ранг/нишона.
Барои тасдиқи майдони ягона тамоми саҳифаро қулф кунед.
Набудани ҳолати офлайнӣ ва такрорӣ ҳангоми шикасти шабака.

14) Нишонаҳои системаи тарроҳӣ (мисол)

json
{
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100,
"asyncTimeoutMs": 5000,
"summaryMaxItems": 6
},
"a11y": {
"useAriaDescribedby": true,
"errorRole": "alert",
"statusRole": "status"
},
"visual": {
"fieldGap": 8,
"iconSize": 16,
"borderRadius": 10
}
}

15) Порчаҳои татбиқ

js const rules = {
email: v => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)         "Check email format"
};
async function validateEmail(v){
const fmt = rules. email(v);
if (fmt!== true) return fmt;
try {
const r = await fetch(`/api/email/check? v=${encodeURIComponent(v)}`);
const { allowed } = await r. json();
return allowed? true: "This email is not available. Please select another. ";
} catch {
return "Failed to validate. Repeat later. ";
}
}

ts function focusFirstError() {
const err = document. querySelector('[aria-invalid="true"]');
if (err) err. focus({ preventScroll:false });
}

js const saveDraft = debounce(form => localStorage. setItem('draft', JSON. stringify(Object. fromEntries(new FormData(form)))), 500);
form. addEventListener('input', ()=>saveDraft(form));

16) Нишондиҳандаҳо ва назорат

Вақт-ба-ислоҳ.
Меъёри хатогӣ аз рӯи майдон ва сабаб (формат/маҳдудият/сервер).
Сатҳи муваффақиятро такрор кунед.
Таносуби шаклҳои партофташуда ва умқи қатрон.
Пур аз дархостҳо: CTR "Тафсилот", басомади пинҳон кардани дархостҳо.

17) Рӯйхати назоратии QA

A11y

• Фокус ба майдони аввалини беэътибор мегузарад; маҷмӯи 'aria-describedby '/' aria-беэътибор'.
• Муқоиса ≥ АА; паёмҳо танҳо аз ранг мустақил нестанд.

Рафтор

• Тасдиқи сохташуда бо debunking; хатогиҳо на пештар аз норӯшан пайдо мешаванд (ба истиснои ниқобҳои интиқодӣ).
• Хулоса оид ба пешниҳод таҳия карда мешавад, майдонҳо тоза карда намешаванд.
• Санҷишҳои асинхронӣ саҳифаро қулф намекунанд; вақт ва такрори вуҷуд дорад.

Матн

• Сабаб + чӣ гуна ислоҳ кардан; ягон кодекс/гуноҳ нест.
• Маҳаллисозӣ тарҳро вайрон намекунад; намунаҳо мувофиқанд.

Амният

• Ҳеҷ гуна ихроҷи PII дар паёмҳо; мавҷудияти ҳисобро ифшо накунед.
• Номутобиқатӣ барои амалиётҳои муҳим.

18) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

Компонентҳо: 'Field

Харитаҳои қоида барои соҳаҳои муқаррарӣ (почтаи электронӣ, телефон, парол, суроға, IBAN, сана).
Роҳнамо барои debunking, санҷиши асинхронӣ ва рафтори офлайнӣ.
Қолибҳои матнӣ барои хатогиҳои зуд ва пеш аз/баъд аз намунаҳо.

Хулосаи мухтасар

Тасдиқи дохилӣ дар бораи нигоҳубини пешгӯишаванда, дастурҳои возеҳ ва муносибати бодиққат ба маълумот мебошад. Ба таври маҳаллӣ ва дар сервер санҷед, хатогиҳоро дар вақти зарурӣ бо амалҳои мушаххас нишон диҳед, дастрасӣ ва махфиятро эҳтиром кунед, пешрафтро сарфа кунед ва debuns-ро истифода баред. Ҳамин тавр, шаклҳо дӯстона мешаванд ва хатогиҳо зуд ва ҳалшаванда мешаванд.