UX-gidline we interfeýs standartlary

1) Ýörelgeler

Gözellikden öň aýdyňlyk. Manysy we hereketi 1-2 sekuntda aýdyň bolýar.
Ekrana bir maksat. Galan zatlaryň hemmesi ikinji ýa-da gizlin.
Yzygiderlilik. Şol nagyşlar = şol garaşylýanlar.
Bar bolmagy. Kontrast, fokus, klawiatura, ses çykyşy.
Kontekst. Maslahatlar we tekstler - zerur ýerlerde.
Lokalizasiýa-first. Setirleriň uzynlygy, formatlary, medeniýeti - ilkibaşda dizaýnda.
Yzyna gaýdyp gelmek. Islendik töwekgelçilikli hereket ýatyrylyp/tassyklanylyp bilner.
Ölçemek. Her düzgün - metrika bilen (ädimiň öwrülişigi, wagt, ýalňyşlyklar).

2) Tor, sapak we ritm

Tor: 4/8-pt ädim; sütünler: 12 (desktop), 6 (tablet), 4 (mobile).
Komponentleriň içki gatlaklary: 4 esse; daşarky - 8/ 12/16/24.
Dik ritm: sözbaşy → sözbaşy → mazmun → hereket (CTA).
Serhetler we bölüjiler: tygşytly; "howany" we tipografiýanyň iýerarhiýasyny has gowy görmeli.

3) Çaphana

Kegle şkalasy: 12/14/ 16/20/24/32/40 (body 16).
Setiriň beýikligi: 1. 4–1. 6 tekst üçin, 1. 2–1. 3 sözbaşylar üçin.
Setiriň uzynlygy: 45-75 belgi (desktop), 35-55 (ykjam).
Saýlama: semantik aksentler üçin ýagly; kaps - diňe belliklerde.
Sesli okalmagy: tekstler tebigy ýagdaýda ýaňlanmalydyr.

4) Reňk we kontrast

Semantika: 'success/info/warning/error/neutral'.
Kontrast: iň az WCAG 2. 1 AA (tekst/fon ≥ 4. 5:1; uly ≥ 3:1).
Reňk ≠ ýeke-täk signal. Nyşany/teksti/formany goşuň.
Fokus halkasy: elmydama görünýär (CSS-de öçürilmez).

5) Nawigasiýa we maglumat arhitekturasy

Ulanyjy ýoly: "Men nirede? Bu ýerde näme bar? Indiki näme?" - Elbetde.
Menýu iýerarhiýasy: Esasy nawigasiýada 2 dereje ≤.
Çörek bölekleri: çuňňur bölümler üçin.
Gözleg: çylşyrymly kataloglarda global elýeterlidir; '/' gyzgyn düwmesi.
Nawigasiýa ýagdaýlary: Işjeň goýma/sahypa bellikler bilen yşyklandyrylýar.

6) Komponentler we patternler

Dizaýn-ulgamyň böleklerini ulanýarys ("öýde ýasalan" däl).
Ekranda bir sany primary-CTA; galanlary - secondary/tertiary.
Şertler: default/hover/focus/active/disabled/loading - her bir interaktiwde hökmany.
Boş ýagdaýlar: kontekst + gymmatlyk + CTA (ikinji link).
Umumy alertler: ekranda bir page-alert + ýerli inline-maslahatlar.

7) Görnüşler, tassyklama we ýalňyşlyklar

Bellik hökmanydyr. Placeholder - çalyşmak däl-de, formatyň mysaly.
Blur-da inline-walidation, submit-de summary-hatalar.
Hata habary: näme nädogry + nädip düzetmeli + çäklendirme/format.
Awto-skroll we ilkinji ýalňyşlyga fokus; 'aria-invalid', 'aria-describedby'.
Maskalar we formatlar: çaklaýarlar, ýöne girişi bozmaýarlar (pace mümkin).
Maglumatlaryň howpsuzlygy: Täzeden açylanda/ýalňyşlykda hiç zady ýitirmeýäris.

8) Ýagdaýlar we fidbek

