El significado de la densidad de UI y cómo diseñarla

La densidad de la interfaz está disminuyendo

• Al comparar los sitios web y las aplicaciones actuales con los de los años 2000, es difícil ignorar la tendencia a que el software esté más disperso.
• ¿Qué es la densidad de UI?
  • La densidad de UI no es la apariencia de una interfaz en un momento específico
  • Tiene que ver con la cantidad de información que la interfaz ofrece a lo largo de múltiples momentos
  • Se trata de cómo las decisiones de diseño conectan esos momentos y de cómo eso se relaciona con el valor que ofrece el software

Densidad visual (Visual density)

• Tendemos a pensar primero en la densidad con los ojos
• La densidad visual se refiere a cuánto se puede ver en un espacio determinado
• Una interfaz de software visualmente densa muestra muchos elementos en pantalla
• Una interfaz visualmente poco densa muestra pocos elementos en pantalla
• Ejemplo: Bloomberg Terminal
  • Bloomberg Terminal es un ejemplo representativo de densidad visual
  • En una sola pantalla se muestran sparklines de los principales índices de mercado, distribuciones detalladas de volumen de negociación, tablas con decenas de filas y columnas, titulares de noticias recientes y señales de UI para atajos de teclado y acciones rápidas
• Ejemplos: Craigslist y McMaster-Carr
  • Craigslist es visualmente denso con cientos de enlaces simples y una interfaz de búsqueda y filtros
  • El sitio web de McMaster-Carr comparte elementos de diseño similares y enumera detalles de muchas variantes de producto en un espacio pequeño
• Juicio intuitivo sobre la percepción de densidad
  • Las opiniones sobre la densidad de estos sitios web se forman en apenas unos segundos
  • Estos juicios ocurren de manera rápida e intuitiva, a nivel subconsciente
  • Sin embargo, estas evaluaciones rápidas pueden ser sesgadas y poco confiables
• Imágenes de ejemplo de densidad visual
  • Dos ejemplos de rectángulos:
    • Izquierda: muchos puntos colocados al azar
    • Derecha: la misma cantidad de puntos ordenados limpiamente en filas y columnas
    • La mayoría de las personas siente que la imagen de la derecha tiene mayor densidad
  • Otra imagen de ejemplo:
    • Izquierda: muchos puntos ordenados limpiamente en filas y columnas
    • Derecha: la misma cantidad de puntos ordenados limpiamente pero divididos en dos grupos
    • Aunque haya la misma cantidad de puntos, dividirlos en grupos cambia nuestra percepción de la densidad
• La incertidumbre de la densidad visual
  • En diseño no se puede ser completamente objetivo
  • Pero para hablar de densidad, debemos aspirar a una definición consistente, significativa y útil

Densidad de información (Information density)

• Edward Tufte trata el diseño de gráficas y gráficos en The Visual Display of Quantitative Information

  Toda la tinta en un gráfico debe tener una razón de ser, y esa razón debe ser aportar nueva información.

• Data-ink
  • El data-ink se refiere a la parte útil de una visualización dada.
  • Los elementos visuales que no son datos deben eliminarse.
  • El data-ink no es lo mismo que el espacio que ocupa un gráfico. Se trata de densidad de información.
• Cálculo de la densidad de información
  • La densidad de información puede calcularse dividiendo la cantidad de data-ink en un gráfico entre la cantidad total de tinta necesaria para imprimirlo.
  • La definición de data-ink puede ser subjetiva, pero lo importante es hacer que la proporción se acerque lo más posible a 1.
  • Formas de aumentar la proporción:
    • Añadir data-ink: aportar datos útiles adicionales.
    • Eliminar tinta no relacionada con datos: quitar las partes gráficas que no transmiten datos.
• Ejemplos
  • Ejemplos de gráficos con exceso de tinta y versiones mejoradas que transmiten mucha información con menos tinta.
  • La densidad de información tiene un límite superior: se puede quitar demasiada tinta o añadir demasiada información.
  • La audiencia también importa: los usuarios avanzados pueden preferir alta densidad, mientras que estudiantes de primaria pueden preferir baja densidad.
