Animaciones y experiencia de usuario

Experiencia de usuario
12/7/2018
|
Torresburriel Estudio

En otros posts hemos mencionado en qué consiste la experiencia de usuario, pero antes de comenzar con este post, nos parece importante aclarar las diferencias entre UX (experiencia de usuario, user experience en inglés) y UI (interfaz de usuario, user interface en inglés).

La experiencia de usuario es el proceso que lleva a cabo un usuario cuando interactúa con un producto. Incluye las sensaciones que tiene antes, durante y después de interactuar con un producto digital, ésta es totalmente subjetiva y está basada en la percepción de cada persona. La experiencia de usuario engloba muchos otros aspectos: la usabilidad, la jerarquía visual, la accesibilidad… Los cuales mejorándolos favorecerán la UX del producto o servicio digital en su conjunto.

En cambio, cuando hablamos de user interface (UI) hablamos del proceso de crear interfaces en dispositivos poniendo especial atención a la apariencia y el estilo.

En Torresburriel Estudio trabajamos el campo de la Experiencia de Usuario, por eso acostumbramos a escribir sobre ello, ya que es lo que nos gusta y lo que sabemos hacer. Pero hoy en el blog vamos a hablar sobre interfaz de usuario, un ámbito que también forma parte de la experiencia de usuario y del que últimamente oímos hablar mucho.

Uno de los elementos más importantes que componen una  interfaz de usuario actualmente es el uso de las animaciones, ya que usadas correctamente mejoran la UX y propician una interacción fluida. Para hablar sobre ellas y su uso, nos vamos a apoyar en un artículo de la agencia Tubik Studio.

Animación feedback

Los mensajes de feedback cumplen una función muy importante para la comunicación entre la interfaz y el usuario. Son las encargadas de transmitir al usuario información sobre la acción que se está llevando a cabo, pueden ir desde las más básicas como la reacción cuando haces clic sobre un elemento a una pantalla de carga. Con ellas los usuarios rápidamente puede obtener información sobre si la acción se ha realizado correctamente. Como la mejor explicación es un ejemplo, os dejo la animación de una venta de tickets.

Animacion1

Animación venta de tickets. Diseño de Aurélien Salomon

Animación de progreso

Cuando un usuario tiene que realizar un proceso, en ocasiones puede resultar demasiado largo,  ya que hay operaciones que requieren de tiempo como el envío de datos o la carga de imágenes… En ese momento de espera, podemos aprovechar para informar al usuario acerca de la progresión de la acción, además de proporcionar al usuario un elemento entretenido con el que puede paliar una posible experiencia negativa propiciada por la espera.

Aquí tenéis un par de ejemplos de animaciones de progreso entretenidas y diferentes, una con un astronauta y otra de un nivel para indicar el porcentaje de agua que llevas bebida en el día.

animacion3

Diseño de Supi

animacion2

Nivel para indicar el porcentaje de agua que llevas bebida en el día. Diseño de Gal Shir

Animación de carga

Las animaciones de carga pueden ser subtipos de las animaciones de progreso, ya que su principal función es informar al usuario de que el proceso de carga está activo.

Este tipo de animaciones es uno de los más usados, como podemos ver en los siguientes ejemplos, las animaciones son los suficientemente visuales como para transmitir al usuario que búsqueda o carga está en marcha.

He encontrado animación de carga con juguetes a lo Toy Story que sirve muy bien como ejemplo.

animacion4

Animación de carga a lo Toy Story. Diseño de Slimjimstudios

Animación para captar atención

Estas animaciones están diseñadas para estar alineadas con el principio de “affordance”, que se podría traducir aproximadamente como intuitividad. Este principio, acuñado en primera instancia por el psicólogo perceptual J.J. Gibson y estudiado posteriormente por Don Norman, se utiliza para referirse al atributo de un objeto que permite a las personas saber cómo se utiliza. O dicho de otra manera, todas las posibilidades que ofrece un objeto para que el usuario pueda reconocer cómo usarlo.

Las animaciones que cumplen con este principio sirven de guía al usuario, dirigiéndolo a los elementos importantes del sitio web y favoreciendo una navegación más fácil e intuitiva.

Su uso pueden ser para un tutorial de cómo navegar por unas estadísticas para captar la atención de los usuarios y que lo practiquen como en el enlace.

animacion5

Diseño de Malik fouque

Animaciones en mensajes de error

Un mensaje de error en un producto digital puede llegar a ser el causante de una mala experiencia de usuario. Así pues, las animaciones en mensajes de error son importantes para calmar la posible frustración del usuario.

Cumplen dos requisitos principales, el primero de ellos es informar al usuario de error y el segundo es que trata de reconducir al usuario para intentar satisfacer su necesidad.

Un 404 con una animación interesante de un cohete dirigido al infinito, una animación de un error al subir un archivo a la nube o un problema de conexión son algunos de los ejemplos que he encontrado.

animacion7

Animación de error 404. Diseño de Adam Balazy

Notificaciones animadas

El uso de animaciones para el envío de notificaciones se utiliza a menudo. Suelen ser animaciones discretas pero lo suficientemente visuales como para atraer la atención del usuario y que no pierda información relevante.

Como ejemplos: una vistosa campana con notificación emergente y una campana más discreta para su uso en móvil.

animacion8

Notificación animada. Diseño de Dylan Parks

En resumen, se puede decir que las animaciones, si se implementan adecuadamente, proporcionan valores añadidos como una mayor usabilidad, aceleración en los procesos de interacción y mayor retroalimentación para el usuario.

 

¿Quieres darnos tu impresión sobre este post?

Una respuesta a “Animaciones y experiencia de usuario”

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.