UX formalarının layihələndirilməsi

1) Prinsiplər

1. Əvvəlcə vəzifə, sonra sahələr. Formalar - istifadəçi ssenarisinin davamı, DB siyahısı deyil.
2. Bir ekran - bir hədəf. Tapşırığın tamamlanmasına səbəb olmayan hər şeyi silin.
3. Məlumatlarınızı heç vaxt itirməyin. Avtoseyv, layihənin bərpası, təhlükəsiz təkrarlamalar.
4. «Necə düzgün» göstərin. Səhv qaydaları və nümunələri; diqqətlə valid.
5. Default mövcudluğu. Etiketlər, fokus, kontrast, klaviatura naviqasiyası.
6. Proqnozlaşdırıla bilən sürət. İlk cavab ≤ 100 ms, açıq status və tərəqqi ilə göndərmə.

2) Formanın informasiya arxitekturası

Məqsəd → addımlar → sahə. Nəticədən başlayın (məsələn, «pul ödəmə») və minimum sahələr toplusunu ayırın.
Mənasına görə qruplaşdırma: «Şəxsi məlumatlar», «Ödəniş», «Təsdiq». Hər qrup 6 sahə ≤.
Proqressiv açıqlama: əlavə sahələri şərtlə göstərin (toggle/ölkə seçimi).
Sahələrin sırası istifadəçinin başında olduğu kimidir: bilinəndən mürəkkəbə.

3) Maket və grid

Mobil və əksər tapşırıqlar üçün bir sütun - görünüş və tab qaydasında daha sürətli.
İki sütun qısa əlaqəli sahələr üçün uyğundur (tarix/vaxt, ad/soyad).
Sətirin hündürlüyü 40-48 px, sahələr arasındakı məsafə 8-12 px (əlaqəli )/16-24 px (qruplar).
Etiketlərin sahənin üstünə hizalanması; sağda - dar formalar üçün istifadə edilmir.

4) Leybllar, pleysholderlər, helperlər

Etiket tələb olunur. Playsholder bir nümunədir, əvəzedici deyil.
Helper mətni sahənin altına yerləşdirin: qaydalar, format, nümunəyə keçid.
İsteğe bağlı sahələri «(isteğe bağlı)» əvəzinə «» ilə qeyd edin.

Nümunə:

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) Addımlar və tərəqqi

Çoxaddımlı formalar (KS/ödənişlər): 3-5 addım, «Addım 2-dən 4» aydın tərəqqi.
Tamamlanmış addımları saxlayın; məlumat itkisi olmadan qayıtmağa icazə verin.
Naviqasiya düymələri: «Geri», «Sonrakı», son «Təsdiq» - həmişə bir yerdə.

6) Giriş nəzarəti

Klaviatura və atributlar: 'type', 'inputmode', 'autocomplete' data növü üçün.
Giriş maskalarını yumşaq istifadə edin (telefon, IBAN, PAN, tarix), normallaşdırılmış dəyərləri saxlayın.
Avtomatik doldurma: düzgün' autocomplete =» given-name» | «cc-number» | «one-time-code»' və s.
Məbləğlərin presetləri/şortkatlar: məbləğ sahəsinin yanında «+ 50/+ 100/Hamısı».

Atributlar cədvəli:

Sahə	type	inputmode	autocomplete
Email	email	email	email
Telefon	tel	tel	tel
Məbləğ	text	decimal	off
PAN	text	numeric	cc-number
CVC	password	numeric	cc-csc
Kart tarixi	text	numeric	cc-exp
OTP	text	numeric	one-time-code

7) Validasiya və səhvlər

Strategiya: girişdən əvvəl (yardım), zamanı (yumşaq məsləhətlər), sonra (blur/submit).
Asinxron yoxlamalar (login unikallığı, limitlər, risk) - 250-400 ms debaunsla.
Səhv mətni: səbəb → necə düzəldilir → alternativ.
Summary panel bir neçə səhv üçün forma + ilk səhv diqqət.
Kritik hərəkətlər üçün Idempotency-Key (bahis/ödəniş) və təhlükəsiz retras.

8) düymələri və göndərilməsi

Birincil CTA Enter-də mövcud olan rəng/ölçü ilə seçilir.
'Busy' - təkrarlanan klik vəziyyəti və bloklanması; gecikmə> 3-5 s - «Təsdiq gözləyirik»....
Müvəffəqiyyətdən sonra - aydın status (tost/ekran «Bitdi») + bundan sonra nə olacaq.

9) Mövcudluq (A11y)

Doğru əlaqələr 'label → input', səhvlər 'aria-describedby', kritik - 'role =' alert '.
Görünür ': focus-visible', Tab qaydası vizual uyğun gəlir.
Mətn/ikon kontrastı ≥ AA; mənası yalnız rəng deyil.
Dəstək 'prefers-reduced-motion': minimum animasiya.
"fieldset/legend" radiokapka qrupları üçün, "role =" status "ipuçları üçün.

10) Lokalizasiya və beynəlxalq formatlar

Tarixlər/valyutalar/nömrələr - giriş zamanı yerli, saxlama - ISO/minor vahidləri.
Ad/ünvanda müxtəlif əlifbalara icazə verin; defisləri/apostrofları məhdudlaşdırmayın.
Telefon E.164 saxlanılır; ölkə açıq seçilir və ya daxil edildikdə '+ CC'.

11) Performans və sabitlik