• Relación entre densidad de información y densidad visual
  • Cuanto mayor es la densidad de información, más densa suele verse visualmente
  • Ejemplo: la visualización de horarios de trenes de E.J. Marey de 1885. Las horas de llegada y salida se muestran en un espacio pequeño y denso.
  • Tufte defendía la densidad de datos y maximizar los datos de manera razonable.
• Shrink Principle
  • Un gráfico puede reducirse mucho de tamaño.
  • La densidad de información es útil para tablas y gráficos.
  • ¿También puede aplicarse a las interfaces?
• Aplicación de la densidad de información en interfaces
  • La información puede aplicarse a la pantalla.
  • Cada parte de la interfaz debería mostrar la mayor cantidad posible de información.
  • Es tentador pensar en la tinta como píxeles, pero las interfaces necesitan divisores, elementos estructurales y señales que ayuden a entender la relación entre los elementos.
  • Existe la tentación de eliminar todo el espacio en blanco siguiendo el Shrink Principle.
  • Pero parte del espacio en blanco tiene un significado tan importante como los elementos visuales. También deben considerarse el papel de las sombras, los degradados y el énfasis por color.
• La densidad de información es un concepto útil, pero solo es una parte del panorama general.
  • Debemos buscar una forma de entender todas las decisiones de diseño de una interfaz de manera más objetiva y cuantitativa.

Densidad de diseño (Design Density)

• El primer reto para definir la densidad desde la perspectiva de las decisiones de diseño es determinar qué cuenta como una decisión.
• Entender las decisiones de diseño
  • En UI, UX y diseño de producto tomamos muchas decisiones, conscientes o inconscientes, para comunicar información.
  • Hay que preguntarse por qué ciertas elecciones transmiten significado, cuáles son simplemente estéticas y cuáles realmente importan.
• Principios de la Gestalt
  • Psicólogos alemanes del siglo XX estudiaron cómo los humanos entienden formas y patrones.
  • El término Gestalt significa “forma”.
  • En esta investigación se descubrieron algunas leyes básicas del diseño:
    • Proximidad (Proximity): percibimos como un solo grupo las cosas que están cerca.
    • Similitud (Similarity): los objetos parecidos en forma, tamaño, color, etc., parecen estar relacionados entre sí.
    • Cierre (Closure): completamos los huecos de un diseño para percibir una forma completa.
    • Simetría (Symmetry): agrupamos las formas simétricas alrededor de un punto central.
    • Destino común (Common Fate): agrupamos juntos los objetos que se mueven de la misma manera.
    • Continuidad (Continuity): percibimos como separados los objetos que se superponen.
    • Experiencia previa (Past Experience): reconocemos formas y patrones familiares incluso en situaciones desconocidas.
    • Relación figura-fondo (Figure-Ground Relationship): distinguimos entre elementos de primer plano y de fondo en una imagen 2D.
• Impacto de los principios de la Gestalt en el diseño de UI
  • Gracias al principio de similitud, el texto con el mismo tamaño, tipografía y color indica el mismo propósito.
  • El principio de proximidad indica que, cuando una gráfica está cerca de un titular, ese titular describe la gráfica.
  • Gracias a la experiencia previa y a la relación figura-fondo, un usuario puede saber de inmediato cómo funciona un interruptor toggle.
• El concepto de densidad de diseño
  • En lugar de enfocarnos en los píxeles, pensamos en decisiones de diseño que transmiten significado de forma intencional usando los principios de la Gestalt.
  • Así como la proporción data-ink de Tufte compara la tinta necesaria en un gráfico con la tinta total, la densidad de diseño compara las decisiones de diseño necesarias con el total de decisiones.
  • Aunque es subjetivo, en las interfaces de usuario suele ser más útil contar decisiones de diseño que contar la cantidad de datos o de tinta.
• Limitaciones de la densidad de diseño
  • Las interfaces de usuario existen para trabajar, disfrutar, perder el tiempo, generar entendimiento y facilitar conexiones personales, entre otras cosas.
  • Debe incluirse toda acción que el usuario realiza a lo largo de su recorrido.
  • La densidad debe considerar todas las acciones del usuario en el espacio y en el tiempo, más allá de componentes, layouts y pantallas.

