Sanawlar we torlar: UX-deňeşdirme

1) Haçan sanaw, haçan tor (5 sorag düzgüni)

1. Ulanyjynyň maksady: parametrleri (sanaw) çalt deňeşdirmek ýa-da wizual/örtük (tor) boýunça saýlamak?

2. Maglumatlaryň görnüşi: gurluş meýdançalary (tablisa/tekst) → sanaw; wizual obýektler (örtükler, suratlar) → tor.

3. Dykyzlyk vs syn: ekranda iň köp element gerek (sanaw) ýa-da tekiz vitrin (tor)?

4. Hereket: aç/jikme-jiklikler (sanaw) ýa-da kartoçkadan (tor) derrew "Oýnamak/Satyn almak"?

5. Enjamyň mazmuny: ykjam portret - adatça kartoçkalar üçin 2-nji setir; iş stolundaky hasabatlar/tablisalar - sanaw/tablisa.

Gysgaça: deňeşdirmek - sanaw; gözleri bilen saýlamak - tor.

2) Mazmun we IA modeli

Sanaw (row-first): esasy signal - tekst/meýdan. Loglar, amallaryň taryhy, hasabatlar, atributlar boýunça gözleg netijeleri üçin amatlydyr.
Tor (card-first): esasy signal - örtük/preview. Oýunlar/harytlar, media, kolleksiýalar üçin amatlydyr.
Gibrid: "adaptasiýa kartoçkalary-setirleri" (mobilde - kartoçka, desktopda - sütünli setirler) şol bir maglumat çeşmesinde.

3) Elementleriň dizaýny: setiri vs kartoçka

Çyzyk (list row)

Gurluşy: nyşan/miniatýura (goşmaça), sözbaşy, 1-3 esasy meýdan, meta (sene/status), kontekstli hereketler (⋮).
Güýçli taraplary: okalmagy, ýokary dykyzlygy, gowy sortlanylýan sütünler toplumy.
UX-maslahatlar: beýikligi düzüň; tor boýunça tekizläň; "açylyşda" ikinji derejeli ýerleri gizläň.

Kartoçka (grid card)

Gurluşy: örtük, sözbaşy, gol/bellikler (täze/jekpot), bir esasy CTA + goşmaça hereket ""....
Güýçli taraplary: wizual saýlamak, çalt hereketler, emosional kontekst.
UX-maslahatlar: aspect-ratio (mysal üçin 4: 3/1: 1), sözbaşy beýikligi birmeňzeş, gural bilen teksti kesiň.

4) Nawigasiýa, sortlamak we süzgüçler

Umumy: süzgüçler we sortlar - ýakyn we durnukly (böküşsiz). Işjeň şertler - netijeleriň üstündäki çipler.
Sanaw: köp sütünleri goldaň + sözbaşylary "doňduryň"; şlýapa basmak arkaly sortlamak.
Tor: açylýan sanaw bilen sortlamak; süzgüçler - çip/panel. "Wizual" gözleg üçin - hover/long-press preview.

5) Jübi vs desktop

• Tor: 2-hataryna (telefon), 3-hataryna (planşet). Baş barmak zolagynda uly CTA.
• Sanaw: ykjam setirler (56-72dp), gysgaldylýan meta-meýdanlar.

• Tor: 1200px ≥ 4-6-hatara, awto-fill kartoçkanyň giňligi bilen.
• Sanaw: tablisa/setirler, sütünleri gaýtadan işlemek, tablisa boýunça çalt gözlemek.

6) Ýagdaýlar we ýüklemek

Skeletons: setirler-skeletler (azyndan 3-5), örtük we tekst üçin örtükleri bolan kartoçkalar-skeletler.
Boş: näme üçin boşdygyny düşündirmek we süzgüçleri aýyrmak/presetleri teklip etmek.
Ýalňyşlyklar: ulanyjynyň saýlamasyny we ýerini saklamak; retry bermek.
Goşmaça ýüklemek: kataloglarda tükeniksiz lentadan has gowy "Has köp görkezmek" (gibrid); loglar üçin - "Pauza" -dan awto-podskroll edip bilersiňiz.

7) Öndürijilik

Maksatlar: INP ≤ 200 ms, CLS ≤ 0,1, scroll-jank <1%.

Sanaw: setirleri wirtuallaşdyrmak, kesgitlenen beýiklikler, yza süýşürilen hasaplamalar.
Tor: lazy-şekiller (AVIF/WebP), 'srcset/sizes', öňünden aýdyp boljak ölçegler, 20-60 kartoçka "partiýa".
Umumy: 'content-visibility: auto', keş prevyu, hero-elementler üçin ýüklemek üçin ileri tutulýan ugurlar.

8) Elýeterlilik

