La mayoría de los sitios web actuales están sobrecargados con animaciones.
Android 5.0 lo ha acentuado más llenando un sistema operativo por completo con animaciones, muchas parecen sin sentido pero todo con la intención de hacer lucir un poco más al contenido además de orientar al usuario dentro de la interfaz.
Material Design. Link
El problema con la web es que, como medio de transporte de contenido, el contenido debe ser rápido y sólido, como un libro. Si el contenido tarda más en cargar porque tiene una animación antes de mostrarlo está afectando a los usuarios, muchas veces solamente complaciendo al creador.
La web es un medio de transporte de contenido.
Cuando iOS 7 salió, una de las mayores quejas de la gente fue que se sentía muy lento, esto es porque las animaciones de una pantalla a otra eran muy lentas y la gente quería ver su contenido más que lo que quería esperar a que terminara la animación. Colocaron una opción en la que podías eliminar la mayoría de las animaciones y desde entonces muchas personas, incluyéndome, la usamos.
A veces activo de nuevo las animaciones, hay un encanto en como están ejecutadas, a veces las vuelvo a desactivar. Depende mucho de mi estado de ánimo, no siempre va la funcionalidad sobre la apariencia visual, no siempre es al revés.
Aunque muchas personas cuentan con números basados en estudios, dependiendo del tipo y propósito de una animación puede inferirse cuanto es el tiempo máximo que debe durar.
Las animaciones más rápidas se aplican cuando el usuario ya sabe o tiene esperada la acción a realizar, por ejemplo: En iOS hacer un swipe hacia la izquierda en muchas aplicaciones que usan vistas, es un atajo hacia la vista anterior o superior. Ya que es un gesto estandarizado la animación debe ser muy rápida, el usuario sabe que va a encontrar ahí. Para dichas animaciones tenemos rangos aproximados de 50-120ms.
Algunos ejemplos de animaciones que deben ser rápidas (menos de 80ms):
Al hacer hover sobre un botón, si el botón cambia de color tiene hacerlo rápido, menos de 150ms, si es posible, entre 80ms y 120ms. Dependiendo de la complejidad del botón el tiempo puede incrementar o si el botón tiene que procesar algo en segundo plano. No hay que olvidar que una animación de menos de 80ms se suele percibir como instantánea.
Una animación de menos de 80ms se suele percibir como instantánea.
Menos es más y cuando se trata de llevar un mensaje a una persona no se puede romper la intención del mensaje con animaciones. He visto blogs que muestran una animación cuando la imagen está a punto de aparecer, tienen animaciones por todos lados.
Por otro lado, hay veces en que, para llevar un mensaje conviene hacerlo con calma, si un botón tiene un significado visual la animación puede ser más lenta, por ejemplo, algunos de los pasajes de Monument Valley tienen animaciones muy lentas pero es porque te hacen apreciar todo el paisaje, estructura y movimiento.
Si estamos desplazando un elemento a lo largo de toda la pantalla 120ms puede parecer muy rápido, en éste caso tenemos que alentar la animación o transición para permitirle al usuario percibir lo que está ocurriendo.
En resumen… Quité todo lo que estaba de más.
Siguen algunas animaciones vivas, incluso, coloqué una nueva animación en los links de texto que hace que la linea que aparece debajo de ellos se expanda desde el centro en lugar de aparecer abruptamente. Lo hice porque no resta usabilidad pero agrega contexto, lo mismo con los colores al cambiar. Son cambios rápidos pero iterativos, no aparecen de la nada, no se teletransportan, podemos decir que es la filosofía detrás de Material Design.
Aún cuando éste post no se ha publicado, sucedió algo interesante.
Después de agregar esas nuevas animaciones me di cuenta de que en iOS al presionar un link solo se activa la animación pero no te dirige a donde debe hasta que presionas de nuevo. Mala usabilidad.
No sé si sea un bug de la implementación de Safari en iOS, no sé si suceda en Android, lo único seguro es que no afectaré a mis lectores y ya he eliminado dicha animación.
Espero que el artículo haya sido de ayuda para quienes buscan saber cual es el tiempo ideal para una animación, no hay que perder de vista que no es una regla y las cosas siempre pueden cambiar y adaptarse.
Publicado por Julio Montaño el 12/Mar/2015.