4 formas de utilizar la animación funcional en el diseño de la interfaz de usuario

Hace apenas una década, se evitaban las interfaces de usuario que usaban animaciones, ya que se asociaban con mayor frecuencia con ventanas emergentes y anuncios parpadeantes, pero esto ha cambiado. Hoy en día, los detalles del diseño de interacción y la animación marcan una diferencia fundamental en los sitios web modernos y en las aplicaciones modernas. Este cambio de mentalidad se expresa claramente en la declaración de Zurb:

Si queremos diseñar mejores productos digitales, debemos adoptar la naturaleza interactiva de la aplicación y los sitios web desde el principio.

Por qué funciona la animación

El movimiento, por su naturaleza, tiene el nivel más alto de prominencia en una interfaz de usuario. Ni la copia de texto ni las imágenes estáticas pueden competir con el movimiento. Nuestros ojos están programados para prestar atención a los objetos en movimiento; es casi un reflejo. Podemos aprovechar esto con esta animación funcional.

¿Qué es la animación funcional?

La animación funcional es una animación sutil incrustada en la interfaz de usuario como parte de la funcionalidad de ese diseño. Tiene unos propósitos muy claros y lógicos:

• Reducir la carga cognitiva
• Prevenir la ceguera al cambio
• Establecer un mejor recuerdo en las relaciones espaciales

En un enfoque de diseño centrado en el ser humano, donde el usuario es el foco principal, una interfaz de usuario debe ser intuitiva, receptiva y humana. La animación funcional lo ayuda a lograr estos objetivos.

Cómo la animación funcional mejora la experiencia de usuario

Nuestra experiencia e impresión de una aplicación o sitio está determinada por una combinación de factores, y la interacción juega un papel fundamental. Agregar movimiento a nuestro diseño puede ser significativo y funcional, cuando encontramos las circunstancias adecuadas. La animación funcional bien pensada y probada tiene el potencial de cumplir múltiples funciones, que incluyen:

1. Comentarios visuales

Un buen diseño de interacción proporciona retroalimentación. La retroalimentación reconoce que el sistema ha recibido la acción de un usuario y demuestra el resultado de la interacción, ya sea que haya tenido éxito o no. La animación en este grupo debe ser muy sutil y debe diseñarse de manera receptiva.

Comentarios del botón

En la vida real, los botones responden a nuestra interacción, y así es como esperamos que funcionen las cosas. Para que sea predecible para el usuario, la interfaz digital debe actuar de la misma manera.

Fuente: Jaron Pulver

Visualizar el resultado de una acción

Siguiendo el principio mostrar, no decir, puede utilizar comentarios animados para resaltar que algo salió mal. Por ejemplo, animación de movimiento visual al ingresar un código de acceso incorrecto. Es como sacudir la cabeza como si dijera «no, inténtalo de nuevo». El usuario nota la animación y comprende instantáneamente el estado actual.

También puede reforzar las acciones que realiza un usuario. En el siguiente ejemplo, cuando el usuario hace clic en «Enviar», aparece una ruleta brevemente antes de que la aplicación muestre el estado de éxito. La animación de la marca de verificación hace que el usuario sienta que el proceso finalizó correctamente.

Credito de imagen: Colin Garven

2. Cambios de estado de ablandamiento

Otros buenos lugares para agregar animación en el diseño son los momentos de cambio. Los cambios de estado en la interfaz de usuario, especialmente en la web, a menudo implican cortes duros que pueden dificultar su seguimiento. Nada se siente más antinatural que un cambio repentino. Los cambios abruptos en una interfaz son difíciles de procesar para los usuarios. Estos momentos de cambio deben suavizarse agregando algo de animación a la interfaz de usuario.

Establecer conexiones

Las transiciones animadas deben actuar como intermediarios entre los diferentes estados de la interfaz de usuario, ayudando a los usuarios a comprender qué sucede cuando cambia el estado de la pantalla. El usuario simplemente sigue el movimiento y comprende cómo se relacionan los dos estados de la interfaz de usuario.

Créditos de imagen: Anish Chandran

También funciona bien para asociar vistas de miniaturas y detalles:

La tarjeta se anima desde su posición original a una posición en el modal, dejando en claro que es el mismo elemento, solo que con más detalle.

Créditos de imagen: Charles Patterson

Llamar la atención sobre los cambios

La animación puede ayudar al ojo a ver de dónde viene un nuevo objeto al ser revelado o adónde va un objeto oculto y se puede encontrar nuevamente. Podemos usarlo para llamar la atención sobre cambios que ocultan o revelan información, como abrir cajones laterales de contenido. En el siguiente ejemplo, la navegación principal se desliza fuera del camino cuando hace clic en el icono de hamburguesa. Ese movimiento te permite saber que el menú principal no ha desaparecido.

Créditos de imagen: Tamas Kojo

3. Visibilidad del estado del sistema

Como una de las 10 heurísticas originales de Jakob Nielsen para la usabilidad, la visibilidad del estado del sistema sigue siendo uno de los principios más importantes en el diseño de la interfaz de usuario. Para los usuarios, es muy importante conocer y comprender su contexto actual en el sistema en un momento dado.

Indicadores de progreso

Los procesos de carga y descarga de datos son excelentes oportunidades para una animación funcional. Las barras de carga animadas establecen una expectativa de qué tan rápido se procesará la acción. La animación puede ser útil en caso de fallas. Incluso una notificación no agradable, como un error en la descarga de datos, debe enviarse de manera agradable.

Créditos de imagen: xjw

Tire para actualizar

El tiempo de espera de un usuario comienza en el momento en que inicia una acción, y el peor de los casos es cuando no tiene ninguna indicación de que el sistema la haya recibido. La acción de extracción para actualizar debe tener una reacción inmediata. Es esencial brindar una retroalimentación visual inmediatamente después de recibir la solicitud del usuario para indicar que el proceso se ha iniciado. La animación te ayudará con eso.

Créditos de imagen: Tony Babel

4. Animación explicativa

A veces, los usuarios necesitan un poco de ayuda adicional para comprender el flujo de usuarios o cómo interactuar con ciertos elementos de la interfaz. Esto es especialmente cierto para las interfaces de usuario que contienen funciones o interacciones nuevas o desconocidas para el usuario.

Inducción

La incorporación de usuarios exige una experiencia de usuario impecable, y las animaciones en un flujo de incorporación tienen un impacto tremendo en la forma en que los usuarios primerizos interactuarán con una aplicación. La animación le brinda libertad ilimitada para transmitir cualquier cosa, sin importar cuán complejo o seco sea el tema, de una manera entretenida.

Créditos de imagen: Anastasiia Andriichuk

Sugerencias visuales

La animación puede ofrecer algunas señales visuales útiles. La animación explicativa se ve con mayor frecuencia cuando se abre una página por primera vez y la animación muestra cómo se supone que deben usarse ciertos elementos de la página. Este tipo de animación se puede encontrar en juegos que a menudo tratan muy bien con la divulgación progresiva, revelando la mecánica del juego a medida que avanza en un juego. Tales sugerencias solo se activan cuando el usuario llega al punto apropiado en su experiencia.

Conclusión

La animación es una herramienta poderosa cuando se usa de manera sofisticada.

Necesitamos abrazar el movimiento desde el principio y pensar en él como parte natural de nuestro diseño, porque el diseño es más que una simple presentación visual. Como dijo Steve Jobs sobre el diseño: no se trata solo de cómo se ve y se siente. El diseño es como funciona.