Claves del modo nocturno

Debido a su uso en dispositivos móviles, plataformas, sistemas operativos y computadoras mucho se ha hablado desde hace tiempo del modo nocturno, si bien sus implicaciones en la salud visual de los usuarios aun son objeto de debate, lo cierto es que ya es una funcionalidad que forma parte de nuestro día a día, pues plataformas como YouTube, Google Maps, Google Play, Twitter, Facebook, Github entre otras ya la han incorporado como una función de accesibilidad que permite al usuario usar sus dispositivos por un periodo largo de tiempo sin que se vea tan drásticamente afectada su visión.

El dark mode consiste en establecer un cambio temporal en la paleta de colores de una interfaz de usuario, procurando una combinación de colores en la que el fondo mezcla tonos oscuros en lugar de claros y textos grises en lugar de negros, este cambio suele ser expresamente elegido por el usuario y tiene como fin proporcionar una interfaz de usuario con menos contraste, más minimalista y que mitigue los efectos de la fatiga visual.

Sin embargo el modo nocturno es mucho más que simplemente un fondo negro con letras blancas, es preciso tomar en cuenta varios aspectos que permitirán que esta funcionalidad logre su cometido. A la hora de elegir el diseño de nuestro modo nocturno debemos principalmente tener claro cuál será su utilidad u propósito, además de determinar los siguientes aspectos:

1. Colores primario y secundario

Un color primario es el que se muestra con mayor frecuencia en las pantallas y componentes de la aplicación, razón por la cual generalmente está ligado al diseño de la marca y deberá ser utilizado en momentos clave, a fin de que el usuario asocie esos colores con acciones e información específica, por su parte un color secundario viene a acentuar partes seleccionadas de la interfaz de usuario.

Dentro de este marco se recomienda el uso de colores desaturados y variantes de colores primarios que permitan cumplir con las normas de accesibilidad en cuanto al contraste, faciliten la legibilidad del texto y eviten las vibraciones ópticas generadas por colores saturados sobre un fondo oscuro.

2. Superficies como fondos y componentes

En cuanto al diseño de superficies como fondos y componentes se debe elegir un color de base y otro para componentes elevados, el primero de estos suele tener colores más oscuros, lo que permite que la interfaz de fondo parezca retroceder y así los colores en los componentes elevados (que deberán ser mucho más claros), presentarán las interfaces en primer plano.

Dentro de este orden de ideas para los componentes elevados suelen usarse tonos gris oscuro pues pueden expresar una gama más amplia de color, elevación y profundidad, es mucho más fácil ver sombras en gris que en negro, la elevación y superposición cumple un papel muy importante a la hora de diseñar el modo nocturno.

3. Los estados de error

El color cumple una función comunicativa y jerárquica que permite instruir al usuario sobre el orden y significado en las interacciones de la interfaz, es por ello que no podemos olvidarnos de diseñar correctamente los estados de error en nuestro modo nocturno, debido a que como su nombre lo indica se utilizaran para indicar al usuario un estado de error y por tal su texto debe ser legible, contar con un buen contraste y destacar sobre el resto sin perturbar la visión del usuario.

4. Contenido como tipografía e iconografía.

Ahora bien en cuanto al contenido como tipografía e iconografía se suele recomendar el uso de colores on, que para el caso del modo nocturno suelen ser el blanco o negro, estos generan un efecto de estar por "encima" de superficies como un color primario, secundario, un color de superficie o un color de fondo.

En este sentido conforme a la Web Content Accessibility Guidelines (WCAG) del W3C para la presentación de textos e imágenes de texto debe guardarse un ratio de contraste de al menos 4.5:1, con lo que se garantiza un buen contraste entre el color de la fuente y el fondo, sin embargo existe una excepción a esta regla en el caso de texto grande (aquel con al menos 18 puntos de tamaño o 14 puntos si está en negrita) para el cual es suficiente un ratio de 3:1.

En este sentido cuando aparece texto claro sobre fondos oscuros Google Material Design recomienda hacer uso de diferentes niveles de opacidad según el caso lo amerite, cuando se trate de texto de alto énfasis debe tener una opacidad del 87%, en texto de énfasis medio se aplica al 60% y para texto deshabilitado usa una opacidad del 38%.

Una vez dicho lo anterior cabe agregar que la mejor manera de diseñar y desarrollar un modo nocturno exitoso, es probando cada uno de los aspectos mencionados con anterioridad y evaluando su interfaz de usuario con una visión orientada a facilitar su uso, lograr mantener una uniformidad en su diseño y proporcionar al usuario la mejor experiencia posible.