ჩამონტაჟებული შემოწმება და UX შეცდომები

1) პრინციპები

1. წინასწარი დახმარება, არა სასჯელი. ჩვენ ვაჩვენებთ, თუ როგორ უნდა შევიტანოთ სწორად, შეცდომამდე.
2. არ დაკარგოთ მონაცემები. ნებისმიერი შეცდომა არ ანადგურებს დანერგულ შეცდომას; ჩვენ მხარს ვუჭერთ გაუქმებას/გამეორებას.
3. შოუს მომენტი.

შესვლამდე: ჰელპერის ტექსტი (წესები და მაგალითები).
დროს: რბილი ჰინტები/ნიღაბი/მანქანის შეცვლა.
შემდეგ (blur/subit): მკაფიო შეცდომა ინსტრუქციით „როგორ გამოსწორდეს“.
4. ყურადღების დაზოგვა. ერთი შეტყობინება არის ერთი მიზეზი და მოქმედება.
5. ხელმისაწვდომობა. ტექსტი + ხატი/ფერი, ARIA- ს საშუალებით მინდორთან კავშირი, პირველი მცდარი ველის ყურადღება.

2) ვალიდაციის ფენები

კლიენტის სინქრონული: ფორმატი, სიგრძე, სავალდებულო, ნიღაბი. სწრაფი და იაფი.
კლიენტის ასინქრონული: ლოგინის უნიკალურობა, BIN/IBAN შემოწმება, API მინიშნებები. დებიუტით.
სერვერი: ბიზნეს წესები, ლიმიტები, რისკის ესკიზი, საავტორო უფლებები/უფლებები. ბოლო ინსტანციის ჭეშმარიტება.
წესი: სრულყოფილი კლიენტის შემოწმების დროსაც კი, სერვერი ადასტურებს და ქმნის საბოლოო ტექსტს.

3) ტაიმინგი და დებიუტი

სავალდებულო blur - მყისიერი fidback 100 ms.
ასინქრონული შემოწმება - შეყვანა შეჩერების შემდეგ 250-400 ms.
წარმატების დადასტურებაა ლაკონური („ოკ“) ან მწვანე ხატი; „ფეიერვერკის“ გარეშე.
„წყალქვეშა“ საშუალებით ჩვენ ვაჩვენებთ შეცდომების ჩამონათვალს და პირველ რიგში გადავცემთ ფოკუსს.

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

4) შეცდომების საავტორო უფლებები

შაბლონი: მიზეზი იმისა, თუ როგორ უნდა გამოსწორდეს ალტერნატივა (თუ არსებობს).

კარგი: "პაროლი უფრო მოკლეა, ვიდრე 8 სიმბოლო. დაამატეთ სიმბოლოები ან გამოიყენეთ ფრაზა."

კარგია: "IBAN არასწორად გამოიყურება. შეამოწმეთ სიგრძე და სიმბოლოები: A-Z, 0-9."

ცუდი: „არასწორი შეყვანა“.
ნუ დაადანაშაულებთ მომხმარებელს; მოერიდეთ ჟარგონს და კოდებს.
მგრძნობიარე ზონებში (გადახდები/CCC) თავიდან აიცილეთ უსაფრთხოების დეტალები.

5) შეტყობინებების ნიმუშები

5. 1 მოედანზე (inline)

`aria-invalid="true"`, текст в `aria-describedby`.
მოკლედ, კონკრეტულად; გრძელი აბზაცების გარეშე.
ფერი + ხატი, მაგრამ მნიშვნელობა ტექსტშია.

5. 2 უნიფორმის ქვეშ

მინდვრებში წამყვანების ყველა შეცდომის ჩამონათვალი.
ღილაკი „შეცდომაზე გადასვლა “/დაწკაპუნება ფოკუსირებულია პუნქტში.

5. 3 გაგზავნის დროს

ჩვენ ბლოკავს მეორე დაჭერით (სახელმწიფო 'busy').
3-5 წამში - „ველოდებით დადასტურებას“... უსაფრთხო გამეორებით.

6) ნიღბები, ავტო მოთხრობები და კორექტორები

ნიღბები არ უნდა ერეოდეს ჩანართში/რედაქტირებაში. ნება მიეცით უფასო შეყვანა, ქუდის ქვეშ ნორმალიზება.
ავტო მოთხრობები: აჩვენეთ ფორმატის მაგალითები, placeholder, როგორც მინიშნება და არა „სავალდებულო“ ნაწილი.
ნორმალიზაცია: ხაზების გადახრა, რეესტრების გაერთიანება, მანქანის ფორმატი (მაგალითად, '+ 1 (_ _ _ _) _ _ - _ _ _ _ _ ") - მაგრამ შეინარჩუნეთ" სუფთა "ვერსია წყაროს მონაცემებში.

7) წვდომა (A11y)

კომუნიკაცია: 'label' input ', შეცდომები' aria-describedby '.
კრიტიკული - 'role = "alert"', ინფორმაციული - 'role = "status" ".
ჩვენ ვუბრუნებთ ფოკუსს არასწორ ველში, ': ჩვენ ვხედავთ focus-visible'.
ტექსტის/ხატის კონტრასტი AA; მნიშვნელობა არ არის დამოკიდებული მხოლოდ ფერზე.

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) უსაფრთხოება და კონფიდენციალურობა

