Roʻyxatlar va toʻrlar: UX taqqoslash

1) Ro’yxat qachon, setka qachon (5 ta savol qoidasi)

1. Foydalanuvchining maqsadi: parametrlarni (roʻyxat) tez solishtirishni yoki vizual/muqovadan tanlashni istaysizmi?

2. Ma’lumotlar shakli: tarkibiy maydonlar (jadval/matnli) → ro’yxat; vizual obyektlar (muqovalar, fotosuratlar) → to’rlar.

3. Zichlik vs koʻrib chiqish: Ekran uchun maksimal elementlar (roʻyxat) yoki bir tekis vitrin (panjara) kerakmi?

4. Andoza amal: ochish/tafsilotlar (ro’yxat) yoki kartochkadan (to’rdan) «O’ynash/Sotib olish»?

5. Qurilmaning konteksti: mobil portret - odatda kartochkalar uchun 2 qatorli to’rlar; hisobotlar/jadvallar - ro’yxat/jadval.

Qisqacha: taqqoslash - ro’yxat; ko’z bilan tanlash - to’r.

2) Kontent va IA modeli

Roʻyxat (row-first): asosiy signal - matn/maydon. Quyidagilar uchun mos keladi: loglar, operatsiyalar tarixi, hisobotlar, atributlar bo’yicha qidiruv natijalari.
Panjara (card-first): bosh signal - muqova/prevyu. O’yinlar/tovarlar, media, kolleksiyalar uchun mos keladi.
Gibrid: ma’lumotlar manbai bir xil bo’lgan «moslashuvchan kartochka-satrlar» (mobailda - kartochka, desktopda - ustunli satr).

3) Elementlar dizayni: satr vs kartochka

Satr (list row)

Tuzilishi: ikonka/miniatyura (ixtiyoriy), sarlavha, 1-3 asosiy maydon, meta (sana/maqom), kontekstli harakatlar (⋮).
Kuchli tomonlari: o’qish qobiliyati, yuqori zichlik, yaxshi saralanadigan ustunlar to’plami.
UX-maslahatlar: balandlikni belgilang; toʻrga tekislang; ikkinchi darajali maydonlarni «oshkor qilish» da yashiring.

Kartochka (grid card)

Tuzilishi: muqovasi, sarlavhasi, imzosi/yorlig’i (yangi/jekpot), bitta asosiy CTA + qo’shimcha harakatlar «»....
Kuchli tomonlari: vizual tanlov, tezkor harakatlar, hissiy kontekst.
UX-maslahatlar: aspect-ratio (masalan, 4: 3/1: 1), sarlavhalar balandligi bir xil, matn kesish tooltip bilan.

4) Navigatsiya, saralash va filtrlar

Umumiy: filtrlar va saralash - yaqin va barqaror (sakrashsiz). Faol shartlar - natijalar ustida chip.
Ro’yxat: ko’p ustunlarni qo’llab-quvvatlang + sarlavhalarni muzlatish; shlyapaga bosish bo’yicha saralash.
Setka: ochilgan roʻyxat bilan saralash; filtrlar - chip/panel. «Vizual» qidirish uchun - hover/long-press preview.

5) Mobil vs desktop

• Setka: 2-qatorga (telefon), 3-qatorga (planshet). Bosh barmoq zonasidagi katta CTA.
• Roʻyxat: ixcham satrlar (56-72dp), buriladigan meta-maydonlar.

• Panjara: 1200px ≥ 4-6-qatorli, avtofil kartochka kengligi bilan.
• Roʻyxat: jadval/satrlar, ustunlar resaisi, jadval boʻyicha tezkor qidirish.

6) Holatlar va yuklash

Skeletons: skelet-satrlar (kamida 3-5), muqovasi va matni uchun qopqoqli skelet-kartochkalar.
Boʻsh: nima uchun boʻsh ekanligini tushuntirish va filtrlarni olib tashlashni taklif qilish.
Xatolar: foydalanuvchi tanlanishini va pozitsiyasini saqlab qolish; retry berish.
Qo’shimcha yuklash: kataloglardagi cheksiz lentadan ko’ra «Ko’rsatish» (gibrid) afzalroqdir; loglar uchun - «Pauza» bilan avtopodskroll mumkin.

7) Unumdorlik

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

Roʻyxat: satrlarni virtuallashtirish, belgilangan balandliklar, kechiktirilgan hisoblash.
To’rlar: lazy-tasvirlar (AVIF/WebP),’srcset/sizes’, oldindan aytib bo’ladigan o’lchamlar, 20-60 kartochkadan iborat bo’lgan «partiyalar».
Umumiy:’content-visibility: auto’, kesh prevyu, hero elementlar uchun yuklash ustuvorliklari.

