Els principis de l'animació clàssica aplicats al disseny web

En el post “Millora el teu disseny amb efectes i animacions web”, parlàvem de les diferents tipologies d’animacions per a web i els formats més utilitzats. Tot i això, el món de les animacions és enorme i en aquest article us proposem endinsar-nos una mica més en ell.

Fa 40 anys, l’any 1980, en Frank Thomas i l’Ollie Johnson, treballadors de Disney que formaven part del prestigiós grup dels ‘Nou ancians’ (Disney's Nine Old Men) varen redactar els 12 principis de l’animació, dins del seu llibre “The Illusion of Life”.

Aquests 12 principis són una guia per crear la il·lusió de moviment natural en personatges i objectes. Pel que nosaltres les volem ens interessen 6 d’aquests principis, ja que encara són vàlids per millorar les animacions web; fer que siguin naturals i fluides, de manera que s’integrin totalment al disseny, però sense molestar a l’usuari en la seva experiència de navegació, tot al contrari, el que volem és millorar-la.

Els 6 principis, al detall:

1. Principi del dibuix sòlid

Aquest principi és la base del disseny de materials. El dibuix sòlid es refereix al tractament de formes com si es tractessin d'objectes sòlids reals i, per tant, han d’estar subjectes a les lleis naturals de la física.

En les interfícies d’usuari, com la d’una web, aquest concepte és fonamental per desenvolupar relacions espacials entre panells o informació. Tots els objectes mantenen un pes i volum fixats i estan subjectes a forces com la gravetat, la fricció i la inèrcia, de manera que qualsevol resultat del moviment hauria de reflectir-ho. Quan els objectes segueixen aquesta llei natural es tornen més intuïtius per als usuaris.

Una aplicació d’aquest principi aplicat a una animació web, seria per exemple qualsevol element que l’usuari pugui clicar i arrossegar per reubicar-lo en un altre punt. L’element que l’usuari “agafa” ha de tenir un comportament d’objecte sòlid i per tant mantenir la forma durant el trasllat (arrossegament). També el podem fer créixer una mica per donar la sensació que l’hem elevat del seu lloc i per tant pot passar per sobre dels altres elements de la web. I si aquest element interacciona amb d’altres durant aquest trasllat, aquests altres elements també s’hauran de moure amb el mateix principi.

2. El principi dels arcs

La direcció en què es mou un objecte ens explica el tipus d'objecte que és. Normalment només els de tipologia mecànica es mouen en línies perfectament rectes, mentre que els que tenen més qualitats orgàniques es mouen en arcs.

Els arcs poden tenir variacions de coordenades XY, per exemple, una pilota votant o també variacions de velocitat, que seria aplicar l’efecte de gravetat a les animacions, sigui per donar-los acceleració o desacceleració a l’inici i al final de l’animació.

Per dotar l’element de més vida també és recomanable utilitzar l’efecte rebot o “bounce” que dóna elasticitat i plasticitat a l’animació.

Aplicant-ho a web, un exemple clar és l’aparició d’elements durant la càrrega del contingut, sigui a l’inici o bé durant l’scroll. Si els fem aparèixer de manera mecànica, pot produir un efecte brusc que pot molestar visualment a l’usuari. Mentre que si apliquem un arc de moviment mentre es posiciona l’objecte, el moviment serà molt més atractiu i natural.

4. El principi d’exageració

En animació clàssica, quan es vol donar dramatisme a una acció, s’exagera el moviment natural per donar-li més importància i que destaqui sobre els altres. Serveix també per captar l’atenció de l’espectador en certs moments.

En animació web també tenim moments importants que volem destacar, per exemple en un formulari, si l’usuari s’ha deixat d’emplenar un camp o ha escrit malament un correu electrònic, podem donar-li un toc d’atenció no només amb un missatge o un color, sinó amb un moviment brusc de l’element. D’aquesta manera emfatitzem “l’error”.

O per exemple en aquesta animació de descarrega d'un fitxer, on li podem donar vida a tots els elements per a que sigui més atractiu per l'usuari durant l'espera. Fins i tot quan la descàrrega falla.

6. El principi de l’atractiu

Aquest principi és el més difícil d’aconseguir. Es tracta de seduir l’espectador. Si una animació provoca un gest expressiu a la persona que l’està mirant, ja sigui una petita obertura dels ulls, o una obertura de boca o un lleuger somriure, has creat una interacció atractiva que és molt valuosa i porta l’atenció de l’usuari a un nivell més alt.

Per aplicar aquest principi a l’animació web, hem de buscar sorprendre l’usuari amb elements que no s’esperi, que siguin originals i atractius i que li provoqui aquest gest expressiu.

Per exemple, podem fer que un botó faci alguna cosa inesperada quan l’usuari el clica:

O podem animar elements que ningú s’esperaria que s’animessin, com per exemple el contingut del líquid d’unes icones:

O que en fer clic sobre d’un lloc que no hauria de tenir cap interacció, ens quedes enganxat el fons de color al ratolí fins que el tinguis a una certa distància: