IU oscuras. El bueno y el malo. Normas.

Las IU oscuras son dramáticas, elegantes y con estilo. Sin embargo, los diseñadores deben andar con cuidado si eligen caminar en el “lado oscuro”.

Crear la apariencia de un producto es una de las principales responsabilidades de un diseñador: la decisión de diseño inicial debe ser apropiada para el propósito del producto, la situación particular y su audiencia. El esquema de colores tendrá un impacto duradero y debe elegirse cuidadosamente, y todo comienza con la selección de un fondo sobre el cual se colocarán los elementos de diseño: el "lienzo". La elección habitual, casi por defecto, es un fondo blanco.

Hay buenas razones para elegir un fondo brillante. El contraste, el texto, la legibilidad y la capacidad de trabajar con una amplia gama de colores sutiles son algunos de ellos. Según muchos estudios científicos, la legibilidad óptima requiere texto negro sobre fondo blanco. La marca también puede influir en la decisión porque los logotipos y colores de la empresa no funcionarán con una paleta de colores oscuros.

La mayoría de los estudios han demostrado que el texto oscuro sobre un fondo claro es superior al texto claro sobre un fondo oscuro, es decir, es más fácil de leer. En un famoso estudio, la “fatiga visual” fue significativamente mayor cuando los sujetos leían caracteres claros sobre un fondo oscuro en comparación con caracteres oscuros sobre un fondo claro (Bauer, D., Bonacker, M. y Cavonius, CR 1983).

También hay una expectativa : las personas están acostumbradas a ver una variedad de contenido presentado con tinta oscura sobre un fondo blanco junto con imágenes. Piense en periódicos y revistas, que existen desde hace más de 350 años. Retrocediendo aún más, treinta y cinco mil años hasta la era paleolítica (los días del hombre de las cavernas), encontramos dibujos rupestres de leones y mamuts generalmente colocados sobre un fondo claro con carbón o huesos quemados que se usan para dibujar las representaciones.

Sin embargo, cuando un proyecto lo amerita, los diseñadores de productos digitales de hoy en día pueden optar por trabajar con un esquema de color oscuro por una variedad de razones. Como se sugirió anteriormente, a menudo es una elección estética destinada a transmitir drama y provocar una emoción, algo inesperado, o tal vez un diseñador quiere fusionar el diseño con la marca o asegurarse de que el contenido visual se destaque.

Sin embargo, si un diseñador elige cruzar al "lado oscuro", se enfrentará a una serie de desafíos. Entran en juego todo tipo de problemas de usabilidad, principalmente relacionados con la capacidad de escaneado, la legibilidad y el contraste. El principal aspecto a considerar es el suficiente contraste entre el texto y el fondo. También se debe considerar el contexto (caso de uso) y el entorno, así como el dispositivo en el que es probable que se visualice la interfaz de usuario.

Algunas interfaces de usuario oscuras están diseñadas para minimizar la "fatiga visual digital". Con el aumento de la tecnología digital, pasamos la mayor parte del día mirando pantallas. La fatiga visual digital es una condición común que afecta a millones de personas a diario. Causado por todo, desde el uso excesivo de la computadora hasta la exposición regular a la luz brillante, puede causar dolores de cabeza, dolor de cuello, visión borrosa y ardor/escozor en los ojos.

Incluso hay cosas como el Síndrome de Visión por Computadora (CVS) y la "incomodidad ocular". Según un estudio, más del 83 por ciento de los estadounidenses usan dispositivos digitales durante más de dos horas al día, y el 60,5 por ciento informa que experimenta síntomas de fatiga visual digital. (Ojos sobreexpuestos: dilema del dispositivo digital).

Los productos SaaS de empresa a empresa y las aplicaciones de edición multimedia se utilizan durante muchas horas seguidas. Muchos han sido diseñados en una interfaz de usuario de temática oscura para reducir la fatiga visual y, al mismo tiempo, respaldar la claridad visual. Sin embargo, tal enfoque requiere una evaluación cuidadosa y por adelantado de la dirección del diseño.

