UI-daky mazmunyň iýerarhiýasy

1) Näme üçin iýerarhiýa gerek?

• 3-5 sekuntda üç soraga jogap berýär: bu näme? → näme möhüm? → näme etmeli?;
• interfeýsi öňünden aýdyp boljak we aňsatlyk bilen gözden geçirilip bilinjek edýär;
• ýalňyşlyklary azaldýar we öwrülişigi ýokarlandyrýar.

Ýörelgeler: signallar> ses, yzygiderlilik> dürlülik, kontekst> mutlak düzgünler.

2) Ähmiýeti we gurluşy

1. Nawigasiýa konteksti (marka, bölüm, bölekler/çörek bölekleri).

2. H1 - ekranyň maksady (mümkin boldugyça gysga, zerur bolanda feili).

3. Lead/subtitr (peýdanyň ýa-da statusyň bir setiri).

4. Esasy hereketler (1-2 esasy CTA).

5. Esasy maglumatlar (esasy KPI, "birinji setir" kartoçkalary).

6. Secondary data (jikme-jiklikler, süzgüçler, kömekçi tablisalar).

7. Meta/Help (maslahatlar, bellikler, kanuny tekst).

Düzgün: bir ekranda - bir H1, iki sany esasy CTA-dan köp bolmaly däldir.

3) Çaphana we ritm

Şriftleriň şkalasy: H1 28-32, H2 22-24, H3 18-20, body 14-16, micro 12 (web üçin px/pt deňdir).
Hatara aralyklar: 1. 3–1. body üçin 5, 1. 2–1. 3 sözbaşylar üçin.
Zyňyndylaryň ritmi: esasy birlige iki esse (4/8 px). Saýlama sözbaşy: 16-24; 8-12-nji abzaslar.
Kontrast: iň az WCAG AA; sözbaşy elmydama/meta gollaryndan has tapawutlydyr.
Reňk vs agram: reňk - aksent, ululygyň/ýagyň ýerine "taýak" däl.

4) Tor we ýerleşiş

Kesgitlenen gutterler bilen 12 sütün (desktop )/4-6 (mobile) tory.
Visually first = first in DOM: skrinriderlere we SEO-lara kömek edýär.
Okamak okamak oky: çepden saga (LTR) ýa-da sagdan çepe (RTL) - signallaryň tertibini aýna.
"Üns zolaklary": ýokarky çep/merkezi - sözbaşy we lead; "hereket zolagy" - onuň gapdalynda/aşagynda.

5) ileri tutulýan wizual signallar

Ölçegi we agramy (çaphanasy) - ilkinji signal.
Pozisiýa (LTR-de has ýokary/çep = has möhüm).
Reňk (CTA üçin aksent, statuslar - kesgitlenen palitra boýunça).
Ikonografiýa (diňe tekst goldawy hökmünde).
Çyzyklar/çarçuwalar (uly "howaly" kartoçka has möhüm kabul edilýär).
Dinamika (gaharlanmazdan ünsi çekmek üçin animasiýa ≤ 200 ms).

6) Progressiw aýan etmek

• Above the fold - diňe kontekst, maksat we esasy hereket.
• Akkordeon/tablar - ikinji derejeli maglumatlar.
• Jikme-jiklik (drill-down): kartoçka → panel → modal.
• Artykmaç "dermanlaryň" ýerine inline-maslahatlar.
• Skeletonlar/pleýsholderler ýüklenýän wagty gurluşyny saklaýarlar.

7) Adaty ekranlarda iýerarhiýa

7. 1 Daşbord

H1 + ýokarsyndaky wagtlaýyn süzgüç.
KPI zolagy (3-5 kartoçka) - birinji setir.
Grafikler/tablisalar - ikinji setir, sortlamak/süzgüçler.
Anomaliýalar/alertler - aýratyn sütün/lenta, KPI bilen garyşdyrylmaýar.

7. 2 Katalog/lobbi

H1 + çalt süzgüçler/çipler.
Saýlama sözbaşysyna has ýakyn, kartoçkadaky "Oýnamak/Satyn almak" CTA.
Bellikler (täze/top/jekpot) - ady boýunça wizual ikinji derejeli.

7. 3 Düýp many kartoçkasy (oýun/haryt)

Gahryman zonasy: ady (H1), esasy faktlar (RTP/üýtgewsizlik/reýting), ilkinji CTA.
Jikme-jiklikler: "Düşündiriş/Aýratynlyklar/Synlar" bellikleri.
Meta maglumatlar: bellikler we kanuny tekst - aşakda.