8) Foydalanish imkoniyati

Roʻyxat: toʻgʻri semantikali jadvallar (’table/thead/tbody’,’aria-sort’), satrlar/kataklar boʻyicha fokus.
’role =’ grid’yoki’role =’list’roʻyxati; DOM = vizual tartibda; rasmlar uchun imzolar.
Klaviatura: strelkalar/Tab; Enter - ochish; Space - «tanlanganlarga» (agar oʻrinli boʻlsa).
Bosish oʻlchamlari: ≥ 44px; AA kontrasti; nishonchalardagi aniq imzolar.

9) Metrika va telemetriya

• `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 natijalari, Scroll Depth, Zero-Result Rate,
• Compare Rate (roʻyxatlar uchun), Quick-Action Rate (toʻrlar uchun), Latency p95.

10) A/B-eksperimentlar (nimani sinash kerak)

Yangi/qaytayotganlar uchun andoza koʻrinish (roʻyxat/toʻr).
Ekrandagi elementlar soni, satr balandligi, kartochka oʻlchami.
Filtrlar/saralash tartibi; chiplar vs yon panel.
Kartochkadagi tezkor harakatlar (ikonkalar/matn, bitta vs ikkita CTA).
Guardrails: INP/CLS, «sakrash» to’g’risidagi shikoyatlar, Zero-Result o’sishi.

11) iGaming uchun misollar

O’yinlar lobbisi (B2C): to’r - muqova + «O’ynash/Demo», «Yangi/Jekpot» yorliqlari, chip filtrlari (Provayder/Toifa/Mexanika).
Provayderlar katalogi: o’yinlar soni bo’lgan logotiplar setkasi; bosish bo’yicha - provayder sahifasi (ichkarida - o’yinlar to’plami).
Hisobotlar/Moliya (B2B): ro’yxat/jadval - NGR/GGR/FTD/CR ustunlari, sarlavhalarni belgilash, eksport.
Tranzaksiyalar tarixi: ro’yxat - zich qator, maqomlar, summa/ID/sana bo’yicha qidiruv; detallar uchun satrni ochish.
Aksiyalar/turnirlar: sanalari va CTA bo’lgan bannerlar to’plami, «Hozir/Yaqinda» bo’yicha saralash.

12) Moslashuvchan o’tkazgichlar va personallashtirish

Foydalanuvchiga «Tarmoq roʻyxati» kalitini bering va tanlashni eslab qoling (per user/tenant).
«Zich», «Odatda», «Katta» kabi presetlarni taklif qiling.
Kontekst mantiq: birinchi marta - lobbidagi to’r; izlashdan - aniq taqqoslash uchun roʻyxat.

13) Antipatternlar

Tomonlarining nisbati qat’iy bo’lmagan to’r → «raqs» kartochkalari va yuqori CLS.
Juda ko’p ustunli ro’yxat - keraksiz gorizontal skroll.
Har xil xulq-atvorli xoverda ham, kartochkada ham harakat tugmalarini takrorlash.
Har bir yuklashda saralash/filtrlarni aralashtirish (fokusni buzadi).
Yashirin aktiv filtrlar natijalarini «yoʻqotadi».

14) Joriy etish chek-varaqasi (bosqichma-bosqich)

1. Ekranning maqsadi: vizual tanlash yoki sifatlarni taqqoslash.
2. Modelni koʻrsating: roʻyxat/toʻr/gibrid; IA va ma’lumotlar manbalarini kelishib oling.
3. Elementni loyihalashtiring.
4. Saralash/filtrlar: koʻrinadigan chiplar, barqaror saralash nazorati.
5. Yuklash/boʻsh/xato: skeletonlar, tushunarli matnlar va retry.
6. Spektakl: lazy/virtualization,’content-visibility’, p95-maqsadlar.
7. A11y: semantika, klaviatura, kontrast, tap-targetlar o’lchamlari.
8. Telemetriya: TTFA, qCTR, Zero-Result, Latency p95.
9. A/B: andoza koʻrinish, oʻlchamlar, tezkor harakatlar.
10. Tanlash xotirasi: Taqdimot rejimini va oxirgi filtrlarni saqlang.

15) Jami

Ro’yxatlar va to’rlar - turli vazifalar uchun vositalar.

Sifatlar va taqqoslash muhim bo’lsa, ro’yxatni oling.
Vizual va tezkor harakatlarni hal qilganda, to’rni oling.
Maqsadni aniqlang, o’lchamlari va xatti-harakatlarini aniqlang, interfeysni tez va qulay saqlang - va foydalanuvchilar ortiqcha kognitiv shovqinsiz kamroq bosqichda natijaga erishadilar.