Cómo elegir entre tarjetas y listas en el diseño de interfaces

Elige tarjetas cuando una persona necesite reconocer y explorar elementos distintos. Elige una lista cuando necesite recorrer atributos regulares, localizar un elemento conocido o trabajar siguiendo una secuencia. Si debe comparar muchos valores entre registros, quizá una tabla sea la opción más honesta.

Ese es un punto de partida útil para elegir entre tarjetas y listas. No significa que los productos con muchas imágenes siempre necesiten tarjetas ni que las aplicaciones de negocio siempre necesiten filas. Una colección puede servir a varias tareas; la mejor composición depende de cuál deba facilitar la pantalla actual.

Piensa en una biblioteca de proyectos web. Un diseñador que busca una dirección visual puede reconocer el proyecto adecuado por su miniatura. Un responsable que busca una revisión atrasada necesita saber quién se encarga, su estado y la fecha límite. Consultan los mismos datos con preguntas diferentes. Cambiar el radio de las esquinas de una tarjeta no resolverá esa diferencia.

Identifica qué busca la persona

Empieza por una acción, no por un componente. «Explorar proyectos» deja demasiado sin especificar. «Encontrar un proyecto cuyo estilo encaje con un cliente hotelero» y «Encontrar la revisión que vence hoy» dan distintas prioridades informativas y una forma de evaluar la composición.

La primera tarea se beneficia de una vista previa reconocible. Un título grande puede no revelar si el proyecto utiliza fotografía, tipografía contenida o ilustraciones coloridas. La segunda necesita fechas y estados fiables en posiciones previsibles. Una miniatura decorativa puede gastar espacio sin ayudar a decidir.

Anota la primera pista que probablemente usará la persona: una imagen, un nombre, una categoría, un responsable o una fecha. Identifica después la segunda pista para confirmar la coincidencia. Ambas deberían aparecer sin abrir el elemento. Si hace falta abrir cada candidato solo para identificarlo, la vista de colección está haciendo demasiado poco.

Nielsen Norman Group distingue la capacidad de las tarjetas para agrupar contenido variado del recorrido previsible de una lista. También señala que las tarjetas ocupan más espacio y pueden hacer menos explícito el orden de importancia. Examina esos costes en lugar de declarar ganador universal a un patrón. Nielsen Norman Group sobre las tarjetas de interfaz.

Pinterest y un ejemplo de seguimiento ocular muestran costes distintos

La interfaz de Pinterest documentada en el artículo de NN/G agrupa imágenes, títulos e información complementaria en contenedores de distinta altura. Encaja con una colección donde la imagen sirve para reconocer y cada elemento contiene cantidades diferentes de material. La captura siguiente recoge aquella interfaz histórica.

El mismo artículo incluye una sesión de seguimiento ocular en la que un participante buscaba una noticia interesante en una composición de tarjetas. El trazado muestra movimientos repetidos entre candidatos. NN/G relaciona ese comportamiento con una disposición sin una secuencia ordenada evidente y con información comparable situada en posiciones incoherentes.

Los ejemplos muestran dos trabajos distintos. Si alguien elige una imagen que le encaja, explorar es parte de la tarea. Si un operador busca el último registro atrasado, localizar repetidamente la fecha de cada tarjeta es trabajo adicional. Llamar a ambas actividades «explorar» oculta la distinción que debería decidir la composición.

Prueba la información antes que el estilo. Tapa las miniaturas de la cuadrícula propuesta. Si la tarea principal se vuelve imposible, probablemente aportan datos necesarios. Si resulta más fácil porque fechas y estados destacan más, quizá las imágenes compiten con el trabajo.

Decide qué debe verse antes de abrir un elemento

Para comparar alternativas, utiliza los mismos registros, filtros y acciones. Pide a una persona que encuentre un elemento atrasado y a otra que reconozca una dirección visual, alternando qué vista aparece primero. Registra selecciones erróneas, visitas innecesarias a detalles y pérdida de posición al volver. Preferir la pantalla más bonita aporta información sobre apariencia, pero no responde a cuál facilita la tarea.

