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, y en la mayoría de los casos se asociaban con ventanas emergentes y anuncios intermitentes, pero esto ha cambiado. Hoy, los detalles del diseño de la interacción y la animación hacen 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:
Ya no solo estamos diseñando pantallas estáticas. Estamos diseñando cómo el usuario obtiene de esas pantallas para ver el contenido en realidad.
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 mayor nivel 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 cableados 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 un propósito muy claro y lógico:
- Reducir la carga cognitiva
- Prevenir el cambio de ceguera
- 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 te ayuda a alcanzar estos objetivos.
Cómo la animación funcional mejora UX
Nuestra experiencia e impresión de una aplicación o sitio están conformadas 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 correctas. La animación funcional bien pensada y probada tiene el potencial de cumplir múltiples funciones, entre ellas:
1. Comentarios visuales
Un buen diseño de interacción proporciona comentarios. La retroalimentación reconoce que el sistema ha recibido una acción del 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.
Respuesta del 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.
Fuente: Jaron Pulver
Visualice el resultado de una acción
Si sigue el programa principal, no lo diga , puede usar comentarios animados para resaltar que algo salió mal. Por ejemplo, animación de movimiento visual en una entrada de código incorrecta. Es como sacudir la cabeza como diciendo "no, inténtalo de nuevo". El usuario nota la animación y entiende instantáneamente el estado actual.
También puede reforzar las acciones que está realizando un usuario. En el siguiente ejemplo, cuando el usuario hace clic en "Enviar", aparece brevemente una rueda giratoria 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 finalizó correctamente.
Credito de imagen: Colin Garven
2. Suavizar los cambios de estado
Otros buenos lugares para agregar animación en el diseño están en 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 IU.
Estableciendo Conexiones
Las transiciones animadas deberían actuar como intermediarios entre los diferentes estados de la interfaz de usuario, ayudando a los usuarios a comprender qué está sucediendo cuando cambia el estado de la pantalla. El usuario simplemente sigue el movimiento y entiende cómo se relacionan los dos estados de UI.
Créditos de la 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 la imagen: Charles Patterson
Llamar atención a los cambios
La animación puede ayudar al ojo a ver de dónde viene un objeto nuevo cuando se revela o dónde va un objeto oculto, y se puede encontrar de nuevo. Podemos utilizarlo para llamar la atención sobre los cambios que ocultan o revelan información, como la apertura de los lados de contenido. En el siguiente ejemplo, la navegación principal se desliza fuera del camino cuando hace clic en el icono de la hamburguesa. Ese movimiento le permite saber que el menú principal no ha desaparecido.
Créditos de la imagen: Tamas Kojo
3. Visibilidad del estado del sistema
Como uno de los 10 principales heurísticos de usabilidad de Jakob Nielsen, 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 grandes 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 una falla en la descarga de datos, debe ser entregada de una manera agradable.
Créditos de la 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 caso es cuando no tienen ninguna indicación de que el sistema lo haya recibido. El tirón para refrescar la acción debería tener una reacción inmediata . Es esencial dar algunos comentarios visuales 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 la 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.
Incorporación
La incorporación de usuarios exige un UX impecable y las animaciones en un flujo de incorporación tienen un impacto tremendo en cómo los usuarios principiantes interactúan con una aplicación. La animación te da libertad ilimitada para transmitir cualquier cosa, sin importar cuán compleja o cuán seca sea la materia, de una manera entretenida.
Créditos de la 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 se utilizarán ciertos elementos de la página. Este tipo de animación se puede encontrar en juegos que a menudo se relacionan muy bien con la divulgación progresiva, revelando la mecánica del juego a medida que avanzas 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 formas sofisticadas.
Necesitamos 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 solo una presentación visual. Como dijo Steve Jobs sobre el diseño: no es solo lo que parece y se siente. El diseño es como funciona