İlk vizual cavab ≤ 100 ms; sinxron yoxlamalar - ekranı bloklamayın.
Skeleton «asılı» spinner əvəzinə, hündürlükləri düzəldin, CLS-dən çəkinin.
Uzun siyahıları virtuallaşdırın (məsələn, ölkələr/banklar).
Yalnız 'transform/opacity', kütləvi blur/kölgə olmadan animasiya edin.

12) Təhlükəsizlik və məxfilik

PAN/CVC/pasport qeyd etməyin; RUM/konsola göndərməyin.
Həssas sahələri maskalayın, onları avtomobil seyvində saxlamayın.
Hesabın olub olmadığını açıqlamayın: «Əgər e-mail qeydiyyatdan keçibsə, e-poçt göndərəcəyik».
Saxlama - minimal zəruridir; KYC-nin nə üçün lazım olduğunu göstərin.

13) Standart ssenarilər üzrə nümunələr

13. 1 Ödəniş/depozit

Ön ayarlar ilə məbləğ sahəsi, valyuta açıq şəkildə göstərilmişdir.
yumşaq maska ilə PAN, Luhn-yoxlama; CVC gizli; tarix 'MM/YY' avto- '/'.
Komissiya/şərtlər haqqında mətn yaxın, tooltip deyil.

13. 2 Vəsaitlərin çıxarılması

Addımlar: «Məbləğ → Metod → Təsdiq».
Tərəqqi və «Adətən N dəqiqə/saat» (sərt vədlər olmadan).
Ölkə üzrə metodun variantları; limitlər haqqında xəbərdarlıqlar.

13. 3 KYC

Addım-addım fayl yükləyici: format/çəki tələbləri, preview, privacy.
Yoxlama vaxtı və status kanalı (poçt/bildiriş).

13. 4 Limitlər və məsuliyyətli oyun

Aydın vahidlər (gün/həftə/ay), ön düzəlişlər, dəyişikliklərin təsdiqi, «vasitəsilə qüvvəyə minəcək»....

14) Antipattern

Placeholder etiket əvəzinə.
Debauns olmadan «hər simvol üçün» səhvlər.
Səhv olduqda formanı sıfırlayın.
Kritik təlimat yalnız tooltip-də gizlədilir.
Valid simvolları qadağan edən sərt maskalar.
Bir sahəni yoxlamaq üçün bütün səhifəni bloklayın.
Açıq busy/tərəqqi olmadan göndərmə.

15) Satış Snippets

Səhv xülasəsi + ilk problemə diqqət

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

Ani busy və idempotentlik düyməsi

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');
}
});

Mövcud radio qovuqları qrupunun HTML çərçivəsi

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) Dizayn sistemi tokenləri (nümunə)

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 Presets

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) Metriklər və təcrübələr

Completion Rate, Time-to-Complete, sahələrdə Error Rate.
Retry Success Rate, atılmış formaların payı, addım dərinliyi.
CTR ipuçları/nümunələri, avtomatik doldurma payı.
A/B: sahə sırası, məbləğ presetləri, səhv mətnləri, addımlara bölünmə.

18) QA-çek siyahısı

Məna və axın

Sahələr hədəfə uyğun gəlir; heç bir lazımsız.
Qruplar məntiqlidir; qrupa maksimum 6 sahə.

Giriş

Doğru 'type/inputmode/autocomplete'.
Maskalar yumşaqdır, insert qırılmaz, caret proqnozlaşdırıla bilər.

Validasiya

Helper giriş əvvəl; blur/submit səhvləri; debauns 250-400 ms.
Çox səhv üçün Summary panel; birinciyə diqqət.

Mövcudluq

Etiketlər bağlıdır; kontrast ≥ AA; ': focus-visible' görünür.
Klaviatura ilə naviqasiya; 'fieldset/legend' radio qrupları.

Performans

İlk cavab ≤ 100 ms; heç bir «asma» spinner.
CLS yoxdur; uzun siyahılar virtuallaşdırılmışdır.

Təhlükəsizlik

Həssas sahələr yoxdur; PAN/CVC avtomobil seyvində deyil.
İdempotentlik və təhlükəsiz retrajlar daxildir.

19) iGaming xüsusiyyətləri

Dərəcələr: məbləğ sahəsi + presetlər, ani 'busy', undo imkanı ilə optimist təsdiq (reqlament icazə verərsə).
Ödənişlər/nəticələr: yalnız ipuçlarında deyil, sahələrin yanında açıq komissiyalar və şərtlər; limitlərin və KYC statusunun yoxlanılması.
Turnirlər: minimum məlumat dəsti ilə qeydiyyat forması, qaydalar və «qaranlıq nümunələr» olmadan razılaşdırılan çekboxlar.
Məsuliyyətli oyun: başa düşülən intervallarla və nəticəni qabaqlamaqla limit qoyma formaları («Sabahdan etibarən gündəlik limitiniz 2000 olacaq»).

Qısa xülasə

Yaxşı forma aydın məqsəd, minimum sahə dəsti, səhvdən əvvəl aydın qaydalar, dərhal cavab və saxlanılan məlumatlardır. Ssenaridən quruluşu layihələndirin, əlçatanlığa və lokallara hörmət edin, təhlükəsiz retrajları və idempotantlığı daxil edin. Formalar tez və etibarlı hiss olunur - xüsusilə kritik iGaming ssenarilərində.