Microinteracciones en la interfaz de usuario
Te explicamos qué es una microinteracción y cómo puede mejorar la usabilidad si dinamizamos la interfaz
¿Qué es una microinteracción?
Una microinteracción en una interfaz es una animación a modo de retroalimentación, y se produce cuando el usuario realiza una acción concreta.
En UI, esta acción se traduce como una transición en los elementos con los cuáles se está interactuando, aportando un significado a la interfaz que hace mejorar la experiencia de usuario.
Ya hace mucho tiempo que las microinteracciones aparecen en interfaces, pero hay que destacar que en el último año se han convertido en tendencia y existen muchos más recursos para su diseño e implementación, como por ejemplo Lottie; ahora incluso los sistemas operativos contemplan las animaciones en sus guidelines.
“Los detalles no son detalles, los detalles hacen el diseño. “
— Charles Eames
¿Por qué se deben usar?
Según las investigaciones del premio Nobel de economía Daniel Kahneman, las personas tenemos dos vías de pensamiento cuando se tienen que tomar decisiones. La que usamos la mayor parte del tiempo es la que consiste en proporcionar conclusiones basadas en la intuición.
Por este motivo todos los elementos que puedan ayudar a entender la interfaz aportan mucho valor a la experiencia de uso. Esta funcionalidad se complementa con el efecto Wow que aporta a la estética de la interfaz al romper con la estaticidad de esta.
Hay belleza cuando algo funciona y lo hace de forma intuitiva.
– Jonathan Ive
¿Cómo se deben usar?
Para usar una microinteracción hay que tener en cuenta factores esenciales en su funcionamiento. Os los presento a continuación:
- Objetivo ¿Qué se pretende comunicar al usuario?
- Accionador ¿Cuál es la interacción que la activa?
- Focus ¿Dónde se centra la acción en la interfaz?
- Duración ¿Cuánto tiene que durar la transición?
- Velocidad ¿Cómo de rápida debe mostrarse?
En algunas guidelines de UI también se especifica como se deben usar las microinteracciones como es el caso de la guía de Material Design de Google.
¿Cuáles pueden ser sus objetivos?
Según los objetivos que se muestran a continuación se puede definir mejor qué tipo de animación se adapta a las necesidades.
- Expectación es lo que define que tipo de objeto es y como se comporta
- Continuidad dentro de la interfaz
- Narratividad para mostrar los eventos que van pasando en la interfaz
- Relación espacial, temporal y de jerarquía entre objetos para entender la interfaz y tomar decisiones
¿Qué tipos de animación pueden definir una microinteracción?
Las animaciones en los elementos de UI pueden ser diferentes según el objetivo que se quiera alcanzar. A continuación se pueden observar diferentes tipos de microinteracciones y sus respectivos ejemplos.
Fuentes
- Microinteractions, Dan Saffer
- Lottie, Airbnb Design Team: https://airbnb.design/lottie/
- Making motion meaningful, Sharon Correa y John Schlemmer: https://design.google/library/making-motion-meaningful/
- Animation Principles in UI Design, Suresh V. Selvaraj: https://medium.com/motion-in-interaction/animation-principles-in-ui-design-understanding-easing-bea05243fe3
- Animation usability, Nielsen Norman Group: https://www.nngroup.com/articles/animation-usability/
- Material motion, Google Design Team: https://material.io/guidelines/motion
- Motion for UWP apps, Windows Dev Center: https://docs.microsoft.com/en-us/windows/uwp/style/motion
- Human interface guidelines: animation: https://developer.apple.com/ios/human-interface-guidelines/visual-design/animation/