Lee el contenido antes de elegir el contenedor

Toma una muestra pequeña de registros reales, incluidos los incómodos. En la biblioteca podrían ser un título corto, uno largo, una miniatura ausente, un proyecto archivado y otro sin responsable. El contenido cuenta más sobre la composición adecuada que una pantalla llena de rectángulos idénticos de muestra.

Una colección de contenido muy variable puede beneficiarse de tarjetas porque cada elemento forma un resumen coherente. Si se repiten los mismos campos en todos, hay más razones para una lista. Ninguna observación decide por sí sola, pero señala qué debe admitir el diseño.

Presta atención a la falta de imágenes. Si la mayoría de registros carecen de una imagen útil, la cuadrícula suele convertirse en una galería de sustitutos repetidos. La composición promete reconocimiento visual y el contenido ofrece búsqueda textual. Considera una lista centrada en texto o miniaturas opcionales menores en vez de fabricar variedad decorativa.

A la inversa, reducir un portfolio visual a nombres de archivo puede quitar información necesaria. «Project 14» y «Project 15» pueden ser nombres exactos y malas pistas. Añadir una vista previa útil puede importar más que aumentar las filas que caben en pantalla.

Un ejemplo: una biblioteca, dos vistas iniciales

Imagina seis proyectos ficticios: Cedar Lodge, Harbor Rooms, Studio North, Maple Clinic, Archive House y Lumen Shop. Cada registro tiene miniatura, responsable, estado de revisión y fecha límite. Esos campos no cambian al cambiar la presentación.

Para explorar visualmente, destaca la miniatura y sitúa el nombre justo debajo. Añade una categoría breve y un estado discreto. El responsable puede seguir visible con menor énfasis si ayuda a saber a quién contactar. No llenes la tarjeta con todos los metadatos solo porque existan.

Para gestionar revisiones, empieza por una fila compacta. Coloca el nombre y quizá una pequeña miniatura al inicio; después, estado y fecha en posiciones constantes. Puede verse una acción específica, como abrir la revisión. Una descripción decorativa del estilo aporta menos en ese contexto.

Las dos vistas no tienen por qué mostrar exactamente los mismos campos. Sí deben describir de forma coherente los mismos objetos. Si un estado se llama «Listo para revisar» en una vista y «Pendiente» en la otra, quizá parezca que el cambio ha modificado el proyecto.

La vista inicial debe responder al propósito principal de la pantalla. Una página de descubrimiento puede empezar con tarjetas; una cola de revisiones, con filas. Ofrecer un selector no elimina la responsabilidad de escoger un valor por defecto sensato: muchas personas usarán la primera presentación que encuentren.

Haz que cada vista sirva a su tarea

Tarjetas: establece un orden interno claro

Una tarjeta necesita un recorrido de lectura. Decide qué identifica el elemento, qué lo explica y qué inicia una acción. Si miniatura, título, distintivo, autor, etiquetas y botón reclaman la misma atención, la tarjeta se convierte en un pequeño panel de control, no en un resumen útil.

En la versión exploratoria, miniatura y título establecen la identidad. La categoría ayuda a interpretar. Estado y responsable son datos de apoyo. Puedes expresar el orden con tamaño, peso, proximidad y contención sin dar un color diferente a cada campo.

Coloca los datos comparables en posiciones comparables. Aunque se explore, puede hacer falta revisar el mismo detalle en varios candidatos. Sitúa el estado en la misma zona y usa un formato de etiqueta coherente. Una descripción algo más corta suele ser mejor compromiso que dejar que los metadatos importantes cambien de lugar imprevisiblemente.

Haz que la imagen justifique el espacio. Una captura demasiado pequeña para mostrar la composición no es necesariamente más útil que ninguna. Recorta alrededor de un rasgo identificable, usa una relación de aspecto estable cuando proceda y evita recortes arbitrarios que hagan parecer la cuadrícula más cargada que los propios proyectos.

