Animaciones en el Diseño de UX Mobile
Las animaciones bien diseñadas hacen que la experiencia se sienta cuidada. En un proceso de diseño centrado en el Usuario, donde el Usuario es el foco principal, la animación crea multiples beneficios si es correctamente ejecutada.
Como diseñador, tener en cuenta las características de las animaciones es tan importante como aplicarlas. Sencillamente porque tienes que crear algo que se sienta humano y ayude a completar una tarea.
Beneficios de la Animación.
Las animaciones en mobile deben tener un motivo claro y lógico. Reduce carga cognitiva, previene la “ceguera” a los cambios, y establece una mejor jerarquía en la interface. Pero hay algo más. Las animaciones le dan vida a la interface.
Idealmente, las animaciones en la app deberían:
- Proveer feedback claro en respuesta de las acciones del Usuario.
- Informar el estado del sistema al Usuario.
- Guiar y enseñar al Usuario como interactuar con la interface.
Feedback Visual
Ésto es extremadamente importante en el diseño de interfaces. En la vida real, los botones y controles responden a nuestra interacciones, o sea, como esperamos que ocurra. Una interacción bien comunicada facilita la exploración de una app y crea reacciones lógicas a la interacción del Usuario. Una vez que ocurre un evento, el sistema debe proveer una confirmacion visual instantánea.
Botones y Controles
Los elementos de la interface como los botones y los controles deben verse tangibles (término de affordance), incluso si están detrás de una capa de vidrio. Para saltar ese gap, el diseño y la animación sirven como indicadores para que se vea y se sienta como si de una manipulacion directa se tratase.
Tips
- El feedback visual funciona por el deseo natural del usuario de conocimiento. Se siente genial navegar una aplicacion y siempre saber qué está ocurriendo.
- Agrega claridad a cada input del usuario.
Estado del Sistema
El usuario quiere estar en control, y confiar que la app acciona y reacciona de acuerdo a lo esperado. Podemos afirmar que a los usuarios no les gusta las sorpresas. Las animaciones proveen notificaciones en tiempo real del proceso, permitiendo comprender que es lo que está ocurriendo.
Una animación bien conocida es el “pull down to refresh” la cual inicia un proceso de actualizacion de contenido en dispositivos móviles.
Las animaciones son útiles incluso durante el on-boarding (primer uso de una app). Ésta etapa demanda una UX fluida, transiciones suaves y buenas animaciones las cuales tienen un impacto tremendo en cómo los usuarios se relacionan con la app.
Tips
Dar al usuario información en tiempo real sobre el estado del Sistema. La posibilidad de responder rápidamente a la pregunta “¿Dónde estoy?” durante su interacción con la app servirá para minimizar la ansiedad.
Transiciones con sentido
Debemos usar las animaciones para transportar suavemente al usuario entre contextos y explicar cambios en el acomodamiento de los elementos en una pantalla, reforzando la jerarquía de los mismos. El diseño del movimiento (motion design) puede guiar efectiva y placenteramente la atención del Usuario.
Conectar transiciones visualmente
Debemos crear una conexión visual entre los estados de las transiciones utilizando colores y elementos persistentes. El cambio entre dos estados visuales debe ser claro, suave y no forzado.
Timing Jerárquico
Las animaciones ayudan en la jerarquía de información, conveniendo qué contenido es mas importante creando un “camino a seguir” con los ojos.
Evitar transiciones desconectadas, como el ejemplo debajo.
El timing de transición debería fluir suavemente como el ejemplo debajo.
Animación consistente
Las transiciones de los objetos deberían comportarse de manera coordinada.
Evitar movimientos al azar como el ejemplo debajo, porque resulta en una grand distracción.
Tips
- Usar conexiones visuales. Definir la dirección de los elementos de manera cohesiva a lo largo de la transición. Considerar cómo mover determinado elemento para agregar claridad a la transición.
- Dirige la atención del Usuario. Todos los elementos en movimiento deberían crear una imagen clara de dónde mirar para el usuario. Lo podemos lograr usando el movimiento de manera ordenada y coordinada.
Detalles con buen gusto
El uso básico de las animaciones es durante las transiciones, pero una app puede complacer realmente al usuario también cuando las animaciones son usadas aún más allá del standard. Pueden existir en los elementos de una interface a todos los niveles, desde iconos detallados hasta transiciones clave y acciones.
Divertidas
Las animaciones tienen el poder de invitar a los usuarios a interactuar. Pueden amplificar la empatía en el diseño y evocar emociones.
Animar por Animar
Animar por animar resulta en (casi siempre) un mal diseño. Cuando una animación no lleva consigo ningun propósito funcional, se siente poco natural, o incluso molesta. Otro parámetro al tener en cuenta es la longevidad de la animación — ¿se va a volver muy molesta esta animación cuando la vea por décima vez? ¿Es lo suficientemente clara universalmente hablando?
Tip
Animar con propósito. En lugar de animar solo por el hecho de “decorar” debemos enfocarnos en la practicidad que esta genera para el Usuario.
Conclusión
Diseñar con cuidado. La atención a todos y cada uno de los detalles es la clave del éxito al diseñar una interacción hombre-computadora. Y el Motion Design bien pensado puede ayudarnos a comunicar de manera mucho más efectiva. Mientras mas fácil un producto sea de usar para el Usuario, más el Usuario querrá usarlo.
¡Gracias!
Autor Original: Nick Babich
Artículo Original (ingles): https://uxplanet.org/animation-in-mobile-ux-design-93263dc6c5f4#.epnhh1uid
Traducido por: Juan Carlos Ferraris
