Listas y cuadrículas: comparación UX

1) Cuándo lista, cuándo cuadrícula (regla 5 preguntas)

1. Objetivo del usuario: ¿comparar rápidamente los parámetros (lista) o seleccionar por visual/cubierta (cuadrícula)?

2. Formulario de datos: campos estructurales (tabulares/de texto) → lista; objetos visuales (portadas, fotos) → cuadrícula.

3. Densidad vs revisión: ¿necesita un máximo de elementos por pantalla (lista) o un escaparate uniforme (cuadrícula)?

4. Acción predeterminada: ¿abrir/detalles (lista) o'Jugar/Comprar "instantáneo desde la tarjeta (cuadrícula)?

5. Contexto del dispositivo: retrato móvil - normalmente una cuadrícula de 2 filas para tarjetas; informes/tablas en el escritorio - lista/tabla.

Breve: comparar - lista; Elegir con los ojos - cuadrícula.

2) Modelo de contenido y IA

Lista (row-first): la señal principal es texto/campos. Adecuado para: registros, historias de operaciones, informes, resultados de búsqueda por atributos.
Cuadrícula (tarjeta-primera): la señal principal es la portada/vista previa. Adecuado para: juegos/productos, medios de comunicación, colecciones.
Híbrido: «tarjetas de línea adaptativas» (en mobile - tarjeta, en escritorio - cadena con columnas) con la misma fuente de datos.

3) Diseño de elementos: cadena vs tarjeta

Fila (list row)

Estructura: icono/miniatura (opcional), título, 1-3 campos clave, meta (fecha/estado), acciones contextuales (⋮).
Puntos fuertes: legibilidad, alta densidad, buen juego de columnas clasificables.
Consejos UX: fijar la altura; Alinee la cuadrícula; ocultar los campos menores en la «revelación».

Tarjeta (tarjeta grid)

Estructura: portada, título, firma/etiquetas (nuevo/premio mayor), un CTA principal + acción adicional en «»....
Puntos fuertes: elección visual, acción rápida, contexto emocional.
Consejos UX: guardar aspect-ratio (p. ej. 4: 3/1: 1), las mismas alturas de título, recortar texto con tooltip.

4) Navegación, clasificación y filtros

General: filtros y clasificaciones - cerca y estable (sin saltos). Condiciones activas - chips sobre los resultados.
Lista: apoye muchas columnas + «congelación» de títulos; ordenaciones por clic en el sombrero.
Cuadrícula: ordenar por lista desplegable; filtros - chips/panel. Para la búsqueda «visual» - vista previa en hover/long-press.

5) Escritorio móvil vs

• Malla: 2-en-fila (teléfono), 3-en-fila (tableta). CTA grandes en la zona del pulgar.
• Lista: líneas compactas (56-72dp), meta-campos contraídos.

• Malla: 4-6-en-fila al ≥1200px, auto-relleno con 'min' de ancho de tarjeta.
• Lista: tabla/filas, columna de recursos, búsqueda rápida por tabla.

6) Estados y descarga

Esqueletos: líneas-esqueletos (mínimo 3-5), tarjetas-esqueletos con tapones debajo de la portada y el texto.
Vacío: explicar por qué está vacío, y sugerir preajustes/quitar filtros.
Errores: guardar la selección del usuario y la posición; dar retry.
Dosificación: «Mostrar más» (híbrido) es preferible a la cinta infinita en los catálogos; para los registros - usted puede auto-descarte con «Pausa».

7) Rendimiento

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

Lista: virtualización de filas, alturas fijas, cálculos diferidos.
Cuadrícula: imágenes lazy (AVIF/WebP), 'srcset/sizes', dimensiones predecibles, 'lotes' de 20-60 tarjetas.
General: 'content-visibility: auto', caché de previsualización, prioridades de descarga para elementos de hero.

8) Disponibilidad

