Cuando hablamos de transiciones y animación de app mobile en Hamro Dev lo hacemos sabiendo que este tipo de transiciones y efectos tienen un efecto muy significativo en el desarrollo de una interfaz tanto web como mobile.

En lo que a transiciones se refiere, hay muchas cosas que pueden comunicarse al usuario de mejor manera tan solo con este tipo de animaciones. Animar una transición es una forma genial de reforzar el sentimiento de acción que tiene un usuario. En este artículo comentaremos los casos más comunes de animación y como complementan las diferentes acciones que un usuario debe de hacer en tu app.

Informar sobre el estado del sistema.

Cuando los usuarios desencadenan alguna acción (como por ejemplo enviar un formulario) esperan ver algún tipo de estímulo visual - el sistema debería de dejar claro que ha recibido la petición y que está trabajando en ello. Aquí hay algunos casos en los que el feedback animado puede beneficiar la experiencia final de usuario. El usuario está realizando algo y el sistema notifica al usuario que todo ha ido correctamente.

Por ejemplo, confirmar la acción del usuario - El usuario recibe algún tipo de notificación visual de que el sistema ha recibido su acción. Cuando los usuarios tienen feedback visual, por ejemplo, evita que puedan volver a hacer click sobre el elemento nuevamente

Actualizar el contenido utilizando algún tipo de "pull to refresh" - El feedback visual en formato de indicador de carga ayuda a los usuarios a entender que el sistema está trabajando en su petición.

Esperando a que el contenido se cargue. El contenido de carga no tiene por qué ser aburrido. Prácticamente todas las apps pueden utilizar una animación sutil cuando carga su contenido para prevenir que el usuario se marche y deje de utilizar la app. Las animaciones de carga mantienen al usuario ocupado con feedback visual y como resultado final parece que el usuario tiene que esperar menos tiempo.

Conectar diferentes pasos en una única interacción con varios pasos.

A veces los usuarios deben de pasar por una serie de pasos para completar una acción (como por ejemplo, registrarse en tu plataforma). Debería de quedar claro que pasos (y que inputs de información) quedan conectados entre sí. Una animación puede conectar cada uno de los pasos para que parezca que todos los pasos acaban siendo como recorrer un camino.

La animación puede ayudar a los diseñadores a crear diseños progresivos, que hace que las interfaces sean mucho más sencillas de entender y reducen la curva de aprendizaje, así como la información presentada cada vez en cada momento en la pantalla.

Por supuesto, tener estas cosas en cuenta suele ser algo muy importante en el desarrollo de tu app. Por lo general, introducir este tipo de transiciones suele ser prioritario a partir de la segunda o tercera iteración de tu proyecto. Hacer este tipo de animaciones requiere de más tiempo a invertir tanto diseñándolas como programándolas, por lo que suele ser algo generalizado incluirlas  una vez ya has afianzado un pequeño público y ya sabes que tu app va a funcionar.

Observemos por ejemplo el siguiente ejemplo de animaciones para entender de que trata y como la app se ve visualmente mucho más apañada que sin ellas.

Introduciendo nuevos elementos

Cuando se introduce un nuevo elemento en la página, tratamos de poner en ello la atención del usuario para que este se fije y se pregunte "¿Por qué estoy viendo un objeto nuevo en la pantalla?". Las animaciones te permiten definir las relaciones entre los objetos así como sus jerarquías.

Este es solo un pequeño ejemplo sobre como se pueden utilizar animaciones para añadir nuevos elementos tanto a una conversación como a un proceso de usuario. Por lo general cuanto más compleja es la animación, más costará realizarla y más caro será todo el proceso tanto de diseño como de desarrollo.

DAR AL USUARIO ALGÚN TIPO DE ORIENTACIÓN ESPACIAL.

Otra cosa que también es fundamental para que el usuario no se pierda y pueda generar en su cabeza modelos mentales sobre en que "lugar" de la aplicación se encuentra.  Esto es extremadamente importante para usuarios mobile. Hay que tener en cuenta que la combinación de una pantalla pequeña como la de un móvil sumado a la capacidad tan elevada que tienen de distraerse puede hacer que el usuario se pierda por completo entre las diferentes pantallas de tu app.

Podemos utilizar animaciones para guiar al usuari y explicarle como la información fluye de un estado a otro y como se entrelazan y se interconectan entre ellas. Mantiene al usuario guiado y evita que se pierda dándole información exacta de lo que se encuentran haciendo ahora mismo.

En el siguiente ejemplo, el propio  botón de play / pause se transforma en una cabecera y le transmite al usuario información precisa sobre cómo estos dos objetos están relacionados entre ellos.

Minimizando la carga cognitiva

La carga cognitiva es la cantidad de esfuerzo mental que un usuario tiene que utilizar para poder utilizar tu producto.  Según la carga que tenga hay un efecto direct osobre como de fácilmente interactúan los usuarios con tu app. Generalmente cuanto mayor es el esfuerzo para utilizar un producto, menos ganas tiene el usuario de utilizarlo.

El objetivo de un buen diseñador debería ser el crear una  interfaz con la menor carga cognitiva y que sea lo más fácil de usar posible. Las animaciones en las transiciones cuando se utilizan correctamente reducen el esfuerzo requerido para completar la acción.

En casi cualquier app, los usuario deben de rellenar algún tipo de formulario o documento. Estos documentos o formularios tienen ejemplos de la información que deben incorporar. Cuando los usuarios hacen click en ese campo, la información desaparece y como resultado, si hay muchos campos puede resultar algo dificil al usuario el averiguar cual es el campo que está rellenando.

Google , por ejemplo, con su interfaz "material design" ya pensó en esto.

Permite que tus usuarios entiendan los cambios funcionales.

Los cambios funcionales tienen lugar cuando los elementos cambian su funcionalidad después de su interacción. Por ejemplo, cuando un usuario hace click en el botón de un formulario, la acción del formulario cambia por completo. Este tipo de animación permite contestar a la pregunta "¿Qué es lo que hace este elemento ahora mismo?"

Un ejemplo muy común en este tipo de formularios suele ser por ejemplo un toggle. La animación ayuda al usuario a entender cual es el estado del elemento.

En algunos de estos casos, el cambio funcional de un único elemento lleva al cambio de la vista entera, por ejemplo en el típico icono del menú que se cambia a una X y activa una nueva vista.

En conclusión, la animación es muy potente y poderosa si se usa de forma sofisticada. Solventa muchos problemas funcionales dentro de una interfaz de usuario y las hace parecer más vivas y mucho más interactivas con respecto al usuario. No importa que tipo de app tengas en mente diseñar, lo que diseñas le cuenta una historia a tus usuarios. De una misma forma,  una animación puede ayudarte a contar una historia de una manera mucho más efectiva.

No obstante, hay que tener en cuenta que este tipo de animaciones y diseños suelen requerir de mucho pensamiento y a menudo incrementan bastante el coste del desarrollo de tu app.  Si vas con el presupuesto ajustado, deja este tipo de animaciones (o las más complicadas y costosas) para una segunda iteración de desarrollo en el que tu producto ya se encuentre maduro y puedas centrar a tu equipo de diseño única y exclusivamente en eso.

Sobretodo, es importante tener en cuenta que todos los pasos deben de tener algún tipo de coherencia y que mantienen la usabilidad lo más sencilla y usable. Es importante siempre en todo momento ayudar al usuario a complementar todos y cada uno de los pasos.