Tarjetas, listas y tablas no son “estilos” intercambiables: son patrones de representación con costos cognitivos distintos. Elegir bien mejora el escaneo, reduce errores y hace la interfaz más accesible (para lectores de pantalla, teclado y usuarios con baja visión).
1) Empieza por la tarea, no por el layout
Antes de decidir, responde:
- ¿Qué acción domina? Explorar, comparar, elegir o auditar.
- ¿Cuántos atributos importan? 1–2 (vista rápida) vs. 5+ (comparación).
- ¿La precisión es crítica? Si “equivocarse” cuesta, prioriza estructuras comparables (tablas/listas densas).
- ¿La información cambia rápido? Si hay filtros/orden frecuente, la estructura debe soportarlo.
2) Cuándo usar tarjetas (cards)
Las tarjetas funcionan cuando el usuario explora y decide con señales visuales. Son ideales para contenido heterogéneo o cuando cada ítem tiene “identidad”.
Úsalas si…
- La tarjeta es un “resumen” con imagen/estado/badges.
- La comparabilidad exacta entre ítems no es prioritaria.
- El usuario navega por categorías o descubre opciones.
Evítalas si…
- Necesitas comparar 4+ columnas de datos con precisión.
- Hay 50+ ítems y el objetivo es “auditar” rápido.
Accesibilidad: asegúrate de que toda la tarjeta sea un objetivo claro (o que el CTA sea evidente), con orden de tabulación predecible y estados de foco visibles.
3) Cuándo usar listas
Las listas son el patrón más versátil: equilibran escaneo y densidad. Funcionan bien cuando el usuario quiere leer títulos, estados y una o dos métricas y luego actuar.
- Listas “de navegación”: ítems con título + metadatos + flecha/CTA.
- Listas “operativas”: selección múltiple, estados, acciones rápidas (editar, archivar).
- Listas “densas”: cuando buscas velocidad de lectura sin el overhead visual de las tarjetas.
Tip: si los usuarios ordenan por un atributo (fecha, relevancia, prioridad), una lista con ordenamiento suele ser más eficiente que una grilla de cards.
4) Cuándo usar tablas
Las tablas son para comparación y auditoría: cuando las diferencias entre filas importan y el usuario necesita alinear valores.
| Criterio | Tarjetas | Listas | Tablas |
|---|---|---|---|
| Exploración visual | Alta | Media | Baja |
| Comparación precisa | Baja | Media | Alta |
| Densidad de información | Baja–media | Media–alta | Alta |
| Accesibilidad (lectura lineal) | Buena si hay jerarquía clara | Muy buena | Buena si encabezados/alcances están bien |
Buenas prácticas: usa encabezados (<th scope="col">) y, si hay secciones, scope="row". Evita columnas “misteriosas” sin etiqueta; eso rompe el contexto para lectores de pantalla.
5) Señales de que tu patrón está equivocado
- El usuario abre 3–5 ítems para “entender” lo que pudo ver de un vistazo.
- La gente ordena/filtra y aun así no encuentra; falta estructura comparable.
- Se confunden los CTAs (¿ver? ¿editar? ¿comprar?) porque el contenedor domina sobre la acción.
- En móvil, el layout obliga a hacer scroll excesivo para comparar (tablas sin estrategia, cards con mucho ruido).
6) Patrones híbridos que suelen funcionar
No es “o esto o lo otro”. En productos reales, lo común es combinar:
- Lista + panel de detalles: escaneo rápido a la izquierda, precisión a la derecha.
- Tarjetas para explorar + tabla para comparar: primero descubres, luego decides.
- Tabla con filas “expandibles”: densidad sin perder contexto (conserva encabezados).