Una frase de John Lasseter (genio y animador de Pixar desde los tiempos en que la empresa vendía Hardware), junto con el celebérrimo corto de Luxo, abrieron el taller de Luis Herrero de Plex. El meetup, organizado por UX Academy en el espacio de coworking Kunlabori, iba de mover el esqueleto (al menos el de los elementos de una interfaz) para generar una experiencia.
…they were simple desk lamps with only a minimal amount of movement, but you could immediately tell that Luxo Jr. was a baby, and the big one was his mother…
Animar tiene que ver con mover objetos, pero sobre todo con darles vida. Con convertir dos lámparas en una madre y una hija que muestran sentimientos, se frustran, se decepcionan o se alegran sin que tengan cara. Son los movimientos los que consiguen la magia.
En una interfaz, sin la dirección artística del genio Lasseter, son los desplegables, las transiciones, los cambios de estado y los n movimientos más que aparecen cada día, los que dan vida a las pantallas y los que mejoran la experiencia. También son esa parte en la que muchas veces nadie piensa, los que se quedan suspendidos en la tierra de nadie entres los diferentes puestos de un equipo digital.
Como animador principiante en flash que fui en su momento, en los años en que no se entendía que un banner fuera de otra manera, sé lo difícil que es dar esa vida. Gracias a Luis ahora sé que, hace más de cien años, nueve titanes de Disney sentaron las bases de lo que debía ser animar. Luis, qué bien me hubieras venido hace cuatro años.
Los principios se ven genial en este video:
- Squash and stretch
- Anticipation
- Staging
- Straight ahead and pose to pose animation
- Follow through and overlapping action
- Slow-out and slow-in
- Arcs
- Secondary action
- Timing
- Exaggeration
- Solid drawing
- Appeal
En realidad, en diseño de interfaz debemos tener en cuenta sobre todo cinco: timing, spacing, anticipation, easing y squash/stretch.
Luis, que es un estudioso de esto y que se ve como le mola, agrupa todos los posibles movimientos de una web en 5 grandes categorías.
- Transición. El movimiento entre pantallas, por ejemplo.
- Feedback. Como pueda ser un spinner que se convierte en OK
- Llamada a la acción. Como el tipico botón de comprar que se mueve ligeramente, o el mensaje de «haz scroll».
- Storytelling. Aquí el New York Times lo parte.
- Decorativos. Parallax y esta web que hice hace tiempo son un ejemplo.
Basta de teorías, ya sabemos los 12 principios del movimiento y los 5 grandes tipos ¿y ahora qué? ¡Movamoslo todo que ahora se puede! Es como la emoción que uno siente al ver por primera vez que puede animar las slide de un power point… Importante aviso a navegantes, a giferos y a horteras en general: el movimiento que esté justificado y, como norma general, que sea sutil. Salvo que vivas en Japón o en los 90 y ames Geocities, que ahí cuantas más cosas muevas mejor (para el que no sepa de que hablo, este es el rollo tipo Japón y en este simulador de Geocities puedes ver como eran las web antes).
Otro consejo fundamental, la animación debe ser un complemento a un mensaje que también se entiende si la animación no está.
Graba a fuego siempre esos dos consejos:
- Movimientos sutiles y nada de ferias
- El mensaje se entiende sin la animación
El mundo de la animación ha cambiado (¡y mejorado!) desde los tiempos de mi querido y añorado flash y la tecnología está cada vez más optimizada (y más que lo estará) para que funcione bien en todos los dispositivos, plataformas, navegadores, etc. Luis destaca varias formas de hacerlo a nivel técnico: CSS 3, after effects, Framer.js, Origami y, para los nostálgicos, flash.
Particularmente, creo que a la animación no se le dedica el tiempo que se debe. Como antes decía, es una tarea que se sitúa en una zona gris, entre el de UX, el diseñadorvisual que rara vez pasa algo más que diseños estáticos y el programador front, que pelea por no llenar su código de «movidas» que pueden dar problemas de compatibilidad. En los casos en los que la animación sí se tiene en cuenta, se tira mucho de las opciones predefinidas de programas como Axure y keynote, o se acaban empleando movimientos creados en librerías.
Seguramente la situación y la actividad gane la seriedad que merece. Todos preferimos la experiencia de interactuar con un sistema que, aunque no tenga boca, ni ojos, ni cara, parece que nos habla.
Si tienes ganas de más, la información en internet es infinita, y aquí puedes ver algunos enlaces seleccionados.
Artículos interesantes
- The Illusion of Motion
- 12 Basic Principles of Animation in Motion Design
- Invisible animation
- Using Motion For User Experience On Apps And Websites
- Functional Animation In UX Design
- Functional Animation In UX Design
Recursos útiles