¿Por qué hay tan pocas aplicaciones móviles y sitios web con un diseño de interfaz de usuario oscuro?

Muchas personas no lo saben, pero el color y el tono son propiedades realmente subjetivas en las pantallas. El tono, la sombra, el tono y el tinte pueden variar ampliamente entre computadoras y en diferentes tipos de dispositivos.

En los viejos tiempos (finales de los 90 y principios de los 00), la regla general era adherirse a los colores “seguros para la web” (una paleta de 216 tonos de color que se podían distinguir constantemente de una pantalla a otra. De manera similar, la mayoría de los monitores tenía que ser ajustado manualmente para brillo y contraste y la configuración de la pantalla tenía que ser configurada para el sistema operativo. Esto era una necesidad, no realmente una opción.

Afortunadamente, esta es una guía anticuada en estos días, el diseño para pantallas se ha vuelto mucho más fácil a medida que la calidad del hardware ha aumentado, pero todavía hay diferencias muy sustanciales entre las “gamas” de colores (la temperatura de la luz que controla cómo se ven los colores claros / oscuros) )

Estas diferencias en la calidad del hardware, los sistemas operativos (OSX es mucho más brillante que Windows) y los tipos de dispositivos (tabletas, teléfonos, computadoras portátiles, computadoras de escritorio, televisores) provocan muchas diferencias de color.

La mayoría de las veces, esto no es un gran problema, hasta que comience a lidiar con una interfaz de usuario y contenido de pantalla realmente oscuros.

Parece que juegas muchos videojuegos. ¿Alguna vez has notado que los juegos que cuentan con una gran cantidad de configuraciones oscuras (como los mapas nocturnos en un FPS) incluyen un paso de calibración de pantalla al comienzo del juego? Esto es para ayudar a ajustar el juego a la gama de colores de su televisor. Sin hacer esto, existe un riesgo muy real de que el juego no se pueda jugar porque no puedes ver lo que está sucediendo. Las sombras son negras, no hay suficiente contraste para ver formas, el texto es completamente ilegible, etc.

Lo mismo sucede en la interfaz de usuario oscura en aplicaciones y en la web.

Cuando era diseñador en Adobe, trabajé en una de las primeras aplicaciones de Adobe “UI oscura”. Fue un gran paso adelante en términos del aspecto y la sensación de las aplicaciones, pero una cosa que no se consideró es cómo estas UI hermosas, ricas y elegantes, diseñadas en una pantalla de cine Apple de $ 3000 y 30 “por 20 y tantos años con los ojos agudos iban a mirar en un monitor de $ 200 que venía incluido con una computadora de escritorio Compaq que un chico de 40 años compró a Costco. La aplicación era principalmente una aplicación para PC de grado de consumidor, diseñada en computadoras Apple de grado profesional.

Los sutiles tonos de texto en gris claro sobre hermosos fondos degradados en gris oscuro parecían completamente negros para los clientes. Dedicamos un gran porcentaje de nuestro próximo lanzamiento a solucionar estos problemas en lugar de crear nuevas funciones.

Imagine este problema en un sitio web (ningún color se calibra para un sitio web), que debe mostrarse en todo tipo de computadora, tableta, teléfono, etc., y ser legible en entornos claros, entornos oscuros, bajo un sol deslumbrante afuera y de noche .

Es muy, muy difícil acertar con la interfaz de usuario oscura. Por lo general, causa más problemas de los que resuelve, por lo que la mayoría de los equipos de diseño inteligentes lo evitan a menos que tengan razones realmente específicas para no hacerlo o (como en el caso de Apple) controlen el hardware en el que se usará y puedan obtener un resultado aceptable .

Debido a que hay usuarios potenciales con discapacidades como mala visión, daltonismo, etc. En términos cotidianos, este es un problema de accesibilidad donde el color de fondo oscuro y otro color de primer plano no coinciden con la relación de contraste mínima requerida entre el fondo y el color de primer plano.

WCAG 2.0 bajo Criterios de éxito 1.4.3 dice:

La intención de este Criterio de éxito es proporcionar suficiente contraste entre el texto y su fondo para que pueda ser leído por personas con visión moderadamente baja (que no utilizan tecnología de asistencia para mejorar el contraste). Para las personas sin deficiencias de color, el tono y la saturación tienen un efecto mínimo o nulo en la legibilidad según lo evaluado por el rendimiento de lectura (Knoblauch et al., 1991). Las deficiencias de color pueden afectar un poco el contraste de luminancia. Por lo tanto, en la recomendación, el contraste se calcula de tal manera que el color no sea un factor clave para que las personas que tienen un déficit de visión del color también tengan un contraste adecuado entre el texto y el fondo.

Larga historia corta:

  1. Para cumplir con la accesibilidad en el Nivel AA, debe mantener una relación de contraste mínima de 4.5: 1
  2. Para el nivel AAA, la proporción debe ser 7: 1 (Criterios de éxito 1.4.6)

Hay usuarios con daltonismo desconocido (rojo, azul, verde) y esto es prácticamente imposible de diseñar aplicaciones para todo tipo de daltonismo, los usuarios activan el modo de alto contraste / reversa / blanco y negro. La interfaz de usuario del tema oscuro tiene problemas en el modo de alto contraste.

