Krypton Solid

Cómo el modo oscuro afecta la experiencia de usuario y el diseño web (+ ejemplos)

Recientemente, parece que muchas empresas están adoptando un enfoque de diseño Jay-Z: todo negro.

En los últimos años, la estética tan publicitada conocida como «modo oscuro» ha tomado la aplicación y los mundos UI / UX por asalto.

Gigantes tecnológicos también Facebook, Instagram, y manzana lo han incluido en sus productos, muchos de ellos lo convierten en una función opcional que los usuarios pueden activar o desactivar.

Incluso vemos empresas que llevan estas interfaces más oscuras en sus sitios de marketing.

Personalmente, me gusta este enfoque de diseño.

Mire mi armario y podrá ver fácilmente que siempre tuve una debilidad en mi corazón por las paletas de colores más oscuros. (y sí, sé que soy un cliché andante de tu tipo creativo típico).

Sin embargo, no importa cuánto me guste una aplicación o un sitio web con un tema oscuro, sé que este estilo de diseño no funcionará para todas las empresas y que cambia drásticamente las experiencias de los usuarios.

Pero antes de sumergirme en el modo oscuro y su impacto UX, hablemos sobre qué es exactamente el modo oscuro.

¿Qué es el modo oscuro?

El modo oscuro y simple es un esquema de color claro-oscuro que utiliza texto, iconos y otros elementos de la interfaz de colores claros sobre un fondo oscuro.

Así aparece el grupo de Facebook IMPACT IMPACT Elite en modo oscuro en la plataforma.

Se ha vuelto extremadamente popular en los últimos años, como mencioné, pero la estética de la vía oscura en realidad existe desde hace algún tiempo.

Su uso más temprano se remonta a los días de la informática en el hogar con monitores CRT (tubos de rayos catódicos) que mostraban el texto en una apariencia verde-negra.

Imagina su bondad Quora

Pero, por supuesto, en ese momento el uso de una interfaz más oscura no era tanto una elección de diseño como la capacidad limitada de la tecnología.

Solo en la década de 1980 cuando WYSIWYG Los procesadores de texto se han vuelto tan populares que han comenzado a presentar texto negro sobre un fondo blanco con el que estamos familiarizados.

Esto se debió principalmente a los avances tecnológicos que dieron a las empresas de computación la capacidad de imitar la apariencia de la tinta de papel que la gente ya conocía, piense en periódicos y revistas.

Imagina su bondad AppleInsider

Aunque han pasado más de 15 años desde el uso regular de monitores CRT, el amor de muchas personas por los temas oscuros nunca ha desaparecido.

Muchas personas afirman que el esquema de color más oscuro reduce la fatiga ocular cuando se usan productos durante períodos prolongados y también es menos agresivo para los ojos en entornos más oscuros.

Los efectos del modo oscuro en la experiencia del usuario (UX)

El uso del modo oscuro es un cambio importante en el mundo del diseño, pero nuevamente, no es un enfoque que funcione para todas las empresas.

La implementación del modo oscuro puede afectar varias áreas clave del negocio y la experiencia del usuario.

Marca

La marca se refiere a la creación de un mensaje global para su negocio que lo conecta emocionalmente con su audiencia. Considere el mensaje que desea transmitir o los sentimientos que desea que evoque su empresa antes de implementar el modo oscuro en su marca.

Los colores oscuros suelen ser los más efectivos si desea crear una marca que dé a las personas la sensación de ser dramáticas, misteriosas o elegantes.

Por ejemplo, eche un vistazo al sitio web de Audemars Piguet. La compañía de relojes de lujo utiliza tonos oscuros en la marca para transmitir la sensación de elegancia y artesanía de alta calidad.

Mientras navega por su sitio, el fondo oscuro, combinado con el texto mínimo, atrae las hermosas fotos del producto en el frente y en el centro. Puede concentrarse en los detalles finos que se incluyen en cada reloj.

Por otro lado, los elementos oscuros también pueden acabar siendo conectado con connotaciones negativas como la muerte, la tristeza o el mal, por lo que debe asegurarse de tener cuidado con la forma en que aborda el diseño del modo oscuro.

Usar

El modo oscuro también puede tener un gran impacto en la usabilidad de su producto. No solo tendrá que pensar en el entorno en el que usa su producto, sino también en cuánto tiempo lo usa.

Por ejemplo, si las personas van a usar su producto en un entorno más oscuro o durante horas, entonces es posible implementar el modo oscuro.

Las aplicaciones de transmisión, como Netflix, son un ejemplo perfecto de esto.

La mayoría de las personas emiten de noche o en una habitación con poca luz, a unos 6-8 metros de distancia de sus televisores.

Los servicios de transmisión, sabiendo que los usuarios transmiten en este tipo de entorno, utilizan el modo oscuro como una forma de crear una experiencia en pantalla perfecta en el resto de su entorno.

La interfaz más oscura de estos servicios de transmisión no solo ayuda a crear la experiencia cinematográfica de estar en un cine, sino que también es mucho más fácil para los ojos en el entorno dado.

Imagínese lo molesto que sería relajarse por la noche, viendo un episodio de el escritorio en Netflix por milésima vez solo para ser recibido por una interfaz blanca brillante.

También es importante pensar en cuánto tiempo los usuarios utilizarán su producto.

Los desarrolladores, por ejemplo, pasan la mayor parte del día mirando interminables líneas de código. Es por eso que la mayoría de los desarrolladores utilizan un editor de código en modo oscuro para ayudar a reducir la fatiga visual y facilitar la lectura de la sintaxis codificada por colores.

