UX en movimiento: Usabilidad y animación
Es muy común entre los diseñadores UI el ver la animación como un medio para hacer la experiencia del usuario más agradable, sobre todo en el plano visual, y no con un fin en sí mismo. Esto conlleva, en la mayoría de las veces, que las animaciones que se aportan a la interfaz distraigan a los usuarios, en vez de guiarlos en el uso de componentes.
La animación dentro de la interfaz debe de tener un valor que mejore la experiencia en su uso. Para ello, deberíamos de controlar qué, cómo y cuándo implementar el movimiento para aportar una mayor usabilidad al componente.
¿Cómo mejoramos la usabilidad con el movimiento?
A través del movimiento en el diseño de interacción reducimos la brecha que existe entre lo que el usuario espera y lo que van a experimentar, pues contextualiza al usuario. Al final el movimiento nos permite naturalizar cualquier producto para que el usuario pueda identificar los objetos, intuir su comportamiento e interactuar directamente con ellos.
Los principios del motion UX
Issara Willenskomer, uno de los diseñadores pioneros al hablar de motion UX, publica “UX in motion” dónde agrupa en 12 principios, el movimiento en el diseño de interacción desde el punto de vista de la usabilidad.
Los principios que se desarrollan en este manifiesto, nos sirve como base para aplicar y fundamentar el movimiento dentro del diseño y centrar su uso en el usuario.
La finalidad del manifiesto es que sirva como base a la hora de diseñar las animaciones dentro del producto y cómo combinarlas sinérgicamente según los objetivos del producto.
Al final la mayoría de los principios recaen en cómo el movimiento proporciona contexto, continuidad, referencia visual o naturalidad a nuestro diseño para darle mayor control al usuario. Aún así, me parece interesante el esfuerzo que supone de preguntarnos qué puede ofrecer “éste movimiento” al usuario y contextualizarlo dentro del mundo UX.
1. PRINCIPIO DE FACILITACIÓN
Este principio se cumple cuando el comportamiento de los componentes se alinean con las expectativas del usuario. Todos los componentes, deben de mostrar un comportamiento natural, que faciliten la comprensión al usuario. Cuando los objetos se comportan como los usuarios esperan, dotan de una sensación de continuidad a la interfaz.
La animación debería ser un “aporte invisible”, esto es, que el usuario vea con naturalidad el movimiento y no le suponga una distracción que lo aleje de sus objetivos.
2. PRINCIPIO DE OFFSET Y DELAY
Principio que relaciona y jerarquiza la introducción de nuevos elementos a una escena dentro de la interfaz.
No es lo mismo cuando cambiamos de pantalla que nos aparezcan todos los elementos de golpe, que si nos aparecen siguiendo una jerarquía que ayude al usuario a entender lo que tiene en pantalla.
3. PRINCIPIO DE CRIANZA
En este caso, nos centramos en la relación de los objetos cuando el usuario interactúa con ellos directamente sobre la interfaz. Se denomina “crianza” por la vinculación que se da entre los objetos, equiparándola a la relación de un padre con su hijo.
A la hora de la interacción, podemos jugar con los distintos valores del objeto (color, posición, forma…etc.). Para darle mayor poder al usuario, tienen que ser movimientos en tiempo real que ser produzcan cuando el usuario interactúe con el componente. Esto le da una mayor sensación de control sobre el producto.
4. PRINCIPIO DE TRANSFORMACIÓN
Aunque principalmente la transformación de un objeto en otro nos sirve para llamar la atención de nuestro usuario, también podemos contarle una historia a través de ella que le haga comprender un determinado proceso.
5. PRINCIPIO DE CAMBIO DE VALOR
Es muy habitual que, tanto en páginas web como en apps, nuestros clientes quieran mostrar datos o valores sobre su actividad. Este principio se da, sobre todo, en cambio de valores numéricos, y trata de darnos una base a partir de la cual mostrar de una forma eficiente un cambio de valor.
Según este principio lo ideal en un cambio de valor, es contarle al usuario “la realidad” que ocurre detrás de los datos, para contectar con él. Evitar mostrar datos como campos estáticos.
6. PRINCIPIO DE MÁSCARA
El acto de enmascarar en diseño, es un recurso muy conocido y su funcionamiento es similar en la animación. Se trata de ocultar o mostrar objetos en función de un contenedor que los delimita.
Este recurso nos proporciona transiciones que dotan de mayor continuidad a nuestro diseño sin que el usuario vea interrumpido su proceso manteniendo un flujo narrativo.
7. PRINCIPIO DE SUPERPOSICIÓN
Cuando superponemos un objeto dependiente de otro situado en un plano inferior a través del movimiento de interacción, permitimos al usuario acceder a información que no está en un primer plano.
Desde mi punto de vista, habría que contemplar hasta qué punto mejora la usabilidad componentes que están ocultos. El usuario tendría que poder reconocer previamente qué acciones puede realizar en la pantalla y en este caso, gestures como el “swipe” para eliminar un mensaje, oculta una información bastante relevante en la toma de decisiones del usuario.
8. PRINCIPIO DE CLONACIÓN
Este recurso, muy utilizado en los “float buttons”, es muy útil para informar al usuario que acciones nacen de otras. Estás generando “x” objetos a partir de una interacción generando una jerarquía dentro de la pantalla.
9. PRINCIPIO DE OSCURECER
Oscurecemos o desenfocamos el fondo para darle mayor protagonismo a una nueva capa accionada por el usuario, sin que este pierda la referencia. Con esto logramos comunicar al usuario que dispone de un mundo detrás de la acción que tiene delante.
10. PRINCIPIO DE PARALLAX
A través del Parallax hacemos que el usuario se centre en las aciones y el contenido primario sin perder la integridad del diseño en un proceso gradual. Acercamos al usuario determinados objetos, arrastrando al resto que tiene en la pantalla hacia atrás.
11. PRINCIPIO DE DIMENSIONALIDAD
Las personas tendemos a usar marcos espaciales para desenvolvernos en el mundo real y por tanto las trasladamos a la hora de navegar por el mundo digital. Con la dimensionalidad, proporcionamos referencias de origen y partida dentro de la interfaz, ayudando a reforzar los modelos mentales dentro de la experiencia de usuario.
12. PRINCIPIO DOLLY & ZOOM
Ambos recursos son movimientos de cámara que acercan o alejan objetos al usuario. Esto le da profundidad al diseño, permitiendo al usuario indagar en áreas o contenidos adicionales profundizando en su experiencia.
Espero que este artículo os haya servido de ayuda a la hora de entender qué significan las animaciones y qué va a implicar el movimiento dentro de nuestros diseños.
Para ampliar más información, os dejo el artículo original del autor Issara Willenskomer en Medium.
