UX-gaidline və interfeys standartları

1) Prinsiplər

Gözəllikdən əvvəl aydınlıq. Məna və hərəkət 1-2 saniyədə aydındır.
Ekranda bir hədəf. Qalan hər şey ikinci və ya gizlidir.
Ardıcıllıq. Eyni nümunələr = eyni gözləntilər.
Default mövcudluğu. Kontrast, fokus, klaviatura, səs.
Kontekstlik. İpuçları və mətnlər - lazım olan yerlərdə.
Lokalizasiya-first. Sətir uzunluqları, formatlar, mədəniyyət - ilkin dizaynda.
Dönüşümlülük. Hər hansı bir riskli hərəkət ləğv edilə/təsdiq edilə bilər.
Ölçülmə qabiliyyəti. Hər bir qayda - metrika ilə (addım dönüşümü, vaxt, səhvlər).

2) Grid, girintilər və ritm

Mesh: 4/8-pt addım; sütunlar: 12 (masaüstü), 6 (tablet), 4 (mobile).
Komponentlərin daxili boşluqları: 4 qat; xarici - 8/ 12/16/24.
Şaquli ritm: başlıq → alt başlıq → məzmun → fəaliyyət (CTA).
Sərhədlər və ayırıcılar: qənaətlə; «hava» və mətbəə iyerarxiyasına üstünlük verin.

3) Mətbəə

Kegle şkalası: 12/14/ 16/20/24/32/40 (body 16).
Sətir hündürlüyü: 1. 4–1. 6 mətn üçün, 1. 2–1. 3 başlıqlar üçün.
Sətir uzunluğu: 45-75 işarə (desktop), 35-55 (mobile).
Seçmə: semantik vurğular üçün yağlı; kaps - yalnız etiketlərdə.
Oxuma qabiliyyəti: mətnlər təbii səslənməlidir.

4) Rəng və kontrast

Semantika: 'success/info/warning/error/neutral'.
Kontrast: minimum WCAG 2. 1 AA (mətn/fon ≥ 4. 5:1; böyük ≥ 3:1).
Rəng ≠ yeganə siqnaldır. Simge/mətn/forma əlavə edin.
Focus Ring: həmişə görünür (CSS-də söndürülməməlidir).

5) Naviqasiya və informasiya arxitekturası

İstifadəçi yolu: "Mən haradayam? Burada nə var? Bundan sonra nə?" - aydındır.
Menyu iyerarxiyası: əsas naviqasiyada 2 səviyyədən ≤.
Çörək qırıntıları: dərin bölmələr üçün.
Axtarış: mürəkkəb kataloqlarda qlobal olaraq mövcuddur; '/' qaynar düyməsi.
Naviqasiya vəziyyətləri: Aktiv sekmə/səhifə tokenlərlə işıqlandırılır.

6) Komponentlər və nümunələr

Dizayn sisteminin komponentlərindən istifadə edirik («ev istehsalı» olmadan).
Ekranda bir primary-CTA; qalanları - secondary/tertiary.
Hallar: default/hover/focus/active/disabled/loading - hər interaktivdə tələb olunur.
Boş hallar: kontekst + dəyər + CTA (+ ikincil link).
Ümumi alertlər: ekranda bir page-alert + yerli inline ipuçları.

7) Formalar, validasiya və səhvlər

Etiket tələb olunur. Placeholder əvəzedici deyil, format nümunəsidir.
blur-da inline-validasiya, submit-də summary-səhvlər.
Səhv mesajı: nə səhv deyil + necə düzəldilir + məhdudiyyət/format.
Auto-scroll və ilk səhv diqqət; 'aria-invalid', 'aria-describedby'.
Maskalar və formatlar: giriş təklif edir, lakin sındırmır (mümkün olan payst).
Məlumatların təhlükəsizliyi: Yenidən başlatma/səhv zamanı heç bir şey itirmirik.

8) Dövlət və fidbek

