Paletas de colores para dashboards: lo que los tableros de inspiración omiten

Esta es la distinción que los tableros de inspiración simplifican, y casi cualquier problema de dashboard se remonta a ella. Tres sistemas de color comparten una pantalla, cada uno con una función diferente y un modo de fallo distinto.

Una paleta de marca que luce genial en una landing page suele aportar uno de estos elementos, un acento, y ninguno de los otros dos. Por eso la primera pantalla del dashboard se ve bien y la quinta parece la unión de tres productos distintos.

Los neutros sostienen la mayor parte de un dashboard, y una escala neutra insuficiente es el defecto estructural más común. Una tabla densa necesita separar, como mínimo: el fondo de la página, la tarjeta donde reside la tabla, la fila del encabezado, el estado hover de la fila, el borde entre filas, el texto primario, el texto secundario y el texto desactivado. Son ocho valores distinguibles, y "tres grises" no bastan para producirlos.

Dos cosas hacen que una escala neutra funcione. Primero, dele suficientes pasos: unos nueve, espaciados perceptualmente en lugar de mediante aritmética hexadecimal uniforme, que agrupa todo en el centro. Segundo, aplíqueles un matiz. Un neutro que lleva una pequeña cantidad del tono de su marca se percibe como parte del diseño; un gris sin matiz se percibe como el valor predeterminado del framework, porque lo es.

El éxito, la advertencia, el peligro y la info no son decoración. En el momento en que una serie de un gráfico, un resaltado de navegación o un banner de marketing utiliza su rojo, el rojo deja de significar "algo va mal" y los usuarios dejan de buscarlo. Esta es una puerta de un solo sentido: la atención que se dedica a la decoración no se puede recuperar para el significado.

• Manténgalos fuera del conjunto categórico. Si tiene cuatro series y una de ellas es verde, ese verde resultará ambiguo en una pantalla que también muestre el estado de salud.
• No permita que el color de acento sea un color de estado. Si su marca es verde y el verde también significa «éxito», o bien la marca o bien el significado deben cambiar. Normalmente la marca: desplace el tono o la luminosidad del acento lo suficiente para que los dos nunca estén adyacentes ni se lean como lo mismo.
• Nunca dependa únicamente del color. Un estado necesita también un icono, una etiqueta o una forma. Esto es un requisito de accesibilidad y es lo que permite que la interfaz sea legible en una captura de pantalla pegada en un ticket de soporte.
• Asigne una variante de superficie a cada estado. Un *badge* de peligro y el *fondo de un banner* de peligro son colores diferentes; si define solo uno, obtendrá un banner que o bien grita o bien desaparece.

Seis o siete, y la respuesta honesta es que a partir de seis empieza a ser difícil. La limitación no es estética: los tonos distinguibles con la misma luminosidad son un recurso limitado y, una vez que hay unos ocho en un mismo gráfico, diferenciar las series adyacentes se convierte en una adivinanza y la leyenda en una tarea de búsqueda.

En esto no puede ayudar un generador de paletas, porque el conjunto categórico debe juzgarse como grupo y frente a los neutros sobre los que se apoyará. A continuación se muestran dos paletas diseñadas para dashboards con sus roles de chart-1 a chart-5 visibles junto a las superficies, que es la única forma de comprobar si la serie cuatro sigue siendo distinguible de la serie dos en una tarjeta.

Ambos conjuntos se detienen en cinco, lo cual es deliberado y no una limitación del formato.

Qué hacer en su lugar, por orden de preferencia:

1. Etiquetado directo. Coloque el nombre de la serie al final de su línea. Esto elimina la leyenda, elimina la búsqueda y reduce la mayor parte de la presión sobre el color.
2. Agrupar el resto. Muestre las cinco primeras y un grupo de «otros». Casi ningún lector de dashboards compara la serie once con la serie doce.
3. Dividir el gráfico. Los múltiplos pequeños (una serie por panel, mismos ejes) superan a un gráfico con doce colores en casi cualquier tamaño.
4. Variar algo más que el tono. Patrón de línea discontinua, forma del marcador o textura de relleno, especialmente en impresiones o cuando una captura de pantalla pueda estar en escala de grises.

Aproximadamente uno de cada doce hombres tiene algún tipo de deficiencia en la visión del color, y la forma más común dificulta la separación entre el rojo y el verde, lo cual es desafortunado, ya que el rojo y el verde son precisamente los colores que los dashboards usan para lo malo y lo bueno.

Las reglas prácticas son breves. Varíe tanto la luminosidad como el tono entre cualquier par de colores que transmitan un significado, para que sigan siendo distinguibles en escala de grises. Nunca empareje rojo y verde como única diferencia entre dos estados. Y para los estados, añada siempre un segundo canal (un icono, un signo más o menos, una palabra), de modo que el color sea un refuerzo y no el mensaje. Una paleta que sobrevive a una captura de pantalla en escala de grises sobrevive a casi cualquier deficiencia.

Los dashboards se utilizan en modo oscuro más que la mayoría de las superficies de producto, y una paleta categórica ajustada para blanco no se transfiere directamente. Los tonos saturados medios que se leen con claridad sobre blanco tienden a vibrar contra un fondo casi negro, y las dos o tres series más oscuras simplemente desaparecen.

Defina los colores de las series por modo en lugar de convertirlos. Lo mismo ocurre con su escala de neutros: en modo oscuro, las superficies elevadas son *más claras* que el fondo, lo que invierte el instinto de que una tarjeta es un elemento más claro sobre una página tintada. Los detalles, incluidos los valores de luminosidad medidos de paletas reales, se encuentran en paletas de colores para modo oscuro que funcionan.

Cada vez más, el dashboard se genera en lugar de diseñarse. Se le pide a un agente una pantalla de analíticas y este la produce. Lo que el brief no especifique, el modelo lo suministra, y lo hace de forma distinta cada vez.

Analizamos 299 archivos DESIGN.md públicos, documentos escritos específicamente para que un agente de código los siga. El 86 % indica valores hex brutos sin ningún rol semántico asociado, lo que significa que el archivo no puede responder a «qué color tiene una celda de tabla deshabilitada» o «qué color significa peligro». El 69 % nunca menciona el modo oscuro. Por lo tanto, el agente decide, y decide de forma diferente en la siguiente pantalla.

La solución es la misma ya sea que una persona o un agente esté construyendo: nombre los roles, defínalos en ambos modos y anote qué colores están reservados. Una paleta expresada como roles es una instrucción; una paleta expresada como cinco códigos hex es una inspiración.

1. 1

   Haga una captura de pantalla de la tabla más densa y desatúrela

   Si las filas, los encabezados, los estados de hover y los deshabilitados dejan de ser distinguibles en escala de grises, su escala de neutros es demasiado plana y sus colores de estado están transmitiendo el significado por sí solos.

2. 2

   Muestre todos los estados en pantalla a la vez

   Éxito, advertencia, peligro e información juntos, como badge y como banner. Aquí es donde se nota inmediatamente la falta de una variante de superficie.

3. 3

   Grafique ocho series a propósito

   No porque deba lanzarlo así, sino para encontrar el punto donde su paleta falla. Sea cual sea ese número, diseñe el comportamiento de «y otros» para el valor inmediatamente inferior.

4. 4

   Activar el modo oscuro con un gráfico abierto

   Las dos series más oscuras son las que desaparecen, y lo hacen sin previo aviso.

5. 5

   Contabilice el color de acento

   En una pantalla de dashboard bien diseñada, el acento aparece una o dos veces. Si está en todas partes, deja de significar "esta es la acción".