Modo oscuro

¿Qué es el modo oscuro?

Coges el teléfono en la cama antes de dormir, con la luz apagada, y la pantalla blanca te ilumina la cara como una lámpara. Para ese momento existe el modo oscuro.

El modo oscuro (Dark Mode) es una forma de mostrar las pantallas de un sitio web o una aplicación con fondo oscuro y textos e iconos claros, en lugar del texto negro sobre fondo blanco de siempre. El contenido sigue igual: los mismos botones, los mismos menús, las mismas palabras. Solo cambian los colores, para que la pantalla sea suave con la vista cuando hay poca luz a tu alrededor.

También se le llama modo nocturno o tema oscuro. Hoy viene incluido en los sistemas de teléfonos y ordenadores y en la mayoría de las aplicaciones que usamos a diario, por eso la gente lo espera de cualquier web o app nueva.

¿Cómo funciona el modo oscuro?

El teléfono y el ordenador tienen un ajuste general en el que el usuario elige entre la apariencia clara y la oscura, y algunos equipos cambian de una a otra solos al anochecer. Un sitio o una aplicación bien hechos leen ese ajuste y se abren con los colores adecuados desde el primer momento.

Hay una segunda forma. Un pequeño botón dentro del sitio o la app, muchas veces con forma de sol y luna, permite al usuario cambiar de modo por su cuenta. Después, el sistema recuerda su elección y no vuelve al modo claro en cada visita.

Por dentro, el diseñador prepara dos grupos de colores para todo lo que hay en pantalla: el fondo, el texto, los botones, los bordes y las tablas. Luego el sistema usa el grupo que toca según el modo. Es como una habitación con dos tipos de luz, una para el día y otra para la noche, mientras los muebles siguen en su sitio.

¿Por qué te importa el modo oscuro?

Si tienes un sitio web o una aplicación, tus visitantes lo abren a distintas horas del día. Muchos navegan de noche. El modo oscuro cambia mucho su experiencia en esas horas:

• Comodidad para la vista con poca luz: una pantalla oscura no deslumbra en una habitación sin luz, y el lector puede terminar el artículo o mirar productos durante más tiempo sin molestias.
• Ahorro de batería: en los teléfonos con pantalla OLED, cada punto negro está casi apagado y no gasta energía. Por eso el modo oscuro consume menos batería en estas pantallas.
• Menos cansancio para quien trabaja muchas horas: el empleado que pasa el día frente a un panel de control o un sistema de gestión nota la diferencia al final de la jornada, sobre todo en los turnos de noche.
• Respeto por la elección del usuario: quien eligió la apariencia oscura en su teléfono y abre tu web toda blanca sentirá que la web no le presta atención.

¿Quiere decir esto que el modo oscuro siempre es mejor? No. Al sol o en una oficina bien iluminada, mucha gente lee con más facilidad el texto negro sobre blanco. Lo importante es que el usuario pueda elegir.

Diferencias entre el modo claro y el modo oscuro

Cómo diseñar un modo oscuro cómodo para la vista

Invertir los colores sin más suele dar un mal resultado. Un modo oscuro con el que la gente se sienta a gusto necesita muchas decisiones pequeñas:

1. Gris oscuro en lugar de negro puro: el negro total junto al blanco brillante crea un contraste duro que cansa la vista. Un fondo gris oscuro o azul marino es más suave.
2. Texto claro pero no brillante: el blanco con un ligero tono gris se lee mejor que el blanco puro.
3. Contraste suficiente: el contraste es la diferencia entre el color del texto y el del fondo. Si es muy pequeño, cuesta leer, sobre todo a las personas mayores y a quienes ven poco. La norma de accesibilidad WCAG marca un mínimo para esta diferencia.
4. Colores de marca más suaves: un azul o un rojo muy fuerte se ve chillón sobre fondo oscuro, así que necesita un tono algo más tranquilo.
5. Logotipo e imágenes que sirvan para los dos fondos: un logotipo negro desaparece sobre fondo oscuro, por eso necesita una versión clara. Las fotos muy brillantes pueden necesitar un pequeño ajuste.
6. Tablas y gráficos: en los paneles de control hay que revisar los colores de las barras y las líneas para que se entiendan en los dos modos.

Errores comunes al añadir el modo oscuro

• Activar el modo oscuro en la página de inicio y olvidar otras páginas, como la de pago o la ventana de inicio de sesión, que aparecen blancas de repente.
• Textos grises muy claros sobre fondo oscuro que casi nadie puede leer.
• No guardar la elección del usuario, de modo que la web vuelve al modo claro cada vez.
• Ignorar el ajuste del dispositivo y obligar a todos a usar un solo modo.
• No probar el modo oscuro en teléfonos reales antes del lanzamiento, aunque los colores se ven distintos de una pantalla a otra.
• Añadirlo al final del proyecto, con el diseño ya terminado, y que acabe siendo un parche en lugar de una parte de la interfaz.

El modo oscuro en las webs y apps que creamos

En Linkysoft planificamos el modo oscuro desde el primer día del diseño, no cuando ya está terminado. Cada sitio que creamos con nuestro servicio de diseño y desarrollo web trae modo oscuro integrado, soporte para árabe y escritura de derecha a izquierda (RTL) y la norma de accesibilidad WCAG 2.2, y lo probamos en teléfonos reales antes del lanzamiento.

En el desarrollo de aplicaciones móviles diseñamos cada app desde cero con modo claro y modo oscuro y pantallas accesibles, para iPhone y Android. Después la publicamos en App Store y Google Play y nos encargamos de sus actualizaciones.

¿Tu proyecto es un sistema de gestión que tu equipo usa todo el día, como un sistema de ventas, de inventario o de recursos humanos? Entonces lo construimos con nuestro servicio de aplicaciones web y sistemas de gestión, a la medida de cómo trabaja tu empresa, y funciona en todos los dispositivos. Aquí la comodidad de la vista merece un lugar en el plan, porque esa misma pantalla está abierta delante del empleado ocho horas o más.

¿Estás pensando en una web o una app nueva? Empieza con una consulta gratuita con nosotros y veremos juntos lo que tus usuarios necesitan de día y de noche.