mobile insiders, mobile advertising, mobile business, mobile design, advertising animation, animation, visual, visualization, smartphone, rich media, user iteraction, UI mobile, animazioni vettoriali. CSS3, javascript, graphic tool, graphic plug-in

MOBILE INSIDERS – UI Animation: effetti speciali a portata di smartphone

Nell’ultimo decennio abbiamo assistito a notevoli cambiamenti nella progettazione di contenuti pubblicitari per il contesto digital. Come è ormai noto a tutti, gli smartphone e di conseguenza la mobile advertising, hanno saputo guadagnarsi una posizione di tutto rispetto sul podio dei media più influenti a supporto delle decisioni d’acquisto dei consumatori. Constatazione maggiormente rafforzata questa, dagli ultimi dati di settore che indicano come gli utenti web mobile only, siano ormai da qualche anno addirittura in numero maggiore rispetto agli utenti desktop.

Troppo spesso però, in quanto designer di contenuti digitali ma anche ed in primis da utente, mi capita di ritrovarmi esposto a contenuti pubblicitari progettati con scarsa attenzione o poco criterio. Tralasciando il fatto che non esiste cosa più errata dell’utilizzare il medesimo layout grafico per qualsiasi media, quindi senza preoccuparsi di riorganizzare i contenuti in maniera consona al canale interessato (criticità che dovrebbe essere ormai nota a chiunque operi nel settore e non soltanto ai creativi) vorrei ora spezzare una lancia a favore dell‘importanza dell’utilizzo delle animazioni nella mobile advertising.

Se è vero che un visual grafico coerente, ben progettato, con dei contenuti testuali opportunamente misurati a prova di smartphone, siano importanti, è anche vero che questo non è più sufficiente a catturare l’attenzione dell’utente. Rich-Media (formato banner interattivo progettato in HTML5, CCS3 e javaScript) e video sono sicuramente una scelta migliore rispetto a dei banner display statici, quando ci si trova a dover pianificare per i digital media. Va da se che sia video che rich-media offrono ai designer possibilità di animazione infinite con le quali poter conquistare il pubblico di riferimento.

Perché ritengo che animazioni e transizioni eleganti siano così di alto impatto nella progettazione mobile?

  1. Le animazioni, quando usate correttamente, aiutano a ridurre il carico cognitivo. Offrono, infatti, la possibilità di presentare i contenuti con un preciso e ben scandito ordine cronologico, lasciando all’utente il tempo necessario per metabolizzarli.
  1. Spettacolarizzazione. È innegabile che un lettering, ad esempio, quando opportunamente animato, risulti certamente di maggiore impatto visivo rispetto ad un copy statico. Il contenuto risulterà di gran lunga più memorabile.
  2. Le animazioni anticipano e guidano la user interaction. Istruiscono l’utente sulle interazioni che è possibile eseguire all’interno del formato. Possono mostrare elegantemente ciò che è interattivo e ciò che non lo è.
  3. Coinvolgimento emotivo. Un contenuto animato rende la comunicazione di gran lunga più coinvolgente, soprattutto quando supportata dai video. È importantissimo però che il loro “tone of voice” e la natura delle animazioni siano coerenti con quello del brand/prodotto da promuovere e che il peso complessivo di animazioni e video non comprometta le prestazioni del formato quando ci si trova in condizioni di connessione ridotta (ad esempio 3G).

È quindi opportuno far presente che, così come un buon utilizzo delle animazioni può contribuire ad ottenere un più elevato engagement rate, un uso smodato delle stesse o comunque una progettazione non in linea con il tipo di comunicazione o target di riferimento potrebbe generare frustrazione nei confronti dell’utente e di conseguenza tassi di conversione inferiori alle attese.

L’importanza del produrre formati e UI mobile animate ha portato gli sviluppatori a porsi il problema di soppiantare le animazioni fino a poco tempo fa realizzate per mezzo di file “.gif”, favorendo invece animazioni vettoriali prodotte direttamente in codice CSS3 e javascript; quindi più leggere a livello di peso e dalla resa grafica maggiormente definita, accurata e gestibile.

Sono nati così diversi tool e plug-in dedicati alla creazione ed esportazione in formato HTML5, CSS3 e javascript delle animazioni prodotte ad esempio in Adobe After Effects CC (da sempre il tool di riferimento per quanto riguarda il mondo della motion graphic). Alcuni esempi sono il plug-in Bodymovin ed i tool Lottie di Air b’n’b e Keyframe di Facebook.

Ora la grande ed entusiasmante sfida per noi designers e creativi del settore sarà capire, prevedere, progettare la “next big thing” che potrà innalzare il settore della mobile advertising e dell’app design ad un livello ancora più alto.

Thomas Casotto

Condividi l'articolo:
LinkedIn
Facebook
Twitter
Instagram
Follow by Email