Listas y tablas

Las listas son componentes visuales que vemos en prácticamente cualquier interfaz que necesita mostrar datos: artículos, vídeos, enlaces, resultados de búsqueda, canciones, productos, emails, etc. Todos ellos son mostrados en secuencia en una lista para su comprensión en conjunto.

Las personas tenemos facilidad para ojear rápidamente un listado largo de elementos y localizar el/los elemento/s que estamos buscando o que nos resultan llamativos y responde a nuestras expectativas y necesidades.

Patrones de interacción

Las listas nos permiten:

• Tener una vista general de un conjunto de elementos.
• Navegar elemento a elemento.
• Buscar un elemento específico.
• Ordenar y filtrar un conjunto de elementos.
• Organizar, añadir, borrar o categorizar elementos.

Las listas son apropiadas para una estructura de información lineal, pero no para la información tabular, jerárquica o en red que se sirve de otro tipo de componentes.

Existen ciertas acciones y atributos propios de las listas que debemos considerar para su diseño:

• Longitud: número de elementos en total y disponibles en el campo visual.
• Orden: lógica de la secuencia de elementos.
• Categorización/Agrupamiento: comprensión de la semántica del conjunto.
• Tipos de elementos: clases que comparten características comunes.
• Interacciones: acciones disponibles sobre el elemento.
• Comportamiento: forma de reaccionar ante una interacción.
• Paginación (controlada e infinita): agrupación de la secuencia para facilitar la navegación.
• Scroll: tipo de recorrido disponible sobre los elementos.

Las listas pueden tener una disposición vertical, horizontal o en rejilla y pueden entenderse como bloques visuales completos compuestos de varios elementos (texto, imágenes, iconos, etc.) donde cada uno de ellos es independiente del resto.

Patrón Maestro/Detalle

Uno de los patrones más frecuentes en los listados es aquel que permite la selección del elemento para ver sus detalles: Maestro/Detalle. Este detalle puede visualizarse de diferentes formas:

• En un panel lateral cuando tenemos suficiente espacio horizontal y el número de detalles del elemento es elevado. Esta disposición favorece el acceso rápido a otros elementos de la lista.
• En línea cuando hay pocos detalles adicionales y aún puede mantenerse una visual del conjunto de elementos vertical.
• Navegando a otra parte cuando no existe espacio horizontal y el número de detalles es elevado.

Cuando las listas no son suficientes usaremos las tablas y otras formas de visualización de datos complejos.

Tablas

Las tablas son un componente mucho más versátil que las listas y en ocasiones pueden llegar a sustituirlas. De hecho, las listas podrían entenderse como la versión mínima de una tabla sobre todo cuando la tabla no dispone de mucho espacio horizontal para mostrar los datos repartidos en columnas (típicamente en interfaces móviles).

¿Cuándo usaremos una tabla?

• Cuando tengamos un conjunto de datos complejos, es decir, donde cada elemento de información tenga múltiples detalles ya sean numéricos, textuales o iconográficos, a los que deba acceder simultáneamente.
• Cuando los datos de cada elemento deban ser fácilmente comparables, la vista tabular facilitará por su disposición el rápido escaneo visual de un mismo atributo común a varios elementos.
• Cuando necesitemos mostrar con precisión todos los valores asociados a un elemento.
• Cuando no nos importe esconder algunos elementos con scroll horizontal.
• Cuando sea necesario editar individualmente un dato asociado a un elemento.
• Cuando queramos agrupar elementos por diferentes valores relacionados con sus atributos.

Una tabla está compuesta por una cabecera y un cuerpo de tabla (consistente de filas y columnas). A cada elemento de la tabla donde se muestra un valor lo llamamos celda.

Alineación de datos

Dependiendo del tipo de dato que estemos mostrando en nuestra tabla, recurriremos a un tipo de alineación u otra. 

• Para textos optaremos normalmente por la alineación a bandera izquierda en idiomas LTR y a bandera derecha en idiomas RTL.
• Para números optaremos por la alineación a bandera derecha y con la misma precisión numérica, de esta manera podrán compararse mejor las cifras y, si es posible, elegiremos una letra monoespaciada para que las cifras tengan el mismo ancho sin importar el número que vemos. Si los valores esperados son muy elevados, podemos incluso elegir una fuente condensada.
• Otros elementos como fechas, teléfonos, tarjetas de crédito, etc. se pueden alinear tanto a izquierda, como centro o derecha. 
• Siempre debemos alinear la cabecera de la tabla al contenido, es decir, si el contenido está de izquierda a derecha, la cabecera deberá estarlo también.

Un buen diseño del contenido visualizado como listas o tablas puede ayudarnos a dar orden y facilitar la legibilidad del contenido. Más allá de mostrar elementos sencillos (listas de palabras), estos componentes nos facilitan mostrar múltiples atributos asociados a un mismo elemento como un grupo visual independiente dentro de un conjunto mayor.

Existen muchos patrones asociados al manejo de listas y tablas:

• Filtrado,
• agrupación,
• ordenación,
• búsqueda,
• etc.

En futuros artículos y revisiones, incluiremos ejemplos de estos patrones.