Life in Motion: una guida per animare le visualizzazioni di dati mobili

Al giorno d'oggi, con la tecnologia che guida la raccolta e la produzione di enormi quantità di dati, è relativamente facile mettere le mani su informazioni che possono guidare le tue decisioni quotidiane. Le app mobili attingono alla frequenza cardiaca e ad altri dati biometrici per monitorare gli obiettivi di salute e di esercizio. Forniscono dati in tempo reale su investimenti, spese personali e budget. Possono anche aiutare i genitori a valutare i modelli di alimentazione e sonno dei loro neonati.

Per cogliere l'enorme volume di dati disponibili, non guardare oltre le relazioni annuali del designer Nicholas Felton costruite dai suoi stessi dati personali. Con così tante informazioni a portata di mano, la parte difficile è dargli un senso.

È qui che l'animazione può aiutare. L'animazione dei dati li rende più comprensibili, coinvolgenti e utili, in particolare sui piccoli schermi dei dispositivi mobili. Con l'animazione, i numeri diventano più facili da digerire e le tendenze, i modelli e le narrazioni altrimenti trascurati diventano evidenti. L'interattività in tempo reale con questi elementi visivi promuove il coinvolgimento e consente agli utenti di esplorare i dati in modo più approfondito.

Allo stesso tempo, un'animazione eccessiva o fuorviante può vanificare il suo scopo, oscurando piuttosto che illuminare le intuizioni. Quando si animano le visualizzazioni di dati mobili, i progettisti dovrebbero utilizzare i principi di progettazione del movimento ed evitare le insidie ​​comuni.

I vantaggi dell'animazione delle visualizzazioni di dati mobili

L'animazione non è un semplice abbellimento per le visualizzazioni dei dati. Il movimento offre una miriade di vantaggi e dovrebbe essere applicato con l'obiettivo di ottenere un risultato specifico.

Aiutare gli utenti a percepire tendenze e cambiamenti è un vantaggio fondamentale dell'utilizzo del movimento nelle visualizzazioni dei dati. Il defunto accademico Hans Rosling è noto per un'animazione in cui ha tracciato dati sulla durata della vita e sul reddito per mostrare i cambiamenti nella salute e nella ricchezza per dozzine di paesi nel corso di decenni. È un'animazione accattivante che chiarisce le tendenze nel tempo e contrasta le percezioni comuni sullo sviluppo globale.

La ricerca suggerisce che l'animazione di grafici statici può migliorare la percezione grafica e aumentare l'interesse degli spettatori. Invece di visualizzare un grafico tutto in una volta, ad esempio, gli elementi possono entrare a velocità diverse per non sovraccaricare lo spettatore con troppe informazioni. I movimenti "aiutano a mostrare o migliorare la gerarchia visiva degli elementi, o l'orientamento degli assi e il modo in cui i dati vengono visualizzati", afferma Tetiana Donska, una designer UI/UX con sede a Londra nella rete Toptal.

L'animazione aiuta anche i progettisti a fare un uso efficiente degli schermi dei dispositivi mobili. "Il movimento nelle visualizzazioni dei dati aiuta a creare consapevolezza delle transizioni tra stati diversi e fornisce più informazioni senza ingombrare l'esperienza dell'utente", afferma Donska. L'interattività in tempo reale può mantenere ulteriormente un'interfaccia pulita perché gli utenti possono esplorare i dati attraverso gesti come toccare, trascinare, scorrere e zoomare. Ad esempio, gli utenti possono far scorrere un dito lungo un asse per rivelare valori diversi o toccare per svelare i numeri.

L'integrazione di aggiornamenti in tempo reale nelle visualizzazioni di dati animati può renderle ancora più coinvolgenti per gli utenti. Olajide Akinpelu, un designer UI/UX di Toptal con sede in Nigeria, afferma che vedere l'aggiornamento dei dati davanti ai nostri occhi aiuta la cognizione umana. Un utente che aggiorna i dati statici avrà più difficoltà a rilevare le modifiche; il movimento in tempo reale li aiuta a identificare le informazioni che altrimenti potrebbero perdere.

Naturalmente, rendere naturali le transizioni e i movimenti senza distrarre l'utente è più facile a dirsi che a farsi.

Tecniche di animazione e visualizzazione dei dati per dispositivi mobili