არ აჩვენოთ, რომ ანგარიში არსებობს/არ არსებობს - ზოგადი ტექსტი: „თუ email რეგისტრირებულია, ჩვენ წერილს გამოგიგზავნით“.
შენიღბეთ მგრძნობიარე მონაცემები (PAN, პასპორტი).
კრიტიკულ ნაბიჯებზე (განაკვეთი/გადახდა) გამოიყენეთ idempotence და „უსაფრთხო გამეორება“.
ლოგოები არის ID კორელაციის გარეშე PII შეტყობინებებში.

10) წინსვლის შენარჩუნება

მონახაზი (ადგილობრივად/სერვერზე).
გაგზავნის შეცდომით - ფორმა შევსებულია; შემოთავაზებულია მოგვიანებით გამეორება.
მრავალსაფეხურიანი პროცესების დროს (KYC) - შეინარჩუნეთ დასრულებული ნაბიჯები.

11) ასინქრონული ვალდებულება

Debauns 250-400 ms; ჩვენ ვაჩვენებთ „შემოწმებას“... მინდვრის მახლობლად, მთელი ეკრანის დაბლოკვის გარეშე.
წარმატების/შეუსაბამობის მკაფიო მითითება განლაგების „ჩამოსხმის“ გარეშე.
ქსელის ტაიმუთი "ვერ მოხერხდა შემოწმება. გავაგრძელო რისკი?" (თუ დასაშვებია) ან გამეორება.

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/საფულეები: ქვეყანაში/ლიმიტებზე დაშვების შემოწმება, მკაფიო ტექსტები კომისიების/ვადების შესახებ.
KYC: ეტაპობრივი მოთხოვნები ფოტო/დოკუმენტებისთვის, წინასწარი შემოწმება, ფაილის ზომა/ტიპი, გადამოწმების დრო, კონფიდენციალურობა.
საპასუხისმგებლო თამაში: შეტყობინებები ნეიტრალურია, მოქმედებებით „დააწესეთ ლიმიტი „/„ დახმარება “.

13) ანტიპატერები

შეცდომების ჩვენება „თითოეული სიმბოლოსთვის“ დებატების გარეშე.
შეცდომის შემთხვევაში ფორმის გამონადენი.
შეტყობინება „არასწორი შეყვანა“ ველის/წესის მითითების გარეშე.
კრიტიკული ინფორმაცია მხოლოდ ფერით/ხატით.
მთელი გვერდის დაბლოკვა ერთი ველის შესამოწმებლად.
ოფლაინის რეჟიმის არარსებობა და გამეორება ქსელის გაუმართაობაში.

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) Snippets განხორციელება

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) მეტრიკი და კონტროლი

Time-to-Fix (დრო შეცდომიდან გამოსწორებამდე).
Error rate მინდვრებში და მიზეზების გამო (ფორმატი/ლიმიტები/სერვერი).
განმეორებითი გაგზავნა (retry success rate).
მიტოვებული ფორმების წილი და ნაბიჯის სიღრმე.
მინიშნებებით შევსება: CTR „დამატებითი“, მინიშნებების დამალვის სიხშირე.

17) QA ჩეკის სია

A11y

• ფოკუსი გადადის პირველ მცდარ ველში; 'aria-describedby '/' aria-invalid' გამოიფინა.
• კონტრასტი AA; შეტყობინებები არ არის დამოკიდებული მხოლოდ ფერზე.

ქცევა

• ჩამონტაჟებული შემოწმება დებატებით; შეცდომები ჩნდება არა უადრეს ბლურისა (კრიტიკული ნიღბების გარდა).
• შეჯამება იქმნება წყალქვეშა ნავზე, მინდვრები არ იწმინდება.
• ასინქრონული შემოწმებები არ ბლოკავს გვერდს; არის ტაიმუთი და გამეორება.

ტექსტი

• მიზეზი + როგორ უნდა გამოსწორდეს; კოდების/დანაშაულის გარეშე.
• ლოკალიზაცია არ არღვევს განლაგებას; მაგალითები აქტუალურია.

უსაფრთხოება

• შეტყობინებებში არ არის PII გაჟონვა; არ ვაცხადებთ ანგარიშის არსებობას.
• Idempotention კრიტიკული ოპერაციებისთვის.

18) დოკუმენტაცია დიზაინის სისტემაში

კომპონენტები: 'FielError', 'FormSummary', 'HelperText', 'BusyButton'.
სტანდარტული ველების წესების ბარათები (email, ტელეფონი, პაროლი, მისამართი, IBAN, თარიღი).
გაიდები დებატზე, ასინქრონულ შემოწმებაზე და ოფლაინ ქცევაზე.
ტექსტების შაბლონები ხშირი შეცდომებისა და მაგალითებისთვის „ადრე/შემდეგ“.

მოკლე რეზიუმე

ჩამონტაჟებული შესაბამისობა არის წინასწარი დახმარების, მკაფიო ინსტრუქციების და მონაცემების ფრთხილად დამოკიდებულების შესახებ. შეამოწმეთ ადგილობრივად და სერვერზე, აჩვენეთ შეცდომები სწორ მომენტში კონკრეტული მოქმედებებით, პატივი სცეთ წვდომას და კონფიდენციალურობას, შეინარჩუნეთ პროგრესი და გამოიყენეთ დებატები. ასე რომ, ფორმები ხდება მეგობრული, ხოლო შეცდომები - სწრაფი და გამოსწორებული.