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.

iOS 13 con Dark Mode fue presentado como una de las grandes novedades del WWDC 2019.

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.

Fragmento del video Goodnight Developers de Apple

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.

Google Photos con modo nocturno en Android

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.
Aplicaciones nativas en iOS 13 con modo nocturno

¿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.
Sugerencias de Google al rediseñar ilustraciones para fondos oscuros
  • 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.
Google Keep introduciendo una bienvenida a la nueva funcionalidad con opción a deshabilitar.

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.