UX şekillerini dizaýn etmek

1) Ýörelgeler

1. Ilki wezipe, soň meýdan. Formalar - ulanyjy ssenarisiniň dowamy, DB sanawy däl.
2. Bir ekran - bir maksat. Meseläniň tamamlanmagyna getirmeýän ähli zatlary aýyryň.
3. Hiç haçan maglumatlary ýitirmäň. Awtoseýw, taslamany dikeltmek, howpsuz gaýtalamak.
4. "Nädip dogry" görkeziň. Ýalňyşlyga çenli düzgünler we mysallar; seresaplylyk bilen tassyklaň.
5. Bar bolmagy. Bellikler, fokus, kontrast, klawiatura nawigasiýasy.
6. Öňünden aýdylýan tizlik. Ilkinji jogap ≤ 100 ms, aýdyň statusy we ösüşi bilen iberilýär.

2) Formanyň maglumat arhitekturasy

Maksat → ädimler → meýdan. Netijeden başlaň (mysal üçin, "pul tölemek") we iň az meýdan toplumyny bölüň.
Manysy boýunça toparlamak: "Şahsy maglumatlar", "Töleg", "Tassyklamak". Her topar 6 meýdan ≤.
Progressiw aýan etmek: Goşmaça meýdanlary şert boýunça görkeziň (toggle/ýurdy saýlamak).
Meýdanlaryň tertibi ulanyjynyň kellesinde bolşy ýaly: belli adamdan çylşyrymlylyga çenli.

3) Maket we tor

Ykjam we köp meseleler üçin bir sütün - görnüşi we tab-tertibi boýunça has çalt.
Iki sütün özara baglanyşykly gysga meýdanlar üçin ýerliklidir (senesi/wagty, ady/familiýasy).
Setiriň beýikligi 40-48 px, meýdanlaryň arasyndaky aralyk 8-12 px (baglanyşykly )/16-24 px (topar).
Nyşanlary meýdanyň üstünde tekizlemek; sagda - dar görnüşler üçin ulanmaň.

4) Bellikler, pleýsholderler, helperler

Bellik hökmanydyr. Playsholder - çalyşmak däl-de, mysal.
Helper-teksti meýdançanyň aşagynda goýuň: düzgünler, format, mysal salgylanma.
Goşmaça meýdançalary "" ýerine "(hökmany däl)" diýip belläň.

Mysal:

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) Ädimler we ösüş

Köp basgançakly görnüşler (KCS/tölegler): 3-5 ädim, "2-nji ädim 4-den" aýdyň ösüş.
Tamamlanan ädimleri saklaň; maglumatlary ýitirmän gaýdyp gelmäge rugsat beriň.
Nawigasiýa düwmeleri: "Yza", "Indiki", soňky "Tassyklamak" - hemişe bir ýerde.

6) Giriş dolandyryşy

Klawiatura we atributlar: 'type', 'inputmode', 'autocomplete'.
Giriş maskalaryny ýumşak ulanyň (telefon, IBAN, PAN, senesi), kadaly bahalary saklaň.
Awto doldurma: dogry' autocomplete =" given-name" | "cc-number" | "one-time-code"' we ş.m.
Jemleriň/şortkatlaryň presetleri: "+ 50/+ 100/Hemmesi" jemleriň meýdanynyň gapdalynda.

Atributlar tablisasy:

Meýdan	type	inputmode	autocomplete
Email	email	email	email
Telefon	tel	tel	tel
Jemi	text	decimal	off
PAN	text	numeric	cc-number
CVC	password	numeric	cc-csc
Kartyň senesi	text	numeric	cc-exp
OTP	text	numeric	one-time-code

7) Tassyklama we ýalňyşlyklar

Strategiýa: girmezden öň (helper), wagtynda (ýumşak maslahatlar), soň (blur/submit).
Asinxron barlaglar (loginiň özboluşlylygy, çäkleri, töwekgelçiligi) - 250-400 ms.
Hatalaryň teksti: sebäp → nädip düzetmeli → alternatiwa.
Birnäçe ýalňyşlyk üçin şekiliň üstündäki Summary panel + ilkinji ýalňyşlyga fokus.
Kritiki hereketler üçin Idempotency-Key (nyrh/töleg) we howpsuz retralar.

8) Düwmeler we ibermek

Esasy CTA reňk/ululyk bilen tapawutlanýar, Enter boýunça elýeterlidir.
'Busy' -duruş we basmagyň gaýtalanmagyny blokirlemek; gijikdirilende> 3-5 s - "Tassyklamaga garaşýarys"....
Üstünlik gazanylandan soň - aç-açan status (tost/ekran "Taýýar") + indiki näme bolar.

9) Elýeterlilik (A11y)

Dogry baglanyşyklar 'label → input', 'aria-describedby' arkaly ýalňyşlyklar, kritikler 'role =' alert '.
Görünýän ': focus-visible', Tab tertibi wizual.
Tekstiň/nyşanlaryň gapma-garşylygy ≥ AA; manysy diňe reňk bilen däl.
'prefers-reduced-motion': iň az animasiýa.
Radiokopok toparlary üçin - 'fieldset/legend', maslahatlar üçin - 'role = "status"'.

10) Lokalizasiýa we halkara formatlary

Seneler/walýutalar/belgiler - girizilende lokal, ammar - ISO/kiçi birlikler.
Atlarda/salgylarda dürli elipbiýlere ýol beriň; defisleri/apostroflary çäklendirmäň.
Telefonyňyzy E.164 saklaň; ýurt aç-açan ýa-da 'CC' -den saýlanýar.

