"Modo oscuro" en el sitio web de la organización: ¿solo una tendencia hermosa o realmente afecta la percepción de UX y la marca?

El verdadero problema en la vida

Muchos ejecutivos y equipos de marketing se enfrentan a preguntas importantes en la marca o en el sitio web corporativo. ¿Es eso "deberíamos hacer el modo oscuro?" Un lado lo ve como solo "tendencia de belleza" en el pasado y se aprobó es un proyecto que se ve bien pero que no sabe cómo medir los resultados comerciales, mientras que el otro lado está presionado por el equipo de diseño y la llamada de usuarios que están familiarizados con el modo oscuro en la aplicación como Spotify, Netflix o incluso en el sistema operativo móvil. La decisión equivocada puede significar una inversión derrochadora. O perder una oportunidad importante para actualizar la experiencia del usuario y la imagen de la marca desafortunadamente

---

Suelto para las ilustraciones: las imágenes de la sala de reuniones con ejecutivos y equipos de marketing se debaten seriamente, con la maqueta. El sitio web del modo de luz y el modo oscuro se muestra en una gran pantalla de proyector. Transmite conflictos en la toma de decisiones

¿Por qué ocurrió ese problema?

La duda del uso del modo oscuro, la red de la organización es causada por no estar clara. El verdadero "valor" para muchas empresas de que Dark Mode es solo una cuestión de preferencia personal (aessthetics), pero en realidad, elegir un tema oscuro o brillante tiene un impacto directo en 3 dimensiones principales a las que los ejecutivos deben prestar atención:

