Las transiciones en apps móviles (o cómo diferenciar presupuestos)

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.

imagen por Ramotion

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

imagen por Ramotion

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.

imagen por Ramotion

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.

imagen por Ramotion

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.

imagen por Jakub Antalik

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.

imagen por Anton Skvortsov

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.

imagen por Ramotion

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.

imagen por Virgil Pana

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.

imagen por Jae-seong, Jeong.

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.

imagen por Anish Chandran

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.

imagen por MDS

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.


imagen por Jurre Houtkamp

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.

imagen por Jurre Houtkamp

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.

Lo más popular entre los lectores

Producto Mínimo Viable de una app, by Hamro Dev

¿Qué es un MVP y por qué es tan importante?

Leave review
¿Que es un MVP? Si todavía no lo sabes, entra aqui y averigua por qué es ta...
Leer más
Esta genial campaña promocional de Toy Story 4

Esta genial campaña promocional de Toy Story 4

Leave review
Es innegable que la tecnología hoy en día se ha convertido en una herramien...
Leer más
Desarrollando una I.A que reconoce caras en Javascript

Desarrollando una I.A que reconoce caras en Javascript

Leave review
La tecnología está llena de cosas increíbles que nos sorprenden a cada paso...
Leer más
Las barreras de entrada en el mundo de las apps

¿Qué es una barrera de entrada en el mundo de las apps?

Leave review
Leer más
¿Cómo abrir una página web en China?

¿Cómo abrir una página web en China?

Leave review
Una cosa es ofrecer el idioma chino a tus clientes y otra bien distinta es ...
Leer más
¿Por qué todos los mapas de China están mal?

¿Por qué todos los mapas de China son erroneos?

Leave review
Todos los mapas de China están mal. ¿no te lo crees? Échale un vistazo al a...
Leer más
Hubspot - Un CRM gratuito de calidad para digitalizar tu negocio.

Hubspot - Un CRM gratuito para digitalizar tu negocio.

Leave review
Hubspot es un CRM Gratuito de calidad que te ayudará a lanzar tu app o tu p...
Leer más
La última patente de amazon parece sacada de la ciencia ficción

La última patente de amazon parece sacada de la ciencia ficción

Leave review
La aeronave patentada tendría un diseño que serviría como una bahía de carg...
Leer más
Suscribete a nuestro newsletter

¿De qué va esto?

Lo más reciente

Ahorra tiempo, trabaja menos y organízate mejor con un bot de whatsapp.

Ahorra tiempo, trabaja menos y organízate mejor con un bot de whatsapp.

Leave review
¿Te ha ocurrido alguna vez que la atención a tus clientes te ha sobrepasado...
Leer más
Leer esto te dará ganas de cambiar tus contraseñas.

Leer esto te dará ganas de cambiar tus contraseñas.

Leave review
Cuando leas esto, vas a querer compartirlo con todos tus amigos y seres que...
Leer más
Cómo el outsourcing puede ayudar a tu empresa.

Cómo el outsourcing puede ayudar a tu empresa.

Leave review
El outsourcing ocurre cuando una empresa decide subcontratar y externalizar...
Leer más
Vas a fallar con el regalo estas navidades (y lo sabes)

Vas a fallar con el regalo estas navidades (y lo sabes)

Leave review
Es un hecho comprobado y la estadística no perdona. Según datos del INE en ...
Leer más
6 barreras de entrada que frenan el emprendimiento

6 barreras de entrada que frenan el emprendimiento

Leave review
"Barreras de entrada" es un término frecuente en los negocios que sirve par...
Leer más
Carta abierta al Valencia C.F

Carta abierta al Valencia C.F

Leave review
El viernes 28 de junio de 2019, la casa de apuestas bwin se convertía en el...
Leer más
Llévate el trabajo a casa - 10 ideas para no estar en la oficina

Llévate el trabajo a casa - 10 ideas para no estar en la oficina

Leave review
Seguramente muchos de vosotros (al igual que me ocurre a mi) os despertaréi...
Leer más

Las categorías

Te puede interesar...