Life in Motion: una guía para animar visualizaciones de datos móviles

En estos días, con la tecnología impulsando la recopilación y producción de cantidades masivas de datos, es relativamente fácil obtener información que pueda guiar sus decisiones diarias. Las aplicaciones móviles se basan en la frecuencia cardíaca y otros datos biométricos para realizar un seguimiento de los objetivos de salud y ejercicio. Proporcionan datos en tiempo real sobre inversiones, gastos personales y presupuestos. Incluso pueden ayudar a los padres a evaluar los patrones de alimentación y sueño de sus recién nacidos.

Para comprender el gran volumen de datos disponibles, no busque más allá de los informes anuales del diseñador Nicholas Felton elaborados a partir de sus propios datos personales. Con tanta información al alcance de la mano, lo difícil es encontrarle sentido.

Aquí es donde la animación puede ayudar. Los datos animados los hacen más comprensibles, atractivos y útiles, especialmente en las pantallas pequeñas de los dispositivos móviles. Con la animación, los números se vuelven más fáciles de digerir y las tendencias, los patrones y las narrativas que de otro modo se pasarían por alto se vuelven evidentes. La interactividad en tiempo real con estas imágenes promueve el compromiso y permite a los usuarios explorar los datos más profundamente.

Al mismo tiempo, la animación excesiva o equivocada puede frustrar su propósito, oscureciendo en lugar de iluminar las percepciones. Al animar visualizaciones de datos móviles, los diseñadores deben usar principios de diseño de movimiento y evitar errores comunes.

Los beneficios de animar visualizaciones de datos móviles

La animación no es un mero adorno para las visualizaciones de datos. Motion ofrece innumerables beneficios y debe aplicarse con el objetivo de lograr un resultado específico.

Ayudar a los usuarios a percibir las tendencias y los cambios es una ventaja clave del uso del movimiento en las visualizaciones de datos. El difunto académico Hans Rosling es conocido por una animación en la que trazó datos de vida útil e ingresos para mostrar los cambios en la salud y la riqueza de docenas de países durante décadas. Es una animación cautivadora que aclara las tendencias a lo largo del tiempo y contrarresta las percepciones comunes sobre el desarrollo global.

La investigación sugiere que animar gráficos estáticos puede mejorar la percepción gráfica y aumentar el interés del espectador. En lugar de mostrar un gráfico de una sola vez, por ejemplo, los elementos pueden ingresar a diferentes velocidades para no abrumar al espectador con demasiada información. Los movimientos “ayudan a mostrar o mejorar la jerarquía visual de los elementos, o la orientación de los ejes y cómo se muestran los datos”, dice Tetiana Donska, diseñadora de UI/UX con sede en Londres en la red Toptal.

La animación también ayuda a los diseñadores a hacer un uso eficiente de las pantallas de los dispositivos móviles. “El movimiento en las visualizaciones de datos ayuda a crear conciencia de las transiciones entre diferentes estados y brinda más información sin saturar la experiencia del usuario”, dice Donska. La interactividad en tiempo real puede mantener aún más una interfaz limpia porque los usuarios pueden explorar los datos a través de gestos como tocar, arrastrar, desplazarse y hacer zoom. Por ejemplo, los usuarios pueden deslizar un dedo a lo largo de un eje para revelar diferentes valores o tocar para revelar números.

La incorporación de actualizaciones en tiempo real en visualizaciones de datos animadas puede hacerlas aún más atractivas para los usuarios. Olajide Akinpelu, un diseñador de UI/UX de Toptal con sede en Nigeria, dice que ver la actualización de datos ante nuestros ojos ayuda a la cognición humana. Un usuario que actualice datos estáticos tendrá más dificultades para detectar cambios; el movimiento en tiempo real les ayuda a identificar información que de otro modo podrían pasar por alto.

Por supuesto, hacer que las transiciones y los movimientos parezcan naturales sin distraer al usuario es más fácil decirlo que hacerlo.

Técnicas de Animación y Visualización de Datos para Móvil

La visualización de datos no se limita a conjuntos de datos complejos representados por tablas y gráficos tradicionales. Incluso un botón de "me gusta" que cuenta el sentimiento del usuario en una aplicación social es una forma de visualizar datos.