La visualizzazione dei dati non si limita a set di dati complessi rappresentati da grafici e grafici tradizionali. Anche un pulsante "Mi piace" che misura il sentimento degli utenti su un'app social è un modo per visualizzare i dati.

Indipendentemente dalla complessità, un insieme comune di principi e tecniche entra in gioco quando si animano le visualizzazioni dei dati. Le quattro tecniche su cui ci concentriamo in questo articolo: cambiamento di valore; allentamento, compensazione e ritardo; genitorialità; e zoom: mirano a infondere il movimento nell'ambiente UX con la naturalezza del movimento nel mondo reale, in conformità con le aspettative e il senso di continuità e narrativa innati degli utenti. L'obiettivo, dopo tutto, è aiutare gli utenti a comprendere i dati astratti, non solo coinvolgerli o deliziarli.

Cambio di valore

Quando si mostrano le variazioni di valore con l'animazione, invece di visualizzare un numero statico, un contatore numerico si alza o una barra si alza prima di arrivare a una cifra finale. Questo può essere un modo efficace per trasmettere il progresso o la crescita, o la loro mancanza. Significa anche che i dati sono soggetti a modifiche e, in alcuni casi, i valori animati indicano interattività.

Le visualizzazioni del cambiamento di valore sono prevalenti nel panorama mobile, comprese le app di fitness, istruzione e finanza. In un'app per l'apprendimento delle lingue, ad esempio, una barra può aumentare in modo incrementale fino ad arrivare a un punteggio finale in un test. Il cambiamento di valore mostra progressi e può fornire all'utente un senso di realizzazione, incoraggiandolo a continuare un percorso di apprendimento.

L'applicazione della modifica del valore alle linee in un grafico è un altro modo per dimostrare le modifiche nel tempo. In un grafico a barre che mostra il prodotto interno lordo (PIL) di diversi paesi, ad esempio, il movimento può rivelare le traiettorie delle economie nazionali l'una rispetto all'altra. Tali elementi visivi sono chiamati gare del grafico a barre.

Easing, Offset e Delay

Nel mondo fisico, un oggetto non può andare istantaneamente da zero a 20 mph. Nel mondo digitale, invece, puoi creare movimento senza accelerazione o decelerazione. Ma questo non significa che dovresti. All'occhio umano, tale movimento appare innaturale, motivo per cui è utile conferire agli elementi grafici velocità di ingresso e uscita naturali, note come andamento.

Compensare l'introduzione di diversi elementi dell'interfaccia utente e ritardarne la velocità può ulteriormente segnalare agli utenti che vengono visualizzate variabili distinte e può aiutare a stabilire una gerarchia tra di loro. In un'app di trading azionario, ad esempio, il valore delle azioni di un utente potrebbe apparire per primo seguito da quelle degli indici generali. L'offset e il ritardo rendono più facile per gli utenti comprendere numeri e grafici che se fossero presentati tutti in una volta.

Genitorialità