La mayoría de los desarrolladores usan una pantalla negra con sintaxis codificada por colores para reducir la fatiga visual. Como dice el desarrollador de Toptal, Kevin Bloch: "Un fondo negro reduce la fatiga visual y hace que la codificación de colores automática sea más fácil de leer, lo que hace que el código sea mucho más rápido de entender de un vistazo".

El desarrollador de Toptal, Amin Shah Gilani, agrega: “Yo personalmente uso el tema oscuro solarizado para mi editor de código. Prefiero un tema oscuro porque un fondo más oscuro se siente más agradable a la vista, especialmente porque me gusta mantener las luces tenues o trabajar de noche”.

Las interfaces de usuario de las aplicaciones de juegos también tienden hacia temas más oscuros. El contexto del juego y el entorno en el que los jugadores juegan encajan mejor con una paleta de colores negros. Un diseño de fondo negro refuerza las imágenes llamativas, introduce una sensación de misterio, tiene un mejor contraste y apoya la jerarquía visual.

Cuando las IU oscuras funcionan bien

La mayoría de las IU relacionadas con el entretenimiento (Smart TV, consolas de juegos y aplicaciones de TV y películas) tienden a tener diseños de IU de temática oscura, por una buena razón. La mayoría de las actividades relacionadas con el entretenimiento ocurren en la noche, se ven desde una distancia de 6 a 10 pies y se ven en habitaciones con poca luz; en otras palabras, la pantalla coincide con el entorno. Además, el contenido colorido (por ejemplo, portadas y promociones) se destaca dramáticamente en las interfaces de usuario con temas oscuros.

El objetivo es coincidir con el contexto de la actividad: “Está oscureciendo, me estoy relajando y quiero ver un poco de televisión”. Al igual que miles de diminutas bombillas, las pantallas digitales emiten luz dondequiera que haya un píxel brillante; por lo tanto, una interfaz de usuario brillante iluminaría la habitación, un efecto indeseable teniendo en cuenta la actividad. En este escenario, el diseño de la interfaz de usuario intenta coincidir con el contexto: el dispositivo, el contenido, la actividad y el entorno.

En el contexto, el entorno, la aplicación y el uso correctos, las interfaces de usuario con fondo negro tienen sentido. Considere siempre el contexto en el que es probable que se use la interfaz. Pero va más allá: la elección debe depender del contenido y el contexto : qué , cuándo , dónde y en qué dispositivo .

• Para lograr una apariencia fuerte y dramática para efectos visuales impactantes
• Proyectar una sensación de estilo y elegancia, lujo y prestigio.
• Para crear una sensación de intriga y misterio.
• Para ayudar a enfocar y guiar la atención del usuario con distracciones mínimas
• Para apoyar la jerarquía visual y la arquitectura de la información.

Las interfaces de usuario oscuras solo deben usarse con texto escaso y mínimo e información "fragmentada" con un fuerte énfasis en las imágenes: luz en el texto. Si se usa texto, debe tener un alto contraste con el fondo oscuro, preferiblemente blanco puro u otro color fuerte (no gris oscuro) sobre un fondo negro.

Cuando las IU oscuras no funcionan bien

Como se indicó anteriormente en el artículo, las interfaces de usuario con temas oscuros son una mala opción para contenido con mucho texto y datos, o cuando se usa una variedad de tipos de contenido (texto, imágenes, video, tablas de datos, menús desplegables, campos, etc.) ). El consenso general en la comunidad de diseño es que las interfaces de usuario oscuras son un gran desafío para el diseño, a menos que se trate de contenido simple y solo una pizca de texto aquí y allá.

