Dai vita alla microinterazione e all'animazione dell'interfaccia utente attraverso collaborazioni tra sviluppatori e designer

Siamo in grado di creare un'esperienza piacevole per gli utenti attraverso la microinterazione e l'animazione dell'interfaccia utente!

Ciao, mi chiamo Kyo Kim e lavoro come designer di prodotti presso Capital One da circa due anni. Ho usato microinterazioni e animazioni durante il mio lavoro qui, incluso su alcuni progetti mobili che potresti aver usato da solo. Prima di iniziare a lavorare nella tecnologia, il mio background era nel cinema. Nel film, il focus è tutto sulla narrazione e il montaggio per creare una storia che coinvolga il pubblico; e gran parte di ciò è realizzato attraverso l'uso delle transizioni. Trovo queste abilità utili oggi mentre creo esperienze e storie per strumenti digitali.

Durante la progettazione, penso a fattori che offrirebbero agli utenti un'esperienza piacevole e piacevole con le transizioni e la narrazione.

Affinché un prodotto offra ai suoi utenti un'esperienza piacevole, deve offrire molto più di un design esteticamente piacevole e effetti di animazione impressionanti.

Indipendentemente dal fatto che il prodotto sia basato su app, basato sul Web o qualsiasi altra forma di prodotto digitale, deve attirare gli utenti, essere piacevole per loro da usare e dare loro l'opportunità di interagire con esso in modo diretto e significativo modo.

Le microinterazioni hanno il potere di rendere l'esperienza dell'utente piacevole e soddisfacente in un modo che molti elementi di design non possono. Prima di entrare nelle microinterazioni nel contesto della progettazione del prodotto, iniziamo dai fondamenti.

Quali sono? Perché è buono per l'esperienza dell'utente? Perché designer e sviluppatori dovrebbero incorporarli nel loro lavoro? In che modo i team di progettazione del prodotto possono collaborare per migliorarli?

Quali sono le microinterazioni e perché dovremmo preoccuparci di loro?

Cosa sono le microinterazioni o le animazioni dell'interfaccia utente? Le persone spesso si riferiscono a loro come animazioni graziose, grafica animata o design di immagini in movimento. Tuttavia, sono molto più di questo.

A differenza di altre forme di animazione che esistono esclusivamente per creare l'illusione del movimento, le microinterazioni coinvolgono direttamente l'utente, consentendogli di svolgere una varietà di compiti e interagire con il prodotto in modo intuitivo ed efficace.

Se dovessimo ricollegarlo ai principi di una buona progettazione dei sistemi, ciò migliorerebbe e consentirebbe il feedback del sistema per l'utente. Se eseguito correttamente, gli utenti prenderanno le micro-interazioni come un messaggio da parte dell'utente che sta facendo (il sistema) ciò che dovrebbe fare in risposta a ciò di cui l'utente ha bisogno.

Anche se non sai cosa sono le microinterazioni, ti impegni regolarmente con loro. Ogni volta che usi un'app o un prodotto basato sul Web per svolgere una determinata attività, che si tratti di leggere le notizie, fare un acquisto, giocare, creare un profilo o regolare le tue impostazioni e le tue preferenze di notifica, ogni singola azione che fai costituisce una microinterazione. Le microinterazioni si integrano perfettamente nella piattaforma di un prodotto, rendendo le loro funzioni trasparenti e accessibili, migliorando efficacemente l'esperienza complessiva dell'utente.

Sebbene queste "azioni" assumano una serie di forme diverse, alcuni esempi comuni includono:

  • Quando "spostiamo" un articolo in un carrello virtuale.
  • Quando selezioniamo tra due opzioni su un pulsante di attivazione / disattivazione simile a CTA.
  • Quando "tiriamo giù" per aggiornare un feed di notizie e vedere l'ultimo aggiornamento.
  • Quando "scorriamo su e giù" nel feed o nella pagina lunghi.

Quando progettiamo una microinterazione, dobbiamo esaminare se è veramente necessario e vitale per l'esperienza dell'utente. Altrimenti, ha il potenziale per distrarre il modulo utente utilizzando il prodotto in modo efficace o diventare rumore visivo.

Principi di microinterazioni

Ci sono tre principi che prendo sempre in considerazione durante la progettazione di microinterazioni.

  1. Continuità (e sottigliezza)