La ausencia de imagen debe ser un estado previsto. Usa un sustituto discreto que mantenga la identidad mediante nombre y categoría. No lo destaques tanto que los registros sin imagen sean lo más llamativo de la colección.

Las tarjetas también necesitan límites, pero quizá no un borde pesado y una sombra profunda en todas. El fin es asociar la información con su elemento. Deja que espacios y un tratamiento moderado de superficie hagan ese trabajo antes de decorar más. Revisa el conjunto: lo que funciona en una tarjeta puede volverse repetitivo en veinte.

Listas: conserva un recorrido fiable

La ventaja de una lista se pierde fácilmente si cada fila tiene otra estructura. Mantén estable el contenido identificador y define el orden de los campos de apoyo. La persona debería bajar por la colección sin reaprender cada fila.

En la cola de revisiones, pon primero el nombre. Sitúa estado y fecha donde puedan encontrarse repetidamente. Si ordenas por fecha límite, muéstrala. Ordenar por un campo oculto deja al lector buscando un patrón que no puede ver.

La densidad es una decisión de lectura e interacción, no una competición por meter más registros. Hace falta espacio para distinguir nombres y usar controles cómodamente. Si al comprimir se funden responsable y estado en una línea gris, los registros adicionales quizá no ayuden.

Usa la segunda línea con intención. Puede ofrecer una descripción o un dato que distinga, como el espacio de trabajo. Evita repetir el título con otras palabras. «Proyecto web para Cedar Lodge» bajo «Web de Cedar Lodge» añade longitud y poca identificación.

Las listas pueden incluir imágenes. Una miniatura pequeña y útil puede ayudar a reconocer sin perder la estructura previsible de filas. La pregunta es si debe dominar el elemento, no si una lista tiene permiso para contenerla.

Si la fila acumula campos alineados que se comparan activamente, considera si has diseñado una tabla. No es un fracaso. La tabla da encabezados explícitos a las relaciones y facilita la comparación. Llamarla lista no hace desaparecer sus relaciones de columnas.

Define el clic antes de hacer clicable toda la superficie

Una tarjeta puede abrir un elemento, desplegar un menú, incluir un favorito y mostrar un enlace de categoría. Cada acción complica la superficie. Hay que explicar qué ocurre al pulsar imagen, título, espacio vacío o control secundario.

Usa un destino principal claro. Si el título abre el proyecto y la miniatura un visor, la diferencia necesita un motivo y una indicación comprensible. Si no, dos elementos visualmente unidos actúan como enlaces sin relación. Lo mismo ocurre en filas cuyo nombre y fondo llevan a pantallas distintas.

El sistema de diseño del W3C documenta tarjetas con enlaces separados y tarjetas enlazadas en toda su superficie, y recuerda que el nivel del encabezado debe encajar en la página. Una tarjeta visual no impone un único modelo de interacción. Patrones de tarjetas del W3C.

En el ejemplo, un título enlazado y un menú separado son un comienzo comprensible. Si amplías la zona principal clicable, verifica que el menú siga siendo independiente y que pueda seleccionarse el texto cuando haga falta. No anides enlaces ni conviertas cada fragmento en una parada extra del teclado.

Seleccionar no es abrir. Quien escoge varios proyectos necesita un estado visible de selección y una salida clara. No hagas que el primer clic seleccione en una vista y abra en otra sin un cambio de modo explícito. Cambiar de vista debe alterar la presentación, no redefinir silenciosamente lo básico.

Anota el comportamiento de teclado junto al del puntero. ¿Adónde va el foco? ¿Qué abre el elemento? ¿Cómo se llega al menú? Una captura no responde; inclúyelo en la revisión en vez de asumir que una jerarquía visual clara garantiza controles claros.

Ofrece un selector solo si ambas vistas merecen existir

Alternar tarjetas y lista sirve cuando el mismo público cambia realmente entre reconocimiento y lectura rápida. Aporta poco si una es solo una versión peor de la otra. Mantener dos vistas también duplica los estados de contenido y detalles de interacción que requieren atención.

