Modo oscuro para productos con muchos datos: contraste, legibilidad y jerarquía

La mayoría de los productos que diseño para traders, analistas y equipos cripto se lanzan en modo oscuro. No porque quede bien, aunque queda bien, sino porque la gente los usa durante horas, a menudo junto a gráficos y otras herramientas oscuras, y las cifras tienen que destacar.

Cuando diseñé el dashboard de ArbX, un SaaS de analítica de apuestas deportivas, el encargo era fácil de explicar y difícil de cumplir: que los datos complejos se entendieran de un vistazo. El modo oscuro reduce la fatiga visual en sesiones largas, y un contraste bien trabajado hace que las ganancias, las pérdidas y los beneficios destaquen, porque en ese producto cada segundo cuenta. Estos son los principios que he aplicado en ArbX, Lunar, Astra y otras interfaces con muchos datos.

El modo oscuro no es mejor por definición. Encaja mucho mejor en unos productos que en otros.

Funciona bien cuando:

• La gente tiene el producto abierto durante sesiones largas, como en trading, monitorización o analítica.
• La pantalla está llena de gráficos y colores de estado que tienen que resaltar.
• Los usuarios trabajan a menudo con poca luz o junto a otras herramientas oscuras.
• El público lo espera, como en cripto, trading y herramientas para desarrolladores.

Funciona peor en la lectura larga, la edición de documentos y todo lo que se imprime. Si tus usuarios son muy distintos, ofrece los dos temas y respeta el ajuste del sistema.

El texto blanco puro sobre negro puro puede resultar duro, y algunos lectores ven un halo alrededor de las letras. Yo suelo partir de un gris muy oscuro o de un color oscuro con matiz. Astra usa un azul marino profundo; Lunar, una base casi negra con tarjetas separadas por bordes sutiles.

En una interfaz oscura, las sombras apenas se ven, así que la profundidad sale de la luminosidad. Defino una escala corta de superficies:

• Fondo: la capa más oscura.
• Tarjetas y paneles: un paso más claros.
• Elementos elevados: menús, popovers y estados hover, otro paso más claros.
• Bordes y separadores: de bajo contraste, para separar, no para decorar.

Cuanto más cerca del usuario está algo, más claro es. Mantén los pasos pequeños y coherentes, y el layout se verá ordenado sin una sola sombra.

• Cumple WCAG AA: una relación de contraste de al menos 4,5:1 para el texto normal y de 3:1 para el texto grande y los componentes de interfaz, como iconos y bordes de campos.
• Usa niveles de énfasis. Blanco roto para el texto principal, un gris más tenue para etiquetas y texto secundario, y otro más bajo para los estados desactivados. La guía del tema oscuro de Material Design usa aproximadamente un 87%, un 60% y un 38% de opacidad del blanco para estos tres niveles.
• Desatura los colores. Los colores vivos y saturados vibran sobre fondos oscuros. Unos tonos algo más suaves de tus colores de marca se ven más nítidos y cansan menos la vista.
• Revisa también el texto de color. Las cifras en rojo y verde tienen que superar las pruebas de contraste, no solo el texto blanco.

En un producto de datos, el color es información. En ArbX, el contraste es lo que permite leer ganancias, pérdidas y beneficios en una fracción de segundo. En Lunar, el verde y el rojo indican beneficio y pérdida en cada tarjeta, en el indicador de rendimiento y en la tabla de posiciones, mientras que un único acento naranja marca la página activa.

• Reserva el verde y el rojo para subidas y bajadas. Si también aparecen en ilustraciones o botones, dejan de significar nada.
• No dependas solo del color. Aproximadamente uno de cada doce hombres tiene algún tipo de daltonismo, así que acompaña el color con signos de más y menos, flechas o etiquetas. Lunar muestra un signo y una flecha junto a cada variación.
• Usa un único acento para la interacción. Un solo color para enlaces, estados seleccionados y botones principales deja claro qué se puede pulsar.

• Usa cifras tabulares, para que todos los dígitos tengan el mismo ancho y las columnas queden alineadas.
• Alinea los números a la derecha en las tablas y el texto a la izquierda. Comparar valores se vuelve mucho más rápido.
• Cifra clave grande, etiqueta pequeña. En la pantalla de cartera de Astra, el valor total es lo más grande de la página, con la variación de 24 horas en color justo debajo.
• Baja un poco el peso. El texto claro sobre fondo oscuro parece más grueso que el oscuro sobre claro, así que a menudo uso un peso regular donde el modo claro llevaría medium.
• Da aire a las filas. Una altura de fila generosa y un hover sutil ayudan a seguir una línea en una tabla ancha.

Un buen dashboard responde a la pregunta principal de un vistazo y deja profundizar a quien quiera. ArbX se apoya en gráficos claros y en una agrupación lógica para ganar velocidad. Su simulador sigue la misma idea: eliges la competición, el tipo de apuesta y el jugador, y obtienes los resultados de la simulación en segundos, con cada paso en su propio carril para que nada abrume.

La estructura que más uso:

1. Tarjetas de resumen arriba: tres o cuatro cifras clave, como el progreso de PnL, el desglose de PnL y el rendimiento en Lunar.
2. El gráfico o la tabla principal debajo, con valores por defecto sensatos para el orden y el rango de tiempo.
3. Filtros y ajustes en un panel, fuera de la vista hasta que se necesiten.
4. Detalle bajo demanda: estados hover, filas desplegables y páginas de detalle.

Los mismos principios sirven para webs. En Timepiece FNF, una web oscura y elegante deja brillar a los relojes, igual que los fondos oscuros hacen resplandecer el metal y el cristal. Hablo de esa parte en principios de diseño web de lujo.

• Prueba en pantallas OLED y LCD, con el brillo bajo y alto.
• Mantén las líneas de cuadrícula de los gráficos lo bastante tenues para que los datos queden delante.
• Revisa logos, avatares e imágenes con fondo transparente.
• Haz que los estados de foco se vean con claridad para quien usa el teclado.
• Si ofreces los dos temas, sigue por defecto el ajuste del sistema.

Para el resto del producto, mi checklist de rediseño de SaaS cubre la auditoría, los estados y el sistema de diseño.