Gli elementi di microinterazione dovrebbero essere sottili in modo che quando un utente compie un'azione, vi sia un flusso continuo nella sua esperienza. Ad esempio, se stiamo creando un'animazione a scorrimento in un feed lungo, l'utente dovrebbe essere in grado di concentrarsi sul contenuto della pagina anziché sull'animazione a scorrimento stessa.

2. Prevedibilità

Le microinterazioni di qualità hanno un elemento di prevedibilità che consente all'utente di navigare un prodotto in modo efficace ed efficiente. L'utente può prevedere con precisione gli effetti delle proprie azioni, sentirsi a proprio agio nel invertirle e fiducioso nella propria capacità di eseguire come previsto.

3. Trasformabilità

Transizioni fluide tra più schermi e trasformazioni ben definite dei vari oggetti al loro interno sono aspetti chiave delle microinterazioni di qualità. Consentono all'utente di sviluppare una comprensione intuitiva delle relazioni tra gli schermi e gli elementi al loro interno.

Se progettate seguendo questi principi, le microinterazioni forniscono il contesto per un progetto aiutando gli utenti a sapere come interagire con esso. Una microinterazione è un evento momentaneo che completa una singola attività. Probabilmente i più piccoli elementi interattivi di un sito Web o di un design di app, le microinterazioni sono tra le più vitali poiché servono una varietà di funzioni principali.