Si incluyes el selector, conserva filtros, orden y colección seleccionada. Quien limita la biblioteca a proyectos pendientes no debería volver a ver todos al elegir lista. Se cambia cómo se representan los resultados, no qué resultados cumplen los criterios.

Conserva la selección cuando tenga sentido y explica las limitaciones. Si las acciones por lotes solo existen en lista, dilo en vez de perder los elementos elegidos sin aviso. Mejor aún, considera mantener la acción coherente entre presentaciones.

Usa un control etiquetado con un estado activo visible. Los iconos de cuadrícula y filas ayudan, pero no explican todas las composiciones. «Tarjetas» o «Lista» aclara la elección, sobre todo cuando ambas se parecen en una pantalla estrecha.

Piensa en las visitas posteriores. Recordar la preferencia puede ayudar en el producto implementado, pero no debería imponerse cuando cambia la tarea. Una cola de revisión y una galería pública no necesitan necesariamente una preferencia global común. Define el ámbito en vez de dejar que la persistencia produzca comportamientos accidentales.

Conserva la tarea en una pantalla estrecha

Una cuadrícula suele convertirse en columna única en el teléfono. Eso no la convierte automáticamente en una lista útil. La tarjeta puede seguir dedicando casi toda la pantalla a la imagen y dejar muy abajo el campo necesario. Revisa la jerarquía tras el cambio.

Para explorar, una vista previa generosa puede seguir siendo adecuada. Para revisar, quizá sirva más un resumen compacto con fecha legible. No escondas el campo decisivo solo porque en escritorio estaba en la última columna derecha.

Deja que los campos secundarios salten o pasen a una segunda línea con orden definido. Un estado no debe volverse un punto de color inexplicado para ahorrar espacio. Si un campo requiere desplegar, decide si aún se completa la tarea sin abrir cada elemento.

Los nombres largos revelan mucho. Usa dos nombres realistas con el mismo inicio y distinta terminación. Si se recortan hasta ser idénticos, la composición estrecha ha perdido la capacidad de identificar. Ajusta saltos, anchura o campo identificador antes de reducir la letra.

Revisa las acciones aparte. Un menú cómodo en una fila ancha puede quedar apretado contra título o casilla. Una tarjeta con tres controles pequeños puede ser especialmente incómoda al estrecharse. Retira acciones opcionales de la superficie inmediata si simplifica, conservando una vía clara para acceder a ellas.

Compara lista y cuadrícula con tareas reales de búsqueda

No preguntes solo cuál prefieren. Da una tarea con respuesta observable. En la biblioteca, explorar podría ser encontrar un proyecto de estética hotelera contenida. Buscar algo conocido, localizar Archive House. La consulta administrativa, encontrar la revisión más próxima asignada a una persona.

Usa contenido equivalente en las dos vistas. Si una tiene mejores miniaturas, textos cortos o filtros útiles, comparas más que composición. Las mejoras pueden valer la pena, pero no prueban que tarjetas o listas sean inherentemente mejores.

Observa las dudas. Abrir elementos una y otra vez para conocer un estado ausente sugiere un problema de contenido. Perder la posición al volver sugiere navegación. Saltarse la segunda fila de una cuadrícula puede señalar la secuencia visual. Cada observación pide un cambio diferente.

Incluye una tarea que ponga a prueba tu diseño preferido. Si te inclinas por las tarjetas, prueba una búsqueda que exija revisar el mismo campo en varios registros. Si prefieres las listas, prueba el reconocimiento visual entre elementos con nombres parecidos. El objetivo es revelar el coste de la elección para decidir si resulta aceptable, no conseguir la aprobación de la primera maqueta.

Puedes construir y revisar alternativas HTML en OpenDesign, usar tamaños de ventana predefinidos y adjuntar comentarios a una tarjeta o fila. Conserva registros y requisitos en el contexto para que los cambios tengan una base estable. Prueba búsqueda, preferencias guardadas y selección persistente en el flujo implementado.