En el moment actual del disseny web en què es necessita immediatesa i velocitat de càrrega de les pàgines i aplicacions web, oferir als usuaris petites interaccions, dona un valor afegit molt interessant a allò que s’està visualitzant. Si ho haguéssim de definir, les microinteraccions serien petits moments en què l’usuari i el disseny interactuen. Serien moviments subtils, petites animacions que s’esdevenen a partir de l’acció de l’usuari i que marquen clarament la diferència. L’objectiu és sorprendre l’usuari, donant-li una resposta específica cada vegada que fa una petita acció. Quan estan ben dissenyades i posades amb gust i sense excedir-se, les microinteraccions milloren amb escreix l’experiència dels usuaris.
Com a usuaris —i segur que també com a desenvolupadors— heu vist moltes vegades aquests petits efectes que anirien un pas més enllà del típic rollover que es fa en passar el cursor sobre d’un botó o el canvi de color d’un link. En comptes d’aplicar aquests petits efectes típics presents en l’HTML i el CSS des de gairebé el començament, es poden aplicar animacions fetes amb CSS i també amb JavaScript per presentar aquestes subtileses que marcaran la diferència entre un disseny i un disseny acompanyat d’un bon disseny d’interacció. Quan fem una aplicació web, volem que els usuaris s’hi sentin còmodes i s’hi quedin. Les microinteraccions ens ajudaran en aquest sentit.
Exemples per fer-se’n a la 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/
Fer petites animacions
Si voleu desenvolupar webs o aplicacions que tinguin animacions segur que hi ha molts conceptes d’aquests que us sonaran: transicions CSS, SVG, JavaScript, Parallax, Keyframes…
Us deixem amb un seguit d’enllaços perquè us pogueu endinsar en aquest món de l’animació. Ja veureu que com més s’excava, més profund pot ser el pou. L’aprenentatge sobre aquests temes sembla no tenir fi!
Tutorials i vídeos per començar des de zero i arribar fins a nivells avançats. https://www.kirupa.com/html5/learn_animation.htm
- CSS animation for beginners — Animació per a principiants 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 — Per aprendre, provant de fer https://www.creativebloq.com/inspiration/css-animation-examples
- CSS animation rocks — conjunt de tutorials i exemples d’animació CSS https://cssanimation.rocks/. També és interessant saber sobre els principis bàsics d’animació https://cssanimation.rocks/principles/
Consells per a fer bones microinteraccions
No és el mateix fer una animació que fer una bona animació. La clau és encertar la durada, sorprendre a l’usuari, saber captar l’atenció durant un determinat moment… Hi ha una línia molt fina entre allò que encanta als usuaris i allò que els pot arribar a molestar si ho veuen diverses vegades i la clau és l’equilibri.
Per acabar us deixem amb aquests consells per fer unes bones animacions i construir una bona experiència d’usuari (UX) en aquest sentit.
- 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