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.