Üstünlik: tost 2-4 s, bitarap-oňyn äheň, CTA "indiki näme".
Maglumat/notice: ýumşak banner/tultip, akymy petiklemeýär.
Warning/Error/Critical: iýerarhiýa wizual/semantik; kritikler - aç-açan hereket edýän modalka/banner.
Ýüklemek: skeleton> spinner; garaşýan wagtyna baha bermek> 3 s.

9) Mazmun we microcopy

Üç jogap düzgüni: näme bolýar → näme üçin → indiki näme etmeli?
CTA: Hereket fiili + obýekt ("Üýtgeşmeleri sakla", "Tassyklamany geçir").
Sanlar/seneler/walýutalar: ýerli formatlar.
Äheň: dostlukly; stresli ädimlerde (töleg/howpsuzlyk) - bitarap.

10) Elýeterlilik (A11y)

Klawiaturadan doly nawigasiýa; tablaryň logiki tertibi.
Interaktiwler üçin rollar we 'aria-', tost/statuslar üçin durmuş sebitleri.
Kontrastlar, fokus halkalary, interaktiw ölçegler ≥ 44 × 44 px.
Nyşanlaryň/şekilleriň tekst alternatiwalary; 'th '/' scope' tablisalary.
Barlaglar: awtomatiki (linter/skaner) + skrinrideriň el ssenarileri.

11) Lokalizasiýa we internationalizasiýa

Ähli setirler kontekstli i18n açarlarynda.
"Uzyn diller" synagy (DE/TR), RTL usullary.
Sanlar/walýutalar/döwürler - formatlamagyň utilitleri.
Tone-map: ssenariler boýunça formalizm/duýgular derejesi (onbording/tölegler/howpsuzlyk).

12) Responsiwlik we uýgunlaşma

Arakesme nokatlary: 360 / 768 / 1024/1280 +.
Mobile-first: möhüm ýol bir eli bilen elýeterlidir, baş barmak zolagynda CTA.
Gestler we klawiatura: yşaratlar düwmeler bilen köpeldilýär; desktop - hotkei.
Dykyzlygy: desktop-da - "howa", mobile-da - dik tygşytlamak.

13) Garaňky tema

WCAG boýunça kontrast saklanýar; fon üçin "arassa gara" bolmazlygy (goýy çal).
Şöhle/kölegeler - gowşak; gapma-garşylykly fokus halkasy.
Suratlar we logotipler - ters wersiýalary bilen.
Geçiş syýasaty: Ulanyjynyň saýlamagyny saklaýarys (system/light/dark).

14) Animasiýa we hereket

Dowamlylygy: 120-200 ms (kiçi), 200-300 ms (geçişler).
Tizleniş funksiýalary tebigy (ýeňil haýallatmak bilen cubic-bezier).
Animasiýalar akymy petiklemeli we okalmagy erbetleşdirmeli däldir.
'prefers-reduced-motion' -a hormat goýmak.

15) Çykyş

LCP ≤ 2. 5 s, TTI/TBT ýaşyl zolakda; kod-spliting; ýaltalyk media ýüklemek.
Uzyn sanawlary wirtuallaşdyrmak; maglumatlary kesmek.
Tizligi kabul etmek üçin skeleton; "jank" maketini azaltmak.

16) Howpsuzlyk we gizlinlik UI

Haýyşlaryň sebäpleriniň anyk düşündirişleri (kamera, KYC, geo).
Aç-açan möhletler/komissiýalar/çäkler; gijikdirmeler mümkin bolsa, "derrew" bolmazdan.
Gizlin maglumatlar - gizlemek, aç-açan "görkezmek/gizlemek".
Yzyna gaýtaryp bolmajak hereketler üçin tassyklamalar; hereketler/giriş habarnamalary.

17) UX hiliniň metrikleri

Ädimiň we wagtyň tamamlanýança öwrülişigi.
Meýdanlar/ädimler boýunça error rate we Time-to-Fix.
CTR we ssenarileriň gaýtalanmagy.
Hatadan soň/ýüklenenden soň drop-off> N sekunt.
Mowzuklar boýunça goldamak üçin ýüz tutmalar (üýtgetmelerden öň/soň).
A11y-goýbermek üçin kemçilikler (maksat - 0 möhüm).