Densidad temporal

• La cantidad de trabajo que un usuario puede hacer en un tiempo determinado define la densidad temporal.
• El tiempo de carga es el mayor factor de la densidad temporal. Cuanto más rápido responde la interfaz y carga nuevas páginas o pantallas, más densa es la UI.
• Bloomberg Terminal carga los datos casi al instante, por lo que tiene una densidad temporal muy alta.
• Cómo aumentar la densidad temporal
  • Puede aumentarse reduciendo al máximo el tiempo de carga.
  • Pero no todos los tiempos de carga pueden reducirse. Por ejemplo, no se puede cambiar la velocidad de la conexión a internet del usuario ni la velocidad de su CPU.
  • Algunas tareas, como subir archivos, esperar respuestas de soporte al cliente o procesar pagos, dependen de sistemas complejos y variables impredecibles.
• Cómo cambiar la percepción del tiempo
  • Menos de 100 milisegundos: si el tiempo entre dos acciones es menor a 100 milisegundos, se sienten como si ocurrieran al mismo tiempo. En este caso, la animación puede incluso hacer que la app se sienta más lenta.
  • Entre 100 milisegundos y 1 segundo: la conexión entre dos acciones empieza a romperse. Las animaciones y transiciones pueden llenar esa brecha perceptiva.
  • Entre 1 segundo y 10 segundos: la animación por sí sola no basta. Antes de los 10 segundos aumenta la probabilidad de que el usuario abandone la página. En este caso debe usarse un indicador de carga indeterminado para comunicar que el sistema funciona correctamente.
  • Entre 10 segundos y 1 minuto: un indicador de carga indeterminado empieza a sentirse estático si dura más de 10 segundos. En este caso debe usarse un indicador de carga claro, como una barra de progreso, para mostrar con claridad el tiempo restante.
  • Más de 1 minuto: debe permitirse que el usuario abandone la página o haga otra tarea. No poder hacer nada durante más de 1 minuto puede generar frustración. Los procesos largos también tienen más probabilidad de fallar.
• La densidad del tiempo y el espacio
  • La densidad de la UI es solo un medio. El valor de una UI no está en su apariencia, sino en los resultados que permite lograr.
  • La densidad consiste en ofrecer el mayor valor posible con la menor cantidad de tiempo, espacio, píxeles y tinta.

Densidad de valor (Density in Value)

• La densidad de valor se relaciona con el valor de los resultados que obtiene el usuario.
• Ejemplo: suele ser mejor dividir un formulario largo en partes pequeñas y estructurarlo como una interfaz tipo asistente, porque un formulario incompleto no tiene valor.
• Poner todas las preguntas en una sola página puede verse visualmente más denso, pero si toma mucho tiempo completarlo, muchos usuarios no lo enviarán.
• Ejemplo de formulario
  • Un formulario dividido en varias partes, con errores y soluciones claramente señalados.
  • Reducir errores y lograr que los usuarios terminen el formulario puede requerir más espacio y más tiempo en el diseño.
  • Pero si sacrificar densidad visual y temporal hace que el resultado sea más valioso, la densidad total de valor aumenta.
• Aumentar la densidad de valor
  • Puede aumentarse la densidad visual y temporal haciendo el formulario más pequeño, cargándolo más rápido y reduciendo errores.
  • Si esto no reduce el valor para el usuario o para el negocio, la densidad total aumenta.
  • Siguiendo el enfoque de Tufte, deberíamos intentar maximizar la densidad de valor tanto como sea posible.
• Problema de optimización
  • Resolver un problema de optimización puede producir resultados paradójicos.
  • En los inicios de internet, empresas como Craigslist aumentaban la densidad de valor agregando información y mostrándola mediante enlaces de página.
  • Yahoo y Altavista permitían buscar información, pero seguían priorizando la agregación.
  • Google tomó otro enfoque y aprovechó en un cuadro de búsqueda la información obtenida a través de la cadena de enlaces de internet.
  • La información se agregaba por sí sola, y lo único que necesitaba el usuario era acceder a toda la web con una sola entrada de texto.
