Jun 10, 2019
No le temas a la oscuridad del Dark Mode
Sobre la tendencia de los dark themes en el diseño de interfaces y básicos para adoptarla como diseñadores. (Parte 1)
Estar frente a una pantalla por las noches o con malas condiciones de luz es una de las actividades que más cansan nuestra vista y que, sin embargo, cada vez son más comunes.
Después de todo nuestras mamás no estaban del todo equivocadas cuando nos regañaban por pasar demasiado tiempo frente a la televisión argumentando que “se nos podían calentar los ojos”.
Los programadores saben esto y desde hace décadas han encontrado una forma de combatir la vista cansada: evitar las pantallas con fondos blancos.
Alrededor del 70% de los programadores escribe código usando dark themes en sus computadoras, probablemente para soportar hasta altas horas de la noche y no sufrir cansancio en los ojos.
Es irónico que los mismos que crean el software que utilizamos trabajen con dark themes, pero para los usuarios comunes era una opción casi inexistente o poco utilizada, que cada vez más apps y sistemas operativos están abriendo para todos los usuarios.
Hace unos días Apple anunció la introducción del Dark Mode en iOS 13 y un mes atrás lo hizo Google para Android Q.
Sin duda, la disponbilidad de interfaces en dark mode va en aumento. ¿Qué lo está motivando y cuáles son los básicos para implementarlo en un proyecto de diseño?
De eso hablaremos en este post.
El ambiente nocturno: no culpes a la noche por trabajar tan tarde
Con la llegada de los smartphones hemos intensificado el uso de pantallas por las noches, ya sea para trabajar o para entretenernos.
Hasta hace poco ver una pantalla en dark mode era difícil para un usuario común.
Todo cambió cuando las pantallas de nuestros dispositivos cambiaron la forma de reproducir el color usando pantallas OLED, una tecnología que permite que los colores se reproduzcan sin necesidad de una luz de fondo, como es el caso de las pantallas LCD.
Ante todos estos cambios, las grandes compañías iniciaron una carrera por lanzar un switch para cambiar del día a la noche.
Incluso Apple, en el evento para presentar esa funcionalidad, abrió con un video homenajeando a todos aquellos que pasan sus noches trabajando y que inspiraron el auge de esta tendencia.
Ventajas de vivir en la oscuridad
La batería: una pantalla oscura, es (casi) una pantalla apagada
Retomando el tema de las pantallas OLED, se ha descubierto que el consumo de batería con pantallas más oscuras es menor al que las pantallas más blancas producen. Google habla de hasta un 60% de ahorro de batería en dispositivos con pantallas OLED.
Un caso notable es el de Twitter, que ha tenido un dark mode desde 2016, pero no es hasta hace unos meses que agregó una variante de su tema nocturno con fondos completamente negros, ya que el anterior usaba un tono de azul oscuro.
A primera vista, un fondo más oscuro podría significar más ahorro de batería, pero en la realidad la diferencia de ahorro en batería entre una pantalla completamente negra contra una oscura es muy pequeña. El efecto en la decisión que tomó Twitter probablemente sea inexistente.
La accesibilidad: no solo se trata de invertir los colores
Por años los sistemas operativos han tenido “modos nocturnos forzados” escondidos en las configuraciones de accesibilidad como la opción de invertir colores.
Para muchas personas no tener esa opción podría producirles dolores de cabeza o generarles problemas al tratar de identificar elementos visuales.
El problema con este modo es que invierte todo, incluyendo imágenes y colores, creando una sensación de estar usando un producto roto.
En cambio, el dark mode es un modo invertido consistente y estéticamente más elegante. Es un buen ejemplo de que mejorando las cosas para las minorías puedes hacerlo también para el resto.
¿Cómo diseñar un dark theme?
Una vez que entendemos el contexto por el cual existen los dark modes, seguramente tendremos ganas de hacer uno para nuestros productos digitales.
El reto más grande a la hora de crear un dark theme es escoger los colores correctos, tanto en las superficies de fondo como en textos y elementos de acentuación.
Te dejo unas sugerencias básicas para empezar a implementarlo:
- Evita fondos completamente negros (#000000) con textos completamente blancos. Una buena combinación de grises se llevará bien con tu usuario. Incluso Apple usa diferentes gamas de grises en diferentes productos pero ninguno cae en el negro puro.
- Colores menos saturados se llevan bien con fondos oscuros. Una forma de hacerlo es agregando una capa de color blanco con transparencia al 40% a los colores de tu marca para desaturarlos.
- Ten especial cuidado con la legibilidad del texto. Un texto muy brillante (más cerca al #FFFFFF), es mucho más difícil de leer y tiende a cansar al usuario mucho más rápido. Como en los fondos, usa grises en lugar de blanco puro.
- Juega con la analogía del día y la noche. En el caso de las ilustraciones, además de desaturar los colores, puedes agregar elementos como estrellas o nuevas fuentes de luz (como una lámpara) para recrear elementos nocturnos.
- Por último, siempre dale al usuario la opción de desactivar el tema oscuro en tu aplicación, independientemente de la configuración de la plataforma para la que estás diseñando. Al introducirlo a la funcionalidad puedes incluso mostrarle que puede desactivarla.
Si bien, estos consejos son básicos, aún hay un vasto mundo de opciones que puedes aprovechar a la hora de crear un dark theme para tu producto digital.
En un siguiente artículo profundizaré más en la creación de un dark theme.
¿Sabías que Medium también cuenta con un dark mode? Actívalo, lee nuestro post y cuéntanos si te gusta.
