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

Et proposem sis principis bàsics per donar vida i realisme a l’hora de crear animacions a la teva 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.

BoletPER APROFUNDIR:

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.

BoletPER APROFUNDIR:
Mofeta - Seguretat CMS

Foto: Pixabay

En la naturalesa difícilment trobem moviments 100% rectilinis. Tot té el seu arc de moviment, sigui microscòpic o gegant.

3. El principi d’escenificació

Aquest principi consisteix a configurar l’escena per mostrar la importància del que està passant, per redirigir la mirada de l’espectador cap a on es desenvolupa la següent acció. En animació clàssica, un exemple clar és quan un personatge en mira un altre, provoca que l’espectador miri automàticament l’altre personatge esperant que faci alguna acció.

En el nostre cas podem utilitzar aquest principi per ubicar a la pàgina els elements on volem dirigir la mirada de l’usuari, de forma que li facilitem la navegació. Per exemple, mentre mostrem un formulari que hem fet aparèixer en popup, enfosquim o fem borrós el contingut de fons i anem remarcant els camps que va omplint.

BoletPER APROFUNDIR:

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.

BoletPER APROFUNDIR:
Mofeta - Seguretat CMS

Foto: Johannes Plenio

L’exageració és un element poc o gens habitual a la natura, però sí que hi ha elements naturals que presagien un dramatisme posterior i que han sigut la base de l’exageració que hem creat els humans. Els trons i llamps previs a una tempesta en serien un clar exemple.

5. El principi d’acció secundària

Mentre s'està duent a terme una acció principal, una animació secundària pot ajudar a destacar-la o augmentar-la. Un exemple en animació clàssica és el moviment dels braços oscil·lants d'algú que camina o la inclinació del cap.

En animació web podem aplicar aquest principi en diferents moments. Un exemple molt clar és l’animació parallax. Mentre movem en scroll el contingut principal, podem moure un element de fons en una velocitat diferent i provocar l’efecte parallax. O un altre exemple seria en un smoothScroll (scroll animat en clicar un botó), donar un petit retard a l’animació dels elements per tal de donar una sensació de velocitat i que cada element és independent de la resta.

Una eina en a javascript que utiliza aquest concepte es scroollReveal.

principi-accio-secundaria
BoletPER APROFUNDIR:

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:

principi-atractiu
BoletPER APROFUNDIR:
Camaleo - Animacions web

Foto: George Lebada

La seducció a la natura és indiscutible. Des d’increïbles flors a animals amb colors extravagants. Un dels més colorits del món és el Camaleó pantera de Madagascar.
Eina
Una de les primeres animacions en informàtica va ser el parpelleig d’un cursor al sistema operatiu MS-DOS. Era una animació molt bàsica però que tothom va entendre. Era un missatge claríssim que deia “estic esperant que escriguis alguna cosa”. I si el cursor deixava de parpellejar, significava que el sistema s’havia penjat.
Msdos

Com a conclusió...

Aquests principis d'animació són atemporals per una bona raó, tenint-los en compte quan es dissenyen per a interfícies d'usuari, poden millorar considerablement la funcionalitat del vostre producte. Si s'utilitza bé, l'animació pot impactar positivament en la vostra marca.

Quan utilitzeu animacions, tingueu sempre en compte la funcionalitat del moviment: tots els moviments han de ser intencionals i beneficiar l'experiència de l'usuari d'alguna manera. Utilitzeu la llei natural de la física com a guia de com els objectes s'han de moure i interactuar entre ells.

I sobretot, passeu-vos-ho bé! El disseny útil no hauria de ser avorrit. Dissenyeu una experiència agradable i els vostres usuaris seguiran tornant.

Millora el teu disseny amb les animacions web

Si ens vols conèixer millor,
contacta'ns. I si t'agrada, segueix-nos!