Independientemente de la complejidad, un conjunto común de principios y técnicas entra en juego al animar visualizaciones de datos. Las cuatro técnicas en las que nos centramos en este artículo: cambio de valor; relajación, compensación y retraso; paternidad; y zoom: tiene como objetivo imbuir el movimiento en el entorno UX con la naturalidad del movimiento en el mundo real, conforme a las expectativas innatas de los usuarios y los sentidos de continuidad y narrativa. Después de todo, el objetivo es ayudar a los usuarios a comprender los datos abstractos, no solo para atraerlos o deleitarlos.

Cambio de valor

Cuando se muestran cambios de valor con animación, en lugar de mostrar un número estático, un contador numérico avanza o una barra sube antes de aterrizar en una figura final. Esta puede ser una forma poderosa de transmitir el progreso o el crecimiento, o la falta de ellos. También significa que los datos están sujetos a cambios y, en algunos casos, los valores animados indican interactividad.

Las visualizaciones de cambio de valor prevalecen en el panorama móvil, incluidas las aplicaciones de fitness, educación y finanzas. En una aplicación de aprendizaje de idiomas, por ejemplo, una barra puede subir gradualmente hasta llegar a una puntuación final en una prueba. El cambio de valor muestra el progreso y puede proporcionar al usuario una sensación de logro, alentándolo a continuar con el camino del aprendizaje.

Aplicar un cambio de valor a las líneas de un gráfico es otra forma de demostrar los cambios a lo largo del tiempo. En un gráfico de barras que muestra el producto interno bruto (PIB) de diferentes países, por ejemplo, el movimiento puede revelar las trayectorias de las economías nacionales entre sí. Estos elementos visuales se denominan carreras de gráficos de barras.

Aceleración, compensación y retraso

En el mundo físico, un objeto no puede pasar instantáneamente de cero a 20 mph. En el mundo digital, sin embargo, puede crear movimiento sin aceleración ni desaceleración. Pero eso no significa que debas hacerlo. Para el ojo humano, dicho movimiento parece poco natural, por lo que es beneficioso dar a los elementos gráficos velocidades de entrada y salida naturales, lo que se conoce como aceleración.

Compensar la introducción de diferentes elementos de la interfaz de usuario y retrasar su velocidad puede indicar a los usuarios que se muestran distintas variables y puede ayudar a establecer una jerarquía entre ellas. En una aplicación de negociación de acciones, por ejemplo, el valor de las acciones de un usuario puede aparecer primero, seguido de los índices generales. La compensación y el retraso facilitan a los usuarios la comprensión de números y gráficos que si se presentaran todos a la vez.

Crianza de los hijos

Parenting crea relaciones entre los componentes de la interfaz de usuario. Cuando cambia una propiedad (como la posición, la escala o el color) en el elemento principal, cambia una propiedad en el elemento secundario. Por ejemplo, en un gráfico de líneas, si un punto en una línea es el elemento principal, a medida que el usuario arrastra el punto, podría ver el cambio de valor (el objeto secundario).

La crianza de los hijos es una forma eficaz de aumentar la interactividad y crear jerarquía.

Zoom

El zoom permite a los usuarios pasar fácilmente de una vista de pájaro de los datos a una más granular. Puede ser una técnica útil cuando se presentan grandes conjuntos de datos, del tipo que normalmente se ve en el escritorio. Una aplicación de seguimiento de acciones, por ejemplo, puede cargar una vista semanal de los precios de una acción determinada y permitir a los usuarios acercar o alejar para revelar datos diarios o anuales.

Una de las formas más comunes de visualización de datos son los mapas, que se utilizan ampliamente en aplicaciones de fitness, bicicletas compartidas y transporte compartido. El zoom es una herramienta fundamental en este contexto, ya que los límites de la pantalla del móvil reducen en gran medida lo que se puede presentar en una sola imagen.

Trampas del diseño de movimiento que se deben evitar

Edward Tufte, el hombre al que se atribuye haber escrito literalmente el libro sobre la visualización moderna de datos, tenía una máxima simple: "Por encima de todo, muestre los datos".