En este contexto, también considere otro escenario cuando el usuario está al aire libre bajo la luz solar brillante usando la aplicación.

Tiene sentido evitar las IU de temas oscuros a menos que estén respaldadas por una sólida justificación comercial.

¿Qué sucede cuando tienes una pantalla brillante y un fondo oscuro?
Creas un espejo.

En la actualidad, la mayoría de las pantallas de las computadoras son brillantes y las pantallas de los teléfonos inteligentes también. No es un poco brillante como solían ser las pantallas CRT, pero es muy brillante. Esto es posible porque las pantallas son lo suficientemente brillantes como para compensar la luz ambiental. La ventaja de una pantalla brillante es que los colores aparecen más vivos. Tan pronto como use un fondo oscuro, quitará la luz de la pantalla.

Entonces, aparte de otras consideraciones, como la legibilidad del texto claro sobre un fondo oscuro, creo que el efecto espejo es un buen argumento contra la creación de interfaces de usuario oscuras, hasta que los fabricantes de pantallas encuentren una buena solución para combatir este problema.

Moda, estilo, inercia, etc. Mi mejor conjetura: Apple está actualmente en modo de luz, por lo que todos los copian. No hay razones sólidas de factores humanos.

NOTA: Muchas respuestas aquí dicen que la oscuridad es difícil de leer debido al contraste. Pero parecen estar (¿deliberadamente?) Perdiendo el punto. El OP dijo que “fondo ligeramente oscuro con todos los elementos blancos” Oscuro no significa que se debe bajar el brillo de toda la aplicación, solo el fondo. El contraste se puede mantener fácilmente.

Yo, hago que casi todas mis aplicaciones móviles sean de fondo negro u oscuro con elementos claros. Fácil de obtener un contraste muy alto con un rendimiento total muy bajo. Por lo tanto, la aplicación se puede usar en todas partes, desde sol brillante hasta encerrada en un sótano sin ventanas con las luces apagadas sin cambiar el brillo de la pantalla.

Estoy seguro. No solo por mis montones de investigación fundamental, sino por realizar pruebas de usabilidad de campo en estas aplicaciones, en todo tipo de entornos, con todo tipo de usuarios, durante años. Es el mejor desempeño con diferencia. Y mis usuarios a veces usan guantes y protección para los ojos. Pruebo casos extremos y funciona. De hecho, me resulta más fácil mantener un alto contraste que en sitios con fondo blanco o claro. De alguna manera, esto parece duro para la gente, por lo que muchos sitios le devuelven el tono al texto negro y ahora tiene menos contraste. Al construir con fondos oscuros me apego al contraste de nivel WCAG AAA. Y a menudo trabajo en otros productos regulados donde también tenemos que usar colores de advertencia específicos ISO, SAE o CE. Fácil de usar y mantenerlos visibles para todos los usuarios.

Efecto secundario de fondos oscuros: consumo de batería mucho menor. Las pantallas de píxeles encendidos (AMOLED …) solo consumen energía relacionada con su salida, por lo que una pantalla oscura usa mucha menos energía.

Creo que esta pregunta hecha por el desarrollador de software J

Mira afuera. Hagamos que la construcción sea oscura por dentro y por fuera, para una mejor lectura. Hagamos que los árboles sean negros para que nunca integren nuestro ángulo de visión, usemos toda la ropa negra …

Por supuesto que no solo por eso. También utilizando elementos blancos, se siente confianza, limpieza y honestidad. Esto se trata de psicología.

Las interfaces de usuario con temas oscuros pueden ser dramáticas, elegantes y elegantes. Pero a pesar de los beneficios, vienen con muchos desafíos y posibles dificultades.

Escribí un artículo completo del blog sobre el tema de las interfaces de usuario con temas oscuros en el que describo lo bueno y lo malo, lo que se debe y no se debe hacer que todo diseñador debe tener en cuenta. IU oscuras. El bueno y el malo. Normas.

No lo sé, pero sospecho que podría ser porque:

  1. Un patrón oscuro generalmente se asocia con una intención maliciosa: un buen número de sitios web maliciosos siguen este patrón. Y, con un fondo oscuro, está limitado a un pequeño conjunto de colores para los elementos de la interfaz de usuario para el contraste.
  2. Un patrón blanco o claro generalmente se asocia con la bondad: hace que las personas se sientan bien. Y tiene muchos más colores para jugar con los elementos de la interfaz de usuario para crear una experiencia más viva.

Espero que esto ayude.

Descargo de responsabilidad: no estoy muy familiarizado con los sitios de jugadores.

Voy a ofrecer dos pensamientos. La primera es que hay tendencias, y la tendencia en este momento tiende a ser hacia diseños más abiertos, ligeros y aireados. Hace varios años, no era raro encontrar sitios web oscuros con tipo gris claro o blanco. De hecho, dicho diseño se usó para evocar una sensación de “tecnología avanzada”.

El otro pensamiento es este: parte de la razón por la que más sitios presentan fondos claros con elementos oscuros, como el tipo, es que este tipo de diseño tiende a ser más utilizable. En general, es más difícil leer texto claro sobre un fondo oscuro que el tipo oscuro sobre fondo claro.