Lista: tablas con la semántica correcta ('table/thead/tbody', 'aria-sort'), enfoque por filas/celdas.
Cuadrícula: 'role =' grid 'o lista con' role = 'list'; orden en DOM = visual; firmas para imágenes.
Teclado: flechas/Amb; Enter - Abrir; Espacio - «en favoritos» (si procede).
Dimensiones del clic: ≥ 44px; contraste AA; firmas explícitas en los iconos.

9) Métricas y telemetría

• `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), resultados qCTR, Scroll Depth, Tasa de resultados cero,
• Compare Rate (para listas), Quick-Action Rate (para cuadrículas), Latency p95.

10) Experimentos A/B (qué probar)

Vista predeterminada (lista/cuadrícula) para nuevos/devueltos.
Número de elementos por pantalla, altura de fila, tamaño de la tarjeta.
Orden de filtros/ordenaciones; chips vs panel lateral.
Acciones rápidas en la tarjeta (iconos/texto, uno vs dos CTA).
Guardrails: INP/CLS, quejas por «saltar» el astillero, crecimiento de Cero-Resultado.

11) Ejemplos para iGaming

Lobby de juegos (B2C): cuadrícula - cubierta + «Jugar/Demo», etiquetas «Nuevo/Jackpot», filtros de chips (Proveedor/Categoría/Mecánica).
Catálogo de proveedores: cuadrícula de logotipos con el número de juegos; por clic - la página del proveedor (dentro - también la cuadrícula de juegos).
Informes/finanzas (B2B): lista/tabla - columnas NGR/GGR/FTD/CR, fijación de títulos, exportación.
Historial de transacciones: lista - serie densa, estados, búsqueda por suma/ID/fecha; abriendo una línea para los detalles.
Promociones/torneos: cuadrícula de pancartas con fechas y CTA, clasificación por «Van ahora/Pronto».

12) Interruptores flexibles y personalización

Dé al usuario el botón de opción Lista ↔ cuadrícula y recuerde la selección (per user/tenant).
Ofrezca los presets de representación: «Apretado», «Normalmente», «Grande».
Lógica contextual: por primera vez - una cuadrícula en el lobby; de la búsqueda - una lista para una comparación precisa.

13) Antipatternas

Malla sin relación de aspecto fija → tarjetas de «playa» y CLS alto.
Una lista con demasiadas columnas es un skroll horizontal sin necesidad.
Duplicación de botones de acción tanto en la tarjeta como en el truco con comportamientos diferentes.
Agitar las clasificaciones/filtros en cada carga (rompe el enfoque).
Filtros activos ocultos: los usuarios «pierden» los resultados.

14) Lista de verificación de implementación (paso a paso)

1. Definir el objetivo de la pantalla: seleccionar por visual o comparar atributos.
2. Especifique el modelo: lista/cuadrícula/híbrido; concordar con IA y las fuentes de datos.
3. Diseñar un elemento: una fila o una tarjeta con dimensiones fijas de zonas clave.
4. Ordenaciones/filtros: chips visibles, control de clasificación estable.
5. Descarga/vacío/error: esqueletos, textos claros y retry.
6. Actuación: lazy/virtualización, 'content-visibility', objetivos p95.
7. A11y: semántica, teclado, contraste, dimensiones de tap targets.
8. Telemetría: TTFA, qCTR, Resultado Cero, Latency p95.
9. A/B: vista predeterminada, cotas, acciones rápidas.
10. Memoria de selección: guarde el modo de representación y los últimos filtros.

15) Resultado

Listas y cuadrículas: herramientas para diferentes tareas.

Cuando los atributos y la comparación son importantes - tome una lista.
Cuando decida acciones visuales y rápidas, tome la cuadrícula.
Identifique el objetivo, fije las dimensiones y el comportamiento, mantenga la interfaz rápida y accesible, y los usuarios lograrán el resultado en menos pasos, sin demasiado ruido cognitivo.