18) Çek-listler

Çykmazdan ozal ekrany

• Bir esasy maksat we bir esasy-CTA.
• Nawigasiýa we "meniň nirededigim" ýagdaýy düşnüklidir.
• Mazmuny gysgaça: blok üçin 1-2 teklip.
• Şertler: ýüklemek/empty/error/success örtülendir.
• A11y: AA kontrast, fokus görünýär, interaktiwlerde 'aria-'.
• Lokalizasiýa: setirleriň uzynlygy/formatlary/RTL barlandy.
• Çykyş: Zerursyz "agyr" bloklar ýok.

Çykmazdan öň görnüş

• Bellikler we format mysallary bar.
• Submit üçin inline-validasiýa + summary.
• Ilkinji ýalňyşlyk üçin Skroll, meýdana üns.
• Habarlar: näme/nädip/näme üçin; ulanyjy üçin 500/400 kodsyz.
• Nädogry/täzeden açylanda maglumatlar ýitirilmeýär.

19) Anti-patternler

"OK" semantik ädimlerde CTA hökmünde.
Pleýsholder.
Reňk statusyň ýeke-täk alamaty.
Spinnerler wagt bahasyz we alternatiwasyz.
Fokus-trap we ESC-ýapylmazdan modal penjireler.
Stilleri/nyşanlary garyşdyrmak, dizaýn ulgamynyň daşyndaky komponentleri köpeltmek.
Kritiki ssenariýalarda gülkünç/emoji (töleg/howpsuzlyk).

20) "Öň/soň" mysallary

Form hatasy

Ondan öň: "Hata 400"

Ondan soň: "Senäniň formaty nädogry. DD ulanyň. MM. GGGG"

Boş ýagdaý

Öň: "Bu ýerde boş"

Ondan soň: "Bu ýerde ilkinji doldurylandan soň amallaryň taryhy peýda bolar. [Hasaby doldur]"

Üstünlik habary

Öň: "Taýýar"

Ondan soň: "Töleg kabul edildi. Balans täzelendi. [Taryhy görüň]"

Nawigasiýa

Öň: ulanyjynyň nirededigi belli däl

Ondan soň: işjeň tabak + çörek bölekleri + sahypanyň aýdyň ady

21) Dizaýn-rewyu üçin şablonlar

Ekran çarçuwasy

Sözbaşy → gysgaça düşündiriş → mazmun/sanaw → fidbek/statuslar → hereketler.

Şekiliň çarçuwasy

Sözbaşy → maslahat → meýdan (bellik + kömek + ýalňyşlyk) → CTA → ikinji hereketler → bellikler (komissiýalar/möhletler).

Microcopy şablony

Sözbaşy (ops.)

1-2 sözlem: kontekst + indiki ädim

CTA: Hereket + obýekt

Ikinji link: kömek/düzgünler

22) Prosesler we standartlary saklamak

Definition of Done (UX): maket + tekst + ýagdaý + A11y + i18n + metrika.
PR-da UX-rewyu: 18-21-nji bölümlerden çek sanawy.
Resminamalar: Her surat wiki/Storybook-a gollanma goşýar/täzeleýär.
Çärýekde bir gezek audit: mazmun, A11y, çykyş, yzygiderlilik.

Jemleýji şpargalka

Bir maksat, bir esasy CTA.
Döwlet we fidbek öňünden niýetlenendir.
A11y we lokalizasiýa - "soň" däl-de, noldan.
Az reňk - semantika we ritm.
Ölçäň: öwrülişik, ýalňyşlyklar, wagt, ýüz tutmalar.
Dizaýn ulgamy arkaly hemme zat: şol bir düzgünler → şol bir garaşmalar → öňünden aýdyp boljak UX.

Bu gollanmany esasy ssenariýleriňiz üçin taýýar şablonlar (hasaba alyş/KUS, goýum/çykarmak, bonuslar/ýaryşlar) bilen dolduryp bilerin we siziň işiňiz üçin çek sahypalaryny ýygnap bilerin.