En el momento actual del diseño web, en que se necesita inmediatez y velocidad de carga de las páginas y aplicaciones web, ofrecer a los usuarios pequeñas interacciones da un valor añadido muy interesante a aquello que se está visualizando. Si lo quisiéramos definir, las microinteracciones serían pequeños momentos en que el usuario y el diseño interactúan. Serían movimientos sutiles, pequeñas animaciones que ocurren a partir de la acción del usuario y que marcan claramente la diferencia. El objetivo es sorprender al usuario, dándole una respuesta específica cada vez que realiza una pequeña acción. Cuando están bien diseñadas y colocadas con gusto y sin pasarse, las microinteracciones mejoran notablemente la experiencia de los usuarios.
Como usuarios —y seguro que también como desarrolladores— habéis visto muchas veces estos pequeños efectos que van un paso más allá del típico rollover que se hace al pasar el cursor por encima de un botón o el cambio de color de un link. En vez de aplicar estos pequeños efectos típicos presentes en el HTML y el CSS desde casi sus inicios, se pueden aplicar animaciones hechas con CSS y también con JavaScript para presentar estas sutilezas que marcarán la diferencia entre un diseño y un diseño acompañado de un buen diseño de interacción. Cuando desarrollamos una aplicación web, queremos que los usuarios se sientan cómodos y que se queden. Las microinteracciones nos van a ayudar en este sentido.
Ejemplos para hacerse una idea
- 10 microinteractions that will inspire your next project https://www.invisionapp.com/inside-design/10-microinterations-that-will-inspire-your-next-project/
- 5 cool examples of Microinteractions for a better WordPress UX https://premium.wpmudev.org/blog/microinteractions-wordpress-ux/
- Microinteractions design examples (code snippets) https://codemyui.com/tag/microinteractions/
Hacer pequeñas animaciones
Si queréis desarrollar webs o aplicaciones que tengan animaciones, seguro que muchos conceptos de estos os van a sonar: transiciones CSS, SVG, JavaScript, Parallax, Keyframes…
Os dejamos una serie de enlaces para que podáis adentraros en este mundo de la animación. Ya veréis que, cuanto más se excava, más profundo puede ser el pozo. El aprenendizaje sobre estos temas ¡parece no tener fin!
- Kirupa: Learn Web animation — Tutoriales y videos para empezar desde cero y hasta llegar a niveles avanzados. https://www.kirupa.com/html5/learn_animation.htm
- CSS animation for beginners — Animación para principiantes https://thoughtbot.com/blog/css-animation-for-beginners
- The guide to CSS animation: principles and examples https://www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-examples/
- 19 cool CSS animation examples to recreate — Para aprender, intentando hacer https://www.creativebloq.com/inspiration/css-animation-examples
- CSS animation rocks — conjunto de tutoriales y ejemplos de animación https://cssanimation.rocks/. También es interesante conocer los principos básicos de animación https://cssanimation.rocks/principles/
Consejos para hacer unas buenas microinteracciones
No es lo mismo hacer una animación que hacer una buena animación. El mérito está en acertar la duración, sorprender al usuario, saber captar la atención durante un determinado momento… Hay una línea muy fina entre lo que encanta a los usuarios y aquello que les puede llegar a molestar si lo ven varias veces y la clave está en el equilibrio.
Para terminar, os dejamos con unos consejos para hacer unas buenas animaciones y construir una buena experiencia de usuario (UX) en este sentido.
- Good to great UI animation tips https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5
- 8 steps to amazing microinteraction design https://www.awwwards.com/8-steps-to-amazing-microinteraction-design.html