Listy i sieci: porównanie UX

1) W przypadku listy, kiedy siatka (przepis 5 pytań)

1. Cel użytkownika: szybko porównać parametry (lista) lub wybrać przez visual/cover (siatka)?

2. Formularz danych: pola struktury (tabela/tekst) → lista; obiekty wizualne (skórki, zdjęcia) → siatka.

3. Gęstość kontra przegląd: potrzebujesz maksymalnych elementów na ekranie (lista) lub jednolitej prezentacji (siatka)?

4. Domyślna akcja: open/details (list) lub instant „Play/Buy” z karty (grid)?

5. Kontekst urządzenia: portret mobilny - zwykle 2-w-rzędzie siatka dla kart; raporty/tabele na pulpicie - lista/tabela.

Krótki: porównaj - lista; wybrać z oczu - siatki.

2) Model treści i IA

row-first-Głównym sygnałem jest tekst/pola. Nadaje się do: dzienników, historii transakcji, raportów, wyników wyszukiwania atrybutów.
Karta-pierwszy: głównym sygnałem jest okładka/podgląd. Nadaje się do: gier/produktów, mediów, kolekcji.
Hybrid: „adaptacyjne karty liniowe” (na telefonie komórkowym - karta, na pulpicie - linia z kolumnami) z tym samym źródłem danych.

3) Projekt elementów: rząd vs karta

Wiersz (wiersz listy)

Struktura: ikona/miniaturka (opcjonalnie), tytuł, 1-3 pola kluczowe, meta (data/status), akcje kontekstowe (⋮).
Mocne strony: czytelność, wysoka gęstość, dobry zestaw kolumn do sortowania.
Wskazówki UX: naprawić wysokość; Wyrównać do siatki ukryć drobne pola w „ujawnić”.

Karta siatki

Struktura: Okładka, Tytuł, Podpis/Etykiety (Nowy/Jackpot), Jeden główny CTA + Dodatkowe działanie w „...”

Mocne strony: Wybór wizualny, szybkie działanie, kontekst emocjonalny.
Wskazówki UX: zachować proporcje (np. 4: 3/1: 1), te same wysokości nagłówka, kliknięcie tekstem z końcówką narzędzi.

4) Nawigacja, sortowanie i filtry

Ogólne: filtry i rodzaje są w pobliżu i stabilne (bez skoków). Aktywne warunki - żetony nad wynikami.
Lista: obsługuje wiele kolumn + nagłówki „zamrozić”; sortowanie klikając na nagłówek.
Siatka: sortowanie według listy rozwijanej; filtry - za pomocą żetonów/panelu. Wyszukiwanie „wizualne” - podgląd na hover/long-press.

5) Mobilny komputer stacjonarny

• Siatka: 2 w rzędzie (telefon), 3 w rzędzie (tablet). Duże TK w okolicy kciuka.
• Lista: zwarte linie (56-72dp), składane meta-pola.

• Siatka: 4-6 w rzędzie przy ≥ 1200px, automatyczne wypełnienie o szerokości 'min' karty.
• Lista: tabela/wiersze, rozmiar kolumny, szybkie wyszukiwanie tabeli.

6) Państwa i pliki do pobrania

Szkielety: linie szkieletowe (minimum 3-5), karty szkieletowe z okładkami i wtyczkami tekstowymi.
Puste: wyjaśnić dlaczego puste i sugerować ustawienia wstępne/usunąć filtry.
Błędy: zapisz wybór użytkownika i pozycję; powtórzyć próbę.
Przeładowanie: „Pokaż więcej” (hybryda) jest preferowane do taśmy bez końca w katalogach; dla dzienników - można automatycznie przewijać z „Pauza”.

7) Wydajność

Cele: INP ≤ 200 ms, CLS ≤ 0. 1, zwój-jank <1%.

Lista: wirtualizacja ciągu, stałe wysokości, odroczone obliczenia.
Siatka: leniwe obrazy (AVIF/WebP), 'srcset/sizes', przewidywalne rozmiary, w „partiach” 20-60 kart.
Ogólne: 'content-visibility: auto', podgląd pamięci podręcznej, priorytety obciążenia dla elementów bohatera.

8) Przystępność cenowa

