EN EL PUNTO DE MIRA: LOS PRINCIPIOS DEL DISEÑO OSCURO DE LA INTERFAZ DE USUARIO

Los diseños de interfaz de usuario oscuros se ven en todas partes, desde pantallas móviles hasta televisores masivos. Un tema oscuro puede expresar poder, lujo, sofisticación y elegancia. Sin embargo, diseñar para interfaces de usuario oscuras presenta múltiples desafíos y no cumplirá con las expectativas si se implementa de manera deficiente. Antes de sumergirse en el “lado oscuro”, los diseñadores deben mirar antes de saltar.

Los físicos dicen que el negro no es realmente un color; es la ausencia de luz . En sus experimentos haciendo brillar la luz del sol a través de prismas, Sir Isaac Newton ni siquiera la incluyó en el espectro de colores.

En la psicología del color, la mayoría de los colores representan cosas diferentes para diferentes personas. En las culturas occidentales, el negro a menudo se asocia con la muerte, el misterio y el mal. El verde a menudo se asocia con el crecimiento debido a la naturaleza. El azul es calmante casi universal porque está asociado con el cielo y el agua. El color es emocional.

Otros efectos son culturales. El púrpura, por ejemplo, todavía se asocia con el lujo porque en muchas culturas antiguas, el tinte púrpura era costoso y raro, solo la realeza podía pagarlo. Fue una parte importante del espíritu cultural durante el tiempo suficiente para convertirse en parte de la psique humana .

Los productos digitales con interfaces de usuario oscuras, asociadas con el poder, la elegancia y el misterio, son una tendencia formidable. Si bien a menudo se dice que el modo oscuro puede reducir la fatiga visual, no hay evidencia de que esto sea cierto. Bajo ciertas circunstancias , también se supone que ahorra batería. Aún así, la mayoría de las veces, los temas oscuros son una elección estética.

 

INTERFAZ DE USUARIO OSCURA FRENTE A INTERFAZ DE USUARIO CLARA

No todas las interfaces son adecuadas para un tema oscuro. Los diseñadores deben considerar el ajuste de la marca, la idoneidad cultural y la psicología del color y considerar el impacto emocional antes de elegir uno. Es un acto de equilibrio complicado.

Mientras que una aplicación financiera dirigida a la generación del milenio puede lograr el factor atractivo con un tema oscuro, puede ser inapropiado para el sitio web de un gran banco dirigido a la población en general. Demasiado rico, demasiado oscuro y demasiado elegante pueden volverse más frustrantes cuando todo lo que las personas quieren hacer es consultar sus saldos y pagar una factura.

Las IU oscuras de aplicaciones B2B SaaS son notoriamente difíciles de diseñar. Los componentes estándar de la interfaz de usuario web, como tablas de datos, widgets, formularios y menús desplegables, pueden verse extraños en una interfaz de usuario oscura. Debido a que muchos esquemas de color no funcionan bien con interfaces de usuario oscuras, ciertas marcas y productos, según el tipo, el contexto y los factores ambientales, no encajan bien y pueden resultar un desafío insuperable.

Los diseñadores que no hayan trabajado antes con un diseño de interfaz de usuario oscuro y decidan lanzarse con ambos pies pueden encontrarse en aguas turbulentas e inexploradas. En los océanos de interfaces de usuario oscuras, las normas se tuercen, las reglas cambian y las trampas abundan.

Dicho esto, hay muchas buenas razones para usar interfaces de usuario oscuras:

  • 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 crear un look impactante y dramático.

Y, hay escenarios en los que no se recomienda:

  • Cuando hay una gran cantidad de texto (es difícil leer sobre un fondo oscuro)
  • Cuando hay muchos tipos de contenido mixto
  • Cuando el diseño requiere una amplia gama de colores

CONTRASTE EN DISEÑO DE INTERFAZ DE USUARIO OSCURO