Enfócate en transmitir información. Los atributos como el color, la forma y el movimiento solo deben usarse para mejorar la comprensión de los datos. Los elementos visuales superfluos, o "chatarra de gráficos", como se refirió a ellos Tufte, restan valor a este propósito.

En dispositivos móviles, donde los usuarios de pantalla pueden ser propensos a distraerse, demasiadas partes móviles en una visualización de datos pueden ser abrumadores.

"Con los dispositivos móviles, ya tiene un factor de forma pequeño que exige atención", dice el diseñador veterano Darrell Estabrook, quien se unió a la red de Toptal en 2019. Para cualquier flujo de trabajo móvil, sin pasos bien diseñados y discretos, "el usuario sale mal".

Estabrook agrega: “Para toda la visualización de datos, debe preguntar qué información le está dando al usuario para que pueda tomar la siguiente decisión… presionar un botón o escribir un correo electrónico o profundizar más. ¿Qué necesita hacer para proporcionarles esa [información]?”

Puede diseñar visualizaciones de datos móviles enfocadas y efectivas evitando estos escollos:

Visuales que consumen muchos recursos y no agregan mucho valor

La representación de movimiento en imágenes puede consumir muchos recursos en el back-end y podría afectar negativamente el rendimiento y la experiencia del usuario en el front-end. Grandes conjuntos de datos o datos que requieren una codificación extensa elevan este riesgo. Antes de poner los recursos en la construcción de tales imágenes, los equipos de diseño y los clientes deben tener claro el resultado deseado, y que valdrá la pena el esfuerzo.

Animación llamativa o superflua

Las visualizaciones de datos animados deben respaldar el propósito de una aplicación. ​​Una aplicación de aprendizaje de idiomas podría usar el movimiento para enfatizar el progreso de los usuarios, mientras que una aplicación de inversión podría resaltar sutilmente los datos procesables. Sin embargo, independientemente de la naturaleza de la aplicación, en la mayoría de los casos, los diseñadores deben evitar animaciones llamativas, como confeti que cae o fuegos artificiales. No solo corren el riesgo de gamificar las imágenes, lo que podría conducir a un compromiso poco saludable con una aplicación, sino que también pueden oscurecer o exagerar lo que realmente transmiten los datos.

Imágenes demasiado interactivas

Trabajar con datos requiere un grado de precisión, y los usuarios necesitarán una porción decente de la pantalla de su teléfono inteligente (generalmente se considera de 7 a 10 mm como la mejor práctica) para ejecutar gestos con éxito. Demasiada interactividad podría resultar engorroso y frustrante. Es beneficioso priorizar una acción a la vez.

Estilo inconsistente

Las visualizaciones de datos deben encajar con el estilo y la funcionalidad general de una aplicación, algo a lo que Apple se refiere en sus Pautas de interfaz humana como integridad estética.

Según Akinpelu, el diseñador de UX/UI con sede en Nigeria, mantener la consistencia estilística “en el tipo de transición que usa, el tipo de animación, la combinación de colores” ayuda a los usuarios a navegar por los conjuntos de datos.

Mantener el ritmo de los datos en aumento

Los datos se han convertido en un elemento fijo en nuestras vidas, desde el trabajo y la escuela hasta la salud y las finanzas. Con teléfonos inteligentes cada vez más sofisticados y la expansión de la conectividad 5G, el volumen de datos, y el potencial para aplicarlos, seguramente también crecerá.

La animación puede ser una herramienta importante para ayudar a las personas a comprender toda esta información. Motion facilita a los usuarios la comprensión de métricas, tendencias y relaciones clave. Sin embargo, al igual que con cualquier característica de UX, la animación puede usarse en exceso o mal, lo que en última instancia podría hacer que los datos sean menos comprensibles. Mediante el uso de principios y técnicas de diseño de movimiento, los diseñadores pueden crear visualizaciones de datos móviles animadas que sean atractivas y perspicaces.

Lecturas adicionales en el blog de diseño de Toptal

• Convincente y conmovedor: una guía de principios de diseño de movimiento
• El impacto cada vez mayor de la industria del diseño de movimiento
• Deleite a los usuarios con estas mejores prácticas de diseño de aplicaciones móviles