Diseño de dark mode en interfaces UX

Hoy en día, estamos más acostumbrados a navegar en páginas web que tienen motivos y fondos claros, porque es la norma en Internet desde hace décadas. 

Sin embargo, hemos de recordar que las principales interfaces eran con pantallas negras (algo más similar al dark mode), con texto plano en distintos tonos. Los avances de las interfaces gráficas desde los 70 por la empresa Xerox, y continuadas y mejoradas por empresas como Apple, nos han llevado a asimilar a las páginas con interfaces y fondos blancos como la premisa inicial dentro del mundo de las interfaces de usuario. 

Pero estas interfaces suponen una serie de problemas que han comenzado a mellar en los diseñadores y en su forma de construir los flujos gráficos, como la visualización alargada en interfaces blancas, que puede producir fatiga visual y molestia gradual en los usuarios. 

Imaginemos un trabajador en administración que pasa 8 horas enfrente de la pantalla; la vista se deslumbra y afecta en el cansancio de la vista, además del riesgo al usuario de padecer problemas de vista a largo plazo. Además, las páginas en blanco implican una menor distinción de sus contenidos, por lo que puede generar a veces confusión o pérdida en la navegación al usuario, siendo un problema cuando se requieren de tareas urgentes o críticas.

Ventajas del dark mode

Es por eso, que cada vez hay más páginas web que cuentan con alternativas de combinación de colores claros a oscuros en sus interfaces: el dark mode o modo oscuro es una alternativa a la norma de crear interfaces que implique una predominancia de los blancos, incorporando un nuevo esquema de colores oscuros y negros. 

No solo se considera como objetivo la reducción de esa fatiga visual, el modo oscuro supone una serie de ventajas y objetivos que hace que más usuarios lo quieran dentro de las interfaces que visitan día a día:

• Focaliza de una forma más efectiva el contenido, dejando que la UI permanezca de fondo y ayudando al usuario a encontrar rápidamente los contenidos que necesita. Agiliza la toma de decisiones de los usuarios.
• Transmite una apariencia más profesional, seria y sofisticada. Muchas herramientas profesionales de diseño e inversión incorporan este modo oscuro de forma automática, heredando así el tono profesional y elegante. 
• Mejora la ergonomía visual, reduciendo la tensión ocular y aumentando la productividad. 
• Al tratarse de tonos oscuros generales, conserva mejor la energía de los dispositivos, por lo que implica ventajas en el Carbon Footprint de los usuarios. Aquellos dispositivos que cuenten con la funcionalidad, además implica facilidades a la hora de ajustar las pantallas según las condiciones de luz ambientales, por lo que favorece la experiencia de usuario en horario nocturno. 
• Y, además, es una tendencia de uso por los usuarios en incremento, por lo que la incorporación de modos oscuros pueden beneficiar el uso de algunos productos digitales y webs. 

Consideraciones para adoptar el dark mode

Tomando estas situaciones como referencia, es obvio que el modo oscuro supone unas ventajas significativas a la inclusividad, al usuario, y en la performance profesional de un negocio. 

Sin embargo, el método de hacer interfaces en dark mode no se basan únicamente en cambiar los tonos blancos por negros. Existen unas consideraciones cruciales a la hora modificar una interfaz base clara y transformarla en un modo oscuro:

• La paleta de color que vas a aplicar en tu modo oscuro debe de considerar combinaciones de color con contrastes funcionales, siguiendo las medidas de WCAG en accesibilidad del color. Idealmente, es recomendable que los contrastes por matiz sean de AA, para aquellos elementos importantes en una interfaz oscura, siendo estos:
  • Fondo de pantalla
  • Fondo de capa
  • Color secundario de fondo de capa
  • Color de acción
  • Texto principal
  • Subtexto
• Si bien se puede ver como una contradicción, el tono del negro puro conocido como #FFFFFF no es recomendable para el uso. El negro puro es un color que no existe en la naturaleza, por lo que nuestro ojo no está preparado para ese tono en fondos y cognitivamente no lo procesamos correctamente, puesto que genera contraste y hace que elementos de otros colores puedan “bailar”, como las tipografías. El color base de tu paleta en modo oscuro puede ser cercano al negro puro, pero nunca debe de ser este. Una escala en base a grises oscuros es ideal para realizar esta función. Evita colores saturados, puesto a que pueden provocar vibración visual, especialmente en interfaces móviles. 
• Inicialmente, la paleta de colores deseada debe de mantener los colores ya marcados por las guías corporativas. Hemos de ser previsores de que nuestras interfaces siguen siendo corporativas, por lo que aquellos colores que sean identificativos de la marca y fácilmente identificados por el usuario han de mantenerse. Además, el sistema de colores debe de estar definido por la función como en el modo claro, puesto a que esto ayuda a que esté preparado a posibles cambios y modificaciones en el futuro.
• En los modos oscuros, la simplicidad es la llave al éxito. Crear jerarquías de color oscuro con un límite de colores de acento, con menos tonos de un mismo color o colores distintos benefician el feedback y carga cognitiva del usuario, además de que facilita a los equipos de diseño a gestionar esta nueva paleta de forma efectiva y ágil, acelerando los procesos de diseño. 5 tonos diferentes de color y 4 colores distintos sería ideal. 
• Para terminar, la profundidad debe de ser entendible: aquellos elementos más cerca han de ser más claros, siendo el que más elementos blancos como el texto. Por ende, los tonos más oscuros serán los que ocupen espacios más alejados en la profundidad, siempre sin el uso de sombras (ya que no se perciben correctamente en fondos oscuros). Aquello que esté más cerca del usuario debe de ser lo que tenga más luminosidad. Es por esto que para elementos como el texto se puede jugar con la opacidad de sus blancos. Textos de mayor énfasis pueden emplear una opacidad del blanco del 90%, con énfasis medio, 60-70%, y con textos en un estado deshabilitado, un 40%.  

En definitiva, el modo oscuro, además de ser una elección estética en tendencia, también es una estrategia integral para mejorar la accesibilidad y la experiencia de las personas usuarias. 

Foto de portada de Walling en Unsplash.