¿Su sitio debería usar el modo oscuro?

Dar una puñalada en la oscuridad está adquiriendo un nuevo significado con el auge del diseño en modo oscuro. Una de las funciones más solicitadas en los últimos años, tanto Apple como Google han hecho de un tema oscuro una parte esencial de su interfaz de usuario. Pero, ¿por qué es esto? ¿Cuales son los beneficios? ¿Hay trampas? Estas son las principales cosas a tener en cuenta al diseñar para el modo oscuro …

¿Por qué usar el modo oscuro?

Estamos en nuestros teléfonos casi constantemente. La persona promedio pasa más de cuatro horas al día en su dispositivo y recorre la altura del monte Everest cada año. Estas estadísticas no son particularmente impactantes, y solo se necesita un paseo por la calle principal o un viaje en transporte público para ver a casi todos con el cuello doblado, mirando fijamente las pantallas. Usamos teléfonos para todo, desde boletos telefónicos hasta entretenimiento, lo que significa que los necesitamos en todo momento. Aquí es donde el modo oscuro puede ayudar …

Puede reducir la fatiga ocular

Además del dolor de cuello y el leve calambre en el pulgar, estar en nuestros teléfonos con tanta frecuencia también es malo para nuestros ojos y se predice que 2 de cada 3 experimentarán fatiga ocular causada por el uso excesivo del teléfono. El modo oscuro está aquí para ayudar con esto, haciendo que la pantalla sea más fácil de ver en condiciones de poca luz, como por la noche o temprano en la mañana. Puede ser mucho más agradable para los ojos, causando menos tensión y es mejor a largo plazo.

Puede ahorrar batería

También se ha descubierto que el modo oscuro mejora la duración de la batería. Según una prueba reciente realizada por PhoneBuff, las baterías del iPhone se pueden extender hasta en un 30%. Sin embargo, esto solo es cierto si los usuarios tienen una pantalla OLED. Aquí es donde los píxeles que son negros no consumen energía, mientras que las contrapartes LCD consumen la misma cantidad de energía sin importar el color que muestren.

Puedes jugar más con diseños

Al implementar el modo oscuro en un sitio, puede jugar con diferentes funciones. Se trata de mucho más que invertir el blanco en negro. Puede jugar con los colores y el aspecto uno al lado del otro y ver cuál se ve mejor. Podría significar que también está inspirado para ciertos cambios con el sitio ligero.

Cosas para considerar

Cambiar al modo oscuro no es una solución mágica y no es adecuado para todos los proyectos. Es importante que considere cuidadosamente el uso del modo oscuro.

Concéntrese en su contenido

El modo oscuro pone más énfasis en las áreas de contenido de su interfaz, lo que permite que cierto contenido se destaque, mientras que las áreas circundantes se desvanecen más en el fondo. Es importante recordar esto al diseñar para el modo oscuro y asegurarse de que el contenido que estará a la vanguardia tenga un enfoque sólido.

Pruebe su diseño tanto en modo claro como oscuro

Ya hemos establecido que no puede simplemente invertir sus colores para hacer que un sitio funcione en modo oscuro. Pero no puede olvidarse de probar sus sitios en ambos modos también; después de todo, no desea que las dos interfaces sean tan diferentes desde el punto de vista estético que no pueda decir que son el mismo sitio o que los usuarios se confunden.

Trabaja tu paleta de colores

Asegúrese de que su paleta de colores predeterminada esté definida por función y no por color; no tenga miedo de agregar nuevos colores que funcionen mejor. En el modo oscuro, trabajará con una paleta de colores que tiene colores de primer plano más claros y colores de fondo más oscuros. Encuentre una combinación de colores suaves que funcione bien y que no tenga demasiados colores; es mejor mantenerlo simple. Si necesita un fondo blanco, asegúrese de que sea un blanco ligeramente más oscuro y más suave, para evitar que el fondo brille contra el contenido oscuro circundante. Las mejores prácticas recomiendan usar un nivel de contraste de al menos 15.8.1 entre el texto y el fondo.

