Tarjetas vs. listas, cómo afectan UX

Dos de las formas más comunes de organizar el contenido del sitio web en estos días es mediante el uso de tarjetas y listas. Cada uno tiene sus propios pros y contras. Mientras que las listas han existido desde los primeros días de la web, el diseño basado en tarjetas se ha convertido recientemente en una fuerza a tener en cuenta y una que es cada vez más una opción popular para la organización del contenido.

Las tarjetas y las listas son formas únicas de mostrar contenido, lo que significa que son mejores y peores, respectivamente, para situaciones específicas. La clave para los diseñadores web, por supuesto, es entender cuándo exactamente el uso de cada uno ofrece a los usuarios una mejor experiencia de usuario. Las respuestas pueden sorprenderlo y hacer que observe los principios de diseño de forma un poco diferente.

Aquí, exploramos cuándo es apropiado en el diseño web usar tarjetas versus listas y viceversa.

¿Qué es una carta? ¿Qué es una lista?

Para ayudarnos a entender cuándo usar una tarjeta o una lista es más apropiado para propósitos de UX, nos ayuda mucho entender primero lo que cada uno es y lo que cada uno hace (o se supone que debe hacer).

Una tarjeta es un contenedor que muestra varios bits de información relacionada, de la cual los usuarios pueden obtener incluso más información. Si bien sigue siendo un producto de diseño plano, se clasifica más correctamente como Flat Design 2.0 ya que normalmente tiene efectos tridimensionales livianos como sombras paralelas para indicar capacidad de clics. Los efectos 3D, como esa profundidad visual, funcionan como el significante para los usuarios, diciéndoles que pueden hacer clic para obtener más información.

Curiosamente, hay algo de dicotomía en una carta, ya que generalmente se asemeja a una carta de juego real, tanto en forma como en tamaño. Esto es indicativo del skeuomorphism desactualizado, donde los elementos gráficos se asemejan a elementos reales.

Una lista es una página donde los criterios de búsqueda del usuario o los hábitos de navegación los llevan. La página de listado contiene esencialmente varios artículos o entradas candidatas. Por lo tanto, una lista debe facilitar el escaneo eficiente y rápido de los ojos para un UX apropiado. Esta es una distinción importante que nos ayuda a diferenciar cuándo una lista es más apropiada que una carta, en términos de usabilidad.

Cuándo usar tarjetas

Ahora que conocemos las diferencias clave entre las tarjetas y las listas, es más fácil para nosotros saber con confianza que cada una de ellas es apropiada para el diseño web.

Para buscar información (en lugar de buscar)

Las tarjetas dificultan o incluso imposibilitan a los usuarios discernir fácilmente la importancia del contenido en la clasificación. Por ejemplo, las tarjetas no brindan información obvia sobre el orden en que se debe ver el contenido en una página, ya que todos los contornos / bordes de las tarjetas son similares. Ciertamente, la investigación básica del seguimiento ocular siempre sugiere que los usuarios comiencen primero con contenido en la parte superior e izquierda de una página, pero las listas hacen que sea más intuitivo para los usuarios seguir esta forma fundamental de absorción de contenido en línea.

Es por eso que usar tarjetas para explorar grandes colecciones, como las de Pinterest, por ejemplo, es ideal. Cuando solo está navegando por los resultados de búsqueda en Pinterest, en lugar de determinar en qué orden verlos, el desplazamiento infinito de los resultados basados en tarjetas hace que la navegación sea atractiva, divertida y fácil. Cada vez que vea algo interesante, puede hacer clic inmediatamente en la tarjeta para obtener más información. Es gratificación instantánea.

Para agrupaciones de diversos artículos

Dependiendo de la aplicación o el programa que esté utilizando, eventualmente encontrará uno con un tablero que utiliza un diseño basado en tarjetas para facilitar la diferenciación entre varios tipos de contenido. Este es un ejemplo de la solidez de las tarjetas para permitir que los usuarios identifiquen rápidamente los diferentes tipos de contenido que están administrando.

Como las tarjetas usan bordes para establecer límites visuales, son ideales cuando se trata de agrupar elementos dispares.

Cuándo usar listas

Las listas pueden ser un poco más sencillas que las tarjetas, tal vez porque llevan más tiempo en el diseño web. Como resultado, tiende a ser más fácil determinar cuándo usarlos bien.

Para una exploración ocular eficiente

Las listas son preferidas cuando los usuarios necesitan buscar rápidamente algo que desean en un sitio, como cuando están leyendo detenidamente la página de resultados de búsqueda después de ingresar sus términos de búsqueda. Las listas que son verticales y donde un elemento se encuentra en una fila encima de la siguiente ayuda para enfocar los ojos del usuario mucho mejor que las tarjetas, ya que las listas son fijas, mientras que las tarjetas no se sientan en filas en filas.

Para pantallas más pequeñas

En pocas palabras, las tarjetas ocupan mucho más espacio en la pantalla. Esto hace que su uso en dispositivos móviles y algunas tabletas sea problemático porque obliga a los usuarios a desplazarse hacia abajo en la página para ver más opciones antes que cuando se usan las listas. Dado que los elementos de una lista solo se ubican en filas cortas a lo largo de una página, los usuarios pueden ver más opciones sin tener que depender de la memoria a corto plazo (lo que deberían hacer los que miran un diseño basado en tarjetas cuando comienzan a desplazarse hacia abajo ver más elementos).

Tan pronto como su diseño exija que los usuarios recuerden las opciones más arriba en la pantalla, comenzarán a encontrarse carga cognitiva , lo que perjudica a UX. La carga cognitiva significa que su cerebro tiene que trabajar más duro para recordar algo mientras todavía está procesando información nueva y adicional. Esto, a su vez, lleva a la desaceleración de la velocidad de las tareas y, potencialmente, al abandono completo de una tarea de usuario.

En la aplicación App Store de mi teléfono inteligente, las categorías de aplicaciones están organizadas en una lista clara y vertical que muestra ocho elementos en una página, sin que me preocupe por tener que desplazarme hacia abajo para ver más y recordar las opciones anteriores. Si esto se hubiera hecho en un diseño con las tarjetas mucho más grandes, solo habría podido ver algunas opciones como máximo, lo que dificultó mi UX.