Siyahılar və Grid: UX-müqayisə

1) Nə zaman siyahı, nə zaman mesh (5 suallar qaydası)

1. İstifadəçi məqsədi: parametrləri (siyahı) tez müqayisə etmək və ya vizual/üz qabığı (tor) seçmək?

2. Məlumat forması: struktur sahələri (cədvəl/mətn) → siyahı; vizual obyektlər (örtüklər, fotoşəkillər) → mesh.

3. Sıxlıq vs baxış: ekran (siyahı) və ya vahid vitrin (mesh) üçün maksimum elementlər lazımdır?

4. Default hərəkət: açmaq/detalları (siyahı) və ya ani «Play/Al» kart (grid)?

5. Cihazın konteksti: mobil portret - adətən kartlar üçün 2 sıralı şəbəkə; masa üstü hesabatlar/cədvəllər - siyahı/cədvəl.

Qısa: müqayisə - siyahı; gözlərinizlə seçin - tor.

2) Məzmun modeli və IA

Siyahı (row-first): əsas siqnal mətn/sahələrdir. Üçün uygundur: qeydlər, əməliyyat tarixçələri, hesabatlar, atributlar üzrə axtarış nəticələri.
Mesh (card-first): əsas siqnal - örtük/preview. Uyğun: oyunlar/məhsullar, media, kolleksiyalar.
Hibrid: eyni məlumat mənbəyi ilə «adaptiv kart-sətirlər» (mobil faylda - kart, masaüstündə - sütunlu sətir).

3) Elementlərin dizaynı: sətir vs kart

Sətir (list row)

Struktur: ikona/miniatür (isteğe bağlı), başlıq, 1-3 əsas sahə, meta (tarix/status), kontekstli hərəkətlər (⋮).
Güclü cəhətləri: oxunabilirlik, yüksək sıxlıq, yaxşı çeşidlənən sütun dəsti.
UX məsləhətləri: hündürlüyü qeyd edin; grid boyunca hizalayın; "açıqlama 'da ikinci dərəcəli sahələri gizlətmək.

Kart (grid card)

Struktur: üz qabığı, başlıq, imza/etiket (yeni/jackpot), bir əsas CTA + əlavə hərəkət «»....
Güclü cəhətləri: vizual seçim, sürətli hərəkətlər, emosional kontekst.
UX məsləhətləri: aspect-ratio (məsələn, 4: 3/1: 1), eyni başlıq hündürlükləri, tooltip ilə mətni kəsin.

4) Naviqasiya, çeşidləmə və filtrlər

Ümumi: filtrlər və çeşidləmə - yaxın və stabil (heç bir sıçrayış). Aktiv şərtlər - nəticələr üzərində çiplər.
Siyahı: bir çox sütun + başlıqların «dondurulmasını» dəstəkləyin; şapka üçün kliklə çeşidləmə.
Grid: açılır siyahı ilə sıralama; filtrlər - çip/panel. «Vizual» axtarış üçün - hover/long-press preview.

5) Mobil vs masaüstü

• Grid: 2-in-sıra (telefon), 3-in-sıra (planşet). Baş barmaq zonasında böyük CTA.
• Siyahı: kompakt sətirlər (56-72dp), bükülən meta-sahələr.

• Mesh: 1200px ≥ ilə 4-6-sıra, kart genişliyi ilə auto-fill.
• Siyahı: cədvəl/sətirlər, sütun resayzi, cədvəl üzrə sürətli axtarış.

6) Hallar və yükləmə

Skeletons: sətirlər-skeletlər (minimum 3-5), üz qabığı və mətn örtükləri olan skelet kartları.
Boş: niyə boş olduğunu izah etmək və presets/filtrləri çıxarmaq.
Səhvlər: istifadəçi seçimi və mövqeyi saxlamaq; retry vermək.
Əlavə yükləmə: kataloqlarda sonsuz lentdən daha çox «Daha çox göstər» (hibrid); log üçün - «Pauza» ilə avtomatik podskroll edə bilərsiniz.

7) Performans

Məqsədlər: INP ≤ 200ms, CLS ≤ 0.1, scroll-jank <1%.

Siyahı: sətirlərin virtuallaşdırılması, sabit hündürlüklər, təxirə salınmış hesablamalar.
Mesh: lazy-görüntülər (AVIF/WebP), 'srcset/sizes', proqnozlaşdırıla bilən ölçüləri, «partiyalar» 20-60 kart.
Ümumi: 'content-visibility: auto', önizleme önbelleği, hero-elementlər üçün yükləmə prioritetləri.

8) Mövcudluq