1. Experiencia del usuario (Experiencia del usuario (UX): el modo oscuro ayuda a reducir el resplandor, haciendo que los ojos sean más cómodos cuando se usan con poca luz. Y puede guardar la batería en la pantalla OLED, pero puede hacer que lea un texto largo más difícil para algunas personas y puede reducir la visión de ciertos elementos si el diseño de contraste no es bueno
2. Acceso para todos (accesibilidad): aunque el modo oscuro ayuda a las personas con sensible a la luz (fotofobia), pero para aquellos que tienen una visión baja, leer colores claros en el fondo oscuro puede ser más desafiante. Que este problema está directamente relacionado con los estándares de acceso al sitio web (accesibilidad web) a los que las organizaciones modernas deben prestar atención
3. Percepción de la marca: colores que afectan la psicología y la conciencia. El modo oscuro a menudo está vinculado al lujo moderno (moderno) y premium. La elección del modo oscuro puede ser una herramienta para comunicar nuevas marcas. Pero, por otro lado, puede hacer que la marca quiera comunicarse brillante, fácil de acceder o amigable.

---

Solicitud de ilustraciones: Infografía dividida en 3 piezas transparentes (UX, accesibilidad, percepción de marca). Cada parte tiene iconos cortos y palabras clave. Explique el impacto del modo oscuro, como una imagen focal, una imagen de una silla de ruedas y el logotipo de la marca que se ve más lujoso.

Si se deja, ¿cómo afectará?

El modo oscuro descuida seriamente la consideración del modo oscuro o tomando una decisión de usar solo porque "se ve hermosa" por la falta de comprensión. Puede crear más impactos negativos de lo esperado si elegir "no hacer", a pesar de que su grupo objetivo principal toma la mayor parte del tiempo en la pantalla por la noche, puede estar creando una mala experiencia y empujándolos a recurrir a competidores más atentos. Pero si elegir "hacer" sin un buen plan, el resultado puede ser igualmente malo, como:

• La tasa de conversión disminuyó: si el modo oscuro diseñado dificulta la lectura. El botón Call-to-Action (CTA) no es sobresaliente ni complete la información. Inevitablemente hace que los usuarios abandonen el pedido o el contacto en cuestión
• Oportunidades comerciales perdidas de usuarios especializados: sitios web difíciles de leer para ancianos o personas con problemas oculares. Puede hacer que su organización sea vista como falta de atención y no cubrir a todos los usuarios.
• Imagen de marca dañada: el uso de modo oscuro con marcas inapropiadas, como un sitio web de hospital infantil que necesita brillante u organizaciones que se centren en la transparencia y el amistoso pueden crear sentimientos conflictivos y reducir la credibilidad de la marca. Que se considera uno de los impactos en la marca causada por el diseño del sitio web que debe tener cuidado.
• El gasto del residuo: modo oscuro, pidiendo ir y tener que regresar y arreglarlo todo más tarde. Debido a que no es práctico o destruyendo UX, puede desperdiciar el presupuesto y el tiempo en lugar de planificar bien desde el principio.

---

Solicitud de ilustraciones: Gráfico de tasa de conversión, que se desplome con la cara del usuario que parece frustrado al tratar de leer el mensaje en el sitio web del modo oscuro con bajo contraste.

¿Hay alguna solución? ¿Y dónde debería comenzar?

Decisiones sobre el modo oscuro, el sitio web de la organización no es una cuestión de "hacer" o "no hacer", pero es una cuestión de "cómo ser correcto y apropiado". La mejor solución es dejar que el usuario se elija. (Opción togada por el usuario) con un botón para cambiar entre el modo de luz y oscuro, pero incluso entonces, el modo predeterminado que elija sigue siendo importante. Y esta es una forma de comenzar:

1. Analice su usuario y marca primero (analizar primero):
   • ¿Quién es el público objetivo? ¿Qué industria funcionan? ¿Existe un comportamiento principal de uso en Internet?
   • ¿Cuál es la personalidad de la marca de la marca (personalidad de la marca)? ¿Quieres comunicar credibilidad, modernidad, amistad o lujo?
2. Estudie competidores y tendencias (Competencia de investigación y tendencias): consulte cómo los competidores en la misma industria lo hacen y estudian las últimas tendencias de diseño de la UI para encontrar inspiración y precauciones.
3. Diseñado en base a la accesibilidad (diseño con accesibilidad en mente): independientemente del modo, el contraste entre los caracteres y los antecedentes debe ser lo suficientemente alto de acuerdo con los criterios de las Directrices de Accesibilidad W3C (WCAG), que es un estándar internacional que todos deben seguir.
4. Cree prototipo y prueba (prototipo y prueba): antes de escribir un código real, ambos prototipo deben construirse y luego probarse con los usuarios de la muestra para recopilar comentarios reales.
5. Proporcionar usuarios ( proporcionar es tener un botón para que los usuarios puedan cambiar el modo ellos mismos según sea necesario, los expertos del grupo Nielsen Norman sugieren que es la mejor manera.

Comprender la ventaja del modo oscuro para UX es el punto de partida más importante en este proceso.

---

Solicitud de ilustraciones: el diagrama de diagrama de flujo muestra la toma de decisiones de 5 pasos de "Analizar" para "proporcionar alternar" íconos en cada paso para ser fácil de entender.

Ejemplos de lo real que solía tener éxito

La marca de tecnología de clase mundial como Apple es el ejemplo más obvio de usar el modo oscuro de manera inteligente. No solo cambian el fondo a negro. Pero diseñó todos los elementos nuevos de MacOS a iOS, lo que permite a los usuarios elegir el modo deseado o establecer para cambiar automáticamente de acuerdo con los días del día.

Problema: muchos usuarios, especialmente los desarrolladores y el creador de contenido, tienen que trabajar en la pantalla de la computadora durante mucho tiempo por la noche. Causando pestañas y dolor en los ojos desde el modo de luz

Método: Apple ha desarrollado un modo oscuro que no es solo el cambio de color. Pero es un buen ajuste de "paleta de colores". El texto se ajusta para ser grueso y apropiado. El icono y varios elementos rediseñados para ser claramente visibles en el fondo oscuro. Mientras aún mantiene la belleza y la amabilidad a los usuarios por completo y lo más importante es "dejar que el usuario controle" a través del botón Switch

Resultado: el modo oscuro se convirtió en una de las características más apreciadas. Ayuda a reducir el ojo (fatiga visual) crea una excelente experiencia. Y enfatizando la imagen de Apple como una marca que le da importancia a los usuarios y presta atención a cada detalle del diseño que afecta directamente los efectos del modo oscuro en el UX del sitio web en su conjunto y hace que la marca se vea moderna y un líder en los ojos de los consumidores.

---

Solicitud de ilustraciones: compare imágenes de la pantalla de interfaz de Apple entre el modo de luz y el modo oscuro que es hermoso y práctico. Con una sonrisa satisfactoria mientras usa con poca luz

Si quieres seguir, ¿qué hacer? (Se puede usar de inmediato)

Para una organización que decide agregar una función de modo oscuro al sitio web, esta es la lista de verificación que puede usar de inmediato. Ya sea que lo haga usted mismo o envíe al equipo de desarrollo:

• [] Defina el conjunto de color para el modo oscuro (define la paleta de colores del modo oscuro): no solo usando completamente negro ( #000000). Considere el gris oscuro (como #121212), que será más cómodo. Y establezca el color para letras, enlaces y botones CTA para tener un contraste apropiado
• [] Diseñe el estado del nuevo botón y el enlace (estados de componentes de rediseño): botones o enlaces Cuando el mouse (Hove), al hacer clic (activo) y cuando se deshabilitan (deshabilitado), debe ser claramente visible en el modo oscuro.
• [] Compruebe imágenes e iconos (imágenes e íconos de auditoría): es posible que se deban ajustar imágenes con fondos transparentes (transparentes), como usar borde ligero en el fondo oscuro.
• [] No olvide la sombra (considere las sombras): la sombra de la caja utilizada en el modo de luz puede no verse en el modo oscuro. Es posible que deba cambiar a otras técnicas como el borde utilizando un color ligeramente más brillante para crear una dimensión.
• [] Implemente el interruptor de alternativa: cree un botón que permita a los usuarios cambiar entre dos modos fácilmente. Y debe hacer que el sitio web "recuerde" la configuración del usuario para la próxima visita
• [] Prueba en todos los dispositivos (prueba, prueba y prueba nuevamente): verifique la pantalla y el uso real en escritorio, tableta y móvil, tanto vertical como horizontal. Para garantizar que la experiencia sea suave en cada situación

Si necesita expertos en el desarrollo de estas características, el servicio de desarrollo de sitios web corporativos está listo para dar consejos y hacer realidad sus ideas.

---

Solicitud de ilustraciones: imagen de lista de verificación hermosa y moderna que muestra 6 elementos arriba con iconos en cada elemento. Para que parezca interesante y fácil de usar

Preguntas que las personas tienden a preguntarse y las respuestas que se limpian

Pregunta: El modo oscuro ayuda a guardar baterías, ¿verdad?
Respuesta: Verdadero, solo con la pantalla OLED o AMOLED (que se usa en la mayoría de los teléfonos inteligentes nuevos) porque este tipo de pantalla "cerrará" los píxeles en una parte completamente negra. Hacer que no use energía, pero para la pantalla LCD o IPS (utilizada en la computadora y la mayoría de los cuadernos) no ayudará a ahorrar baterías. Porque la pantalla todavía tiene que encender la luz de fondo todo el tiempo

Pregunta: Entre el modo oscuro y el modo de luz, ¿cuál es mejor para los ojos?
Respuesta: No hay respuesta fija. Dependiendo de la luz y el modo oscuro individual, adecuado para entornos oscuros. Ayuda a reducir el resplandor y la palma, pero el modo de luz (caracteres oscuros sobre fondos de color claro) a menudo hacen que leer sea un texto largo. Mejor en condiciones de luz normal para la mayoría de las personas, la mejor solución es dejar que el usuario elija.

P: El modo oscuro afecta el SEO?
Respuesta: Directo, ningún Google no le da a un sitio web con un sitio web de modo oscuro más alto, pero "indirectamente" definitivamente es si su modo oscuro ayuda a mejorar la experiencia del usuario, reducir la velocidad de rebote y aumentar el tiempo en el usuario en la página web (tiempo en la página).

Pregunta: ¿Necesitamos diseñar todos los nuevos sitios web para hacer el modo oscuro?
Respuesta: No es necesario hacer todo de nuevo. Pero debe tener un plan sistemático y un diseño "más" si la estructura del sitio web original ya es buena, agregar el modo oscuro es crear una segunda hoja de estilo CSS para este modo. Pero si desea que los mejores resultados tengan expertos para ayudar en este proceso asegurarán que su diseño de UX/UI

---

Solicitud de ilustraciones: icono de signo de interrogación grande y tienen respuestas pequeñas de preguntas rodeadas en gráficos interesantes y fácil de leer

Resumen para ser fácil de entender + quiero intentar hacer

En resumen, Dark Mode, el sitio web de la organización no es solo una tendencia de belleza superficial, sino que es un "poderoso" para mejorar la experiencia del usuario (UX) y el concepto de marca (percepción de la marca). La clave no es elegir si usar un modo oscuro o brillante, pero es "comprender a los usuarios" y "dar alternativas" a ellos.

La inversión es correcta para hacer el modo oscuro, teniendo en cuenta la usabilidad, la accesibilidad. Y el objetivo de la marca es mostrar atención en detalle que pueda marcar la diferencia y hacer que su marca se destaque sobre los competidores no permita que las vacilaciones bloqueen la oportunidad de crear una gran experiencia para sus clientes.

Es hora de explorar y aplicar esta idea al sitio web de su organización hoy. ¡Tener realmente la ventaja y enfatizar el liderazgo en la era digital!

---

Solicitud de ilustraciones: la última imagen de la última imagen muestra la pantalla de teléfono inteligente y computadora portátil que abre el sitio web de su organización, con el botón de alternancia cambiando el modo Light/Dark, que es claro y con un gráfico de conversión. Transmite un resultado comercial tangible

‍