Utilidad de animación en interfaces de usuario (1)

¿Qué papel que juega la animación en la experiencia de usuario?

Manuel Giménez
4 min readJun 20, 2020
UI Animation photo.

Este artículo resume una investigación que llevé a cabo para determinar cuáles son los principales usos de la animación en interfaces gráficas de usuario (también denominadas bajo el acrónimo anglosajón GUI´s).

¿Qué es la animación?

En primer lugar, vamos a definir el término de la animación para conocer en qué consiste a nivel general.

Según los autores Musburger y Wells, la animación es una composición de fotogramas con variaciones de contenido visual en el espacio temporal. Gracias a la visualización consecutiva e interrelacionada, generan una sensación de movimiento en la mente del espectador.

La animación es una variación de contenido visual en una duración temporal que induce una sensación de movimiento en el usuario cuando se visualiza en un transcurso temporal.

¿Dónde se encuentra la animación en diseño de productos digitales?

Antes que nada, vamos a ver la composición usual del desarrollo de productos digitales. En estos casos (que se puede aplicar tanto a productos intangibles como a los tangibles), la experiencia de usuario juega un papel fundamental. También conocido bajo el acrónimo anglosajón UX, la experiencia de usuario abarca un amplio espectro de disciplinas en productos que un usuario está destinado a disfrutar.

Experiencia de usuario está presente en todos los elementos que conciernen la interacción entre el usuario final y una empresa, sus servicios y sus productos (Norman & Nielsen, 2001).

Infografía de las diferentes disciplinas de la experiencia de usuario.
Infografía de las diferentes disciplinas que abarca la experiencia de usuario (Envis Precisely GmbH, 2009).

Pues bien, dentro del campo de la experiencia de usuario (UX), la animación se denomina motion design y se ubica entre las disciplinas del diseño de interacción (IxD) y de interfaz de usuario (UI).

Aunque el papel del motion designer se ve mayoritariamente implicado durante la fase de diseño de un producto, cabe mencionar que su implicación es de igual importancia durante las fases de testeo y mantenimiento, ya que estamos hablando de un producto que requiere una validación por parte de usuarios reales y que además se ejecuta y depende de un software, por lo que es propenso a fallos en un sistema de desarrollo por ciclos denominado SLDC. El objetivo es mitigar estos errores que perjudican a la experiencia de usuario.

¿Para qué sirve la animación en interfaces?

En primer lugar hay que comprender el propósito de la animación en general.

El recurso de la animación se ha usado en el medio audiovisual para establecer una conexión emocional con el espectador y transmitir un mensaje desde una perspectiva diferente.

En interfaces sin embargo, la cosa cambia debido al entorno interactivo entre interfaz e usuario. Veamos los tres principales usos que existen en este entorno.

Información.

Aunque no sea una ciencia exacta, lo cierto es que, mediante la animación, se puede establecer una comunicación entre usuario y máquina en la que se transmite una gran cantidad de información de manera más clarividente y en un periodo de tiempo muy reducido. Ya sea como aprendizaje, navegación, contextualización, navegación, causa y efecto o retroalimentación, lo importante aquí es que la animación ayuda a transmitir información para el usuario con el objetivo de que se encuentre informado en cualquier momento de la interacción.

Atención.

Otro propósito de interés es el de atención. Similar a lo que estamos acostumbrados en banners publicitarios resaltones en internet, este uso se centra en la llamada de atención, pero en beneficio del usuario. Es decir, lo que se pretende con este propósito es destacar elementos en pantalla con el objetivo de manipular el recorrido visual del usuario (denominado eye flow en inglés) y ayudar al individuo a completar tareas. El conocimiento de este propósito dota al diseñador de un tremendo poder de manipulación que puede ser usado con cualquier fin.

Expresión.

Por último, a diferencia de los propósitos mencionados anteriormente donde se espera que ocurra una interacción por el usuario tras visualizar la animación y el individuo es partícipe, nos encontramos con el uso de expresión. Similar a una obra artística, este uso sirve como un deleite artístico para enriquecer visualmente el producto y en el que el usuario se convierte en un sujeto meramente observador. Comúnmente se hace uso de este propósito en felicitaciones animadas y/o destacar la personalidad de marca.

En resumen, deberíamos usar el recurso de la animación en UI´s para añadir valor al producto y facilitar su uso, no por el mero hecho de que parezca más atractivo visualmente.

Recordemos que la animación en interfaz ayuda a solucionar problemas de UX, no a complicarlos.

Para aprender sobre su correcto funcionamiento, recomiendo visitar el siguiente artículo en el que hablo sobre los principios de animación en interfaces de usuario.

Fuentes interesantes:

  • Val Head. Designing Interface Animations. (2016).
  • Google Material Design.

--

--

Manuel Giménez
Manuel Giménez

Written by Manuel Giménez

“Wantepreneur”, product owner, UX/UI designer and QA analyst with some basic front- and back-end knowledge.