UX ձևերի նախագծումը

1) Սկզբունքներ

1. Սկզբում առաջադրանքը, հետո դաշտերը։ Ձևերը ռուսական սցենարի շարունակությունն են, ոչ թե BD ցուցակը։

2. Մեկ էկրանը մեկ նպատակ է։ Հեռացրեք այն ամենը, ինչը չի հանգեցնում խնդրի ավարտին։

3. Երբեք մի կորցրեք տվյալները։ Ավտոսեյվը, չեռնովիկի վերականգնումը, անվտանգ կրկնությունները։

4. Ցույց տվեք «ինչպես ճիշտ»։ Կանոնները և օրինակները մինչև սխալները. զգույշ եղեք։

5. Լռելյայն հասանելիությունը։ Պիտակները, ֆոկուսը, հակադրությունը, ստեղնաշարային ռոտացիան։

6. Կանխատեսելի արագություն։ Առաջին արձագանքը 100 մզ էր, ուղարկելով ակնհայտ կարգավիճակ և առաջընթաց։

2) Ձևի տեղեկատվական ճարտարապետությունը

Նպատակը ռուսական դաշտի քայլերն է։ Սկսեք արդյունքից (օրինակ ՝ «միջոցների վճարումը») և հատկացրեք դաշտերի նվազագույն հավաքածուն։

Խումբը իմաստ ունի ՝ «Անձնական տվյալները», «Վճարում», «Հաստատում»։ Յուրաքանչյուր խումբ 246 դաշտեր է։

Առաջադիմական բացահայտումը 'ավելացված դաշտերը ցույց տվեք պայմանով (toggle/երկրի ընտրություն)։

Դաշտերի կարգը նման է օգտագործողի գլխին 'հայտնի մինչև բարդ։

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 քայլ, ակնհայտ առաջընթաց «Քայլ 4-ից»։

Պահպանեք վերջնական քայլերը. թույլ տվեք վերադառնալ առանց տվյալների կորստի։

Նավիգացիայի կոճակները ՝ «Առաջ», «Հետո», վերջնական «Հաստատել» միշտ մեկ տեղում է։

6) Ներածության կառավարումը

Ստեղնաշարեր և ատրիբուտներ ՝ «type», «inputmode», «autocomplete» տվյալների տեսակի տակ։

Մուտքային դիմակները օգտագործեք փափուկ (հեռախոսը, IBAN, PAN, ամսաթիվը), պահպանեք նորմալ արժեքները։

Ինքնահրկիզումը մի կոտրեք 'ճիշտ "autocomplete =" given-name "-" cc-num.ru "-" one-time-code "և այլն։

Կանխում են գումարները/շորտկատները ՝ «+ 50/+ 100/Ամեն ինչ» դաշտի մոտ։

Ատրիբուտները (abr.)

7) Վալիդացիան և սխալները

Ռազմավարություն 'մինչև մուտքագրումը (helper), ժամանակ (փափուկ հուշումներ), հետո (blur/www.it)։

Ասինխրոնի ստուգումները (լոգինի, լիմիտների, ռիսկերի) - դեբաունսի հետ 250-400 մզ։

Սխալների տեքստը 'պատճառն այն է, թե ինչպես շտկել այլընտրանքը։

Summary վահանակ մի քանի սխալների ձևի վրա + առաջին սխալի ֆոկուս։

Idempotency-Key-Key-ի համար կրիտիկական գործողությունների համար (տոկոսադրույքը/2019) և անվտանգ ռետրերը։

8) Կոճակներ և ուղարկումներ

Առաջնային CTA-ն առանձնացված է գույնով/չափսով, հասանելի է Enter-ով։

"Busy 's-ը դիմացկուն է և արգելափակում է տեսահոլովակը։ ձերբակալման ժամանակ> 3-5 s - «Սպասում ենք ապացույց»...

Հաջողությունից հետո ակնհայտ կարգավիճակ («Պատրաստ») + ինչ կլինի հետո։

9) Հասանելիություն (A11y)

Ճիշտ կապերը 'label dinput', սխալները 'aria-describedby «, քննադատական'» role = «alment»։

Տեսանելի 'focus-visible ", Tab-ի կարգը համապատասխանում է տեսողական։

Տեքստի/սրբապատկերների հակադրություն AA; իմաստը միայն գույնի չէ։

Աջակցություն 'wwww.fers-reduced-motion' -- առնվազն անիմացիաներ։

Ռադիոկոնոպների խմբերի համար '"fieldset/legend", հուշումների համար' "role =" status "։

10) Տեղայնացումը և միջազգային ֆորումները

Ամսաթվերը/արժույթի/համարները տեղական են, տեղադրման ժամանակ 'CSA/minore միավորներ։

Թույլ տվեք տարբեր այբուբեններ անուններում/հասցեներում։ մի սահմանափակեք դեֆիսները/ապոստրոֆները։

Հեռախոսը պահեք E.64-ում։ երկիրը ընտրվում է կամ '+ CC' -ից, երբ տեղադրվում է։

11) Պերֆորանսը և Իսպանիան

Առաջին տեսողական արձագանքը 100 մզ է։ ասինխրոն ստուգումները չեն արգելափակում էկրանը։

Skeleton-ը «կախված» սպինների փոխարեն, տեղադրեք բարձրությունները, խուսափեք CLS-ից։

Վիրտուալիզացրեք երկար ցուցակները (օրինակ, երկրները/բանկերը)։

