Wizual iýerarhiýa we ileri tutulýan ugur

1) Wizual iýerarhiýa näme

Wizual iýerarhiýa, ulanyjynyň ünsüni paýlaýan we maksatly herekete (signup, goýum, oýun gözlemek, süzgüç, netije) çalt we gapma-garşylyksyz edýän interfeýsde aksentleri ýerleşdirmek ulgamydyr. Iýerarhiýa kontrast, masştab, pozisiýa, reňk, maglumatlaryň dykyzlygy, hereket we ak giňişlik arkaly gurulýar.

Maksat: "aň-bilim çykdajylaryny" azaltmak we First Meaningful Click-iň paýyny zerur elementlere köpeltmek.

2) Işewürlik täsiri we KPI

• Maksatly CTA-ny öwürmek (hasaba almak, goýum, saýlanan birine goşmak)
• Ýerine ýetiriş tizligi (Time to Value)
• Bulaşyklyk görkezijisiniň peselmegi (Confusion Rate)
• Şowsuzlyklary azaltmak (Bounce), gaýanyň çuňlugyny ýokarlandyrmak we saklamak

• FMC (First Meaningful Click): Açar CTA-ny basan ulanyjylaryň% ≤ Göçürilenden soň n sekunt.
• TTV (Time to Value): Girişden esasy gymmata çenli wagt (mysal üçin, slot tapmak we başlamak).
• Ekranlarda esasy CTA-nyň CTR-i: öý, katalog, oýun sahypasy, kassa.
• Ilkinji/ikinji gezek basmagyň gatnaşygy (üns düzgüni).
• Scroll Depth offer/ýaryş bilen blokdan öň.

3) Wizual iýerarhiýanyň ýörelgeleri (özeni)

1. Kontrast we masştab: has möhüm - has uly we has kontrast.
2. Okamagyň ýagdaýy we tertibi: ýokarky/çep we "birinji ekran" ileri tutulýar.
3. Ak giňişlik: howa = ähmiýeti. Gaty ýakyn - ileri tutulýan zat ýitýär.
4. Reňk we doýgunlyk: reňk aksenti - "üns puly"; tygşytlaýarys.
5. Görnüşi we ikonografiýasy: düwmeleriň, bellikleriň, status nyşanlarynyň görnüşi tapawudy güýçlendirýär.
6. Hereket we mikroanimasiýa: seýrek, gysga, tutuş aksentler; "ýarmarkadan" gaça durmak.
7. Toparlanma (gestalt): ýakynlyk, meňzeşlik, ýapyklyk, deňleşdirmek, umumy ugur.
8. Maglumat dykyzlygy: möhüm ýolda - diňe zerur, galanlary "gowşak" gatlaklarda.

4) Ileri tutulýan matrisa (P1-P4)

P1 (Möhüm-başlangyç): Ekrana 1-2 STA/element. Uly ululyk, aýdyň kontrast, kesgitlenen pozisiýa.
P2 (Möhüm goldaw): süzgüçler, çalt bellikler, ikinji derejeli CTA. Orta kontrast, P1-iň gapdalynda.
P3 (Kömek/kontekst): maslahatlar, reýtingler, kiçi kartoçkalar. Asuda stil, ykjam.
P4 (Fon/salgylanma): maglumat, futer, kanuny salgylanmalar. Az kontrast we ululyk.

Düzgün: bir ekranda bir P1-den köp bolmaly däldir. P1 bäsleşýän bolsa, olar indi P1 däl.

5) Iýerarhiýanyň gatlaklary

Global: ýokary derejeli nawigasiýa, global gözleg, habarnamalar.
Sahypaly: gahryman-blok, H1/H2, esasy bannerler/offerler.
Komponent: oýunlaryň kartoçkalary, kassanyň görnüşleri, ýaryş tablisalary.
Içerki komponentler: meýdanlaryň, gollaryň, statuslaryň, mikro-maslahatlaryň tertibi.

6) Adaty ssenariýalar (iGaming-synap görmek)

• P1: "Hasap döretmek "/" Giriş "(uly düwme, kesgitlenen pozisiýa).
• P2: Sosial giriş, "Paroly aç", parol syýasaty.
• P3: "Parolyňyzy ýatdan çykardyňyzmy? ", howpsuzlyk maslahatlary.

