Animare per il web
Tutto ciò che compare su uno schermo è animato.
Ogni pixel è predisposto a cambiare colore ogni volta che viene dato un comando al nostro dispositivo, in modo da disegnare forme e colori che ci dicano cosa sta succedendo, cosa è successo o cosa sta per succedere.
Forse non ce ne rendiamo conto, ma l’animazione delle interfacce non è affatto necessaria. Non da un punto di vista tecnologico perlomeno.
Portiamo in tasca dispositivi che hanno 10.000.000 di volte più capacità di calcolo (iperbole) del computer che ci ha portato sulla luna, il tempo di risposta di ciascuna operazione è praticamente immediato.
Con la velocità a cui si muovono i circuiti dei nostri dispositivi, non ci sarebbe un reale bisogno di animare l’icona di un’app che si ingrandisce e si rimpicciolisce. Ma il movimento che viene descritto ci fornisce degli indizi visivi su cosa guardare, dove dirigere la nostra attenzione e aiuta a creare dei pattern rendendo l’utilizzo delle interfacce più famigliare e intuitivo.
L’animazione costruisce dei ponti tra il virtuale ed il reale, rendendo il virtuale più accessibile, più umano e più naturale.
Da molti anni siamo abituati a vedere contenuti animati sui nostri computer o smartphones, e diamo per scontato qualsiasi cosa che si muova sui nostri schermi. L’introduzione nel movimento delle interfacce può sembrare una cosa recente, ma in realtà, già agli albori dei computer, un piccolo cursore brillante guidava gli utenti nella compilazione del testo.
Quel rettangolino lampeggiante ci diceva dove sarebbero comparse le lettere digitate sulla tastiera o, più poeticamente, ci aspettava.
L’animazione nelle interfacce digitali si è evoluta passando per successive fasi tecnologiche: dalle prime GIF animate (che poi sono tornate in grande spolvero), passando per Flash che ha contribuito a far uscire i web designer dalle griglie e dalle tabelle, per lasciare il posto alle più recenti animazioni via codice, siano esse CSS, HTLM, javascript e così via.
Ma l’oggetto che più di tutti ha rivoluzionato il concetto di connessione tra il mondo fisico a quello digitale è stato sicuramente il primo iPhone.
Per sbloccare lo schermo si doveva interagire fisicamente con uno slider, e il movimento era suggerito dal luccichio della scritta. Le applicazioni si chiudevano ed aprivano partendo dall’icona, suggerendo dove trovarla la prossima volta. Le pagine web scorrevano verso l’alto fermandosi dolcemente dopo il movimento del dito, conferendo proprietà materiali ai contenuti sullo schermo.
Oggi come allora, i meccanismi fisici implementati nei dispositivi che utilizziamo ci sono perlopiù oscuri.
La tecnologia che sblocca il telefono semplicemente guardando la nostra faccia attraverso un fascio di luce invisibile, è praticamente magia per la maggior parte di noi. E la magia ha sempre un lato nascosto, un trucco, che ci fa diffidare del suo funzionamento.
L’animazione è la metafora che spiega la magia.
Le operazioni che il nostro dispositivo deve compiere per passare da una pagina all’altra, aprire una modale o chiudere un cassetto avvengono quasi istantaneamente, troppo velocemente perché l’utente sia in grado di percepire il momento del cambiamento. L’animazione riempie questo vuoto, ci spiega cosa sta succedendo, rende visibile la relazione di causa ed effetto e conferisce al software un aspetto fisico e tangibile in cui l’utente può sentirsi a suo agio.
I principi di animazione
Quando si parla di animazione, esistono delle tecniche codificate e descritte da chi dell’animazione ha fatto un’arte e un mestiere, portando sugli schermi di tutto il mondo dei classici intramontabili. Una delle opere fondamentali che contengono queste regole è The Illusion of Life: Disney animation di Ollie Johnston e Frank Thomas, che contiene le regole che guidano i movimenti di un cartone animato.
Nel video qui sotto vediamo la rappresentazione delle 12 regole presenti nel libro, messe in movimento da Vincenzo Lodigiani (in arte Cento).
Dovevi scomodare la Disney per spiegare il movimento di uno slider? -tutti
Si.
Dovevo farlo perché gli stessi principi che si utilizzano per dare peso, sostanza e carattere ai personaggi Disney vengono messi in pratica dai motion designer di oggi per conferire le caratteristiche fisiche alle interfacce di cui parlavamo all’inizio di questo articolo. Le stesse tecniche ci fanno percepire la legnosità di Pinocchio, la malleabilità del Genio della Lampada e l’eleganza della Bella Addormentata, servono a dare peso alle pagine che scrolliamo ed efficenza ai bottoni che premiamo.
Questa è una selezione di quelle regole.
Timing and pacing
Il controllo della velocità a cui le animazioni avvengono.
Quando gli elementi di un’interfaccia cambiano stato o posizione, la durata dell’animazione dovrebbe essere lenta abbastanza da dare all’utente la possibilità di notare il cambiamento, ma anche veloce abbastanza da non farlo aspettare troppo.
Per aggiungere realismo al movimento, è anche consigliato di renderlo asimmetrico, ossia di differenziare accelerazione e decelerazione in entrata e uscita, come si vede nell’esempio.
Staging
Preparare l’utente al cambiamento.
In questo esempio è chiaro che vedere le cifre scorrere verso l’alto o verso il basso, prepara l’utente ad un aumento o ad una diminuzione del numero mostrato. Questo principio applicato alle interfacce, permette di rendere intuitivo un cambiamento, facendo passare l’informazione più velocemente all’utente.
Follow-through
La naturalezza dell’imprecisione.
Il mondo è pieno di azioni ed eventi imprecisi. Qualsiasi cosa che muovete o toccate, inizierà e finirà un movimento in maniera organica. Aggiungendo un leggero rimbalzo alle animazioni, siamo in grado di dargli un pizzico di umanità, far passare l’idea che facciano parte del mondo reale. Stando attenti a non esagerare.
Secondary action
L’animazione secondaria è quella che aggiunge il sapore al movimento. Nell’animazione tradizionale potrebbe essere il fumo che esce dal sigaro di un commissario durante l’interrogatorio, o l’incrociare le braccia mentre un personaggio si appoggia ad un muro. Nelle interfacce serve a completare l’animazione principale, conferendole un certo tono.
Spesso non viene notata dall’utente (ingrato), ma noi la mettiamo lo stesso.
Overlapping
Nell’animazione tradizionale, l’overlapping riguarda i movimenti che avvengono a causa dell’animazione principale.
Nelle interfacce troviamo questo tipo di principio quando ci sono una serie di elementi che entrano nello schermo con un leggero ritardo fra di loro, implicando una connessione logica tra gli elementi stessi. Aiuta anche ad alleggerire il movimento in ingresso e a indicare che ciascun elemento è distinto e interattivo.
Appeal
L’appeal permette di conferire al prodotto digitale l’unicità che lo contraddistingue. È l’equivalente del branding applicato al movimento.
Quello che rende uniche alcune azioni nel mondo reale (il click di una cartuccia inserita nella console, l’apertura di una maniglia, l’accensione di un motore) viene ricreato nel mondo virtuale mettendo in scena dei momenti che descrivono l’azione in modo accattivante: ad esempio l’esplosione di colori nel mettere un “like”, o la fluidità di un bottone dell’interfaccia dello smartphone.
That is the key to appeal. It’s like the harmony of elements… a chord that is perfect. You hear it and say, ‘that’s it.’
Applicare questi principi dell’animazione classica alle interfacce, è quello che distingue un’esperienza tecnologica da un’esperienza personale, è ciò che ci dà la percezione di avere tra le mani qualcosa di naturale, che si comporta come gli oggetti che ci circondano, togliendoci dall’imbarazzo di non capire come funziona il supercomputer che abbiamo in tasca.
Buona parte di questo articolo è stato realizzato seguendo i principi elencati in questa guida di Invision.
Altri spunti vengono da qui:
