Listeler ve ızgaralar: UX karşılaştırması

1) Ne zaman liste, ne zaman ızgara (kural 5 soru)

1. Kullanıcı hedefi: parametreleri hızlı bir şekilde karşılaştırın (liste) veya görsel/kapak (ızgara) ile seçim yapın?

2. Veri formu: yapı alanları (tablo/metin) - liste; Görsel nesneler (kaplamalar, fotoğraflar) - ızgara.

3. Yoğunluk vs genel bakış: ekran (liste) veya tek tip vitrin (ızgara) başına maksimum öğelere mi ihtiyacınız var?

4. Varsayılan eylem: açık/ayrıntılar (liste) veya karttan (ızgaradan) anında "Oynat/Satın Al"?

5. Cihaz bağlamı: Mobil portre - genellikle kartlar için üst üste 2 ızgara; masaüstünde raporlar/tablolar - liste/tablo.

Kısa: karşılaştırma - liste; Gözlerinizle seçin - ızgara.

2) İçerik modeli ve IA

Satır-ilk-Ana sinyal metin/alanlardır. Şunlar için uygundur: günlükler, işlem geçmişleri, raporlar, öznitelik arama sonuçları.
Kart ilk: Ana sinyal kapak/önizlemedir. Uygun: oyunlar/ürünler, medya, koleksiyonlar.
Hibrit: Aynı veri kaynağına sahip "uyarlanabilir hat kartları" (mobilde - bir kart, masaüstünde - sütunlu bir hat).

3) Elemanların tasarımı: sıra vs kart

Satır (liste satırı)

Yapı: Simge/küçük resim (isteğe bağlı), başlık, 1-3 anahtar alanı, meta (tarih/durum), bağlamsal eylemler (⋮).
Güçlü yönleri: okunabilirlik, yüksek yoğunluk, iyi sıralanabilir sütun kümesi.
UX ipuçları: yüksekliği düzeltin; Izgaraya hizala, "açığa çıkar'daki küçük alanları gizle.

Izgara kartı

Yapı: Kapak, Başlık, Altyazı/Etiketler (Yeni/Jackpot), Bir Ana CTA + Ekstra Eylem "..."

Güçlü yönleri: Görsel seçim, hızlı eylem, duygusal bağlam.
UX-ipuçları: en boy oranını koruyun (örn. 4: 3/1: 1), aynı başlık yükseklikleri, araç ipucu ile metin kırpma.

4) Navigasyon, sıralama ve filtreler

Genel: Filtreler ve türler yakın ve kararlı (atlamasız). Aktif koşullar - sonuçlar üzerinde cips.
Liste: birçok sütunu + "dondur" başlıklarını destekler; Başlığa tıklayarak sıralama.
Izgara: açılır listeye göre sıralama; Filtreler - cips/panel tarafından. "Görsel" arama için - hover/long-press üzerinde önizleme.

5) Mobil vs masaüstü

• Izgara: 2-in-a-row (telefon), 3-in-a-row (tablet). Başparmak bölgesinde büyük CTA'lar.
• Liste: kompakt çizgiler (56-72dp), katlanabilir meta alanlar.

• Izgara: ≥1200px'de 4-6-in-a-line,'min 'kart genişliği ile otomatik doldurun.
• Liste: tablo/satırlar, sütun yeniden boyutlandırma, hızlı tablo arama.

6) Durumlar ve indirmeler

İskeletler: iskelet çizgileri (en az 3-5), kapaklı iskelet kartları ve metin fişleri.
Boş: Neden boş olduğunu açıklayın ve hazır ayarlar önerin/filtreleri kaldırın.
Hatalar: kullanıcı seçimini ve konumunu kaydedin; yeniden dene.
Yeniden yükleme: "Daha fazla göster" (hibrit) kataloglarda sonsuz bant tercih edilir; Günlükler için - "Duraklat'ile otomatik olarak kaydırabilirsiniz.

7) Performans

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

Liste: dize sanallaştırma, sabit yükseklikler, ertelenmiş hesaplamalar.
Izgara: Tembel görüntüler (AVIF/WebP), 'srcset/boyutlar', öngörülebilir boyutlar, 20-60 kartlık "gruplar" halinde.
Genel: 'content-visibility: auto', önizleme önbelleği, kahraman öğeleri için yükleme öncelikleri.

8) Satın alınabilirlik

