El modo oscuro ya existía antes de que Apple lo lanzara con su sistema operativo iOS 13. Android ya lo había incorporado de forma nativa y numerosas aplicaciones tanto web, como de sistemas operativos para dispositivos móviles, ya utilizaban lo que se conoce como polaridad de contraste negativo.
Es cierto que, Apple, ha conseguido popularizar aún más este modo e incluso convertirlo en una tendencia de diseño.
Qué es el Modo Oscuro
El modo oscuro muestra superficies oscuras en la mayor parte de una interfaz de usuario (UI). En la mayoría de los casos se diseña para ser un modo complementario al modo claro o light.
El modo oscuro, fundamentalmente, se ha desarrollado para reducir la luminancia emitida por las pantallas de los dispositivos. Algo importante a tener en cuenta es que a pesar de usar superficies oscuras no debemos olvidar las relaciones mínimas de contraste de color en los textos, enlaces y otros componentes del sistema.
No se trata de usar blanco y negro. Se trata de elegir los colores adecuados que proporcionen un buen contraste sobre los fondos oscuros. Si un enlace se puede seguir manteniendo de color azul, mejor mantenerlo que cambiarlo a blanco y que no se diferencie de cualquier otro texto que no sea un enlace. Siempre y cuando el azul tenga el contraste necesario sobre el fondo oscuro para que sea legible.
Hay que asegurarse de que el contenido permanezca legible en el modo oscuro que estemos diseñando y que proporcione un contraste óptimo teniendo en cuenta las transparencias. Por ejemplo, en iOS o Android, cuando el sistema arroja opciones por defecto de forma nativa (como cuando tocas un botón de llamar o un enlace que es un número de teléfono y saca un Pop Up) coloca una capa oscura (Overlay) intermedia.
Existen dos tipos de contraste:
- Contraste positivo: que hace referencia al texto de fuente oscura sobre fondo claro. Usado para el modo claro.
- Contraste negativo: que hace referencia al texto de fuente claro (por ejemplo, blanco) sobre fondo oscuro (por ejemplo, negro). Usado para el modo oscuro.
Aspectos claves del Modo Oscuro en cuanto a Usabilidad y Experiencia de Usuario
Algunos aspectos claves sobre el modo oscuro teniendo en cuenta su finalidad:
- Ayuda a conservar energía en las baterías de los dispositivos. Sobretodo en aquellos dispositivos móviles con pantallas con tecnología AMOLED. Esto es debido a que para conseguir los tonos oscuros en este tipo de pantallas se apagan los píxeles, no se realiza con la mezcla de RGB.
- Ayudan a mejorar la ergonomía visual al reducir o minimizar la fatiga visual al ajustar el brillo según las condiciones de iluminación del ambiente.
- Facilita el uso de las pantallas en ambientes o entornos oscuros.
Algunos estudios avalan y respaldan el Modo Claro
Existen investigaciones publicadas que parece que respaldan que es más beneficioso para la mayoría de los usuarios que los caracteres sean oscuros sobre un fondo blanco. Especialmente para todos aquellos usuarios que tienen una capacidad de visión “normal” sin ningún tipo de afectación que les merme sus capacidades.
Las investigaciones publicadas parecen avalar esto. Un estudio de 2017 en la revista Applied Ergonomics determinó que “los caracteres oscuros sobre un fondo blanco conducen a una mejor legibilidad y se recomiendan encarecidamente independientemente de la edad del observador”.
En este otro artículo, Human Factors: The Journal of the Human Factors and Ergonomics Society se descubrió en 2013 que «la luminancia típicamente más alta de las pantallas de polaridad positiva conduce a una mejor percepción de los detalles”.
Recomendaciones para la implementación del Modo Oscuro
Nielsen Norman Group en un artículo escrito por Raluca Budiu hace las siguientes recomendaciones en cuanto a la implementación del modo oscuro:
- Hay que permitir a los usuarios cambiar al modo oscuro o claro según lo deseen, puesto que algunas personas con afectaciones visuales mejoran su capacidad de lectura con el modo oscuro y algunos usuarios simplemente prefieren el modo oscuro.
- Las aplicaciones destinadas a la lectura, tipo blogs, publicaciones periódicas, etc, deben de ofrecer un modo oscuro.
Otras recomendaciones sobre el Modo Oscuro
A parte, me gustaría añadir otras recomendaciones como las siguientes:
- Es necesario comprender la identidad del producto. Antes de comenzar a diseñar el modo oscuro es necesario realizar un estudio sobre la marca y su identidad para que se exprese correctamente tanto en temas claros como oscuros.
- Hay que priorizar las cualidades funcionales, favoreciendo la facilidad de uso sobre los elementos de diseño que no tienen un propósito funcional.
- Elegir bien los colores en ambos modos. Siempre teniendo en cuenta la legibilidad, el contraste y la armonía entre ellos. No es recomendable elegir tonos muy saturados para evitar la fatiga visual.
- Ajusta los colores de fondo según la superficie. Por ejemplo en Material Design de Google, el fondo del Body o Artboard, es #121212. No es un negro puro. De existir un contenedor elevado o encima de ese fondo, debería de ser un negro menos puro.
- Los textos no deben de ir un color blanco puro. Es decir, #fff. Es mejor utilizar #fff pero con diferente grados de opacidad siempre teniendo en cuenta el contraste y la legibilidad.
- Ajustar los colores del resto de los componentes. Hay componentes que deben de ser destacados por funcionalidad. Si un enlace debe de cambiar de color, es mejor cambiarlo a dejarlo blanco y que pase desapercibido.
Créditos
La imagen de cabecera es de Unsplash
Contrast (Minimum): Understanding SC 1.4.3
Dark theme
Dark Mode