Siyahı: düzgün semantika ilə cədvəllər ('table/thead/tbody', 'aria-sort'), sətir/hüceyrə fokusu.
Şəbəkə: 'role = "grid' və ya 'role =" list "'; DOM = vizual qaydası; şəkillər üçün imzalar.
Klaviatura: ok/Tab; Enter - açmaq; Space - «seçilmiş» (uyğun olarsa).
Klik ölçüləri: ≥ 44px; AA kontrastı; nişanların açıq imzaları.

9) Metrika və 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 nəticələri, Scroll Depth, Zero-Result Rate,
• Compare Rate (siyahılar üçün), Quick-Action Rate (şəbəkələr üçün), Latency p95.

10) A/B-təcrübələri (nə test etmək)

Yeni/geri dönənlər üçün default görünüş (siyahı/mesh).
Ekran başına elementlərin sayı, sətrin hündürlüyü, kartın ölçüsü.
Filtr/çeşidləmə qaydası; çiplər vs yan panel.
Kartdakı sürətli hərəkətlər (nişanlar/mətn, bir vs iki CTA).
Guardrails: INP/CLS, «sıçrayış», Sıfır Result böyüməsi şikayətləri.

11) iGaming üçün nümunələr

Oyun lobbisi (B2C): mesh - üz + «Play/Demo», «Yeni/Jackpot» etiketləri, çip filtrləri (Provayder/Kateqoriya/Mexanika).
Provayderlərin kataloqu: oyunların sayı ilə loqotiplər şəbəkəsi; kliklə - provayder səhifəsi (daxildə də - oyun şəbəkəsi).
Hesabatlar/Maliyyə (B2B): siyahı/cədvəl - NGR/GGR/FTD/CR sütunları, başlıqların fiksasiyası, ixrac.
Əməliyyatların tarixi: siyahı - sıx sıra, statuslar, məbləğ/ID/tarix üzrə axtarış; detallar üçün sətir açmaq.
Promosyonlar/turnirlər: tarixləri və CTA olan pankartlar şəbəkəsi, «İndi/Tezliklə gəlir» üzrə çeşidləmə.

12) Çevik açarlar və personallaşdırma

İstifadəçiyə «Şəbəkə siyahısı» açarını verin və seçimi yadda saxlayın (per user/tenant).
Təqdimat presetlərini təklif edin: «Sıx», «Adətən», «Böyük».
Kontekst məntiqi: ilk dəfə - lobbidə şəbəkə; axtarışdan - dəqiq müqayisə üçün bir siyahı.

13) Antipattern

Sabit nisbəti olmayan tor → «rəqs» kartları və yüksək CLS.
Çox sütunlu bir siyahı - ehtiyacı olmayan üfüqi scroll.
Fərqli davranış ilə kartda və hoverdə hərəkət düymələrini təkrarlayın.
Hər yükləmə zamanı çeşidləmə/filtrlərin qarışdırılması (fokusu qırır).
Gizli aktiv filtrlər - istifadəçilər nəticələrini «itirirlər».

14) Giriş çek siyahısı (addım-addım)

1. Ekranın məqsədini müəyyənləşdirin: vizual seçim və ya atributların müqayisəsi.
2. Model təyin edin: siyahı/mesh/hibrid; IA və məlumat mənbələri ilə razılaşın.
3. Elementi dizayn edin: əsas zonaların sabit ölçüləri olan bir xətt və ya kart.
4. Çeşidləmə/filtrlər: görünən çiplər, sabit çeşidləmə nəzarəti.
5. Yükləmə/boş/səhv: skeletonlar, başa düşülən mətnlər və retry.
6. Performans: lazy/virtualization, 'content-visibility', p95-hədəflər.
7. A11y: semantika, klaviatura, kontrast, tap hədəflərinin ölçüləri.
8. Telemetriya: TTFA, qCTR, Zero-Result, Latency p95.
9. A/B: default görünüşü, ölçüləri, sürətli hərəkətləri.
10. Seçim yaddaşı: təqdimat rejimi və son filtrləri saxlayın.

15) Yekun

Siyahılar və şəbəkələr - müxtəlif vəzifələr üçün alətlər.

Atributlar və müqayisə vacib olduqda, siyahını götürün.
Vizual və sürətli hərəkətlərə qərar verdikdə, şəbəkəni götürün.
Hədəfi müəyyənləşdirin, ölçüləri və davranışları düzəldin, interfeysi sürətli və əlçatan saxlayın - və istifadəçilər daha az addım üçün nəticəyə çatacaqlar, lazımsız bilişsel səs-küy olmadan.