Su di un bellissimo articolo che ho scovato in rete (ma su cui non è riportato l’autore che vorrei ringraziare) viene usato il termine Disneyfication (ed è bellissimo). Difatti l’autore, indica che questo esempio dimostra come sia troppo sofisticata un’animazione funzionale. Qui l’elasticità delle animazioni dei rimbalzi e il ridondare delle visual interaction sono troppo Disneyane.

Le animazioni, sono come delle maledizioni… se ne si abusa possono perdere il loro impatto

Ed è proprio per questo che molti designer stanno confondendo l’interazione con la UI grazie alle funzioni animate con l’intrattenimento o i videogame. Cosa vuol dire questo? Vuol dire che un’animazione, come ho ribadito già nell’altro articolo, non deve essere esagerata… percettibile ma non invasiva. Nell’esempio in basso, potete vedere come in 100ms (millisecondi) tutte le informazioni da inviare all’utente sono pienamente soddisfatte.

In questa demo invece una piccola vibrazione della notifica farà capire all’utente che qualcosa non è andato a buon fine.

E’ quindi utile usufruire di queste animazioni funzionali solo per gli elementi più importanti, o per dare a loro una sorta di priorità di importanza tra l’uno e l’altro.

Walter Fantauzzi

L'articolo La UI non è un cartone della Disney proviene da UX360 Team.

Finchè gli esseri umani saranno creature guidate dalla vista, l’impatto significativo delle immagini non potrà che aumentare grazie all’aiuto degli help animati.

I nostri occhi prestano subito attenzione agli oggetti in movimento, così come se fossero delle caramelle per gli occhi, occorre creare elementi accattivanti e vivaci che richiamano l’attenzione per creare applicazioni differenziate da quelle concorrenti.
Inoltre quest’ultimi elementi migliorano la UX. Occorrono animazioni rapide e corte per essere efficaci.
Con il supporto delle User Interface, vedremo come migliorare la UX nel seguente articolo grazie alle functional animation che ho trovato in giro per la rete, realizzate da Designer incredibili.

Cos’è una Functional Animation?

Si tratta di delicate animazioni incorporate nalla User Interface come parte di funzionalità del design estetico. Rafforzano il design nella sua funzionalità e rendono le operazioni più chiare:

1. Riducono il carico cognitivo.
2. Prevengono i cambiamenti di stato anonimi (indicano lo status di un elemento, tipo un loading con la clessidra).
3. Stabiliscono richiami alle relazioni spaziale degli elementi sullo schermo.

Negli approcci di design human-centered oriented, dove lo user è il principale punto di interesse, una UI deve essere intuitiva, responsive ed umana! Pertanto le Functional Animation permettono di colmare questi goals.

Il ruodo delle Functional Animation nella UId

Se ben cognegnata e testata la Funtional Animation (da qui in poi F.A.) ha il potenziale per soddisfare molteplici funzioni.

Visual Feedback nelle user action

Ottime interaction design producono feedback che ti fanno sentire parte integrante con gli elementi visivi dell’interfaccia, producendo dei risultati tangibili.
In questo caso un esempio sono i bottoni o i controlli che appaino nelle UI come elementi tangibili dientro un vetro. Questo vetro è l’unico ostacolo mentale tra noi e quell’elemento pertanto le Functional Animation creano un ponte, un tramite per superare questo scalino facendoci apprezzare immediatamente il sistema di imputo e i suoi modi di lavorare con un look and feel manipolabile.
E’ il caso dell’immagini seguenti scovate su Behance.

Buttons and other active controls should respond to user actions with visual feedback. Image credit: Behance

Image credit: Ramotion on Behance

I visual feedback, non tengono lo user in uno stato di dubbio sullo status di un elemento o di alcune azioni. Difatti in casi di operazioni non andate a buon fine, un’animazione ci farà capire che c’è un problema in modo semplice ed intuitivo. Di solito, troviamo in molte app, l’effetto shake del campo password nel caso in cui l’avessimo inserita male.
Lo users viene immediatamente avvisato tramite un’animazione che c’è un problema. Image credit: thekineticui

Possiamo definire quindi gli scopi finali della F.A. in:
1. Far riconoscere al sistema che c’è stata un’azione da parte dell’utente
2. Confermare o negare l’azione dell’utente.

Visibilità dello status del sistema

Come ci indica Nielsen’s nelle heuristics for usability, la visibilità dello status di sistema rimane il principio più importante nella UId. Lo user ha bisogno di sapere il suo attuale nel contesto del sistema senza avere dubbi su che cosa l’app stia facendo. Con una appropriata F.A. visuale, va comunicato allo user lo stato attuale dell’operazione richiesta o eseguita.

Nel caso di un upload di dati, possiamo sfruttare un’animazione che ci permetta di capire a che punto sia il caricamento dei dati, così come mostrato nell’animazione seguente.

Una simpatica animazione ci permette di distrarre lo user da un caricamento lungo e noioso.

Image credit: tympanus

A concludere l’articolo posso dirvi che, in qualsiasi posto si voglia piazzare una F.A., tenete sempre conto che deve dare supporto allo user nel farlo orientare su cosa sta accadendo durante l’uso dell’applicazione.

Rendete le app funzionali! Buona UXd

Walter Fantauzzi

L'articolo Migliorare la UX con le “Functional Animation” proviene da UX360 Team.