Multimedia Universitat Oberta de Catalunya

Microinteracciones

Mireia Tort Noguera

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

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!

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.