La animación en el diseño de interfaces

La animación siempre a formado parte del diseño de interfaces pero su relevancia ha aumentado considerablemente con los avances tecnológicos.


Enciendes tu laptop o tu móvil y lentamente aparece un una barra de carga, un spinner o una animación jugando con la marca de dispositivo — indicadores — que muestra el avance en el arranque del sistema operativo. Posteriormente, pasas de la pantalla de bloqueo o logueo al escritorio o home mediante un fade-out y comienzan a aparecer uno a uno los componentes principales de la interfaz — iconos, barras, imagen de fondo — .

Abres una aplicación. Un punto debajo de la aplicación, la aparición de un elemento en la barra de inicio o una pantalla de carga es la respuesta que obtienes por el clic o tap que acabas de realizar. Hasta que finalmente la aplicación inicia.

Bootscreen de Mac OS X, Windows 10 y bootanimation de Motorola

Sea la rotación del spinner, el desplazamiento progresivo de la barra o el fading de una pantalla, es el cambio lo que nos permite saber que algo esta ocurriendo en la interfaz.


El cambio

La realidad se basa en las relaciones que formamos a traves de los elementos que percibimos. El contraste es la base para formar relaciones. Así como las notas y el ritmo en el que se presentan nos permiten distinguir la armonía del ruido, en la comunicación visual, el color, las texturas, la iluminación y la relación de las formas sobre el espacio, nos permite crear significados. Sin embargo, si el contraste es muy marcado, se puede llegar a perder la continuidad de los significados, sobretodo en procesos largos. Usar la animación puede ser un gran recurso para mantener estas relaciones.


Las animaciones vienen enriqueciéndose conforme se hacen más accesibles los dispositivos que pueden procesar más instrucciones. Mirando los primeros Graphical User interfaces (GUI) podemos observar el súbito cambio de estado a otro en la interfaz. Dos ejemplos de las primeras interfaces gráficas:

Xerox fue la primera compañia en implementar un GUI.

Dada la limitada capacidad de procesamiento de la época, la computadora de Xerox con la Star UI no presenta animaciones. Por ejemplo el caso en el arrastre de un documento sobre el escritorio. La forma de solucionar esta carencia fue cambiar la apariencia del puntero hasta que una vez soltado el botón del mouse éste actualizara su posición.

Después de la visita de Steve Jobs a Xerox, Apple introdujo el GUI en su sistema operativo

Un ejemplo de la implementación de animaciones en el GUI de Apple, después de la visita a Xerox, es el uso de una transición al abrir una carpeta o dispositivo. En el video, cuando se abre el system disk el contorno de un cuadrado se mueve a traves del escritorio y llegando a cierto punto se expande para finalmente mostrar el contenido. A la inversa, cuando se cierra la animación permite observar cual es el origen de la ventana. Establece una relación entre el ícono y la ventana mediante una animación.


El easing

Además del cambio, el tiempo juega un papel importante en la construcción de animaciones. Cuando lanzamos un objeto, la velocidad con la que se mueve no es constante, pues se enfrenta a otras fuerzas que lo harán regresar un estado de reposo pasado un lapso de tiempo. Replicar estas sensaciones en la animación la dota de naturalidad.

La relación entre el cambio y el tiempo es lo que se denomina easing.

Cuando el cambio-tiempo se mantiene constante, hablamos de un easing lineal, sin embargo, existen más posibilidades. Aquí una referencia.

Funciones de easings en CSS/JS http://easings.net

Tipos de animaciones en el diseño de interfaces

Podemos distinguir entre dos tipos de animaciones en el diseño de interfaces: transiciones que suavizan el cambio entre uno o más estados de un elemento en la interfaz o dan continuidad a un proceso, y las animaciones de “acción”, las cuales permiten conocer el punto de interacción. Las animaciones de “acción” están relacionadas directamente con las acciones del usuario dentro de la interface — eventos ejecutados desde los inputs — . Mientras que las transiciones no. Aún así, es posible prescindir de las segundas siempre y cuando el tiempo de demora sea muy breve. Sino se romperá la continuidad.

Anteriormente en Mac OS X Snow leopard, tras abrir una aplicación o un documento iniciaba una animación en la que se escalaba el ícono de documento mientras se desvanecía.

https://youtu.be/nJQ4ef6pWuA

La animación sirve de feedback para el usuario, pues le indica que su acción ha sido ejecutada.

En versiones más recientes de Mac OS X ésta ha desaparecido. Sin embargo, la respuesta es rápida por lo que no es necesario incluirla. Además, la transición sigue siendo consistente al mantener la relación del ícono y la ventana.

Recientemente, Material design hace uso de estos tipos de animaciones y lo documenta en un apartado dedicado solo a la animación.


Finalmente, existe un tercer tipo de animaciones en el diseño de interfaces, pero su uso no se encuentra presisamente en la interfaz, sino en lo que se viene haciendo desde la invención del cinematógrafo: contar historias.

Los onboarding son un ejemplo de este último tipo de animación. Por medio de la ella se puede mostrar al usuario el uso real que le puede dar a una aplicación o simplemente ser una guía de uso.


Anteriormente, los sitios en su mayoría estaban construidos en flash, debido a las herramientas de animación que proporcionaba el software. Era muy común encontrarse con sitios con interfaces animadas, llamativas y muy elaboradas, pero que no mantenían un balance con el contenido del sitio. Aún así eran muy solicitados.

Cuando Steve Jobs publicó “Thoughts on flash”, marcando la separación de flash player de los dispositivos de apple, tomó un par de años para que los sitios web dejaran de usarlo. Además de la dependencia de software third-party , el consumo de recursos de flash player en los dispositivos de apple fue de las principales razones para abandonar su soporte.

Ahora vuelve a tomar presencia en el diseño de interfaces, pues puede ayudar a enriquecer la interfaz y/o el contenido, pero debe ser utizada consientemente. Contamos con nuevas tecnologías para crear animaciones y dispositivos más avanzados que puedan correrlas, por lo que es factible volver a caer en su mal uso.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.