UX ფორმების დიზაინი

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

1. ჯერ დავალება, შემდეგ მინდვრები. ფორმები - მომხმარებლის სცენარის გაგრძელება და არა მონაცემთა ბაზის სია.
2. ერთი ეკრანი ერთი მიზანია. ამოიღეთ ყველაფერი, რაც არ იწვევს დავალების დასრულებას.
3. არასოდეს დაკარგოთ მონაცემები. ავტომობილები, მონახაზის აღდგენა, უსაფრთხო გამეორება.
4. აჩვენეთ „როგორ არის სწორი“. წესები და მაგალითები შეცდომამდე; ფრთხილად იყავით.
5. ნაგულისხმევი ხელმისაწვდომობა. ეტიკეტები, ფოკუსი, კონტრასტი, კლავიატურის ნავიგაცია.
6. პროგნოზირებადი სიჩქარე. პირველი პასუხი - 100 ms, გაგზავნა აშკარა სტატუსით და პროგრესით.

2) ფორმის ინფორმაციის არქიტექტურა

მიზანი არის ნაბიჯების გადადგმა. დაიწყეთ შედეგით (მაგალითად, „თანხების გადახდა“) და გამოყავით ველების მინიმალური ნაკრები.
ჯგუფი მნიშვნელობით: „პირადი მონაცემები“, „გადახდა“, „დადასტურება“. თითოეულ ჯგუფს 6 ველი აქვს.
პროგრესული გამჟღავნება: დამატებითი ველები აჩვენეთ პირობით (ქვეყნის არჩევანი).
ველების რიგი ჰგავს მომხმარებლის თავში: ცნობილიდან რთულამდე.

3) განლაგება და ბადე

მობილური და უმეტესი დავალებების ერთი სვეტი უფრო სწრაფია მზერა და შეკვეთა.
ორი სვეტი შესაფერისია მოკლე ურთიერთდაკავშირებული ველებისთვის (თარიღი/დრო, სახელი/გვარი).
სტრიქონის სიმაღლეა 40-48 px, მანძილი მინდვრებს შორის 8-12 px (დაკავშირებული )/16-24 px (ჯგუფი).
ეტიკეტების გასწორება მინდვრის თავზე; მარჯვნივ - არ გამოიყენოთ ვიწრო ფორმები.

4) ეტიკეტები, პლეისჰოლდერები, ჰელპერები

ეტიკეტი სავალდებულოა. პლეიშოლდერი მაგალითია და არა ჩანაცვლება.
Helper ტექსტი განათავსეთ მინდვრის ქვეშ: წესები, ფორმატი, მაგალითის ბმული.
სურვილისამებრ დაუთმეთ „(არა აუცილებელი)“ ნაცვლად „“ სავალდებულო.

html
<label for = "iban"> IBAN <span class = "muted"> (optional) </span> </label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format A-Z, 0-9; example: DE89 3704 0044 0532 0130 00 </small>

5) ნაბიჯები და პროგრესი

მრავალსაფეხურიანი ფორმები (KUS/გადახდები): 3-5 ნაბიჯი, აშკარა პროგრესი „ნაბიჯი 2 4-დან“.
შეინარჩუნეთ სწორი ნაბიჯები; ნება მომეცით დაბრუნება მონაცემთა დაკარგვის გარეშე.
სანავიგაციო ღილაკები: „უკან“, „შემდეგი“, საბოლოო „დადასტურება“ - ყოველთვის ერთ ადგილზე.

6) შეყვანის მენეჯმენტი

კლავიატურა და ატრიბუტები: 'ტიპი', 'inputmode', 'autocomplete' მონაცემთა ტიპისთვის.
გამოიყენეთ შეყვანის ნიღბები რბილად (ტელეფონი, IBAN, PAN, თარიღი), შეინახეთ ნორმალიზებული მნიშვნელობები.
არ დაარღვიოთ ბენზინგასამართი სადგური: სწორი' autocomplete =“ given-name“ | „cc-number“ | „ერთი დრო-კოდი“ და ა.შ.
თანხები/შორტკატები: „+ 50/+ 100/ყველა“ თანხის ველის გვერდით.

7) ვალიდაცია და შეცდომები