7. 4 Formalar/ussalar

Ädimiň ady + gysgaça lead ("2 minut, kartoçka ýazylmaýar").
Ýygylyk/borçlylyk boýunça meýdanlaryň tertibi.
CTA sag/aşaky, kömekçi hereketler - aşaky/çep baglanyşyklar.
Ýalňyşlyklar - meýdanyň gapdalynda, gysgaça we iş boýunça.

8) Ýagdaýlaryň ileri tutulmagy

• Norma → Ýüklemek → Üstünlik/Boş → Ýalňyşlyk.
• Ýüklenende - çarçuwany (skeletleri) saklaň, CTA bökmeýär.
• Ýalňyşlykda - H1 "näme boldy", CTA - "gaýtalamak/habarlaşmak" üýtgeýär.

9) Mazmun-bellikler we dizaýn-ulgamy

• `font. heading. xl`, `font. body. md`, `space. 200`, `radius. md`, `elevation. sm`.
• Tekst rollary: 'text. title`, `text. lead`, `text. secondary`, `text. meta`, `text. helper`.
• Reňk rollary: 'accent/neutral/success/warn/danger' + "derejeler" (100-900).
• Komponentler: 'KPI. Card/Section. Title/Inline. Help/Meta. Line`.

10) Ölçemek we hil

• "Scan Time" (ilkinji manyly düwmä/herekete çenli media).
• Focus Order Errors (ulanyjy näçe gezek "sypdyrýar").
• CTA Visibility% (CTA-ny näçe göreniňizi we näçeräk basanyňyzy).
• INP/CLS (iýerarhiýa ýüklenende "bökmeli" däldir).
• A/B: H1-den uly vs kontrastdan güýçli; çip süzgüçleri ýokardan vs gapdal panelde.

• `first_focus_target`, `primary_cta_exposed/clicked`, `section_collapse_toggle`, `help_shown`.

11) iGaming üçin amallar (mysal)

Kazino lobbisi: H1 "Lobbi", "Täze/Live/Jackpotlar/Halanýanlar" çipleri, soňra plitalar. Her kartoçkada - adyň, üpjün edijiniň nyşanynyň, CTA "Oýnamak"; "täze/jekpot" bellikleri - ikinji gezek.
Operatoryň daşbordy: birinji setiri - NGR/GGR/DAU/CR, ikinjisi - tendensiýalar we anomaliýalar, üçünjisi - tablisalar.
Töleg ädimi: H1 "Doldurmak", lead "Komissiýasyz, derrew", öwrülişik usullarynyň sanawy, ýokardan iň az metatekst.

12) Antipatternler

Ekranda güýç taýdan deň bolan on aksent ("wizual gykylyk").
Tekstsiz suratlar/nyşanlar ýaly sözbaşylar (elýeterliligi we gözlegleri bozýar).
"Netijeler ownuk şriftde", bildirişler bolsa äpet bannerler bilen.
Esasy CTA-nyň gapdalyndaky kömekçi baglanyşyklar.
Ylalaşylmadyk tertip: şu gün "ýokardan süzgüçler", ertir "çepden".

13) Girizmegiň çek-sanawy

1. Ekranyň maksadyny kesgitläň (H1 + 1-2 başlangyç hereket).
2. Derejeleri düzüň: primary/secondary/meta; DS belliklerinde berkidiň.
3. Tipografiýa masştabyny we esasy ritmi ýygnaň.
4. STA/sözbaşy bökmezden ýagdaýy (ýüklemek/boş/ýalňyşlyk) düzediň.
5. 3-5 adam bilen 5 minutlyk "skan-synag" geçiriň: nämäni gördüňiz, nirä basdyňyz.
6. Telemetriýany birikdiriň (exposure CTA, scan time, focus order).
7. Patterni "öň/soň" mysallary bilen gidlinlerde düzüň.

14) Jemleýji

Mazmunyň iýerarhiýasy "esasy zat üçin uly şrift" däl-de, çözgütler ulgamy: tipografiýa, tor, reňk, girewleriň ritmi, DOM-daky tertip we dürli ýagdaýlardaky hereket. Her bir derejäniň öz roly we agramy bar bolsa, interfeýs düşnükli, çalt we öňünden aýdyp boljak bolýar we ulanyjylar öz hereketlerine ynamly bolýar.