Tabla de contenidos
El modo oscuro está cada vez más presente en el diseño web y de aplicaciones móviles. ¿Qué beneficios tiene el modo oscuro en diseño web? ¿Por qué puede ser bueno el empleo del dark mode en webs y apps? En este post, analizamos lo que necesitas saber sobre este modo de diseño.
¿Qué es el modo oscuro?
El modo oscuro en diseño web y de aplicaciones móviles define los textos en colores claros (blancos o grises) sobre un fondo negro u oscuro. Se trata de una pauta de diseño que puede presentarse al usuario por defecto, es decir, nada más abrir la web o la app. Asimismo, en muchos proyectos es una opción de diseño que el usuario puede elegir. La utilidad percibida por el usuario es una mejor visibilidad y legibilidad cuando hay poca luz ambiental.
En inglés, se utiliza el término dark mode. Otras expresiones para transmitir la misma idea son black mode, dark theme, light-on-dark y night mode.
¿Cómo funciona el modo oscuro en diseño web?
El modo oscuro reduce la cantidad de luz emitida por la pantalla, al tiempo que mantiene los mínimos ratios de contraste de color necesarios para leer bien.
Orígenes del modo oscuro
En los inicios de la informática personal, las pantallas usaban lo que ahora llamamos dark mode. Ahora bien, para dar más atractivo al concepto comercial del ordenador personal y extender su uso más allá de programadores y fans de la informática, las interfaces se adaptaron para parecer textos sobre papel. El texto negro sobre fondo blanco era más atractivo para el gran público.
La gente con cierta edad debe recordar el servicio de Teletexto de las televisiones de los años 80 y 90. Si querías mirar cómo había quedado tu equipo de fútbol o ver la previsión meteorológica, lo leías en la tele a través de textos en cyan o amarillo sobre fondo negro.
Modo oscuro: ¿una moda o una opción de diseño consolidada?
Algunos sostienen que el dark mode está de moda. Sin embargo, quizás sea más preciso decir que las marcas y los desarrolladores web son cada vez más entusiastas de sus posibilidades. En fin, que el dark mode ha llegado para quedarse.
Hoy podemos poner en modo oscuro los móviles iPhone y Android, aunque puede haber apps que exijan ponerlas en dark mode de forma específica. En cuanto a sistemas operativos de ordenador, Windows 7 ya incorporó el denominado night mode. En los últimos años, hay más webs y apps que incorporan este diseño por defecto.
Si esta opción/pauta de diseño se ha consolidado, ha sido gracias a tres grandes razones:
- Práctico. ¿Qué hay más útil que permitir una mejor visibilidad en condiciones de poca luz? Lo práctico es la quintaesencia de una buena experiencia de usuario.
- Sostenible. Un diseño basado en el modo oscuro es sostenible, al consumirse menos energía.
- Atractivo. El modo oscuro es atractivo per se. Asimismo, pede contribuir a una efectiva comunicación visual de los valores de una marca.
Beneficios del modo oscuro en el diseño web
El modo oscuro tiene un gran número de ventajas desde el punto de vista del diseño y de la diferenciación de los proyectos web. El propósito del diseño basado en el modo oscuro es ofrecer la mejor experiencia de usuario y potenciar la identidad visual de la marca.
¿Qué beneficios tiene para el diseño web y para la experiencia de usuario?
- Reducir la fatiga ocular
- Alargar la vida de la batería
- Ayudar a diferenciar la identidad visual
- Destacar contenidos de la web
Modo oscuro para reducir la fatiga ocular
El modo oscuro disminuye la fatiga ocular en condiciones de poca luz. Es decir, mejoramos la ergonomía visual, la visibilidad y la legibilidad a través del diseño web.
También ayuda a la accesibilidad web, ya que se adapta a las personas con sensibilidad a la luz.
Además, evita el efecto luz azul de las pantallas. Los expertos desaconsejan el uso de pantallas antes de dormir y, sobre todo, cuando la pantalla emite mucho brillo y se produce el fenómeno de la luz azul. El gran inconveniente de este tipo de luz es que el cerebro se confunde, porque la identifica con la luz solar. Por este motivo, se reduce la producción de melatonina, la hormona que le dice al organismo que hay que ir a dormir.
Con el diseño en modo oscuro, una web o aplicación se adapta a unas malas condiciones de luz. Así se facilita una buena experiencia de usuario de noche o en lugares oscuros
Más vida de la batería
Con este diseño, se alarga la duración de la batería. Si la pantalla es OLED o AMOLED, el modo oscuro facilita consumir menos energía. Como resultado de esta mayor eficiencia energética, la batería del móvil dura más. Por tanto, ¡el dark mode contribuye a que un sitio web o una app sean más sostenibles!
Identidad visual del ‘dark mode’
El modo oscuro es una poderosa herramienta de marketing y de identidad visual.
Un diseño basado en el modo oscuro tiene mucha fuerza. Además, tiene la capacidad de transmitir valores positivos para cualquier marca.
¿Qué atributos podemos asociar al dark mode? Pues serían unos ejemplos los siguientes: sofisticación, elegancia, solidez, misterio y lujo
Es evidente que muchas marcas no deberían utilizar el dark mode como un patrón de diseño por defecto. La principal objeción es que los valores de una marca no concuerden con los valores que expresa el modo oscuro.
En todo caso, como ya hemos dicho, el dark mode es también una configuración de visualización que añade valor a la experiencia de uso de todo tipo de proyectos digitales. Los usuarios aprecian cada vez más tener la opción de cambiar la web o la app a modo oscuro para ver todo mejor cuando falte luz.
Destacar contenidos de la web
El fondo oscuro del dark mode ayuda a dirigir la mirada del usuario a los contenidos específicos en color. En términos de diseño web, el modo oscuro tiene una enorme capacidad de poner el foco sobre determinados aspectos o contenidos del sitio web o aplicación.
Son buenos ejemplos las plataformas de streaming Spotify (canciones) y Netflix (contenidos audiovisuales), y la plataforma de distribución online de videojuegos Steam. En estos tres referentes del ocio digital, este modo está por defecto. El propósito es que el usuario distinga enseguida, con facilidad, las diferentes opciones disponibles para su consumo inmediato. Es decir, se estimula el consumo y la compra por impulso. Spotify quiere que te fijes en las atractivas covers, un elemento gráfico que ha ayudado a comercializar música desde los tiempos del vinilo. Y Netflix desea resaltar y poner en valor la amplia variedad de su catálogo de películas, series, realities y documentales.
El propósito del modo oscuro por defecto en plataformas de ocio digital es que las imágenes en miniatura brillen y capten enseguida la atención del usuario. El propósito final es llamar a la acción. Es decir, que escuches una canción, que compres un juego o que reproduzcas una película
Desventajas del modo oscuro
Como cualquier elección de diseño, el modo oscuro tiene algunos inconvenientes.
- Efecto visual de menos espacio. El dark mode deja en fuera de juego una de las mejores buenas prácticas del diseño gráfico. En concreto, se trata de jugar con los blancos, para conseguir diseños diáfanos. Cuando hay mucha claridad, el diseño se ve espacioso y el contenido se ve y se lee con nitidez.
- Menos conexión emocional. Los colores expresan emociones. De esta manera, los colores claros trasladan emociones positivas. Pues bien, con el modo oscuro la paleta de colores se reduce y los colores claros pierden protagonismo. Como resultado, no es tan fuerte la conexión emocional con el usuario del sitio web y con el consumidor de la marca.
- Difícil lectura de textos muy largos. Si tienes que leer textos muy largos, el modo oscuro tiene sus hándicaps. La explicación es que tus pupilas se tienen que dilatar, lo que puede distorsionar y afectar la capacidad de los ojos para enfocar la pantalla.
- Falta de costumbre de leer sobre fondo negro. Desde que hay papel, estamos acostumbrados a leer textos sobre fondos claros. Por ello, el modo oscuro podría parecernos menos natural que un diseño claro.
- Mala opción si hay mucha luz natural. Se trata de una desventaja obvia. Si es bueno para sitios y momentos con poca luz, no puede ser bueno cuando hay mucha luz disponible.