Un tema oscuro no es un tema negro. Sería mejor pensarlo como un tema de “poca luz”. Una de las principales preocupaciones con las interfaces de usuario oscuras es lograr suficiente contraste para que los elementos visuales tengan separación y el texto sea legible. La mayoría de los diseñadores pensarían que usar negro sería óptimo para lograr un fuerte contraste. Sin embargo, es mejor no usar negro verdadero (#000000) para fondos o colores de superficie . Es mejor reservar el negro para otros elementos de la interfaz de usuario y usarlo con moderación. Por ejemplo, el negro verdadero se puede usar para elementos pequeños de la interfaz de usuario o un bisel circundante.

El tema oscuro Material Design de Google recomienda usar el gris oscuro (n.º 121212) como color de superficie del tema oscuro “para expresar la elevación y el espacio en un entorno con un rango más amplio de profundidad”. Además, muchos diseñadores recomiendan agregar un sutil tinte azul oscuro a los grises oscuros al definir el esquema de color. Tiende a crear un mejor tono oscuro para las pantallas digitales y una paleta de colores oscuros de la interfaz de usuario más agradable.

 

Una ventaja de usar una gama de grises es que da libertad a los diseñadores porque se puede expresar una gama más amplia de colores. Una paleta de grises también ayuda a crear profundidad porque las sombras paralelas se pueden ver más fácilmente contra el gris frente al negro.

Se debe prestar especial atención al contraste del texto en las IU oscuras.

Las Pautas de Accesibilidad al Contenido Web (WCAG, por sus siglas en inglés) exigen que “la presentación visual del texto tenga una relación de contraste de al menos 4,5:1 “, excepto para el texto a gran escala, que debe tener una relación de contraste de al menos 3:1 . Por lo tanto, los diseñadores deben asegurarse de que el contenido permanezca cómodamente legible en modo oscuro.

También es una buena idea probar el contraste adecuado entre otros elementos de la interfaz de usuario, como tarjetas, botones, campos e íconos en varias pantallas y dispositivos. Si hay una separación imperceptible entre los elementos de la interfaz de usuario, el diseño se mezcla demasiado y corre el riesgo de volverse aburrido.

 

CENTRANDO LA ATENCIÓN: COLOR

El color se destaca en las interfaces de usuario oscuras. Es mejor usar esquemas con colores de énfasis más claros y no saturados. Evite usar colores saturados en interfaces de usuario oscuras, ya que pueden vibrar visualmente contra superficies oscuras. Además, como práctica recomendada, los colores deben pasar el estándar AA de WCAG de al menos 4,5:1 cuando se usan con texto.

Al definir un esquema de color para una interfaz de usuario oscura, Google recomienda una cantidad limitada de acentos de color para mantener la mayor parte del espacio disponible para superficies oscuras. El uso de colores complementarios divididos puede ayudar. El esquema tiene un color dominante y dos colores adyacentes al complemento del color dominante. Hacer esto proporciona el contraste necesario sin la tensión del esquema de color complementario.

 

El esquema de color correcto puede ayudar a crear un buen contraste. Colorable es una herramienta útil para seleccionar combinaciones de colores de texto y colores de fondo compatibles con la accesibilidad.

El texto y los elementos esenciales, como botones e íconos, deben cumplir con los estándares de legibilidad cuando aparecen sobre fondos oscuros. Como se ve en la aplicación Jabra Sound+ anterior, se pueden usar colores distintos al blanco para el texto y los íconos.

El sitio Material Design de Google tiene un útil generador de paletas de colores (en “Herramientas para elegir colores”) con el que los diseñadores pueden crear y aplicar paletas de colores a una interfaz de usuario. El nivel de accesibilidad de las combinaciones de colores también se puede medir con una herramienta de color complementaria .

“Use colores que contrasten fuertemente para mejorar la legibilidad. Muchos factores afectan la percepción del color, incluidos el tamaño y el peso de la fuente, el brillo del color, la resolución de la pantalla y las condiciones de iluminación”. Directrices de la interfaz humana de Apple

MENOS ES MÁS: APROVECHAR EL ESPACIO NEGATIVO

Uno de los elementos fundamentales del diseño exitoso de una interfaz de usuario oscura es el uso hábil del espacio negativo. Si se diseñan de manera deficiente, las IU oscuras pueden hacer que los productos digitales parezcan pesados ​​y autoritarios. Para contrarrestar, los diseñadores pueden hacer que las interfaces de usuario oscuras sean más livianas aprovechando el espacio negativo dentro de diseños minimalistas y escasos. El diseño minimalista se trata tanto de lo que no está como de lo que está. Cuando se usa hábilmente, el espacio negativo hará que una interfaz de usuario oscura sea más fácil de escanear y permitirá que las personas absorban la información más fácilmente.

El compositor francés Claude Debussy dijo una vez: “ La música es el espacio entre las notas ”. El mismo sentimiento se aplica a la escaneabilidad: el espacio negativo entre los elementos es lo que hace que un diseño funcione. Una cantidad liberal de espacio negativo alrededor de los elementos de la interfaz de usuario es lo que les da definición. Enfatiza el contenido importante y brinda el respiro necesario para garantizar que el diseño no se sienta denso y desordenado. Sin espacio para respirar, es menos probable que el cerebro humano escanee puntos de interés y más probable que deambule.

Las interfaces repletas de demasiados elementos y texto son la ruina del diseño de interfaz de usuario oscuro de alta calidad. Al considerar cuidadosamente la jerarquía visual en las interfaces de usuario oscuras, los diseñadores pueden hacer que sus creaciones sean más fáciles de escanear, mejorando así la experiencia del usuario.

ESTILO DE PALABRAS: TIPOGRAFÍA

Cada fragmento de texto en IU oscuras requiere un escrutinio. La preocupación es doble: legibilidad y contraste. Primero, se trata del tamaño. El texto debe ser lo suficientemente grande para una buena legibilidad (el texto pequeño sobre fondos oscuros es más difícil de leer). En segundo lugar, debe haber suficiente contraste entre el texto y el fondo.

La disponibilidad de miles de fuentes digitales facilita la visualización de mensajes con impacto para encabezados y mensajes destacados. Los diseñadores pueden mitigar los problemas de legibilidad aumentando el contraste y ajustando el tamaño de fuente, el espacio entre caracteres y la altura de línea para texto más pequeño.

La recomendación W3C AAA para texto de tamaño normal (menos de 18 puntos si no está en negrita) es tener una relación de contraste de al menos 7:1 . Esto también se aplica a otros elementos de la interfaz de usuario: íconos, imágenes de texto y etiquetas de texto, como etiquetas de botones. Corresponde a los diseñadores garantizar que todos los productos digitales sean accesibles para todos. No solo mejora la usabilidad, y por lo tanto UX, es la ley en la mayoría de los países .

Hay innumerables opciones disponibles para que los diseñadores obtengan excelentes tipos de letra que funcionen bien en interfaces de usuario oscuras. Google Fonts , Font Library y Adobe Typekit son algunos que ofrecen una fácil integración de aplicaciones o sitios y una amplia gama de opciones.

 

COMUNICANDO PROFUNDIDAD: ELEVACIÓN

Un tema oscuro no significa plano. Con temas claros, la iluminación, el sombreado y las sombras crean una sensación de profundidad. Con interfaces de usuario oscuras, es más desafiante porque contienen superficies predominantemente oscuras con acentos de color escasos. Aún así, los diseñadores pueden usar tres o cuatro niveles de elevación con los esquemas de color correspondientes para que el texto transmita profundidad.

¿Por qué profundidad? La mayoría de los sistemas de diseño modernos utilizan un sistema de niveles de elevación para comunicar la profundidad. Una sensación de profundidad se corresponde con el mundo natural. Nuestra visión tiene percepción de profundidad, y vivimos en un mundo 3D. La profundidad ayuda a enfatizar la jerarquía visual de una interfaz. Los elementos en primer plano, por ejemplo, llaman la atención sobre sí mismos, como un cuadro de diálogo de advertencia.

Las superficies se iluminan de manera diferente para indicar diferentes niveles de elevación. Cuanto más alta sea la posición de una superficie en la pila de elevación (más cerca de una fuente de luz implícita), más clara será la superficie. Una superficie más brillante hace que sea más fácil distinguir la elevación entre los componentes y ayuda a ver las sombras, lo que hace que los bordes de cada superficie sean más evidentes.

 

Diseñar el color de la superficie de cada nivel requiere cuidado. Es mejor no tener más de cuatro o cinco niveles. Los diseñadores deben tener en cuenta el contraste del texto a medida que las superficies van más arriba en la pila y se vuelven más claras. Si el color de fondo no es lo suficientemente oscuro para alcanzar un nivel de contraste de al menos 15,8:1 entre el texto blanco y la superficie, el texto en la superficie elevada más alta (y más clara) no pasará el estándar de 4,5:1. En algunos casos, podría ser mejor especificar el color del texto de un elemento como negro verdadero (#000000) en el sistema de diseño para lograr un buen contraste sobre un fondo gris claro.

INSPIRACIÓN DE DISEÑO DE INTERFAZ DE USUARIO OSCURO

Reflexionando sobre los principios descritos anteriormente, aquí hay algunos excelentes ejemplos de diseño de interfaz de usuario oscuro:

 

Atom Finance aprovecha un tema oscuro para una apariencia sofisticada y limita sus colores de acento a tres. El diseño utiliza espacio negativo y un diseño minimalista y escaso para un sitio web financiero complejo. El sitio utiliza un sombreado sutil para indicar diferentes elevaciones de componentes en la interfaz de usuario.

 

 

Ambos sitios web minimalistas con temas oscuros usan tipografía en negrita. Se usa un sombreado cuidadoso con un solo color de énfasis en alineación con las mejores prácticas de diseño de interfaz de usuario oscuro.

 

A pesar de los desafíos de trabajar con temas oscuros para aplicaciones SaaS, este tablero de visualización de datos para IBM es ejemplar. La cantidad de colores de énfasis se mantiene al mínimo y el sitio usa sombreados sutiles para mostrar diferentes elevaciones de la interfaz de usuario.

 

Estas aplicaciones móviles siguen las mejores prácticas de diseño de interfaz de usuario oscuro mediante el uso de negro verdadero solo para los biseles, el sombreado adecuado de los elementos para diferentes niveles de elevación y una cantidad limitada de colores de énfasis.

RESUMEN

La decisión de utilizar un diseño de interfaz de usuario oscuro en lugar de uno tradicional debe abordarse con discreción. No debe elegirse por las razones equivocadas: ser moderno, diferente o imitar el diseño de otra persona. Los diseñadores deben tener una razón sólida para su elección y considerar el contenido, el contexto de uso y el dispositivo en el que aparecerá el diseño.

Los temas oscuros son adecuados para algunos productos digitales, pero es una verdadera lucha implementarlos en otros. La simplicidad es clave. Son excelentes para presentar contenido minimalista, visualizaciones de datos, sitios de medios y plataformas de entretenimiento. Son una mala opción para plataformas B2B complejas y con muchos datos, páginas con mucho texto y mucho contenido variado.

Para los diseñadores valientes listos para cruzar nuevas fronteras estilísticas y explorar interfaces de usuario oscuras a través de una lente emocional y estética, ofrecen un campo emocionante de posibilidades infinitas, en el “lado oscuro”.


¡Háganos saber lo que piensas! Por favor, deje sus pensamientos, comentarios y comentarios a continuación.

• • •

Lecturas Adicionales En El Blog De Diseño De Toptal:

  • IU oscuras. El bueno y el malo. Normas.
  • Los principios del diseño y su importancia
  • Explorando los Principios Gestalt del Diseño
  • Convincente y conmovedor: una guía de principios de diseño de movimiento
  • Impulse su UX con estos principios de diseño de interacción exitosos

Leave a Comment