No olvides el texto

Debe asegurarse de que el texto siga siendo legible si el usuario reduce el brillo de la pantalla al mínimo. Después de todo, desea que esté oscuro, pero aún se pueda usar. Compruebe si tiene suficiente contraste y ciertos elementos que están destinados a ser distinguibles entre sí lo son. Asegúrese de que los colores primarios y secundarios estén separados entre sí y sean fáciles de separar. El texto claro sobre un fondo oscuro puede parecer más audaz que al revés, por lo que es posible que desee utilizar un peso más ligero para el modo oscuro: experimente y vea qué se ve mejor.

Asegúrese de que los usuarios puedan cambiar entre el modo normal y oscuro

Algunas empresas han adoptado el enfoque de dejar que el sistema decida cuándo apagar y encender el tema oscuro y regular, cambiando entre los dos cuando lo crea mejor. Esto puede ser frustrante para el usuario y dejarlo sin querer usar más el sitio o el programa. Si bien puede estar diseñado para un uso óptimo en ciertos momentos, permita que los usuarios tomen sus propias decisiones y tengan el control. Algunos pueden preferir usar el modo oscuro o claro todo el tiempo y no quieren cambiar; Permitir a los usuarios activar o desactivar el tema oscuro fácilmente y según sus necesidades. Haga que el cambio sea fácil de encontrar o los usuarios pueden frustrarse y cerrar el sitio.

Asegúrese de que el público objetivo se tenga en cuenta

Antes de saltar directamente a reconstruir una interfaz para el nuevo modo oscuro, es importante considerar quiénes son los usuarios. Si son un público más joven y elegante que usa sus teléfonos más durante el día y la noche, el modo oscuro probablemente sea una buena idea; sin embargo, si son mayores y más tradicionales, probablemente preferirán la interfaz más «similar al papel». . Investigue un poco y averigüe quién usa el sitio y para qué. Los modos oscuros tienden a disminuir la legibilidad, por lo que es menos probable que funcione bien si el sitio en cuestión es un blog o una noticia. Si tiene contenido simple o se enfoca en gran medida en imágenes o videos, el modo oscuro funciona bien: Netflix es uno de los mejores ejemplos de esto.

Escollos del modo oscuro

El modo oscuro no funciona bien para todos los sitios

Si el sitio que está diseñando tiene mucho texto o muchos datos o contiene una gran variedad de elementos como texto, imágenes, datos y menús desplegables, etc., puede ser un desafío diseñarlo. La razón principal de esto es tratar de mantener un contraste suficiente que funcione bien para todos los elementos. Generalmente, todos los colores (excepto los más pálidos, que son difíciles de ver) funcionan sobre un fondo blanco, mientras que un fondo oscuro elimina en gran medida la cantidad que puede usar.

El modo oscuro no siempre es mejor para los ojos

Si bien puede ser mejor para quienes usan el modo normal en situaciones en las que la luz es más suave (como cuando te vas a la cama o te despiertas), se ha descubierto que el modo oscuro no siempre soluciona el problema. En condiciones de luz intensa, el texto puede aparecer descolorido, lo que en realidad aumenta la fatiga visual.

Es posible que el modo oscuro no se alinee con la marca existente

Debido al hecho de que necesita una paleta de colores más restringida y muchos logotipos están diseñados con un fondo blanco en mente, es posible que el modo oscuro no se alinee con la marca existente de una empresa. Cuando la plataforma tiene muchos elementos, esto puede ser un desafío y el sitio puede parecer muy inconsistente al cambiar de modo.

El modo oscuro duplica su carga de trabajo

Como diseñador, ya hay mucho por hacer cuando se trata de diseñar un sitio en modo normal, sin la adición de un sitio completamente nuevo. Si bien sí, los elementos centrales son los mismos, aún será necesario volver a trabajar y modificar para adaptarse lo suficiente al modo oscuro. Este es un segmento adicional del trabajo que puede que no se haya tenido en cuenta.

Foto principal vía Unsplash.