• P1: "Doldurmak "/" Çykarmak "+ saýlanan usul.
• P2: Jemi, çalt presetler, komissiýalar/çäkler golaýda.
• P3: Usulyň gizlin jikme-jik beýany, möhletleri.

• P1: Gözleg + Esasy süzgüçler (Üpjün ediji, Üýtgewsizlik, RTP, Täze/Hit).
• P2: Segmentler/bellikler (Megaways, Jackpot, Buy Feature).
• P3: Ikinji sortlama, kartoçka nyşanlary (täzelik, hit, ýaryşlar).

• P1: Goşulmak/Baýragyň jikme-jiklikleri.
• P2: Liderler tablisasy (ilkinji 5), tersine hasaplaýyş taýmeri.
• P3: Basmak/yzyna öwürmek boýunça doly düzgünler.

7) Çaphana we tor

Modul şkalasy: 12-14 (tekst), 16 (esas), 20-24 (subtitrler), 28-40 (H1/Hero).
Bazis çyzygy: 4/8px ädimler; dik ritm = okalyşlyk.
Setiriň uzynlygy: tekst üçin 45-75 simwol; Kartoçkalaryň beýany üçin 20-40.
Hatara: tekst üçin 120-150%, sözbaşylar üçin 110-120%.

8) Reňk we kontrast

Tekstiň gapma-garşylygy: esasy ýollardaky tekstler üçin AA derejesinden pes däl.
Reňk rollary: Primary (CTA), Accent (üns), Info/Success/Warning/Danger (statuslar).
Gara tema: serhetleriň we tekstleriň gapma-garşylyklaryny güýçlendirmek, giň reňkli tekizlikleriň doýgunlygyny azaltmak; "neon-agyrydan" gaça duruň.
Elementleriň ýagdaýlary: default/hover/focus/active/disabled - tapawutlanýar.

9) Aksentler we düwmeler

Primary CTA: ekranda biri, görnükli reňk/masştab, ýeterlik meýdanlar (min-tap 44 × 44px).
Secondary/tertiary: tekiz äheňler, konturly stiller.
Spinner ≠ iýerarhiýa: ösüş seslenme berýär, ýöne P1-i kesmeli däldir.

10) Üns mehanikasy we tizligi

F-/Z-patternleri: P1-i garaşylýan ýere goýuň.
Hik kanuny: has kiçi - birinji ädimiň wariantlaryny gysgaldyň.
Fitts kanuny: has uly we has ýakyn - basmak aňsat; möhüm hit area.
Seriýa maslahatlary: "tekst diwary" däl-de, ädimlere öwrediň.

11) Öý ekrany/lendingler

Gahryman-blok: gysga offer + ýekeje P1.
Wizual "reýkler": 3-4 bölümler iň köp birinji skrolla çenli (kategoriýalar, täzelikler, ýaryş).
Sosial subutnama: üpjün edijileriň nyşanlary, "hepdäniň hitleri" - P2, P1-i bölmezler.

12) Daşbordlar we tablisalar

Birinji ekran: 1-2 esasy KPI uly, sparkline + trend nyşanlary.
Tablisa: sütünleri ähmiýetine görä düzmek, esasy sütünleri "doňdurmak", density switch (kompakt/standart) ulanmak.
Boş halatlar: indiki ädimi düşündirmek (P1 düwmesi + maslahat).

13) Jübi vs Desktop

Mobail: bir P1 gaty ýokary çyzyk, tab-bar ≤ 5 nokat, floating CTA kassa/oýun üçin kabul ederliklidir.
Iş stoly: konteýneriň ini 1200-1440px; setirleriň uzynlygyny çäklendiriň; P1 "uzalmakdan" gaça duruň.

14) Lokalizasiýa, sanlar, RTL

Setirleriň uzynlygyny (nemes/türk), dürli walýutalary we kategoriýalary göz öňünde tutuň.
RTL: tory we aksentleriň tertibini aýna etmek, ýöne P1-agdyklyk etmegi saklamak.

15) A/B we iýerarhiýanyň metrikleri