• El enfoque de Google y Yahoo
  • Si se compara la pantalla inicial de Google en 2001 con la de 2024, la densidad visual es baja, pero la densidad de valor es muy alta.
  • Resultado: el valor de Google creció de $23B en 2004 a más de $2T hoy. Yahoo cayó de $125B en 2000 a $4.8B hoy.
• En muchos casos, la densidad de valor es más importante que la densidad visual.
• Es importante optimizar el diseño y la funcionalidad para maximizar el valor que obtiene el usuario.

Conclusión

• Diseñar teniendo en cuenta la densidad de UI debe ir más allá del aspecto visual de la interfaz.
• Incluye todas las decisiones de diseño explícitas e implícitas que tomamos y toda la información que mostramos en pantalla.
• Debe incluir todas las acciones y el tiempo que el usuario necesita para obtener valor del software.
• Definición concreta de densidad de UI
  • Densidad de UI = valor que el usuario obtiene de la interfaz / tiempo y espacio que ocupa la interfaz
• Elementos importantes
  • velocidad
  • usabilidad
  • consistencia
  • previsibilidad
  • riqueza de la información
  • funcionalidad
• Por qué algunas interfaces tienen éxito: si consideramos todos estos elementos, podemos entender por qué algunas interfaces tienen éxito y otras fracasan.
• Objetivo del diseño
  • Debemos diseñar pensando en la densidad para que las personas obtengan más valor del software que creamos.

[GN⁺]

Opinión de Hacker News

Resumen de comentarios de Hacker News

• Por qué la forma física de un menú de restaurante es mejor que el menú de un sitio móvil

  • Los menús de sitios móviles tienen una UI demasiado compleja, así que muchas veces se termina buscando una foto del menú en Google Maps.
  • Más que intentar redefinir la “densidad”, lo importante es ofrecer la mayor cantidad de información posible sin perder la jerarquía visual.

• La importancia de los datos, priorizando la función sobre la forma

  • En el caso del SS El Faro, el capitán usó datos meteorológicos comerciales con gráficos bonitos y terminó atrapado en un huracán.
  • Más que la belleza visual de los datos, lo importante es su precisión y actualización.

• El concepto de densidad temporal

  • JIRA tiene una alta densidad visual, pero por la velocidad y las múltiples transiciones de pantalla en realidad da una sensación de dispersión.

• Por qué las interfaces móviles son más escasas

  • Los dedos de las personas son relativamente gruesos e imprecisos.
  • Son más lentas que en desktop, así que la carga se divide en varias partes.
  • El formato de desplazamiento vertical y el tamaño de pantalla son limitados.
  • Funciones útiles en desktop son difíciles de implementar en móvil.

• Críticas al aumento de la escasez en la UI

  • El mundo del diseño web se está moviendo hacia un mayor uso del espacio en blanco.
  • Apps como Hulu usan mucho espacio vacío, dificultando el acceso a la información.
  • En vez de seguir tendencias, los diseñadores deberían pensar en lo que realmente es bueno.

• Los problemas de las UI complejas y las tendencias

  • Los diseñadores creen que seguir tendencias ayuda a vender el producto.
  • Hay una tendencia a imitar a personas o marcas famosas.
  • Los diseñadores de UI pueden asumir erróneamente que a los clientes les importan mucho las tendencias y las modas.

• Ventajas de las UI tradicionales

  • Las antiguas aplicaciones B2B de Windows permiten ver mucha información de un solo vistazo.
  • Mientras los sistemas basados en web requieren varias páginas, los sistemas tradicionales permiten ver todos los datos en una o dos ventanas.

• El desequilibrio en la densidad de información

  • Muchas veces el contenido simple de una diapositiva de presentación se captura como una foto en alta resolución.
  • Un paper escrito en LaTeX genera un PDF de poco tamaño, mientras que uno hecho en MS Word ocupa muchísimo más.

• Problemas de la UI móvil

  • En una pantalla pequeña, renovar una receta médica se vuelve imposible.
  • Una UI optimizada con React no funciona bien en pantallas pequeñas.
  • El avance de la tecnología está perjudicando la experiencia de usuario.

• Ejemplo de una UI con falta de densidad

  • La página de productos de inversión de Vanguard es un ejemplo de una UI con poca densidad.