Siendo un gran fanático de este tema en el campo de la experiencia de usuario y el diseño de interacción, ya he dado algunas ideas sobre el tema aquí. Respuesta de Marina Yalanska a ¿Cuáles son los beneficios del fondo oscuro en el diseño de la interfaz de usuario? y también dio una visión más profunda del problema en los artículos llamados Light and Darkness in UI. Cuestion de elección. El | Tubik Studio y Dark Side of UI. Beneficios del fondo oscuro, así que aquí haré eco de algunas ideas básicas de ellos para proporcionar la respuesta aquí, según el ejemplo proporcionado que muestra las opciones de fondo claro y oscuro.
Se generan muchas discusiones aquí y allá sobre el esquema de color que es más efectivo en la creación de buenas interfaces. Aunque muchos participantes de este gran debate intentan encontrar una solución universal, aquí en Tubik Studio suponemos que la cura no existe. Cada proyecto en diseño de interfaz es altamente individual y necesita un enfoque reflexivo que considere todos los pros y los contras.
Hay varios aspectos vitales que deben tenerse en cuenta en las etapas iniciales de elegir el esquema de color general para un sitio web o aplicación, que incluyen claridad, legibilidad y contraste, accesibilidad, capacidad de respuesta, entorno y condiciones de uso y preferencias especiales del público objetivo.
Definir y analizar el público objetivo es lo primero que debe hacer el diseñador trabajando sobre soluciones de diseño efectivas. Saber quiénes son sus usuarios potenciales y qué querrán obtener de su producto es la base sólida para una interfaz útil, útil y atractiva. A las personas de mediana edad y mayores les gustan las interfaces con fondos claros, ya que las encuentran más intuitivas y navegables. Las personas más jóvenes pueden encontrar interfaces bien realizadas con un fondo oscuro más original y elegante, y puede ser la forma de involucrar a los usuarios objetivo. Los adolescentes y los niños pueden sentirse atraídos por interfaces pensadas con fondos brillantes y detalles divertidos. Ciertamente, depende profundamente de la naturaleza de la funcionalidad y el contenido del producto; sin embargo, las preferencias típicas del público objetivo también pueden ser una buena pista para tomar decisiones eficientes.
Página de destino de recetas de mariscos
Al concentrarnos más en los beneficios de la interfaz de usuario oscura, revisemos los aspectos mencionados con más detalles.
El aspecto de la legibilidad
Uno de los famosos gurús del diseño de la experiencia del usuario, Jacob Nielsen, mencionó: « Use colores con alto contraste entre el texto y el fondo. La legibilidad óptima requiere texto negro sobre fondo blanco (denominado texto positivo). El texto blanco sobre fondo negro (texto negativo) es casi tan bueno. Aunque la relación de contraste es la misma que para el texto positivo, el esquema de color invertido desalienta un poco a las personas y ralentiza un poco su lectura. La legibilidad sufre mucho más para los esquemas de color que hacen que el texto sea más claro que el negro puro, especialmente si el fondo se vuelve más oscuro que el blanco puro. »»
De hecho, la legibilidad es el aspecto vital que influye en el rendimiento del producto y se ocupa no solo del texto. Va más allá de los límites de la copia y significa que todos los símbolos significativos, incluidas letras, números, pictogramas e íconos, deben notarse y reconocerse fácilmente en la interfaz. Por lo tanto, el diseñador que elija a favor del fondo oscuro debe estar preparado para una selección y prueba especialmente exhaustivas de fuentes, iconos e imágenes en diferentes dispositivos.
Página de inicio de SwiftyBeaver
Las mejores prácticas de diseño web y de aplicaciones presentan un montón de soluciones de diseño exitosas que, utilizando un fondo oscuro como base del esquema de color, aún no sufren de baja legibilidad. Para evitar este problema, durante el proceso de diseño es importante recordar:
- el fondo oscuro absorbe parte de la luz de los otros elementos, por lo que debe haber suficiente espacio vacío o “aire” entre los elementos;
- la longitud de la línea puede hacer que los lotes de copias sean más legibles y digeribles para los usuarios;
- los problemas del diseño del espacio interlineal, así como la longitud de la línea de texto, pueden tener un gran impacto en la legibilidad, especialmente en el fondo oscuro, por lo que el tamaño de los párrafos, el interletraje y el encabezado deben considerarse cuidadosamente;
- oscuro no siempre significa negro, por lo que en cada caso particular de diseño es razonable tomarse un tiempo para probar diferentes tipos de fondos oscuros y colores que presentan el contenido, estando abiertos a experimentos;
- sombras, gradientes y resplandores pueden influir en la legibilidad;
- Las fuentes sans-serif son generalmente más legibles, mientras que las fuentes serif se ven más elegantes; La aplicación de este factor en la práctica puede mejorar la legibilidad del contenido.
Tubik Studio | BuonApp
El aspecto del contraste.
Una cosa más interesante a considerar en el aspecto de la percepción visual es la tabla presentada por webdesign.about.com. La tabla que muestra los niveles de contraste y rendimiento de diferentes combinaciones de colores presenta el hecho interesante: la parte negra de la tabla es la única que proporciona un buen contraste con prácticamente todos los colores. Probado cuidadosamente en cada caso particular de la interfaz de diseño, este factor puede ser la razón para probar el fondo oscuro como una variante de la solución de diseño.
En el aspecto de la legibilidad, el contraste también es uno de los factores capaces de hacer que el contenido sea más reconocible y legible.
Una cosa más que mencionar es que el fondo oscuro, de alguna manera más pesado y profundo, generalmente brinda grandes oportunidades para presentar contenido gráfico como imágenes, fotos, ilustraciones, carteles y anuncios. Una buena composición y seguir los principios de la jerarquía visual pueden mejorar significativamente la percepción visual de este tipo de elementos de diseño. Este factor hace que el fondo oscuro sea altamente eficiente y atractivo en los casos en que la interfaz se basa más en material gráfico que en copia.
Snake Battle App
El aspecto de la percepción emocional.
La psicología del color es otra cosa a considerar al elegir un fondo que será no solo el campo de presentación efectivo sino también el portador de su propio mensaje. Los colores oscuros generalmente se asocian con elegancia y misterio. Además, el negro a menudo se asocia con elegancia, formalidad, prestigio y poder. Esa es, tal vez, una de las razones por las que muchas marcas poderosas construyen su presentación visual en torno al esquema en blanco y negro con un dominio oscuro y una presentación e información claras para el destinatario. Jugar este aspecto en el diseño de la interfaz puede proporcionar soporte adicional a otras soluciones de diseño y presentación general del producto.
Tubik Studio | Museu
Tubik Studio | Intercambio de libros
Beneficios del fondo oscuro
De acuerdo con todos los puntos mencionados anteriormente, podemos resumir que el fondo oscuro aplicado en las interfaces de usuario puede proporcionar beneficios esenciales, entre los cuales:
- estilo y elegancia
- sensación de misterio
- aspecto lujoso y prestigioso
- amplio campo de uso de contraste
- soporte de jerarquía visual
- profundidad en la reflexión del contenido presentado
- atractivo visual
Aplicación para recetas y cocina
Puntos a considerar
Por otro lado, el fondo oscuro requiere una atención y un análisis exhaustivos de los detalles más pequeños que pueden perderse en el diseño si no se presentan correctamente. Entre ellos debemos considerar:
- Investigación de usuarios. Las encuestas prácticas, las investigaciones teóricas y los experimentos son fuentes importantes de datos sobre el público objetivo, sus deseos y expectativas, que son la base para elegir esquemas de diseño efectivos y atractivos.
- Investigación de competencia. La investigación de mercado de competidores cercanos da a conocer qué soluciones de diseño ya han sido aplicadas por otros actores en el mercado y este factor influye en la elección de soluciones de diseño originales para que el producto sea notable.
- Pruebas de usuario. El fondo oscuro que es más vulnerable en los aspectos de legibilidad y legibilidad debe probarse rigurosamente en todo tipo de dispositivos y en diversas resoluciones.
- Factor ambiental. El análisis de las condiciones típicas en las que el público objetivo utilizará el producto puede proporcionar razones adicionales a favor o en contra de la opción de fondo oscuro.
- Cantidad de contenido. La cantidad de elementos y bloques que deben aparecer en la pantalla o página web puede influir en la decisión sobre el fondo: los fondos más oscuros que dejan muy poco espacio entre los elementos son extremadamente difíciles de percibir.
- Naturaleza del contenido. El fondo oscuro puede ofrecer un mejor rendimiento para las interfaces basadas en elementos gráficos en lugar de una gran cantidad de copias para leer.
De todos modos, cualquier decisión debe probarse a fondo: solo las pruebas del usuario y el análisis de su resultado pueden probar la eficiencia del esquema de color elegido para el diseño.
Lectura recomendada
Aquí hay algunos artículos e investigaciones útiles sobre el tema:
El impacto de las combinaciones de colores de texto de página web en la legibilidad, la retención, la estética y la intención de comportamiento
Percepción visual: una introducción
Arte y percepción visual: una psicología del ojo creativo
Luz y oscuridad en la interfaz de usuario. Cuestion de elección.
Opciones de color en páginas web: contraste versus legibilidad
Lado oscuro de la interfaz de usuario. Beneficios del fondo oscuro
Lo que se debe y no se debe hacer en el diseño web oscuro
Con suerte, las ideas proporcionadas serán útiles. Como de costumbre, estoy abierto a nuevas comunicaciones.