სტრატეგია: შესვლამდე (ჰელპერი), დროს (რბილი რჩევები), შემდეგ (ბლურ/წყალქვეშა).
ასინქრონული შემოწმებები (ლოგინის უნიკალურობა, ლიმიტები, რისკი) - 250-400 ms.
შეცდომების ტექსტი: მიზეზი, თუ როგორ უნდა გამოსწორდეს ალტერნატივა.
Summary პანელი რამდენიმე შეცდომის ფორმაზე + პირველი შეცდომის ფოკუსი.
Idempotence-Key კრიტიკული ქმედებებისთვის (განაკვეთი/გადახდა) და უსაფრთხო რეაგირება.

8) ღილაკები და გაგზავნა

პირველადი CTA გამოირჩევა ფერი/ზომა, რომელიც ხელმისაწვდომია Enter.
'Busy' - საზოგადოება და კლიკის გამეორების დაბლოკვა; დაგვიანებით> 3-5 წმ - „ჩვენ ველოდებით დადასტურებას“....
წარმატების შემდეგ - აშკარა სტატუსი (სადღეგრძელო/ეკრანი „მზად“) + რა მოხდება შემდეგ.

9) წვდომა (A11y)

სწორი კავშირები 'label-input', შეცდომები 'aria-describedby- ის მეშვეობით „, კრიტიკული -“ role = „alert“.
ხილული ': focus-visible', Tab ბრძანება შეესაბამება ვიზუალურ.
ტექსტის/ხატის კონტრასტი AA; მნიშვნელობა არა მხოლოდ ფერით.
'prefers-reduced-motion' მხარდაჭერა: მინიმალური ანიმაციები.
რადიო ჯგუფებისთვის - „fieldset/legend“, მინიშნებისთვის - „role =“ status „“.

10) ლოკალიზაცია და საერთაშორისო ფორმატები

თარიღები/ვალუტა/ნომრები - ადგილობრივი შესვლის დროს, საცავი - ISO/უმცირესობის ერთეულები.
დაუშვით სხვადასხვა ანბანი სახელებში/მისამართებში; არ შემოიფარგლოთ დეფისი/აპოსტროფები.
შეინახეთ ტელეფონი E.164; ქვეყანა შეირჩევა აშკარად ან '+ CC- დან' ჩანართის დროს.

11) შესრულება და სტაბილურობა

პირველი ვიზუალური პასუხი 100 ms; ასინქრონული შემოწმებები - არ დაბლოკავს ეკრანს.
სკელეტონი „ჩამოკიდებული“ სპინერის ნაცვლად, დაფიქსირდა სიმაღლეები, თავიდან აიცილეთ CLS.
ვირტუალიზაცია გრძელი სიებით (მაგალითად, ქვეყნები/ბანკები).
ანიმაცია მხოლოდ „ტრანსფორმირება/დაბალანსება“, მასობრივი ბლურ/ჩრდილების გარეშე.

12) უსაფრთხოება და კონფიდენციალურობა

არ მოაწყოთ PAN/CVC/პასპორტი; არ გაგზავნოთ RUM/კონსოლში.
შენიღბეთ მგრძნობიარე ველები, ნუ შეინახავთ მათ მანქანაში.
არ გაამჟღავნოთ ანგარიში: „თუ email რეგისტრირებულია, ჩვენ წერილს გამოგიგზავნით“.
შენახვა - მინიმალური საჭირო; აჩვენეთ, რატომ არის საჭირო KYC.

13) ნიმუშები ტიპიური სცენარების მიხედვით

13. 1 გადახდა/ანაბარი

პრესეტებით თანხის ველი, ვალუტა აშკარად არის მითითებული.
PAN რბილი ნიღბით, Luhn შემოწმებით; CVC იმალება; თარიღი 'MM/YY' ავტო '/'.
ტექსტი კომისიების/ვადის მახლობლად, არა tooltip.

13. 2 თანხების გატანა

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

13. 3 KYC

ფაილის ეტაპობრივი მტვირთავი: მოთხოვნები ფორმატის/წონის, წინასწარი შემოწმების, კონფიდენციალურობის შესახებ.
შემოწმების დრო და სტატუსის არხი (ფოსტა/შეტყობინება).

13. 4 ლიმიტები და საპასუხისმგებლო თამაში

