Les animacions en els dissenys d’interfícies: Descobreix com millorar la UX

La importància de les animacions en el disseny d’interfícies

Quan dissenyem interfícies, hem de tenir en compte que els usuaris interactuaran amb elles, no són un canal unidireccional. Els productes o serveis digitals han de donar una resposta a les accions que pren l’usuari sobre elles. Per a aconseguir una millor experiència d’usuari, l’ideal és tenir animacions en el teu producte o servei digital:

  • Ajuden a l’usuari a entendre el que està passant en realitzar una acció.
  • Faciliten la ubicació dels elements o pantalles que canvien.
  • Ajuden a saber si hi ha una tasca en curs i que no s’ha quedat congelada.
  • Funció emocional i estètica.

Existeixen diferents tipus d’animacions:

Feedback

Les animacions de feedback o retroalimentació són aquelles que succeeixen per a deixar saber a l’usuari que la seva interacció ha estat reeixida. Per exemple, tenir una animació en la qual canvia l’estat del botó que s’està clicant ajudarà a l’usuari a saber que aquest botó funciona i que la seva acció s’ha realitzat amb èxit. En aquest prototip pots prémer un botó i veure com reacciona:

PROTOTIP

També poden incloure’s en aquesta categoria els hovers, el canvi d’estat quan es passa el ratolí per damunt, sense clicar.

En aquesta mena d’animacions és important que l’element clicable no es desplaci tant, com perquè es perdi el focus amb el ratolí o que desaparegui de la vista una vegada s’activi, ja que pot confondre i frustrar als usuaris.

Progrés

Les animacions de progrés són les que indiquen que s’està duent a terme una acció llarga i que l’usuari ha d’esperar perquè es completi. Són comuns en aquesta categoria les barres de progrés, que s’usen per a esperes llargues com a descàrregues o instal·lacions. Si a més incloem el temps restant, tindrem una gran animació de progrés.

PROTOTIP

Càrrega

Una bona opció per a la càrrega d’una pàgina, sobretot pàgines amb molt de contingut, és la de tenir una animació que indiqui a l’usuari que la web s’està carregant. Hi ha dues opcions principalment, spinners i skeletons.

Els spinners (cercles o discos que donen voltes) són adequats per a esperes molt curtes, d’uns pocs segons.

Els skeletons o esquelets són estructures (normalment en forma de rectangles grisos) que se situen on anirà el contingut abans que carregui. És una mica millor que els spinners perquè donen la percepció que la pàgina carrega abans i ens donen informació de l’estructura abans que acabi de carregar. És especialment indicat per a pàgines amb molt de contingut, com a periòdics, xarxes socials, etc, que triguen més d’un parell de segons a carregar.

PROTOTIP

Trucada a l’acció

Aquest tipus d’animacions responen a una necessitat d’atenció per part de l’usuari, i se solen usar sobretot per a missatges comercials com per exemple “Compra ja”, “Registra’t ara”, etc.

Són animacions que no responen a una acció prèvia de l’usuari o procés en curs (com a clics, hovers o càrregues de qualsevol tipus), sinó que són animacions que volen captar l’atenció per a dirigir a l’usuari cap a una acció concreta o transmetre-li un missatge. Si són massa cridaneres poden donar sensació d’intrusió i provocar rebuig, per la qual cosa és recomanable no passar-se.

PROTOTIP

Transició

En aplicacions o programes pot haver-hi animacions de transició entre diferents pantalles, per a donar-li als usuaris una sensació de continuïtat amb la pantalla prèvia i donar-los context sobre on estan.

Per exemple, en el prototip que hem preparat, hi ha tres opcions de productes. En clicar una d’elles, s’estén la finestra sobre la resta i apareix informació addicional, però sense que desaparegui en cap moment la informació prèvia que l’usuari ha clicat.

A més d’oferir context, una bona animació de transició serà percebuda com visualment agradable, la qual cosa provocarà sensacions positives en els usuaris. No oblidem que les aplicacions visualment agradables també són percebudes com més fàcils d’usar.

PROTOTIP

Notificacions

Aquesta és en una certa manera semblant a les animacions de trucada a l’acció, ja que és un element que vol captar l’atenció de l’usuari, encara que la diferència és que aquestes no contenen missatges comercials, sinó avisos importants que requereixen atenció, com un nou missatge, un avís que els canvis s’han guardat, etc. Encara que també existeixen pàgines que utilitzen aquest tipus d’animacions i elements per a mostrar missatges comercials i incitar una acció o compra. Per exemple “Un usuari ha comprat aquest article fa 5 minuts” o falses notificacions que obren un xat amb un bot o amb suport tècnic o l’equip comercial d’una empresa.

PROTOTIP

Decoratives

Les animacions decoratives no tenen cap funció més enllà de l’estètica. No responen a accions de l’usuari ni tampoc a anomenades a l’acció ni per a dirigir a l’usuari a una acció específica. Però donen vida a les pantalles i són una oportunitat perfecta per a donar-li personalitat al producte o servei i que sigui més memorable i agradable per als usuaris. Són bastant comuns en processos d’o pantalles d’error.

PROTOTIP

Encara que ens ofereixen molts beneficis, una animació mal executada pot tenir l’efecte contrari.

  • Les animacions han de tenir la quantitat de moviment just. Un element que es mogui massa pot desubicar, distreure o frustrar. Això també passa si hi ha moltes coses movent-se al mateix temps.
  • Ha de tenir també la velocitat o temps adequades. Si és molt lenta o molt ràpida l’usuari es frustrarà.
  • Cal donar una opció de desactivar o pausar el moviment de les animacions automàtiques, com els carrusels. En el cas de les notificacions, haurien de descartar-se manualment i no amb el temps.
  • Cal anar amb compte amb els moviments poc naturals. Si un element es mou en una direcció no esperada, diferent del sentit de la navegació o poc natural, molestarà a l’usuari.
  • No es recomana usar animacions que distreguin quan l’usuari estigui realitzant un procés que requereixi atenció, com emplenar un formulari.

Siguin les que siguin les necessitats del teu projecte, pots contactar amb nosaltres i t’ajudarem amb el disseny del teu producte o servei.

Registra't a la nostra newsletter​

    En què et podem ajudar?