Modo Oscuro: 5 hechos y tips para diseñarlo mejor
Parece que si tu diseño no tiene la opción para ponerlo en “Dark Mode” no estás a la moda.
No tengo muy claro cómo empezó, pero lo cierto es que cada vez más aplicaciones y sistemas operativos lo lanzan como si fuera la feature del siglo: algo súper único, irrepetible y… ¿bueno?
Pues depende: el modo oscuro se está convirtiendo en una herramienta de promoción pero… ¿es tan bueno como parece?
Y… ¿cómo se diseña bien?
Dark Mode: No es oro todo lo que reluce
A día de hoy, prácticamente todos los sistemas operativos (sean de ordenadores y móviles) tienen la funcionalidad de “dark mode”.
Y junto a ellos, una gran cantidad de aplicaciones, como Twitter, YouTube o Reddit.
Tradicionalmente en el diseño “offline” se viene diseñando utilizando fondos blancos o claros con los textos en grises casi negros, y eso es lo que llegó a los ordenadores cuando empezaron a tener UI.
Eso sí, cabe hacer hincapié en que inicialmente -y a falta de interfaz como tal- los ordenadores tenían una pantalla de fósforo verde.
Pero eran así por cuestiones técnicas, no por temas estéticos de (supuesto) ahorro de batería o facilidad de lectura.
Algunos hechos sobre el Modo Oscuro
No es 100% bueno usarlo con poca luz
Yep. Es uno de los grandes razonamientos que utilizando los que defienden (o venden) el Modo Oscuro.
Dicen que evita que la luz de la pantalla nos deslumbre, sobretodo en ambientes más oscuros, como cuando consultamos el móvil en la cama (que no deberíamos hacerlo, pero esto es otro tema).
Lo cierto es que el problema está en la luz azul que nuestro cerebro interpreta como la luz de la madrugada y hace que el cuerpo genere menos melatonina, que nos ayuda a regular los ciclos de sueño. Los móviles nuevos ya vienen con filtros que se activan a partir de cierta hora, la posibilidad de cambiar el ajuste de RGB, gestión del brillo automático…
El Modo Oscuro es, en realidad, una solución de la solución que es más fácil de vender porque, no nos engañemos, estéticamente “mola”.
Fotofobia vs astigmatismo
Si sufres fotofobia (intolerancia anormal a la luz que genera migrañas), el Modo Oscuro es perfecto para ti.
En cambio, si lo que sufres es astigmatismo (cerca del 50% de la población mundial tiene algún problema relacionado) el modo oscuro puede generarte fatiga visual, porque te obliga a entornar más los ojos para poder leer correctamente el texto claro sobre fondo oscuro.
Para aquell@s usuari@s que no sufrimos ningún tipo de defecto en la visión, el Modo Oscuro es en realidad bastante indiferente.
Resaltan el contenido
Lo que sí es evidente es que el Modo Oscuro permite resaltar más los contenidos, sobretodo cuando se trata de fotografías o vídeos.
También nos induce a concentrarnos un poco más en el contenido que estamos viendo (que no leyendo), de aquí que aplicaciones como Netflix, Spotify, HBO… tengan por defecto el UI oscuro.
Instagram es otra aplicación que puede beneficiarse del Modo Oscuro. Por defecto, su interfaz es clara, pero puedes activar el Modo así.
Ahorro en baterías… pero solo en pantallas OLED
Se dice que el Modo Oscuro permite ahorrar batería. Y es cierto, aunque solo lo consigue en pantallas OLED, ya que “apagan” esos pixeles oscuros y por lo tanto dejan de consumir batería.
De momento, el 61% de los móviles tienen pantalla OLED. El porcentaje no es pequeño, está claro, pero teniendo en cuenta que los portátiles, pantallas de sobremesa no lo son (de momento)… ¿vale la pena invertir en un Modo Oscuro?
Mejora la comprensión. O no.
Cuando leemos un texto sobre fondo blanco el iris no necesita abrirse para para absorber más luz, es su estado normal.
Si leemos texto blanco sobre fondo negro obligamos al iris a abrirse para poder recibir más luz y diferenciar correctamente las letras blancas. Al igual que pasa cuando imprimimos texto blanco sobre fondo oscuro, los bordes se vuelven más difusos, dificultando la lectura y incrementando el esfuerzo necesario para leer.
Recuerda que el iris es un músculo: cuanto más lo fuerces para leer sobre fondos oscuros, más rápido se fatigará.
3 tips para diseñar en Dark Mode
Sin pretender hacer aquí un tutorial de diseño de una aplicación entera (ya llegará en futuras entregas), estas son algunas guías que deberías seguir para que tus diseños sean todavía mejores:
- No uses negro puro (#000000). Por todo lo comentado en párrafos anteriores, es recomendable reducir un poco el contraste y usar “grises casi negros”, como #121212.
- Utiliza el blanco para los contenidos “principales” y tonos de gris para aquello que es más secundario. Es lo mismo que harías con un fondo blanco: “casi” negro para el texto y colores un poco más claros para detalles como categorías, meta tags, etc.
- Al igual que en el diseño en “blanco” (¿luz? el tradicional, vamos) ten en cuenta la accesibilidad de los botones, iconos y textos. En fondos oscuros es más difícil calibrar los colores y no caer en utilizar una paleta demasiado “neón” (que lo único que hará es hacer dificultar la legibilidad).
Conclusiones
Con este artículo pretendía arrojar un poco de luz (nótese la ironía) sobre el Modo Oscuro y que te plantees si de verdad es necesario para el diseño que estás produciendo.
Está claro que en algunos casos es solo una decisión estética y que hacer un Modo Oscuro da publicidad, pero por favor no te olvides del usuario que deberá interactuar en última instancia con lo que diseñas.
El Modo Oscuro le dará igual si le cansa la vista o tiene dificultades para comprender qué elemento es clicable o no.
Quizás lo más importante que puedes preguntarte es: ¿por qué quieres el Modo Oscuro en este proyecto?