11) Çykyş we durnuklylyk

Ilkinji wizual jogap ≤ 100 ms; asinxron barlaglar - ekrany petiklemeýär.
"Asylan" spinneriň ýerine skeleton, beýikligi düzediň, CLS-den gaça duruň.
Uzyn sanawlary wirtuallaşdyryň (mysal üçin ýurtlar/banklar).
Diňe 'transform/opacity' -ni köpçülikleýin blur/kölegesiz animasiýa ediň.

12) Howpsuzlyk we gizlinlik

PAN/CVC/pasport goýmaň; RUM/konsola ibermäň.
Duýgur ýerleri gizläň, olary awtoulag tygşytlamakda saklamaň.
Hasabyňyzyň bardygyny ýa-da ýokdugyny aýtmaň: "E-poçta hasaba alnan bolsa, biz hat ibereris".
Saklamak - iň az zerur; KYC-iň näme üçin zerurdygyny görkeziň.

13) Nusgawy ssenariýalar boýunça patternler

13. 1 Töleg/goýum

Gutular bilen jemi meýdany, walýuta aýdyň görkezilýär.
ýumşak maskaly PAN, Luhn-çek; CVC gizlenýär; sene 'MM/YY' s auto- '/'.
Komissiýalar/möhletler baradaky tekst ýakyn, tooltip däl.

13. 2 Serişdeleri çykarmak

Ädimler: "Jemi → Usul → Tassyklamak".
Ösüş we "Adatça N minut/sagada çenli" (berk wadalar bolmazdan).
Ýurt boýunça usulyň wariantlary; çäklendirmeler barada duýduryşlar.

13. 3 KYC

Faýllaryň ädimme-ädim ýükleýjisi: format/agram talaplary, öňünden gözden geçirmek, gizlinlik.
Barlagyň möhletleri we status kanaly (poçta/habarnama).

13. 4 Çäkler we jogapkärli oýun

Düşnükli birlikler (günde/hepdede/aýda), deslapky düzülişler, üýtgeşmeleri tassyklamak, "arkaly güýje girer"....

14) Antipatternler

Belligiň ýerine Placeholder.
Her simwol üçin debaunssyz ýalňyşlyklar.
Hata ýüze çykanda formany täzeden açyň.
Möhüm görkezme diňe tooltip-de gizlenýär.
Galp nyşanlary/goýmagy gadagan edýän gaty maskalar.
Bir meýdany barlamak üçin tutuş sahypany ýapyň.
Aç-açan busy/ösüş bolmazdan iberiň.

15) Amala aşyrmagyň snippetleri

Hatalaryň gysgaça mazmuny + ilkinji meselä üns

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

Derrew busy we idempotentlik düwmesi

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

Bar bolan radio gutular toparynyň HTML çarçuwasy

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) Dizaýn-ulgamyň bellikleri (mysal)

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) Metrikler we synaglar

"Completion Rate", "Time-to-Complete", "Error Rate".
Retry Success Rate, taşlanan görnüşleriň paýy, ädimiň çuňlugy.
CTR maslahatlar/mysallar, awto doldurmalaryň paýy.
A/B: meýdanlaryň tertibi, jemleriň presetleri, ýalňyşlyklaryň tekstleri, ädimlere bölünişik.

18) QA-çek-sanawy

Many we akym

Meýdanlar maksadyna laýyk gelýär; artykmaç zat ýok.
Toparlar mantykly; topara iň köp 6 meýdan.

Giriş

Dogry 'type/inputmode/autocomplete'.
Maskalar ýumşak, goýma döwülmeýär, öňünden aýdyp bolar.

Tassyklamak

Girmezden ozal kömek; blur/submit ýalňyşlyklary; debauns 250-400 ms.
Köp ýalňyşlyk üçin Summary paneli; birinjisine üns.

Elýeterlilik

Bellikler birikdirildi; kontrast ≥ AA; ': focus-visible' görünýär.
Klawiatura nawigasiýasy; 'fieldset/legend' radio toparlary.

Çykyş

Ilkinji jogap ≤ 100 ms; "asylan" spinner ýok.
CLS ýok; uzyn sanawlar wirtuallaşdyryldy.

Howpsuzlyk

Duýgur meýdanlar ýok; PAN/CVC awtoseýwada däl.
Idempotentlik we howpsuz retralar goşulýar.

19) iGaming aýratynlyklary

Stawkalar: jemi meýdany + presetler, derrew 'busy', undo mümkinçiligi bilen optimistik tassyklama (eger düzgünnama rugsat berse).
Tölegler/netijeler: diňe bir maslahatlarda däl, açyk komissiýalar we meýdanlaryň ýanyndaky möhletler; çäklendirmeleri we KYC statusyny barlamak.
Ýaryşlar: iň az maglumatlar toplumy bolan hasaba alyş görnüşi, "gara patternsiz" düzgünler we ylalaşylýan çekbokslar.
Jogapkär oýun: düşnükli aralyklar we netijäniň öň taraplary bilen çäkleri kesgitlemegiň görnüşleri ("Siziň gündelik çäkiňiz ertirden 2 000 bolar").

Gysgaça gysgaça

Gowy görnüş aýdyň maksat, meýdanlaryň iň az toplumy, ýalňyşlyga çenli düşnükli düzgünler, derrew jogap we saklanan maglumatlar. Ssenariden gurluşy dizaýn ediň, elýeterlilige we lokallara hormat goýuň, howpsuz retralary we idempotenti açyň. Görnüşler çalt we ygtybarly duýulýar - esasanam iGaming-iň möhüm ssenariýalarynda.