• P1 ululygynyň/kontrastynyň 12-16% ýokarlanmagy → FMC we CTR-iň ösüşi.
• Süzgüçleri geçirmek (P2) gözlemek has ýakyndyr → TTV oýun gözlemek.
• Kassanyň birinji ädimindäki wariantlaryň gysgaldylmagy → ýokardaky tamamlanmagy.

Yzarlamak: FMC (N sekunt), CTR P1, Scroll Depth, TTV, Confusion Rate (ýalňyşlyklar/yzyna gaýtarmalar), Rage Clicks.

16) Auditiň tertibi (çek-sanawy)

1. Her esasy ekranda P1 diýiň - olaryň biri barmy?
2. P2 elementleri P1-i goldaýar, reňk/kontrast taýdan jedel etmeýärmi?
3. Görnüş ýoly: P1 ilkinji 3 fokusa düşýärmi?
4. Tekstiň/STA-nyň gapma-garşylygy açyk/garaňky temalarda ýeterlikmi?
5. Iň az hit areas berjaý edilýärmi?
6. Ses: öwrülişik ýitirilmezden elementleriň 20% -ini aýyryp bolarmy?
7. Boş ýagdaýlar herekete getirýärmi?
8. Şertler (hover/focus/active) tapawutly we elýeterli?
9. P1 jübüsinde ekransyz görünýärmi?
10. Ölçegler hunide birikdirilýärmi?

17) Anti-patternler

Bir ekranda iki ýa-da has köp esasy.
P1-i ýapýan "gygyrýan" bannerler.
Çal reňkde (ýeterlik däl kontrast).
Kritiki ýolda tekstsiz nyşanlar.
Artykmaç ýüklenen kartoçkalar: 6 + nyşanlar, düşündirişiň 4 setiri.
Maksatsyz animasiýalar (ýalpyldawuk/tükeniksiz).

18) Dizaýn-ulgam: ileri tutulýan aýratynlyklar

Bellikler: 'color. primary`, `color. accent`, `elevation. p1`, `radius. lg`, `space. 8/12/16`.
Ölçeg rollary: 'btn. p1. lg`, `btn. p2. md`, `text. h1/h2/body`, `badge. status`.
Gatlaklar/Z-index: P1 mazmun modullarynyň üstünde, ýöne ulgam modalkalarynyň aşagynda.
Döwletler: mysallar bilen ýagdaýlaryň tablisasy (ekran-gollanma).

19) Ileri tutulýan algoritm (psevdo)

1. Ekranyň maksadyny kesgitläň (bir sözlem).
2. P1 (bir element) belläň, iň görnükli hökmünde düzüň.
3. P1-den soň/gapdalynda P2 (2-5 element) emele getiriň.
4. Gizläň/ P3-P4.
5. Elýeterlilik we hereketlilik barlag sanawyndan geçiň.
6. Göz we time-to-P1 ýoluny barlaň (3 sekunt ≤ basyň).
7. A/B-ni işe giriziň, FMC/TTV/CTR-e gözegçilik ediň.

20) Mikrokopiýa we tekstler

H1 sözbaşylary - gysga, feil/gymmaty: "10 sekuntda oýnamaga başla".
CTA - hereket we netije: "Bir minutda doldurmak", "Indi oýnamak".
Maslahatlar - iş boýunça, iň köp bir setir, jargonsyz.

21) Ierarhiýa meseleleri üçin Acceptance Criteria

Ekranda ýeke-täk P1 kesgitlenýär; skrollsyz görýäris (mobile/desktop).
P1 kontrast gidline laýyk gelýär; hit area ölçegleri ≥ 44 × 44px.
P2 wizual taýdan P1-den gowşak (kontrastyň/masştabyň 1-2 basgançagy).
Elementleriň ýagdaýlary tapawutlanýar; klawiatura fokus stilleri bar.
FMC/TTV/CTR/Scroll Depth üçin analitik wakalary birikdirildi.

22) Gysga rezýume (TL; DR)

Iýerarhiýa ünsüň düzgünidir. Ekranda bir sany P1, P2 arkaly goldaw, az ses, ýeterlik kontrast we okalýan çaphana. Çek sanawy bilen özüňizi barlaň, FMC/TTV/CTR ölçäň we gipotezalary A/B synaglary bilen tassyklaň.