გასაგები ერთეულები (დღე/კვირა/თვე), სარეკონსტრუქციო შენობები, ცვლილებების დადასტურება, „ძალაში შედის“....

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

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

15) Snippets განხორციელება

შეცდომების შეჯამება + პირველი პრობლემა

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

ღილაკი მყისიერი busy და idempotence

js btn. addEventListener('click', async () => {
btn. classList. add('is-busy');
try {
const r = await fetch('/api/submit', {
method: 'POST',
headers: { 'Idempotency-Key': crypto. randomUUID() },
body: new FormData(document. querySelector('form'))
});
if (!r.ok) throw new Error();
// success UI
} catch {
// show retry
} finally {
btn. classList. remove('is-busy');
}
});

ხელმისაწვდომი რადიო ბოჭკოების ჯგუფის HTML ჩარჩო

html
<fieldset>
<legend> How to get </legend>
<label><input type="radio" name="method" value="sepa"> SEPA</label>
<label><input type="radio" name="method" value="swift"> SWIFT</label>
</fieldset>

16) დიზაინის სისტემის ნიშნები (მაგალითი)

json
{
"form": {
"gap": 12,
"groupGap": 20,
"labelSize": 14,
"fieldHeight": 44,
"radius": 10
},
"motion": {
"pressMs": 90,
"hoverMs": 160,
"overlayInMs": 240
},
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

CSS პრესეტები

css
.form { display:grid; gap:12px; }
.form__group { display:grid; gap:20px; }
label { font-size:14px; }
.input { height:44px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }

17) მეტრიკა და ექსპერიმენტები

Completion Rate, Time-to-Complete, Error Rate მინდვრებში.
Retry Success Rate, მიტოვებული ფორმების წილი, ნაბიჯის სიღრმე.
CTR რჩევები/მაგალითები, ბენზინგასამართი სადგურების წილი.
A/B: ველების ბრძანება, თანხების დათრგუნვა, შეცდომების ტექსტები, ნაბიჯების დაყოფა.

18) QA ჩეკის სია

მნიშვნელობა და ნაკადი

მინდვრები შეესაბამება მიზანს; ზედმეტი არ არის.

• ჯგუფები ლოგიკურია; ჯგუფში მაქსიმუმ 6 ველი.

შეყვანა

• სწორი 'ტიპი/inputmode/autocomplete'.
• ნიღბები რბილია, ჩანართი არ იშლება, კარეტი პროგნოზირებულია.

ვალიდაცია

• ჰელპერი შესვლამდე; შეცდომები blur/smit; დებიუტი 250-400 ms.
• საზაფხულო პანელი მრავალჯერადი შეცდომისთვის; პირველი ფოკუსი.

ხელმისაწვდომობა

• ეტიკეტები დაკავშირებულია; კონტრასტი AA; ': focus-visible' ჩანს.
• ნავიგაცია კლავიატურიდან; რადიო ჯგუფები 'fieldset/legend'.

შესრულება

პირველი პასუხი 100 ms; არ არსებობს „ჩამოკიდებული“ სპინერები.
არა CLS; გრძელი სიები ვირტუალიზებულია.

უსაფრთხოება

• არ არსებობს მგრძნობიარე ველების ლოგოები; PAN/CVC არ არის მანქანის შოუში.
• Idempotence და უსაფრთხო ჭრილობები შედის.

19) iGaming სპეციფიკა

განაკვეთები: თანხის ველი + პრესეტები, მყისიერი „busy“, ოპტიმისტური დადასტურება უნდო შესაძლებლობით (თუ რეგულაცია იძლევა საშუალებას).
გადახდები/დასკვნები: აშკარა საკომისიო და ვადები მინდვრებთან ახლოს, არა მხოლოდ მითითებებში; შეზღუდვების შემოწმება და KYC სტატუსი.
ტურნირები: რეგისტრაციის ფორმა მინიმალური მონაცემების ნაკრებით, წესები და შეთანხმებული ჩეკბოქსი „მუქი შაბლონების“ გარეშე.
საპასუხისმგებლო თამაში: აშკარა ინტერვალებით ლიმიტების დამონტაჟების ფორმები და შედეგის გადახედვა („თქვენი დღის ლიმიტი იქნება 2 000-დან ხვალიდან“).

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

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