I trigger (toccare, scorrere, trascinare, ecc.) Avviano ciascuna delle azioni elencate nella sezione precedente (continuità, prevedibilità e trasformabilità). L'utente esegue un'azione su un sito Web o un'app per avviare il processo (anche se continua dopo il passaggio iniziale). Ciò segue un modello di invito all'azione da parte di un utente, regole di coinvolgimento determinate dall'interfaccia (cosa accadrà e come), feedback da parte dell'utente (ha funzionato o meno) e modelli o cicli (fa l'azione accadere una volta o ripetere su un programma).

-Come sviluppatori e designer possono lavorare insieme per dare vita alle microinterazioni

Come puoi vedere, le microinterazioni hanno un ruolo fondamentale nel dare forma all'esperienza dell'utente. Per questo motivo, sono diventati una parte sempre più importante del mio lavoro come designer di prodotti. Avendo lavorato su vari progetti su più piattaforme e usi, ho notato che non tutti riconoscono il valore di questi elementi o come crearli in modo efficace. Ancora più importante, spesso i membri del team non sanno come esprimere le loro idee gli uni sugli altri in merito alla progettazione di transizioni e microinterazioni.

Mi sono reso conto che tutto si riduceva alla comunicazione: qualcosa è andato perso nella traduzione quando ho spiegato le mie idee di design ai miei sviluppatori. Potresti aver già sentito questa citazione di Confucio, “Dimmi, e dimenticherò. Fammi vedere, e potrei ricordare. Coinvolgimi e capirò. ”Ed è attraverso il coinvolgimento che noi, come team di designer e sviluppatori, creiamo grandi esperienze.

Innanzitutto, passiamo attraverso una breve descrizione del processo di progettazione ...

In una situazione ideale, quando un designer ha un'idea per una microinterazione, il flusso di lavoro tradizionale procede nel seguente ordine:

  1. Il designer sviluppa gli elementi visivi e gli effetti di animazione necessari per attualizzare la sua idea.
  2. Il designer presenta il modello finale e i concetti sottostanti agli altri membri del team.

Ma cosa succede se il processo di progettazione non si svolge in pratica come in teoria? Cosa succede se presentiamo uno storyboard o un modello incompleto? O qualcun altro nel team sta progettando il modello?

Quando ciò accade, è probabile che sorgano problemi nella presentazione o nello sviluppo. Questi problemi rientrano in genere in una di tre categorie:

  1. L'idea di animazione non è comunicata in modo sufficientemente chiaro.

Se stai cercando di descrivere un concetto di animazione con parole o immagini fisse, potresti vedere smorfie sui volti del tuo pubblico. Ciò significa che stanno facendo del loro meglio per capire la tua idea, ma non la stanno davvero capendo. Anche se comprendono il concetto di base, l'immagine che hanno evocato nelle loro menti è probabilmente incompatibile con ciò che stai immaginando. Poiché le persone tendono a percepire le immagini in movimento, le immagini fisse e le descrizioni verbali in diversi modi, fare affidamento su parole o immagini per trasmettere l'idea di animazione crea spazio per comunicazioni errate e spesso tensioni inutili tra i membri del team.

2. Il progettista non sa se l'animazione funziona bene fino a quando non verifica e verifica il prototipo dello sviluppatore.

Quando i designer non hanno capacità di prototipazione, si limitano a presentare le loro idee agli sviluppatori tramite uno storyboard. Anche se un designer crede fermamente in un modello di microinterazione, non può dire se sta funzionando al massimo delle sue potenzialità fino a quando lo sviluppatore non completa il prototipo. Ciò è problematico per una serie di ragioni, la principale è l'elevata probabilità di cattiva comunicazione che un tale approccio introduce nel processo. Inoltre, apre le porte ai dubbi dei membri del team e porta a domande sulla fattibilità dell'idea. Questo può essere costoso in termini di tempo dal punto di vista dello sviluppo.

3. Il designer e lo sviluppatore non si trovano sulla stessa pagina

Quando i progettisti realizzano animazioni dell'interfaccia utente o microinterazioni, cercano di includere dettagli di progettazione complessi come facilità personalizzate, script, espressioni e altri effetti. Quando presentano queste idee agli sviluppatori, potrebbero sentire "Non è possibile farlo nella nostra sequenza temporale" o "Non possiamo renderlo esattamente lo stesso ma ci proveremo". A questo punto, potrebbero tentare di eseguire l'hash i vari dettagli e problemi tecnici con gli sviluppatori. Tuttavia, queste discussioni possono diventare inutili se il progettista non ha una conoscenza pratica degli strumenti o delle lingue utilizzate dagli sviluppatori. Questi fattori dovrebbero essere presi in considerazione durante la formulazione e la discussione di idee in modo che le microinterazioni siano compatibili con le impostazioni predefinite degli sviluppatori, aumentando la probabilità che il prodotto finale soddisfi gli standard del progettista (e di tutti gli altri).

Quali sono alcune soluzioni a questi problemi?

Mentre tutti i progettisti e gli sviluppatori hanno il loro modo di comunicare sui loro concetti di animazione, voglio condividere uno dei metodi che il mio team sta usando. Questo metodo ha avuto un discreto successo e ha portato a un minor numero di riunioni e ha drasticamente migliorato la comunicazione del nostro team.

Ora non stiamo più discutendo se includere o meno le microinterazioni, stiamo esplorando i modi per renderle ancora migliori!

Scheletro Concetto di interazione e Guida di interazione

"Il concetto di interazione scheletrica e la guida di interazione non lascia spazio all'interpretazione che mi consente di iniziare immediatamente a lavorare e di essere fiducioso nell'adeguare la visione del progettista." - Jesse M Majcher / Ingegnere capo IOS

Il processo standard che utilizziamo per comunicare sui progetti di UX non si traduce bene nelle animazioni dell'interfaccia utente. Prima di tutto, i progetti e i flussi di UX sono ancora progettati schermo per schermo e sono statici. Le animazioni dell'interfaccia utente sono flussi in sé, fluide e basate sul tempismo. Quando creiamo un design statico, realizziamo un wireframe approssimativo in modo da poter comprendere l'idea e discutere il flusso. Questo ci consente di rivedere e perfezionare facilmente il design prima di creare la versione finale. Una volta che tutti i membri del team concordano che il progetto è pronto per essere consegnato agli sviluppatori, il progettista fornisce allo sviluppatore una guida di stile e una linea rossa contenente dettagli, specifiche e altre informazioni importanti sul progetto.

Se utilizzassimo un processo simile per le animazioni, il nostro processo potrebbe essere molto più veloce e migliore.

  1. Skeleton Interaction Concept (Studio del movimento)

Un concetto di interazione scheletro è simile al wireframe che creeresti durante la progettazione del flusso, la differenza principale è che questa è una demo prototipo giocabile / cliccabile. Se portiamo questo ad una riunione, i membri del nostro team non dovranno usare la loro immaginazione per capire il concetto. Il designer può utilizzare la demo giocabile / cliccabile o la storyboard statica per fare riferimento direttamente agli elementi visivi e di animazione del design. Questo darà a tutti un senso chiaro e preciso della sua idea. A loro volta, i partner possono fornire un feedback altamente specifico e, quindi, estremamente prezioso per il progettista. Allo stesso tempo, i team di gestione e sviluppo del prodotto acquisiranno informazioni che consentiranno loro di migliorare le comunicazioni interne e le stime dei tempi per il progetto.

2. Guida di interazione

Una volta che il team è d'accordo sul concetto, il designer crea la guida di interazione. Questo è simile a una guida di stile in quanto delinea la posizione, la rotazione, la scala e il timing degli elementi. Possiamo aggiungere ogni dettaglio sulle animazioni, che aiuterà i nostri partner a capirlo chiaramente. Quando il designer mostra la guida di interazione ai propri partner, può essere ancora più chiaro sul movimento e sulla misurazione del concetto di animazione. Questo è molto utile per finalizzare il lavoro attraverso la collaborazione. Aiuta anche i progettisti a essere più premurosi nel loro design di animazione / microinterazione.

3. Competenze di prototipazione per i designer

Nella mia esperienza, per prepararti a una collaborazione di design di successo, il progettista del prodotto dovrebbe essere il driver dell'animazione e lo sviluppatore dovrebbe fornire il supporto. Ciò significa che il progettista del prodotto ha la maggior parte della responsabilità nella partnership. Non solo sono responsabili della spiegazione molto chiara delle loro idee, ma devono anche dimostrare che sono realizzabili fornendo una prova del concetto. Significa anche che i progettisti di prodotti devono essere in grado di realizzare i propri prototipi di animazione. Se un progettista di prodotti può creare un prototipo e presentarlo durante una riunione, la discussione che segue sarà più chiara e richiederà meno tempo, portando a un processo di comunicazione più efficace in generale.

Quindi, con quali tipi di strumenti di prototipazione i progettisti dovrebbero familiarizzarsi? Esistono molti strumenti, ma non tutti sanno cosa funziona meglio per specifiche attività di microinterazione. Ecco i miei consigli basati sulla mia esperienza personale nella progettazione di questi elementi.

Se hai familiarità con la codifica:

  • Mobile: Xcode, studio Android
  • Mobile o Web: Framer
  • Web: animazione CSS

Se si desidera progettare un'interazione tra un push simile a uno schermo e un modulo:

  • Invision e Marbel

Se vuoi creare interazioni più dettagliate:

  • Principio, Adobe CC, origami Studio e Pixate

Se vuoi creare interazioni dettagliate + animazione:

  • Effetti postumi

Attualmente sono un fan dell'utilizzo di After Effect per i miei prototipi. Anche se non è interattivo (ovvero cliccabile), è il modo perfetto per presentare un concetto di animazione. Inoltre, non vi sono limiti di effetto e si è in grado di controllare il movimento dei dettagli. È anche possibile usarlo per fare un'interazione nello spazio 3D, come per AR e VR.

Le interazioni di squadra deliziose creano prodotti deliziosi

Le microinterazioni sono diventate un elemento sempre più importante, se non critico, di web, design mobile e altro. Anche se designer e sviluppatori riconoscono il valore delle animazioni dell'interfaccia utente e sono motivate a crearle, spesso fanno fatica a collaborare in modo efficiente ed efficace. Ci vuole una squadra forte per inviare in tempo grandi microinterazioni; tali team richiedono una chiara definizione dei ruoli, efficaci capacità comunicative e gli strumenti di prototipazione giusti per i compiti da svolgere.

Per preparare le micro-interazioni al successo, assicurati che il tuo team possieda queste caratteristiche e si impegni con questi processi. E buona fortuna con il tuo viaggio di microinterazione!

INFORMATIVA: Queste opinioni sono quelle dell'autore. Salvo diversamente specificato in questo post, Capital One non è affiliata né sostenuta da nessuna delle società menzionate. Tutti i marchi e altre proprietà intellettuali utilizzate o visualizzate sono di proprietà dei rispettivi proprietari. Questo articolo è © 2017 Capital One.

Per ulteriori informazioni su API, open source, eventi della community e cultura degli sviluppatori presso Capital One, visita DevExchange, il nostro portale per sviluppatori unico: developer.capitalone.com.