Liste: doğru semantiği olan tablolar ('table/thead/tbody', 'aria-sort'), satırlara/hücrelere odaklanır.
Izgara: 'role =' grid 'veya' role = 'list'ile liste; DOM = görsel olarak sırası; Resimler için altyazılar.
Klavye: oklar/Sekme; Enter - açık; Boşluk - "favorilere" (uygunsa).
Tıklama boyutları: ≥ 44px; AA kontrastı; Simgelerde açık imzalar.

9) Metrikler ve telemetri

• '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 sonuçları, Kaydırma Derinliği, Sıfır Sonuç Oranı,
• Karşılaştırma Hızı (listeler için), Hızlı İşlem Hızı (ızgaralar için), Gecikme Süresi p95.

10) A/B deneyleri (neyin test edileceği)

Yeni/geri dönenler için varsayılan görünüm (liste/ızgara).
Ekran başına öğe sayısı, satır yüksekliği, kart boyutu.
Filtrelerin/sıralamanın sırası; Cips vs kenar çubuğu.
Karttaki hızlı eylemler (simgeler/metin, bir vs iki CTA).
Korkuluklar: INP/CLS, düzen "sıçramaları" hakkında şikayetler, Sıfır Sonuç büyümesi.

11) iGaming için örnekler

Oyun Lobisi (B2C): Izgara - Kapak + Oyna/Demo, Yeni/Jackpot Etiketleri, Çip Filtreleri (Sağlayıcı/Kategori/Mekanik).
Sağlayıcı kataloğu: oyun sayısı ile logo ızgarası; tıklayarak - sağlayıcının sayfası (içeride - ayrıca bir oyun ızgarası).
Raporlar/Finans (B2B): liste/tablo - NGR/GGR/FTD/CR sütunları, başlık sabitleme, dışa aktarma.
İşlem geçmişi: liste - yoğun seriler, durumlar, miktara/kimliğe/tarihe göre arama; Parçalar için dizeyi genişletin.
Promosyonlar/turnuvalar: "Going Now/Coming Soon'a göre sıralanmış tarihler ve CTA'lar içeren banner ızgarası.

12) Esnek anahtarlar ve kişiselleştirme

Kullanıcıya "Liste ↔ Izgara" radyo düğmesini verin ve seçimi hatırlayın (kullanıcı/kiracı başına).
Performansın ön ayarlarını sunun: "Sıkı", "Genellikle", "Büyük".
Bağlamsal mantık: ilk kez - lobide bir ızgara; aramadan - kesin karşılaştırma için bir liste.

13) Antipatterns

Sabit en boy oranı olmayan ızgara - "dans eden" kartlar ve yüksek CLS.
Çok fazla sütunlu bir liste, gerekmeden yatay bir kaydırmadır.
Eylem düğmelerinin hem kartta hem de havada farklı davranışlarla çoğaltılması.
Her yükte sıraları/filtreleri karıştırma (odağı keser).
Gizli aktif filtreler - kullanıcılar sonuçları "kaybeder".

14) Uygulama kontrol listesi (adım adım)

1. Ekranın görsel veya nitelik karşılaştırmasıyla seçilip seçilmediğini tanımlayın.
2. Modeli tanımlayın: liste/ızgara/hibrit; IA ve veri kaynaklarına katılıyorum.
3. Sabit anahtar bölgesi boyutlarına sahip bir satır veya kart tasarlayın.
4. Sıralama/filtreler: görünür yongalar, kararlı sıralama kontrolü.
5. Yükleme/boş/hata: iskeletler, dostça metinler ve yeniden deneme.
6. Performans: Tembel/sanallaştırma, 'içerik görünürlüğü', p95 hedefleri.
7. A11y: semantik, klavye, kontrast, tap-hedef boyutları.
8. Telemetri: TTFA, qCTR, Sıfır Sonuç, Gecikme p95.

9. A/B varsayılan görünümü, boyutlar, hızlı eylemler

10. Bellek'i seçin: Görünüm modunu ve son filtreleri koruyun.

15) Alt satır

Listeler ve ızgaralar farklı görevler için araçlardır.

Nitelikler ve karşılaştırma önemli olduğunda, bir liste alın.
Görsel karar verdiğinde ve hızlı eylemler yaptığında - ızgarayı alın.
Bir hedef tanımlayın, boyutları ve davranışları yakalayın, arayüzü hızlı ve erişilebilir tutun - ve kullanıcılar gereksiz bilişsel gürültü olmadan daha az adımda sonuç elde edeceklerdir.