Listen und Raster: UX-Vergleich

1) Wann Liste, wann Raster (5-Fragen-Regel)

1. Benutzerziel: Parameter schnell vergleichen (Liste) oder nach Bild/Cover auswählen (Raster)?

2. Datenform: Strukturfelder (Tabelle/Text) → Liste; visuelle Objekte (Abdeckungen, Fotos) → ein Gitter.

3. Dichte vs Übersicht: Sie benötigen ein Maximum an Elementen pro Bildschirm (Liste) oder eine einheitliche Vitrine (Raster)?

4. Standardaktion: Öffnen/Details (Liste) oder sofortiges „Spielen/Kaufen“ von der Karte (Raster)?

5. Gerätekontext: mobiles Porträt - in der Regel ein 2-Reihen-Raster für Karten; Berichte/Tabellen auf dem Desktop - Liste/Tabelle.

Kurz: vergleichen - Liste; Mit den Augen wählen - das Netz.

2) Content-Modell und IA

Liste (row-first): Das Hauptsignal ist Text/Felder. Geeignet für: Protokolle, Aktivitätsverläufe, Berichte, Attributsuchergebnisse.
Gitter (card-first): Das Hauptsignal ist die Abdeckung/Vorschau. Geeignet für: Spiele/Waren, Medien, Sammlungen.
Hybrid: „adaptive Zeilenkarten“ (auf dem Mobilgerät eine Karte, auf dem Desktop eine Zeile mit Spalten) bei gleicher Datenquelle.

3) Design der Elemente: Linie vs Karte

Zeichenfolge (list row)

Struktur: Icon/Miniatur (optional), Titel, 1-3 Schlüsselfelder, Meta (Datum/Status), kontextbezogene Aktionen (⋮).
Stärken: Lesbarkeit, hohe Dichte, gut sortierbarer Satz von Spalten.
UX-Tipps: Höhe fixieren; am Raster ausrichten; Verstecken Sie sekundäre Felder in der „Offenlegung“.

Karte (Rasterkarte)

Struktur: Cover, Titel, Signatur/Labels (neu/Jackpot), ein Haupt-CTA + zusätzliche Aktion in „“....
Stärken: Wahl durch Visuelles, schnelles Handeln, emotionaler Kontext.
UX-Tipps: Halten Sie die Aspect-Ratio (z.B. 4: 3/1: 1), identische Header-Höhen, Text mit Tooltip zuschneiden.

4) Navigation, Sortierung und Filter

Allgemein: Filter und Sortierung - nebeneinander und stabil (keine Sprünge). Aktive Bedingungen - Chips über den Ergebnissen.
Liste: Unterstützen Sie viele Spalten + „Einfrieren“ von Überschriften; Sortierung per Klick auf den Hut.
Raster: Sortierung durch Dropdown-Liste; Filter - Chips/Panel. Für die „visuelle“ Suche - Vorschau auf hover/long-press.

5) Mobile vs Desktop

• Raster: 2-in-Reihe (Telefon), 3-in-Reihe (Tablet). Große CTAs in der Daumenzone.
• Liste: kompakte Strings (56-72dp), faltbare Metafelder.

• Mesh: 4-6-in-Reihe beim ≥1200px, Auto-Fill mit 'min' Breite der Karte.
• Liste: Tabelle/Zeilen, Spalten-Neufassung, schnelle Tabellensuche.

6) Zustände und Download

Skelette: Skelettlinien (mindestens 3-5), Skelettkarten mit Stopfen für Cover und Text.
Leer: Erklären Sie, warum leer ist, und bieten Sie Voreinstellungen/Filter entfernen.
Fehler: Speichern Sie die Benutzerauswahl und Position; Retry geben.
Dosieren: „Mehr anzeigen“ (Hybrid) ist dem Endlosband in Katalogen vorzuziehen; für Protokolle - Sie können Auto-Scan mit „Pause“.

7) Produktivität

Ziele: INP ≤ 200 ms, CLS ≤ 0,1, Scroll-Jank <1%.

Liste: Zeilenvirtualisierung, feste Höhen, verzögerte Berechnungen.
Raster: lazy-images (AVIF/WebP), 'srcset/sizes', vorhersehbare Größen, „Chargen“ von 20-60 Karten.
Allgemein: 'content-visibility: auto', Vorschau-Cache, Download-Prioritäten für Hero-Elemente.

8) Verfügbarkeit