I genitori creano relazioni tra i componenti dell'interfaccia utente. Quando una proprietà (come posizione, scala o colore) nell'elemento padre cambia, cambia una proprietà nell'elemento figlio. Ad esempio, su un grafico a linee, se un punto su una linea è il genitore, mentre l'utente trascina il punto potrebbe vedere il valore (l'oggetto figlio) cambiare.

Essere genitori è un modo efficace per aumentare l'interattività e creare una gerarchia.

Zoomare

Lo zoom consente agli utenti di passare facilmente da una vista a volo d'uccello dei dati a una più granulare. Può essere una tecnica utile quando si presentano set di dati di grandi dimensioni, del tipo che in genere potrebbe essere visualizzato su desktop. Un'app di monitoraggio delle azioni, ad esempio, può caricare una visualizzazione settimanale dei prezzi per un determinato titolo e consentire agli utenti di ingrandire o ridurre per rivelare dati giornalieri o annuali.

Una delle forme più comuni di visualizzazione dei dati sono le mappe, ampiamente utilizzate nelle app di fitness, bike sharing e ride-hailing. Lo zoom è uno strumento fondamentale in questo contesto poiché i confini dello schermo mobile riducono notevolmente ciò che può essere presentato in un'unica visuale.

Insidie ​​del Motion Design da evitare

Edward Tufte, l'uomo accreditato di aver letteralmente scritto il libro sulla moderna visualizzazione dei dati, aveva una semplice massima: "Soprattutto, mostra i dati".

Concentrati sulla trasmissione di informazioni. Attributi come colore, forma e movimento dovrebbero essere usati solo per migliorare la comprensione dei dati. Elementi visivi estranei - o "spazzatura grafica" come la chiamava Tufte - sminuiscono questo scopo.

Sui dispositivi mobili, dove gli utenti dello schermo possono essere inclini alla distrazione, troppe parti mobili in una visualizzazione dei dati possono essere opprimenti.

"Con i dispositivi mobili hai già un fattore di forma ridotto che richiede concentrazione", afferma il designer veterano Darrell Estabrook, che è entrato a far parte della rete di Toptal nel 2019. Per qualsiasi flusso di lavoro mobile, senza passaggi ben progettati e discreti, "il tipo di utente va storto".

Estabrook aggiunge: "Per tutta la visualizzazione dei dati, devi chiedere quali informazioni stai fornendo all'utente in modo che possa prendere la decisione successiva ... premere un pulsante o scrivere un'e-mail o scavare più a fondo. Cosa devi fare per fornire loro queste [informazioni]?"

Puoi progettare visualizzazioni di dati mobili mirate ed efficaci evitando queste insidie:

Elementi visivi ad alta intensità di risorse che non aggiungono molto valore

Il rendering del movimento negli elementi visivi può richiedere molte risorse sul back-end e potrebbe influire negativamente sulle prestazioni e sull'esperienza dell'utente sul front-end. Grandi set di dati o dati che richiedono una codifica estesa elevano questo rischio. Prima di impiegare le risorse nella creazione di tali elementi visivi, i team di progettazione e i clienti dovrebbero essere chiari sul risultato desiderato e che ne varrà la pena.

Animazione appariscente o superflua

Le visualizzazioni di dati animati dovrebbero supportare lo scopo di un'applicazione. ​​Un'app per l'apprendimento delle lingue potrebbe utilizzare il movimento per enfatizzare i progressi degli utenti, mentre un'app di investimento potrebbe evidenziare sottilmente dati utilizzabili. Indipendentemente dalla natura dell'app, tuttavia, nella maggior parte dei casi i designer dovrebbero evitare animazioni appariscenti, come coriandoli che cadono o fuochi d'artificio. Non solo rischiano di ludicizzare gli elementi visivi, che potrebbero portare a un coinvolgimento malsano con un'app, ma possono oscurare o esagerare ciò che i dati effettivamente trasmettono.

Effetti visivi eccessivamente interattivi

Lavorare con i dati richiede un certo grado di precisione e gli utenti avranno bisogno di una parte decente dello schermo dello smartphone (da 7 a 10 mm è generalmente considerata una best practice) per eseguire correttamente i gesti. Troppa interattività potrebbe rivelarsi ingombrante e frustrante. È utile dare la priorità a un'azione alla volta.

Stile incoerente

Le visualizzazioni dei dati dovrebbero integrarsi con lo stile generale e la funzionalità di un'applicazione, qualcosa a cui Apple si riferisce nelle sue linee guida sull'interfaccia umana come integrità estetica.

Secondo Akinpelu, il designer UX/UI con sede in Nigeria, mantenere la coerenza stilistica "nel tipo di transizione che usi, il tipo di animazione, la miscela di colori" aiuta gli utenti a navigare nei set di dati.

Tenere il passo con l'aumento dei dati

I dati sono diventati un appuntamento fisso nelle nostre vite, dal lavoro e dalla scuola alla salute e alla finanza. Con smartphone sempre più sofisticati e la diffusione della connettività 5G, anche il volume dei dati e il potenziale per applicarli aumenteranno sicuramente.

L'animazione può essere uno strumento importante per aiutare le persone a dare un senso a tutte queste informazioni. Motion consente agli utenti di comprendere più facilmente metriche, tendenze e relazioni chiave. Come con qualsiasi funzionalità UX, tuttavia, l'animazione può essere abusata o utilizzata in modo improprio, il che alla fine potrebbe rendere i dati meno comprensibili. Utilizzando i principi e le tecniche di motion design, i designer possono creare visualizzazioni di dati mobili animate che sono coinvolgenti e perspicaci.

Ulteriori letture sul blog di Toptal Design

• Avvincente e in movimento: una guida ai principi di Motion Design
• L'impatto crescente dell'industria del motion design
• Delizia gli utenti con queste best practice per la progettazione di app mobili