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
Estamos reciclando mal

Estamos reciclando mal

Leave review
Desde 2017, China ha dejado de aceptar la basura de otros países y esto ha ...
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
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
#Trashtag - La nueva moda que podría salvar el planeta tierra

#Trashtag - La nueva moda que podría salvar el planeta tierra

Leave review
Leer más
Lo qué aprendí al dejar mi trabajo y vivir viajando y trabajando online

Lo qué aprendí al dejar mi trabajo y vivir viajando y trabajando online

Leave review
Escribo este post para compartir contigo mi experiencia de como cambié rad...
Leer más
Monetización en las apps - ¿Cuáles son las mejores Estrategias?

Monetización en las apps - ¿Cuáles son las mejores Estrategias?

Leave review
¿No sabes cómo monetizar tu app? Aquí tienes un pequeño listado con varias ...
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
Suscribete a nuestro newsletter

¿De qué va esto?

Lo más reciente

¿Cómo abrir una agencia de viajes?

¿Cómo abrir una agencia de viajes?

Leave review
¿Tienes pensado comenzar una agencia de viajes? Si la respuesta es sí , deb...
Leer más
¿Qué es un plan de negocio?

¿Qué es un plan de negocio?

Leave review
Un plan de empresa es fundamental para comenzar cualquier negocio - especia...
Leer más
El precio del progreso

El precio del progreso

Leave review
El otro día charraba con un amigo a través de whatsapp sobre estudios de fo...
Leer más
¿Qué ventajas tiene el Desarrollo Híbrido frente al Nativo?

¿Qué ventajas tiene el Desarrollo Híbrido frente al Nativo?

Leave review
Está claro que hay diferentes puntos de vista sobre como abordar  el desarr...
Leer más
Aprende a montar tu startup con un juego de cartas.

Aprende a montar tu startup con un juego de cartas.

Leave review
¿Estás emprendiendo? En el artículo de hoy queremos hablar de un juego de c...
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 categorías

Te puede interesar...