Sanaw: dogry semantikasy bolan tablisalar ('table/thead/tbody', 'aria-sort'), setirler/öýjükler boýunça fokus.
Tor: 'role = "grid"' ýa-da c 'role = "list"'; DOM = wizual tertipde; suratlar üçin gollar.
Klawiatura: oklar/Tab; Enter - Aç; "Space" - "saýlanan" (dogry bolsa).
Basmagyň ölçegleri: ≥ 44px; AA kontrast; nyşanlaryň gollary aýdyň.

9) Metrika we telemetriýa

• `view_switch(list|grid)`, `sort_change`, `filter_apply`, `card_quick_action`,
• `row_open`, `compare_open`, `results_load_batch`, `error_retry`.

• Time-to-First-Action (TTFA), qCTR netijeleri, Scroll Depth, Zero-Result Rate,
• Compare Rate (sanawlar üçin), Quick-Action Rate (torlar üçin), Latency p95.

10) A/B-synaglary (näme synagdan geçirmeli)

Täze/gaýdyp gelýänler üçin adaty görnüş (sanaw/tor).
Ekrandaky elementleriň sany, setiriň beýikligi, kartoçkanyň ululygy.
Süzgüçleriň/sortlaryň tertibi; çipler vs gapdal panel.
Kartoçkadaky çalt hereketler (nyşanlar/tekst, bir vs iki CTA).
Garawullar: INP/CLS, "bökmek", "Zero-Result" beýikligi baradaky şikaýatlar.

11) iGaming üçin mysallar

Oýun lobbisi (B2C): tor - örtük + "Oýna/Demo", "Täze/Jekpot" bellikleri, çip süzgüçleri (Üpjün ediji/Kategoriýa/Mehanika).
Üpjün edijileriň katalogy: oýunlaryň sany bolan logotipler tory; basmak boýunça - üpjün edijiniň sahypasy (içinde - oýunlar tory).
Hasabatlar/Maliýe (B2B): sanaw/tablisa - NGR/GGR/FTD/CR sütünleri, sözbaşylary düzetmek, eksport.
Geleşikleriň taryhy: sanaw - dykyz hatar, statuslar ,/ID/senesi boýunça gözleg; jikme-jiklikler üçin setiri açmak.
Aksiýalar/ýaryşlar: seneleri we CTA bolan bannerleriň tory, "Indi/ýakyn wagtda" boýunça sortlamak.

12) Çeýe açarlar we şahsylaşdyrma

Ulanyja "Tor sanawy" düwmesini beriň we saýlamagy ýatda saklaň (per user/tenant).
Çykyşyň "Dykyz", "Adatça", "Uly" presetlerini hödürläň.
Kontekst logika: ilkinji gezek - lobbide tor; Gözlegden - takyk deňeşdirmek üçin sanaw.

13) Antipatternler

Kesgitlenen tarap gatnaşygy bolmadyk tor → "tans edýän" kartoçkalar we ýokary CLS.
Gaty köp sütünli sanaw - gerek bolmadyk gorizontal skroll.
Hereketleriň düwmelerini kartoçkada-da, dürli häsiýetli howerde-de köpeltmek.
Her ýüklenende sortlamalary/süzgüçleri garyşdyrmak (fokusy döwýär).
Gizlin işjeň süzgüçler - ulanyjylar netijelerini "ýitirýärler".

14) Girizmegiň çek-sanawy (ädimme-ädim)

1. Ekranyň maksadyny kesgitläň: wizual ýa-da atributlary deňeşdirmek.
2. Model beriň: sanaw/tor/gibrid; IA we maglumat çeşmeleri bilen ylalaşyň.
3. Elementi düzüň: esasy zolaklaryň kesgitlenen ölçegleri bolan setir ýa-da kartoçka.
4. Sortlar/süzgüçler: görünýän çipler, yzygiderli sortlama gözegçiligi.
5. Ýüklemek/boş/ýalňyşlyk: skeletler, düşnükli tekstler we retry.
6. Çykyş: lazy/virtualization, 'content-visibility', p95-maksatlar.
7. A11y: semantika, klawiatura, kontrast, tap-nyşanlaryň ölçegleri.
8. Telemetriýa: TTFA, qCTR, Zero-Result, Latency p95.
9. A/B: adaty görnüş, ululyk, çalt hereket.
10. Saýlamak ýady: Görkeziş tertibini we iň soňky süzgüçleri saklaň.

15) Jemleýji

Sanawlar we torlar - dürli meseleler üçin gurallar.

Aýratynlyklar we deňeşdirme möhüm bolanda, sanawy alyň.
Wizual we çalt hereket etmek kararyna gelende, tory alyň.
Maksadyňyzy kesgitläň, ululygyňyzy we özüni alyp barşyňyzy düzediň, interfeýsiňizi çalt we elýeterli saklaň - ulanyjylar goşmaça aň-düşünjäniň sesi bolmazdan az ädimde netijä gelerler.