Una lista multi-columna permite a los usuarios escanear rápidamente a través de los datos ya sea vertical u horizontalmente.

Estructura

Típicamente, una lista multi-columna está compuesta de títulos de columna y filas con información en línea. Si es necesario, se pueden añadir checkboxes a la izquierda, permitiendo a los usuarios seleccionar ítems de la lista.

Las listas multi-columna son optimizadas para la comprensión lectora alternando el color de fondo.

Lista multi-columna con checkboxes

Layout responsive

Actualmente no se ha decidido un patrón específico UX para crear listas multi-columna responsive. Sin embargo, compartimos unas cuantas ideas en un post de debate para obtener tu feedback, pensamientos y consejos.

Ver ideas

Comportamiento

Lista de ordenación

Por defecto, la lista de ítems está ordenada alfabéticamente. Se pueden reorganizar refinando la búsqueda.

Resaltar una fila

Si una fila tiene datos que tienen que estar resaltados, la fila se puede recolocar en la parte superior de la lista con un fondo diferente (por ejemplo: elementos de la lista sin leer).

Seleccionar una fila

Cuando los usuarios seleccionan una fila, el color de fondo cambia a un gris más oscuro. Esto permite a los usuarios conocer qué fila está seleccionada.