Wykaz: tabele z poprawną semantyką („table/thead/tbody”, „aria-sort”), skupienie się na wierszach/komórkach.
Siatka: 'rola = „siatka”' lub lista z 'rola = „lista”'; kolejność w DOM = wizualne; zapisy dla obrazów.
Klawiatura: strzałki/karta; Enter - otwórz; Przestrzeń - „do ulubionych” (w stosownych przypadkach).
Kliknij rozmiary: ≥ 44px; kontrast AA; wyraźne podpisy na ikonach.

9) Metryka i telemetria

• 'view _ switch (lista' grid ')', 'sort _ change', 'filter _ apply', 'card _ quick _ action',
• 'row _ open', 'compare _ open', 'results _ load _ batch', 'error _ retry'.

• Czas do pierwszego działania (TTFA), wyniki qCTR, głębokość przewijania, wskaźnik zerowego wyniku,
• Porównaj Szybkość (dla list), Szybka akcja (dla siatek), Latency p95.

10) Eksperymenty A/B (co przetestować)

Domyślny widok (lista/siatka) dla nowych/powracających.
Liczba elementów na ekranie, wysokość wiersza, rozmiar karty.
Kolejność filtrów/sortowania; chips vs sidebar.
Szybkie działania na karcie (ikony/tekst, jeden vs dwa CTA).
Poręcze: INP/CLS, skargi na układ „skoki”, wzrost zero-Result.

11) Przykłady dla iGaming

Gry Lobby (B2C): Siatka - okładka + Play/Demo, Nowe/Jackpot Labels, Filtry chipowe (Dostawca/Kategoria/Mechanika).
Katalog dostawców: siatka logo z liczbą gier; klikając - strona dostawcy (wewnątrz - również siatka gier).
Sprawozdania/Finanse (B2B): lista/tabela - NGR/GGR/FTD/CR kolumny, ustalanie tytułu, eksport.
Historia transakcji: lista - gęste serie, statusy, wyszukiwanie według kwoty/ID/data; Rozwiń ciąg dla części.
Promocje/turnieje: Baner siatki z dat i CTA, sortowane przez „Going Now/Coming Soon”.

12) Elastyczne przełączniki i personalizacja

Podaj użytkownikowi przycisk radiowy „Lista” i zapamiętaj wybór (na użytkownika/najemcę).
Oferta ustawień wydajności: „Ciasny”, „Zwykle”, „Duży”.
Logika kontekstowa: po raz pierwszy - siatka w holu; z wyszukiwania - lista do dokładnego porównania.

13) Antypattery

Siatka bez stałej proporcji → „tańczące” karty i wysoki CLS.
Lista z zbyt wieloma kolumnami jest poziomym zwojem bez potrzeby.
Powielanie przycisków akcji zarówno w karcie, jak i w zawisie z różnym zachowaniem.
Mieszanie rodzajów/filtrów przy każdym obciążeniu (łamie ostrość).
Ukryte aktywne filtry - użytkownicy „tracą” wyniki.

14) Lista kontrolna wdrażania (krok po kroku)

1. Zdefiniuj, czy ekran jest wybierany przez porównanie wizualne czy atrybutowe.
2. Zdefiniuj model: lista/siatka/hybryda; uzgodnić IA i źródła danych.
3. Zaprojektuj wiersz lub kartę o stałych wymiarach strefy klucza.
4. Sortowanie/filtry: widzialne żetony, stabilna kontrola sortowania.
5. Załadunek/pusty/błąd: szkielety, przyjazne teksty i ponowne próbowanie.
6. Wydajność: leniwa/wirtualizacja, „widoczność treści”, cele p95.
7. A11y: semantyka, klawiatura, kontrast, rozmiary docelowe kranu.
8. Telemetria: TTFA, qCTR, Zero-Result, Latency p95.

9. Domyślny widok A/B, wymiary, szybkie działania

10. Wybierz pamięć: Zachowaj tryb widoku i ostatnie filtry.

15) Najważniejsze

Listy i sieci są narzędziami do różnych zadań.

Kiedy atrybuty i porównanie są ważne, weź listę.
Kiedy wizualny decyduje i szybkie działania - weź siatkę.
Zdefiniuj cel, przechwytuj wymiary i zachowanie, utrzymaj interfejs szybki i dostępny - a użytkownicy osiągną rezultaty w mniejszym stopniu, bez zbędnego szumu poznawczego.