Este parece ser uno de los usos más antiguos del modo oscuro que todavía funciona en la actualidad.

Según Andy Clarke, fundador del estudio de diseño web Stuff & Nonsense, «Los desarrolladores técnicos han estado usando temas oscuros en editores de código desde que tengo uso de razón».

También se da cuenta de que los editores de código más populares, como el código de Visual Studio, ofrecen un modo o tema oscuro.

Accesibilidad y legibilidad

Para extraños accesibilidad, se refiere a la capacidad de un sitio web para ser utilizado o consumido por personas con diversas discapacidades o deficiencias.

La legibilidad de su contenido es crucial para crear una experiencia accesible para todos.

Cuando se trata de legibilidad, la investigación muestra que Los dibujos que utilizan texto oscuro sobre un fondo abierto proporcionan el mejor rendimiento para las personas con visión normal y ciertas discapacidades visuales, como el astigmatismo.

Esta es la razón principal por la que los fondos de colores claros generalmente tienen más luz, lo que hace que los estudiantes se contraigan, lo que les permite concentrarse en el texto.

En este ejemplo a continuación, notará que sus ojos deberán esforzarse más para leer el párrafo de texto sobre un fondo negro que el texto sobre un fondo blanco.

Un ejemplo de la legibilidad de un texto blanco sobre un fondo negro vs. texto negro sobre fondo blanco

Dado esto, el modo oscuro no es la mejor opción para los sitios basados ​​en contenido.

El diseño temático más oscuro realmente brilla cuando se trabaja con patrones que están más centrados en imágenes y usan cantidades mínimas de texto.

Cómo optimizar su marketing y diseño para el camino oscuro

Si bien es posible que no esté listo para ejecutar e implementar esta función de inmediato en todos sus productos y materiales de marketing, todavía hay algunas formas simples en las que debe estar listo para optimizar su marketing y diseño para las diversas aplicaciones y servicios que utilizan una opción en la oscuridad. modo.

Correo electrónico

El modo oscuro todavía es relativamente nuevo para los clientes de correo electrónico, pero los principales jugadores como Gmail, las aplicaciones móviles de Outlook y Apple Mail ya están impulsando la opción.

gmail en modo oscuroEjemplo de cómo aparece Gmail en modo oscuro

Aunque todavía no hay una lista larga de clientes que aceptan el modo oscuro, existen pasos que puede seguir para optimizar sus correos electrónicos para los clientes que lo aceptan. Algunos pasos simples incluyen:

  • Trate de evitar imágenes de texto transparentes de color gris oscuro o blanco
  • Guarde las imágenes de su logotipo como JPEG con un fondo blanco
  • ¡En caso de duda, pruebe, pruebe, pruebe!

Para obtener un desglose completo de todo lo que puede hacer para optimizar sus correos electrónicos en la oscuridad, le recomiendo revisando este artículo escrito por Christine Austin de IMPACT.

Redes sociales

Como mencioné anteriormente, el modo oscuro hace un excelente trabajo, permitiendo que las imágenes se destaquen al crear un alto contraste, y las redes sociales son una industria que realmente ha tomado la alternativa a la interfaz de usuario.

Por lo tanto, debe asegurarse de que sus imágenes en las redes sociales estén diseñadas para funcionar bien en él, así como en el modo de luz convencional.

La mejor manera de optimizar sus publicaciones en las redes sociales para los usuarios que usan el modo oscuro es incluir siempre una imagen o video siempre que sea posible. Simplemente agregando una imagen a su publicación, ayudará a que su publicación se destaque más.

Querrá asegurarse de elegir el tipo correcto de imágenes para estas publicaciones. Si elige una imagen que es demasiado oscura, lo más probable es que el fondo oscuro la borre.

Si se ajusta a tu marca, te recomiendo elegir imágenes coloridas en colores brillantes (o al menos imágenes que se alejen del fondo blanco o negro) que realmente ayudarán a crear un alto contraste con un fondo oscuro.

Sitio web

Hace unos años, escribí un artículo sobre cómo influye en el comportamiento móvil cómo diseñamos experiencias de escritorio.

Esta idea es aún más cierta hoy.

Cuando se trata del modo oscuro, creo que a medida que continúa creciendo en popularidad y más personas continúan solicitando esta función, es muy probable que veamos más empresas implementándola en sus sitios web.

Si está interesado en avanzar en la curva del modo oscuro y cree que puede ser una buena opción para su marca, mi consejo sería comenzar poco a poco y probarlo en unas pocas páginas como una opción que la gente puede activar y desactivar.

Diseñador de producto Johny Vino lo está usando este enfoque en su sitio web en el ejemplo siguiente.

Darle a las personas la opción de encenderlo o apagarlo pone a las personas en control de su experiencia y se dirige a aquellos que pueden tener diferentes discapacidades visuales.

Ven al lado oscuro

La conclusión es que, ya sea que decida pasar al lado oscuro o no, la decisión debe basarse en las necesidades de su audiencia, los mensajes de su marca y cómo las personas interactúan con sus productos.

El modo oscuro ha sido adoptado por muchas empresas, y aunque el modo oscuro puede no ser el adecuado para su marca, le recomiendo encarecidamente que haga un esfuerzo consciente para optimizar su marketing y diseño para las aplicaciones y servicios que ofrecen esta opción, así que asegúrese de ofrecer siempre la mejor experiencia de usuario y cliente.

Deja un comentario