El desafío es tratar de mantener un contraste suficiente, lo que afecta el desafío general: la legibilidad, que está conectada con la usabilidad, lo que afecta la UX. Generalmente, todos los colores funcionan sobre un fondo blanco, mientras que sobre un fondo oscuro la gama útil de colores se reduce drásticamente.

Este es un ejemplo del mundo real de cuándo no usar una interfaz de usuario con un tema oscuro: participé en un proyecto B2B SaaS en el que el director ejecutivo insistió en que, para "ser diferente", quería ir con un tema oscuro. Interfaz de usuario: que coincidía con la marca de la empresa... para toda la plataforma. Para todo. Después de varias reuniones, y reuniendo al equipo de diseño y a los gerentes de producto detrás de la causa, pudimos disuadirlo de tomar una decisión potencialmente desastrosa.

La plataforma utilizaba un conjunto estándar de componentes de interfaz de usuario de aplicaciones SaaS y, en consecuencia, estaba llena de formularios, widgets, menús desplegables, pictogramas e íconos junto con texto y datos numéricos en tablas. La navegación, el diseño y la funcionalidad se habrían vuelto increíblemente difíciles de administrar mientras se lograba suficiente contraste y un esquema de color consistente. En resumen, habría sido casi imposible hacer que todo funcionara con una interfaz de usuario de temática oscura.

Dependiendo de la idoneidad de la aplicación, tal vez la elección correcta hubiera sido sugerir una combinación de interfaces de usuario claras y oscuras. Por ejemplo, las páginas de configuración con widgets, formularios y tablas de datos se podrían haber diseñado con un fondo claro, y las páginas de análisis con gráficos se podrían haber diseñado con un esquema de color más oscuro.

Lo que se debe y no se debe hacer al usar interfaces de usuario oscuras

Para terminar, la decisión de optar por una interfaz de usuario oscura debe abordarse con cuidado. Los diseñadores no deberían hacerlo por las razones equivocadas: ser modernos, diferentes o copiar el diseño de otra persona. Es crucial que un diseñador considere el contexto, el contenido (contraste y legibilidad), el dispositivo y el caso de uso, y que tenga una buena razón para su elección. Es un acto de equilibrio delicado, ya que potencialmente hay muchos beneficios pero también muchas trampas.

Cuándo está bien usar interfaces de usuario oscuras:

• Cuando un esquema de color de marca lo amerita
• Cuando el diseño es escaso y minimalista con solo unos pocos tipos de contenido
• Cuando sea apropiado para el contexto y el uso, como aplicaciones de entretenimiento nocturno.
• Para reducir la fatiga visual, como las páginas de análisis que se utilizan durante largos períodos de tiempo
• Para provocar una emoción, por ejemplo, un sentimiento de intriga y misterio.
• Para crear un look impactante y dramático.
• Para crear una sensación de lujo y prestigio.
• Para apoyar la jerarquía visual

Cuándo es mejor mantenerse alejado de las IU oscuras:

• Cuando hay mucho texto (es difícil leer sobre un fondo oscuro)
• Cuando hay mucho contenido mixto en la pantalla
• En el caso de aplicaciones B2B con muchos formularios, componentes y widgets
• Cuando el diseño requiere una amplia gama de colores

El cruce al "lado oscuro" debe abordarse con cuidado. Se recomienda una investigación y un análisis más profundos y exhaustivos antes de tomar una decisión potencialmente precaria que está plagada de trampas. Una vez que un diseñador sigue ese camino, es muy difícil dar marcha atrás. Los diseñadores harían bien en considerar todos los aspectos: lo bueno y lo malo, lo que se debe y lo que no se debe hacer, antes de lanzarse con ambos pies.

• • •

Lectura adicional en el blog de diseño de Toptal:

• eCommerce UX: una descripción general de las mejores prácticas (con infografía)
• La importancia del diseño centrado en el ser humano en el diseño de productos
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Principios heurísticos para interfaces móviles
• Diseño anticipatorio: cómo crear experiencias de usuario mágicas