Animirurem միայն «transform/opacity», առանց զանգվածային blur/teney։

12) Անվտանգությունն ու գաղտնիությունը

Մի տրամաբանեք PAN/CVC/անձնագիր; մի ուղարկեք RUM/վահանակ։

Դիմեք զգայուն դաշտերին, մի պահպանեք դրանք ավտոսրահում։

Մի բացահայտեք, թե արդյոք կա հաշիվ. <<Եթե email գրանցված է, մենք նամակ կուղարկենք>>։

Պահեստավորումը նվազագույն անհրաժեշտ է։ ցույց տվեք, թե ինչու է պահանջվում KYC-ն։

13) Patterns-ը տիպիկ սցենարներով

13. 1 Մոսկվա/դեպոզիտ

Ճնշումների գումարների դաշտը հստակ նշված է։

PAN-ը փափուկ դիմակով, Luhn-ստուգմամբ։ CVC-ն թաքնված է; ամսաթիվը 'MM/YY' s ավտո '/։

Կոմիսարների/ժամանակի մասին տեքստը մոտ չէ, ոչ թե tooltip-ում։

13. 2 Միջոցների դուրսբերում

Քայլերը ՝ «Բյուջեի մեթոդը Հաստատություն»։

Առաջընթացը և «Սովորաբար մինչև N րոպե/ժամ» (առանց խիստ խոստումների)։

Երկրի մեթոդի տարբերակները. նախազգուշացում սահմանների մասին։

13. 3 KYC

Ֆայլերի մաքսանենգության բեռնիչ 'բանաձևի/քաշի պահանջներ, նախածննդյան, մասնավորություն։

Ստուգման ժամկետները և կարգավիճակների ալիքը (փոստ/ծանուցում)։

13. 4 Լիմիտներ և պատասխանատու խաղ

Հասկանալի միավորներ (օրը/շաբաթ/ամիս), պլանավորում, փոփոխությունների հաստատում, «Ուժի մեջ կմտնի»...

14) Անտիպատերնի

Placeholder-ը պիտակի փոխարեն։

Սխալները «յուրաքանչյուր խորհրդանիշի համար» առանց դեբաունսի։

Սխալի դեպքում ձևերը կոտրվել են։

Քննադատական հրահանգը թաքնված է միայն tooltip-ում։

Կոշտ դիմակներ, որոնք արգելում են վալիդային խորհրդանիշները/ներդիր։

Ամբողջ էջի արգելափակումը մեկ դաշտը ստուգելու համար։

Ուղարկում առանց ակնհայտ busy/առաջընթացի։

15) Իրականացման սնիպետներ

Սխալների ամփոփում + ֆոկուս առաջին խնդրին

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

Կոճակը ակնթարթային buby և dimpotenty

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-chek-թերթ

Իմաստը և հոսքը

• Դաշտերը համապատասխանում են նպատակներին. ավելորդ բան չկա։
• Խմբերը տրամաբանական են. Խմբի ամենամեծ 6 դաշտերը։

Շահագործումը

• Ճիշտ «type/inputmode/autocomplete»։
• Դիմակները փափուկ են, ներդիրը չի կոտրվում, caret կանխատեսելի է։

Վալիդացիա

• Helper մինչև մուտքագրումը; սխալներ blur/www.it; դեբաունս 250-400 մզ։
• Summary վահանակ բազմաթիվ սխալների համար. ֆոկուս առաջինի։

Հասանելիություն

• Լեյբլները կապված են. հակադրություն AA; տեսանելի է։
• Ստեղնաշարից նավարկելը; ռադիոհաղորդումներ '«fieldset/legend»։

Պերֆորանսը

• Առաջին արձագանքը 100 մզ; չկա «կախված» սպիններներ։
• Ոչ CLS; երկար ցուցակները վիրտուալացված են։

Անվտանգություն

• Զգայուն դաշտերի ոչ մի գիծ չկա. PAN/CVC-ը ավտոսրահում չէ։
• Idempotenty և անվտանգ retray ներառվում են։

19) iGaming հատկությունները

Տոկոսադրույքները 'գումարի դաշտը + ճնշում, ակնթարթային ", լավատեսական ապացույց undo հնարավորությամբ (եթե կանոնակարգը թույլ է տալիս)։

Վճարումներ/եզրակացություններ ՝ հստակ վճարումներ և ժամանակներ դաշտերի մոտ, ոչ միայն հուշերում։ KYC-ի սահմանների և կարգավիճակի ստուգում։

Արբիտրներ 'գրանցման ձևը տվյալների նվազագույն հավաքածուի, կանոնների և համաձայնեցված չեկբոքսի հետ առանց մութ փամփուշտների։

Պատասխանատու խաղ 'սահմաններ տեղադրելու ձևեր, որոնք ունեն հասկանալի ընդմիջումներ և արդյունք («Ձեր ցերեկային սահմանը կդառնա 2 000 ռուբլի վաղվանից»)։

Live ռեզյումե

Լավ ձևը պարզ նպատակ է, դաշտերի նվազագույն հավաքածու, հասկանալի կանոններ մինչև սխալները, ակնթարթային արձագանքը և պահպանված տվյալները։ Նախագծեք կառուցվածքը սցենարից, հարգեք հասանելիությունը և լոկալները, միացրեք անվտանգ ռետրերը և կուռքերը։ Այս ձևերը արագ և վստահելի են զգում, հատկապես iGaming-ի քննադատական սցենարներում։