Liste: Tabellen mit korrekter Semantik ('table/thead/tbody', 'aria-sort'), Fokus auf Zeilen/Zellen.
Raster: 'role =' grid 'oder Liste mit' role = 'list'; Reihenfolge in DOM = visuell; Bildunterschriften.
Tastatur: Pfeile/Tab; Enter - öffnen; Raum - „zu den Favoriten“ (falls zutreffend).
Klickgröße: ≥ 44px Kontrast AA; explizite Signaturen auf den Icons.

9) Metriken und Telemetrie

• `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 der Ergebnisse, Scroll Depth, Zero-Result Rate,
• Vergleichsrate (für Listen), Quick-Action Rate (für Gitter), Latenz p95.

10) A/B-Experimente (was zu testen ist)

Standardansicht (Liste/Raster) für Neue/Rückkehrer.
Anzahl der Elemente pro Bildschirm, Zeilenhöhe, Kartengröße.
Filter-/Sortierreihenfolge; Chips vs Sidebar.
Schnelle Aktionen auf der Karte (Icons/Text, ein vs zwei CTAs).
Guardrails: INP/CLS, Beschwerden über „Springen“ des Layouts, Zero-Result-Wachstum.

11) Beispiele für iGaming

Spiele-Lobby (B2C): Raster - Cover + „Play/Demo“, Labels „New/Jackpot“, Chip-Filter (Anbieter/Kategorie/Mechanik).
Anbieterverzeichnis: Logo-Raster mit der Anzahl der Spiele; per Klick - die Seite des Anbieters (innen ist auch ein Spielraster).
Berichte/Finanzen (B2B): Liste/Tabelle - Spalten NGR/GGR/FTD/CR, Titelfixierung, Export.
Transaktionshistorie: Liste - enge Reihe, Status, Suche nach Betrag/ID/Datum; Zeilenöffnung für Teile.
Aktionen/Turniere: Bannerraster mit Terminen und CTAs, sortiert nach „Goes Now/Coming Soon“.

12) Flexible Schalter und Personalisierung

Geben Sie dem Benutzer den Schalter „Liste ↔ Raster“ und merken Sie sich die Auswahl (per user/tenant).
Bieten Sie Darstellungsvoreinstellungen an: „Eng“, „Gewöhnlich“, „Groß“.
Kontextlogik: erstmals ein Raster in der Lobby; aus der Suche - eine Liste für einen genauen Vergleich.

13) Antipatterns

Mesh ohne festes Seitenverhältnis → „tanzende“ Karten und hohe CLS.
Eine Liste mit zu vielen Spalten ist ein horizontales Scrolling ohne Not.
Duplizieren von Aktionsschaltflächen sowohl in der Karte als auch im Hover mit unterschiedlichem Verhalten.
Mischen Sie die Sortierungen/Filter bei jedem Upload (bricht den Fokus).
Versteckte aktive Filter - Benutzer „verlieren“ Ergebnisse.

14) Checkliste Umsetzung (Schritt für Schritt)

1. Bestimmen Sie das Ziel des Bildschirms: Auswahl durch Visualisierung oder Vergleich von Attributen.
2. Legen Sie das Modell fest: Liste/Gitter/Hybrid; IA und Datenquellen vereinbaren.
3. Entwerfen Sie ein Element: eine Linie oder Karte mit festen Abmessungen der Schlüsselzonen.
4. Sortierung/Filter: sichtbare Chips, stabile Sortierkontrolle.
5. Download/leer/Fehler: Skeletons, verständliche Texte und Retry.
6. Performance: lazy/virtualization, 'content-visibility', p95-goals.
7. A11y: Semantik, Tastatur, Kontrast, Größe der Tap-Targets.
8. Telemetrie: TTFA, qCTR, Zero-Result, Latency p95.
9. A/B: Standardansicht, Abmessungen, schnelle Aktionen.
10. Auswahlspeicher: Speichern Sie den Darstellungsmodus und die letzten Filter.

15) Das Ergebnis

Listen und Raster sind Werkzeuge für verschiedene Aufgaben.

Wenn Attribute und Vergleiche wichtig sind, nehmen Sie eine Liste.
Wenn die visuelle und schnelle Aktion entscheidet - nehmen Sie das Netz.
Definieren Sie das Ziel, erfassen Sie die Dimensionen und das Verhalten, halten Sie die Schnittstelle schnell und zugänglich - und die Benutzer erzielen das Ergebnis in weniger Schritten, ohne zu viel kognitives Rauschen.