Miguel Peribáñez | Diseñador y Consultor UX

Miguel Peribáñez - Diseñador y Consultor UX

4 MANERAS DE UTILIZAR LA ANIMACIÓN FUNCIONAL EN EL DISEÑO DE INTERFAZ DE USUARIO

Hace apenas una década se evitaron las interfaces de usuario que utilizaban animaciones, siendo más frecuentemente asociadas con pop-ups y anuncios intermitentes, pero esto ha cambiado. Hoy en día los detalles del diseño de interacción y la animación hacen una diferencia fundamental en los sitios web modernos y en las aplicaciones modernas.

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É LA ANIMACIÓN FUNCIONA

El movimiento, por su naturaleza, tiene el nivel más alto de prominencia en una interfaz de usuario. Ni el copy de texto ni las imágenes estáticas pueden competir con el movimiento.

Nuestros ojos están programados para prestar atención a 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 incluida en la interfaz de usuario como parte de la funcionalidad de ese diseño. Tiene un propósito muy claro y lógico:

– Reducir la carga cognitiva.
– Avisar de un cambio o proceso.
– Establecer un mejor recuerdo en la relación con el usuario.

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, sensible y humana. La animación funcional ayuda a alcanzar estos objetivos.
 

CÓMO LA ANIMACIÓN FUNCIONAL MEJORA UX

Nuestra experiencia y la impresión de una aplicación o sitio están conformadas por una combinación de factores, con la interacción desempeñando un papel fundamental. Agregar movimiento a nuestro diseño puede ser significativo y funcional, cuando se dan las circunstancias adecuadas.

Una animación funcional bien pensada y probada tiene el potencial de cumplir múltiples funciones, incluyendo:

1. FEEDBACK VISUAL

Un buen diseño de interacción proporciona retroalimentación. El feedback reconoce que el sistema ha recibido la acción de un usuario y muestra el resultado de la interacción, sea o no exitosa. La animación debe ser muy sutil y debe diseñarse de manera responsable.

Feedback de Botón

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

UI Animation

Visualizar el resultado de una acción

Siguiendo el ejemplo del principio, puedes utilizar la regeneración animada para destacar que algo salió mal. Por ejemplo, animación de movimiento visual en la entrada de código de acceso incorrecto. Es como el meneo de cabeza como si dijeras “no, intenta de nuevo”. El usuario nota la animación y entiende instantáneamente el estado actual.

UI Animation

También puedes reforzar las acciones que realiza un usuario. En el ejemplo que aparece a continuación, cuando el usuario hace clic en “Enviar”, aparece brevemente una animación antes de que la aplicación muestre el estado de éxito. La animación de marca de verificación hace que el usuario sienta que el proceso se ha terminado correctamente.

UI Animation

2. CAMBIOS EN EL ESTADO

Otros buenos lugares para añadir animación en el diseño están en los momentos de cambio. Los cambios de estado en la interfaz de usuario, especialmente en la web, a menudo implican cortes duros que pueden ser difíciles de seguir.

Nada es más antinatural que un cambio repentino. Los cambios abruptos en una interfaz son difíciles de procesar. Estos momentos de cambio deben suavizarse añadiendo alguna animación a la interfaz de usuario.

Estableciendo Conexiones

Las transiciones animadas deben actuar como intermediarios entre los diferentes estados de la interfaz de usuario, ayudando a los usuarios a entender lo que ocurre cuando cambia el estado de la pantalla. El usuario simplemente sigue el movimiento y entiende cómo los dos estados de la interfaz de usuario están relacionados.

UI Animation

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

UI Animation

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

Llamada de Atención a los Cambios

La animación puede ayudar al ojo a ver de dónde viene un nuevo objeto en su revelación o donde un objeto oculto va, y se puede encontrar de nuevo.

Podemos utilizarlo para llamar la atención sobre los cambios que ocultan o revelan información, como abrir cajones laterales de contenido. En el ejemplo siguiente, la navegación principal se desliza fuera del camino cuando hace clic en el icono de hamburguesa. Ese movimiento le permite saber que el menú principal no ha desaparecido.

UI Animation

3. VISIBILIDAD DEL ESTADO DEL SISTEMA

Como una de las 10 heurísticas 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 entender su contexto actual en el sistema en un momento dado.

Indicadores de Progreso

Los procesos de carga y descarga de datos son grandes oportunidades para una animación funcional. Las barras de carga animadas establecen una expectativa de la rapidez con que se procesará la acción. La animación puede ser útil en caso de fallos. Incluso una notificación no agradable, como una descarga de datos fallida, debe ser entregada de una manera agradable.

UI Animation

Desliza para Actualizar

El tiempo de espera de un usuario comienza en el momento en que inician una acción, y el peor caso es cuando no tienen ninguna indicación de que el sistema lo ha recibido. El tirón para actualizar la acción debe tener una reacción inmediata. Es esencial dar alguna retroalimentación visual inmediatamente después de recibir la solicitud del usuario para indicar que el proceso ha iniciado. La animación te ayudará con eso.

UI Animation

4. ANIMACIÓN EXPLICATIVA

A veces, los usuarios necesitan un poco más de ayuda para entender el flujo del usuario o cómo interactuar con ciertos elementos de la interfaz.

Esto es especialmente cierto para las interfaces de usuario que contienen características o interacciones nuevas o no familiares para el usuario.

Onboarding

La llegada del usuario exige un UX impecable y las animaciones en un flujo integrado tienen un tremendo impacto en la forma en que los usuarios principiantes se involucrarán con una aplicación.

La animación te da la libertad ilimitada para transmitir cualquier cosa, no importa lo complejo o seco que el tema, de una manera entretenida.

UI Animation

Pistas Visuales

La animación puede ofrecer algunas señales visuales útiles. La animación explicativa se observa con más frecuencia cuando se abre una página por primera vez y la animación muestra cómo se supone que se utilizan ciertos elementos de la página. Este tipo de animación se puede encontrar en los juegos que a menudo tratan muy bien con la divulgación progresiva, revelando la mecánica del juego a medida que avanzan en un juego. Estas sugerencias sólo se activan cuando el usuario alcanza el punto apropiado en su experiencia.

 

CONCLUSIÓN

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

Tenemos que adoptar el movimiento desde el principio y pensar en él como parte natural de nuestro diseño, porque el diseño es más que sólo acerca de la presentación visual. Como Steve Jobs dijo sobre el diseño: No es sólo lo que parece y se siente. El diseño es cómo funciona.

DROP A COMMENT

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *