Producto de datos densos falla en jerarquía, no en volumen

Un producto denso no falla por cargar demasiados datos. Falla porque los muestra todos con el mismo peso. Si cada campo tiene el mismo tamaño, el mismo color y el mismo espacio, el ojo no sabe por dónde empezar, y la pantalla deja de informar.

La jerarquía es una decisión sobre importancia

Nielsen Norman Group define la jerarquía visual (en inglés) como la estructura que guía el ojo hacia los elementos más importantes de la página. Se construye con color y contraste, con escala y con agrupación.

En una pantalla densa, la decisión es qué tres números guían la próxima acción. El resto es apoyo. Una pantalla donde nada retrocede es una pantalla donde nada lidera.

El mismo artículo (en inglés) resume la idea en una línea. Si todo tiene contraste, nada se destaca.

Peso y espacio antes que color

Dos palancas cargan la jerarquía: el peso de la tipografía y el espacio.

El peso marca el número principal de la fila, y la fila principal del grupo. El espacio separa grupos, porque un elemento con más área libre alrededor se lee como una unidad. Es el principio de proximidad y región común (en inglés), del mismo artículo.

Nielsen Norman Group (en inglés) recomienda como máximo tres tamaños de tipo y como máximo tres variaciones de contraste en un diseño complejo. Una pantalla densa que respeta ese presupuesto gasta color en la excepción, no en la estructura.

El costo del color como única capa

La WCAG 2.2, criterio de éxito 1.4.1 en el nivel A (en inglés) exige que el color no sea el único medio visual para transmitir información.

Dos consecuencias valen para una tabla. La primera: una celda verde y una celda roja no dicen nada solas, porque el color necesita un segundo canal, que es el valor, la palabra, la flecha. Nielsen Norman Group (en inglés) registra que hasta el 4,5 por ciento de la población general tiene alguna forma de daltonismo.

La segunda: el color no ordena valores. El mismo artículo (en inglés) observa que las personas no perciben colores distintos como si estuvieran en una secuencia, así que el color codifica categoría y nunca magnitud. Un degradado entre celdas pide al lector que ordene lo que el ojo no ordena.

Los dos artículos del NN/g no coinciden en cuánto trabajo puede hacer el color. El texto de jerarquía visual (en inglés) usa color saturado para marcar lo importante. El texto de paneles y gráficos (en inglés) mantiene el color en un papel secundario, reforzando lo que otro canal ya dijo.

El color también gasta atención. Una paleta de seis tonos de alerta en una pantalla no deja espacio para la línea que importa.

La agrupación define el recorrido de lectura

Agrupa columnas relacionadas y separa los grupos con espacio, no con borde. El espacio pesa menos que una línea y funciona mejor en una pantalla pequeña.

Carbon Design System (en inglés) indica colocar la tabla de datos en el área principal de contenido, con espacio suficiente para mostrar el dato sin truncar. También advierte contra anidar una tabla dentro de otra, o dentro de un contenedor que fuerce el truncado. Una tabla apretada no es una tabla densa. Es una tabla rota.

Filtro y orden forman parte de la lectura

El filtro es la forma en que el lector hace una pregunta a la tabla. El orden es la forma en que el lector encuentra el extremo.

Los dos pertenecen al ciclo de lectura, así que los dos quedan visibles junto al dato, con el estado activo nombrado en palabras. Cuando el filtro se esconde detrás de un icono sin etiqueta, leer la tabla se vuelve configurarla.

Jakob Nielsen (en inglés) describe la división. Todo lo que el lector necesita con frecuencia queda en el primer nivel, y la vista principal no puede cargar demasiadas opciones, o deja de concentrar la atención. También observa que los diseños con más de dos niveles de revelación suelen tener usabilidad baja.

Cuando el filtro no devuelve nada

Un resultado vacío es un estado de la interfaz, no un error del lector.

Kate Kaplan (en inglés) nombra tres funciones del estado vacío: comunicar el estado del sistema, enseñar el sistema y ofrecer un camino directo a la tarea principal.

Tres casos piden tres mensajes. Todavía no existe el dato. El dato existe y el filtro lo excluyó. El filtro en sí es inválido.

Cada caso pide su propia salida: crear el primer registro, limpiar el filtro, corregir el término. Un panel en blanco con un cero hace pensar al lector que el producto se rompió, y él cree lo que ve.

Densidad de fila

La altura de fila es una decisión de lectura, no una preferencia de estilo.

Carbon (en inglés) mantiene la fila de encabezado y las filas de cuerpo con la misma altura, y advierte contra mezclar alturas. Recomienda la altura extra grande solo cuando la fila carga dos líneas de contenido.

Una fila más apretada encaja más contexto en una pantalla y separa menos las filas. Una línea fina o un fondo alternado devuelve la fila sin dar peso al texto. La guía de espaciado y grilla aplica la misma regla a la pantalla completa.

Alineación de números

Un número se lee dígito por dígito, así que se alinea a la derecha. El texto queda a la izquierda.

El GOV.UK Design System (en inglés) implementa esto con un formato de celda numérica, que alinea a la derecha las columnas numéricas.

Dos detalles cierran la alineación. Los decimales se alinean en el separador, y la unidad queda en el encabezado en vez de repetirse en cada celda.

Lectura en pantalla pequeña

El GOV.UK Design System (en inglés) ofrece una clase que reduce el tamaño del texto en pantalla pequeña cuando la tabla carga muchos datos, para que cada valor tenga más área libre alrededor. La misma página advierte contra usar la clase en una tabla con pocos datos.

Es mejor tener menos columnas que usar una fuente más chica. Quédate con las dos o tres columnas que responden a la pregunta principal y lleva el resto al detalle de la fila.

Jakob Nielsen (en inglés) considera que dejar el material secundario para después es una directriz central del diseño para móvil. La pantalla angosta es donde la decisión de jerarquía aparece.

Cuando la tabla densa es la respuesta correcta

La tabla gana cuando el lector necesita el valor exacto, cuando la comparación corre en dos ejes y cuando la excepción es el punto.

El gráfico gana cuando la pregunta es forma o magnitud. Nielsen Norman Group (en inglés) observa que la visualización debe usar longitud y posición en dos dimensiones para comunicar información cuantitativa rápido. Una barra responde qué valor es mayor más rápido que cuarenta filas.

El gráfico pierde el valor exacto. Leer una barra hasta el tercer dígito es adivinar. Así que la alternativa visual pierde en tres casos. El lector consulta un campo por fila, los valores están cerca y el orden importa, o el número se va a escribir en otro lugar.

La tabla densa también es la respuesta perezosa en dos casos. Primero, cuando la pregunta es un agregado único que una línea resolvería. Segundo, cuando nadie va a abrir una fila.

El caso más perezoso es la tabla usada para evitar decidir qué importa. Es la misma falla de la pantalla plana, en otra forma.