Uğur: 2-4 s tost, neytral-müsbət ton, CTA «sonrakı».
Info/notice: yumşaq banner/tultip, axını bloklamır.
Warning/Error/Critical: hiyerarxiya vizual/semantik; kritik - açıq təsir modalka/banner.
Yükləmə tarixi: skeleton> spinner; gözləyərkən vaxt qiymətləndirilməsi> 3 s.

9) Məzmun və microcopy

Üç cavab qaydası: nə baş verir → niyə → sonra nə etmək lazımdır.
CTA: hərəkət feili + obyekt («Dəyişiklikləri saxla», «Yoxlamadan keçmək»).
Rəqəmlər/tarixlər/valyutalar: yerli formatlar.
Ton: dost; stresli addımlarda (ödəniş/təhlükəsizlik) - neytral.

10) Mövcudluq (A11y)

Klaviatura ilə tam naviqasiya; tabların məntiqi qaydası.
interaktivlər üçün rollar və 'aria-', tost/statuslar üçün canlı bölgələr.
Kontrastlar, fokus halqaları, interaktiv ölçülər ≥ 44 × 44 px.
İkonlar/şəkillər üçün mətn alternativləri; 'th '/' scope' ilə cədvəllər.
Yoxlamalar: avtomatik (linter/skaner) + əl screenrider ssenariləri.

11) Lokalizasiya və beynəlmiləlləşmə

Bütün sətirlər kontekstli i18n açarlarındadır.
«Uzun dillər» testi (DE/TR), RTL rejimləri.
Rəqəmlər/valyutalar/dövrlər - formatlaşdırma utilitləri.
Tone-map: ssenarilər üzrə rəsmiləşdirmə/duyğu dərəcəsi (bağlama/ödənişlər/təhlükəsizlik).

12) Responsivlik və adaptiv

Breakpoint: 360 / 768 / 1024/1280 +.
Mobile-first: kritik yol bir əl, baş barmaq zonasında CTA mövcuddur.
Gests və klaviatura: jestlər düymələrlə təkrarlanır; desktop - hotkey.
Sıxlıq: masaüstü - «hava», mobil - klikabilliyə zərər vermədən şaquli qənaət.

13) Qaranlıq mövzu

WCAG kontrastı qorunur; arxa plan üçün «təmiz qara» qarşısını almaq (tünd boz).
Parıltı/kölgə - zəifləmiş; focus ring kontrast.
Şəkillər və loqotiplər - tərs versiyalarla.
Keçid siyasəti: istifadəçi seçimini saxlayın (system/light/dark).

14) Animasiya və hərəkət

Uzunluğu: 120-200 ms (kiçik), 200-300 ms (keçidlər).
Sürətləndirmə funksiyaları təbii (yüngül yavaşlama ilə cubic-bezier).
Animasiyalar axını bloklamamalı və oxunuşu pisləşdirməməlidir.
'prefers-reduced-motion' hörmət.

15) Performans

LCP ≤ 2. 5 s, TTI/TBT yaşıl zonada; kod ayırma; tənbəl media yükləmə.
Uzun siyahıların virtuallaşdırılması; məlumatların caching.
Sürəti qavramaq üçün Skeleton; «jank» maketini minimuma endirmək.

16) Təhlükəsizlik və gizlilik

Sorğuların səbəblərinin aydın izahları (kamera, KYC, geo).
Şəffaf şərtlər/komissiyalar/limitlər; gecikmələr mümkündürsə, «ani» olmadan.
Məxfi məlumatlar - açıq-aşkar «göstərmək/gizlətmək».
Geri dönməz hərəkətlər üçün təsdiqlər; Fəaliyyət jurnalı/giriş bildirişləri.

17) UX keyfiyyət metrikası

Addım dönüşümü və tamamlanmadan əvvəl vaxt.
Error rate sahələr/addımlar və Time-to-Fix.
CTR CTA və təkrarlanabilirlik ssenariləri.
Drop-off sonra səhv/sonra download> N saniyə.
Mövzular üzrə dəstək müraciətləri (dəyişikliklərdən əvvəl/sonra).
A11y-buraxılış qüsurları (hədəf - 0 kritik).

