¡Traemos novedades de idealista! Nos alegra mucho anunciar que ya se pueden utilizar las aplicaciones iOS y Android en modo oscuro. Ahora seguimos trabajando para que este nuevo modo llegue próximamente a nuestra web.

¿Por qué es importante el modo oscuro?

El modo oscuro es una funcionalidad ya esperada en cualquier app de 2024. En idealista recibimos multitud de solicitudes de nuestras usuarias, no solo como una preferencia, sino como una necesidad. Al reducir la luz blanca en pantalla, el modo oscuro ayuda a mitigar la fatiga visual, especialmente en condiciones de poca luz o durante el uso nocturno.

Muchas personas con fotosensibilidad o problemas de visión encuentran más cómoda la lectura en modo oscuro, convirtiéndolo en una herramienta de accesibilidad que beneficia a un mayor número de personas. Y como ventaja adicional, su uso puede reducir el consumo de batería entre un 40% y 80% en dispositivos con pantallas OLED.

Este modo de visualización adquiere mayor relevancia en aplicaciones como idealista, donde al analizar los datos distribuidos por horas, observamos que la tasa de conversión entre las 0:00 y las 2:00 era bastante buena en comparación con las visitas promedio. En ese rango horario, el modo oscuro desempeña un papel muy importante, ya que es probable que el tráfico se produzca en entornos de baja iluminación.

Definiendo las paletas de color

Diseñar un modo oscuro va más allá de invertir colores y cambiar blanco por negro y viceversa. Existen dos conocidas vías para definir el modo oscuro: ampliar la paleta de color para que haya suficientes en ambos modos y tomar algunos de ellos para el modo claro y otros para el modo oscuro, tal y como hace Material (Google), o crear una paleta totalmente nueva y activar una u otra, como hace Sepctrum (Adobe).

En nuestro equipo decidimos hacer una mezcla de ambas: creamos una paleta nueva para el tema oscuro, conservando algunos colores como el de marca, y asignamos nuevos colores para los casos donde no funcionaba esta nueva paleta.

Utilizando el algoritmo APCA (Advanced Perceptual Contrast Algorithm) definimos la nueva paleta de colores cumpliendo con los estándares de accesibilidad en contraste. Se trata de un nuevo algoritmo desarrollado por Myndex que prioriza el tratamiento del color en base a cómo lo percibe el ojo humano, y no como lo interpreta una máquina. El algoritmo actual de la WCAG 2 ofrece criterios demasiado simples que dan lugar a falsos positivos y negativos, se espera que este nuevo algoritmo se incluya en la WCAG 3.

Ajustes y decisiones de diseño

En el camino, tomamos algunas decisiones hasta dar con la primera propuesta:

• Nuestro color de marca es muy vibrante y desafía la esencia del modo oscuro, por ello sustituimos los fondos decorativos de color lima por tonos grises.
• Elegimos grises muy oscuros en lugar de tonos dimmed o atenuados. Buscamos oscuridad y contraste.
• Elementos semánticos de información, errores o alertas seguirían utilizando su mismo color, pero más apagado.

En estas primeras pruebas, lo primero que nos llamó la atención es que el icónico color lima de idealista desaparecía por completo. Al quitar los fondos de este color el magenta pasaba a una posición dominante, haciendo que el producto perdiese conexión con la marca, algo que no nos interesaba.

Para resolverlo, decidimos reemplazar el color de acento (magenta) por el de marca (lima) en la versión oscura. De esta forma, utilizamos el lima en botones y llamadas a la acción para destacar los elementos importantes y proteger nuestra identidad visual.

Infraestructura de Design Tokens

Para una correcta implementación del modo oscuro, fue crucial tener una arquitectura de tokens robusta. Esta arquitectura se encarga de llevar nuestras decisiones de diseño a código y crear un lenguaje compartido entre desarrollo y diseño.

Hicimos numerosas revisiones de interfaz en iOS y Android para asegurar que el mapeo de color con design tokens era correcto. El objetivo era llamar a los colores a través de alias tokens para dar soporte al theming, es decir, habilitar el cambio entre los modos claro y oscuro.

Excepciones y component tokens

Con el nuevo esquema de color funcionando en las pantallas principales, revisamos otras en busca de elementos que no funcionasen en modo oscuro. Para resolver estos casos creamos un nivel de tokens más específico, al que llamamos component tokens, que no permitía hacer excepciones a las reglas generales.

Estos son algunos ejemplos de elementos que no funcionaban con definición del modo oscuro:

El toggle switch nativo de iOS utiliza el manejador en blanco incluso en modo oscuro. Esto hace que no tenga suficiente contraste con el fondo activo, por lo que tuvimos que oscurecerlo.

Al sustituir los tonos lima por grises en los mensajes del chat, surgió un problema: no quedaba claro quién era el emisor y quién el receptor. Para solucionarlo, aplicamos un tono lima más oscuro.

Ilustraciones para modo oscuro

El universo gráfico de idealista también tuvo que adaptarse. Aprovechamos a crear nuevas reglas y simplificar el uso del color en las ilustraciones con el fin de que se integrasen mejor en la interfaz oscura, sin robar protagonismo al contenido principal.

Cómo activar el modo oscuro en idealista

Si ya tienes descargada la app de idealista en tu dispositivo, solo tienes que actualizar la última versión y ya podrás elegir tu preferencia de visualización entre modo claro, modo oscuro o modo predeterminado (este modo usa el mismo ajuste que hayas configurado en tu dispositivo).  También puedes configurarlo en cualquier momento desde Menú > Ajustes > Apariencia.

Muchas gracias por leer, ahora te animamos a probar el modo oscuro en nuestra app. ¡Todo el feedback es bienvenido!

idealista iOS | idealista Android