18) Çek vərəqləri

Buraxılışdan əvvəl ekran

• Bir əsas hədəf və bir primary-CTA.
• Naviqasiya və status «Mən haradayam» açıqdır.
• Məzmun qısa: blok başına 1-2 təklif.
• Hallar: loading/empty/error/success örtülmüşdür.
• A11y: AA kontrast, fokus görünür, interaktivlərdə 'aria-'.
• Lokalizasiya: sətir uzunluqları/formatları/RTL yoxlanılır.
• Performans: ehtiyac olmadan «ağır» bloklar yoxdur.

Buraxılışdan əvvəl forma

• Etiketlər və format nümunələri mövcuddur.
• Inline-validation + submit summary.
• Scroll ilk səhv, sahəyə diqqət.
• Mesajlar: nə/necə/niyə; istifadəçi üçün 500/400 kodları olmadan.
• Səhv/yenidən başladıqda məlumatlar itirilmir.

19) Anti-nümunələr

Semantik addımlarda CTA kimi «OK».
Pleysholder əvəzinə etiket.
Rəng yeganə status siqnalı kimi.
Spinner vaxt qiymətləndirmək və alternativ olmadan.
Focus-trap və ESC-clock olmadan modal pəncərələr.
Stillərin/ikonaların qarışdırılması, dizayn sisteminin xaricində komponentlərin təkrarlanması.
Kritik ssenarilərdə yumor/emoji (ödəniş/təhlükəsizlik).

20) Nümunələr «əvvəl/sonra»

Forma xətası

Əvvəlki: «Səhv 400»

Sonra: "Səhv tarix formatı. DD istifadə edin. MM. GGGG"

Boş vəziyyət

Əvvəlki: «Burada boş»

Sonra: "Burada ilk doldurmadan sonra əməliyyatların tarixi görünəcək. [Hesabınızı doldurun]"

Müvəffəqiyyət mesajı

Qədər: «Bitdi»

Sonra: "Ödəniş qəbul edildi. Balans yenilənib. [Tarixə bax]"

Naviqasiya

Əvvəlki: istifadəçinin harada olduğu bəlli deyil

Sonra: aktiv sekmə + çörək qırıntıları + aydın səhifə başlığı

21) Dizayn review üçün şablonlar

Ekran çərçivəsi

Başlıq → qısa təsvir → məzmun/siyahı → fidbek/statuslar → fəaliyyət.

Forma çərçivəsi

Başlıq → ipucu → sahələr (etiket + yardım + səhv) → CTA → ikincil hərəkətlər → qeydlər (komissiyalar/şərtlər).

Microcopy şablon

Başlıq (ops.)

1-2 təklif: kontekst + növbəti addım

CTA: hərəkət + obyekt

İkinci link: yardım/qaydalar

22) Proseslər və standartların saxlanması

Definition of Done (UX): maket + mətn + vəziyyət + A11y + i18n + metrika.
PR-da UX-review: 18-21 bölmələrindən çek siyahısı.
Sənədləşmə: Hər bir oyun wiki/Storybook-a bələdçi əlavə edir/yeniləyir.
Rübdə bir dəfə audit: məzmun, A11y, performans, tutarlılıq.

Yekun şparqalka

Bir hədəf, bir əsas CTA.
Dövlət və fidbek əvvəlcədən dizayn edilmişdir.
A11y və lokalizasiya - sıfırdan, «sonra» deyil.
Daha az rəng - daha semantika və ritm.
Ölçün: dönüşüm, səhvlər, vaxt, müraciət.
Bütün dizayn sistemi vasitəsilə: eyni qaydalar → eyni gözləntilər → proqnozlaşdırıla bilən UX.

Bu bələdçini əsas ssenariləriniz (qeydiyyat/KOS, depozit/çıxarış, bonuslar/turnirlər) üçün hazır şablonlarla tamamlaya və prosesiniz üçün çek vərəqələrini toplaya bilərəm.