Comprensione delle microinterazioni nella progettazione di app mobili

L'usabilità è uno dei componenti chiave di design dell'interfaccia utente mobile. La grande usabilità spesso comporta microinteractions quali sono piccole risposte e comportamenti da un'interfaccia dettare come dovrebbe essere utilizzata l'interfaccia utente. Queste microinterazioni definiscono i comportamenti, incoraggiano il coinvolgimento e aiutano gli utenti a visualizzare come dovrebbe funzionare un'interfaccia.

Interfacce digitali sono gli intermediari tra gli utenti e i loro obiettivi desiderati. I progettisti di interfacce creano esperienze che aiutano gli utenti eseguire determinati compiti. Ad esempio, un'app elenco di cose da fare ha un'interfaccia che aiuta gli utenti a organizzare i loro compiti. Proprio come un'app di Facebook offre agli utenti un'interfaccia per interagire con il proprio account Facebook.

In questa guida, approfondirò ulteriormente microinterazioni per le app mobili. Piccole interazioni possono sembrare banali ma possono avere un impatto immenso sulla qualità dell'esperienza dell'utente Se eseguite correttamente, le microinterazioni si presentano come una parte genuina dell'esperienza utente mobile di livello superiore.

Il potere delle microinterazioni

Nella maggior parte dei casi l'obiettivo di una microinterazione è quello di fornire un feedback in base all'azione dell'utente. Questo può aiutare gli utenti visualizza come si muove o si comporta l'interfaccia, anche se è puramente digitale su uno schermo piatto.

Le microinterazioni hanno potere perché loro creare un'esperienza illusoria. I cursori On / Off non si muovono realmente come interruttori fisici, ma possono sembrare che si muovano in questo modo attraverso le animazioni.

Ho trovato una citazione incredibile in questo post che parla dell'immenso valore delle microinterazioni per le app mobili:

“I migliori prodotti fanno bene due cose: caratteristiche e dettagli. Le caratteristiche sono ciò che attira le persone verso il tuo prodotto. I dettagli sono ciò che li tiene lì. E i dettagli sono ciò che rende davvero la nostra app distinguersi dalla concorrenza.”

Il piccoli dettagli può sembrare insignificante dal punto di vista dello sviluppo, ma dal punto di vista dell'esperienza utente essi sono genuinamente Fai la differenza tra un'interfaccia utente di app OK e un'interfaccia utente straordinaria.

Grandi microinterazioni rendono l'utente sentirsi gratificati per fare un'azione. Queste azioni possono essere ripetuto e radicato nel comportamento dell'utente. Possono imparare come utilizzare un'applicazione basata su queste microinterazioni più piccole. Quando l'utente esegue un comportamento, queste piccole interazioni segnalano "sì, puoi interagire con me!"

Dai un'occhiata agli esempi trovati nelle specifiche di progettazione dei materiali di Google. La documentazione ha in realtà un'intera sezione dedicata al movimento dei materiali. Relazioni spaziali sono una parte importante di questa equazione, ma il movimento può dettare qualcosa di più delle relazioni spaziali.

Ecco gli usi più comuni di animazione e movimento nel design UI / UX mobile:

• Guida degli utenti tra diverse pagine
• Guidare gli utenti attraverso l'interfaccia per insegnare determinati comportamenti
• Suggerire azioni / comportamenti che possono essere presi su qualsiasi pagina

Le app mobili hanno molto meno spazio sullo schermo di siti Web. Ciò può comportare alcune difficoltà nell'insegnare agli utenti come utilizzare un'app. Ma può essere sorprendentemente semplice se sai come implementare correttamente le microinterazioni.

Come funzionano le microinterazioni

Una singola microinterazione si attiva ogni volta che l'utente interagisce con una parte dell'interfaccia. La maggior parte delle microinterazioni sono risposte animate al gesto dell'utente. Quindi un movimento a scorrimento risponderà in modo diverso rispetto a un tocco o a un tocco.

Blink UX ha fatto un ottimo post discutendo i dettagli minori delle microinterazioni. Queste piccole animazioni dovrebbero seguire a processo prevedibile che l'utente può imparare per ogni interazione nell'applicazione.

Le microinterazioni guidano gli utenti attraverso un'interfaccia di offrendo risposte ai comportamenti. Una volta che l'utente sa che un cursore on / off può spostarsi, sa che è interattivo. In base alla risposta, sapranno anche se un'impostazione è stata attivata o disattivata. Quando un pulsante appare come può essere cliccato l'utente istintivamente lo sa possono interagire con esso.

Secondo UXPin, ogni microinterazione di base può suddividersi in quattro passaggi, ma ho riassunto il processo in tre passi.

1. Azione - il l'utente fa qualcosa come sfogliare, scorrere, toccare e tenere premuto o qualche altra interazione.
2. Reazione - il l'interfaccia risponde basato su ciò che deve accadere. Lo scorrimento di una schermata potrebbe tornare indietro nella cronologia del browser o toccare un cursore ON / OFF per disattivare un'impostazione.
3. Risposta - questo è ciò che l'utente vede effettivamente come risultato dell'interazione. Quando l'utente si sposta di nuovo su un browser mobile, potrebbe far apparire la pagina precedente su "sopra" dello schermo. Il cursore on / off può scivolare dolcemente o ingrandirsi quando viene applicata pressione sullo schermo.

Queste azioni molto piccole possono essere eseguite senza animazione, ma grandi microinterazioni offrono a sensazione realistica all'interfaccia digitale piatta, che per lo più si presenta sotto forma di effetti di animazione realistici. Questi respirano la vita nell'interfaccia e incoraggiano più interazione con l'utente.

Cerca i dettagli

Osservando i pezzi più piccoli di un disegno, capirai in che modo un'app dovrebbe rispondere a un particolare comportamento.

Tirare per aggiornare è un buon esempio di microinterazione ormai popolare. All'inizio non era parte integrante di iOS, ma molte app hanno preso questa idea e hanno iniziato a spostarsi con essa. Ora il pull to refresh è un comportamento ben noto che la maggior parte degli utenti sa solo utilizzare durante la navigazione nell'interfaccia utente di un feed. Lo stesso si può dire dei menu di hamburger mobili che sono cresciuti selvaggiamente in popolarità.

Fai ogni microinterazione realistico e semplice. Non esagerare con le animazioni perché possono diventare noioso se sono troppo dettagliati e vengono usati frequentemente. L'utente non desidera che le scintille appaiano ogni volta che toccano l'icona di un menu. Trovare un equilibrio con un valore genuino che comunica come dovrebbe funzionare l'interfaccia senza esagerare.

Guardando alcuni esempi

Penso che il modo migliore per imparare qualcosa sia farlo e il secondo modo migliore è studiare il lavoro degli altri. Ho raccolto una piccola manciata di Animazioni di microinterazione UI / UX dagli utenti di talento di Dribbble per mostrarti come si presentano in un vero e proprio mockup.

Ogni applicazione sarà diversa e avrà esigenze diverse in base a ciò che fa l'app. Alla fine la maggior parte degli utenti vuole la stessa cosa: un'app che è intuitivo e offre un'esperienza utente di qualità con microinterazioni relative ai comportamenti degli utenti.

1. Interfaccia utente app evento animata

Il primo esempio è una funzionalità di animazione di carte nifty creata da Ivan Martynenko. Noterai una manciata di microinterazioni in questo design, in particolare la carta che scorre e si muove attraverso i dettagli.

Quando si tocca la scheda cresce di dimensioni. E quando si tocca il pulsante Iscriviti, la foto del profilo dell'utente viene inserita nell'elenco degli iscritti. Tutto sembra molto intuitivo e abbastanza naturale all'interfaccia.

2. Schermo per esercizi interattivi

Questa animazione creativa per l'allenamento mobile proviene dal designer Vitaly Rubtsov. Demos un utente che salva il loro allenamento per una serie di squat.

Nota che ogni animazione ha lo stesso effetto elastico di rimbalzo quando i menu si aprono e si chiudono a scatto. Questo vale anche quando l'attività è spuntata come "Fatto". Consistenza è la chiave con le microinterazioni perché dovrebbero sentirsi tutti collegato alla stessa interfaccia.

3. Microinterazioni delle app di ricerca

Breve, dolce e al punto. Penso che questo descriva meglio queste microinterazioni di app di ricerca progettate da Lukas Horak. Ogni animazione è veloce ma ancora evidente.

Questo è il modo in cui dovresti progettare le microinterazioni evitare eccessiva complessità. Se l'interfaccia si carica più velocemente senza l'animazione, allora perché preoccuparsi di aggiungerla? Animazioni veloci mantenere l'utente in movimento senza appesantire l'esperienza.

4. Microinterazione obiettivo fitness

Penso che Jakub Antalà ?? Â'-k abbia colpito davvero questo fuori dal parco con la sua microintervallo di obiettivi di fitness. Gli schermi hanno tutti questa sensazione di jell-o jiggly perché il le forme si muovono in modo fluido.

Eppure l'interfaccia si sente anche solido e utilizzabile. Va a dimostrare che le microinterazioni create con uno scopo possono ancora essere divertenti e divertenti, ma anche funzionali e pragmatiche.

5. Tirare per aggiornare l'animazione

Ecco una delle mie animazioni pull-to-refresh preferite in assoluto create dal team di Ramotion. Questo non solo imita un fluido con l'azione pull, ma l'animazione della risposta si collega senza problemi da una spruzzata di liquido in un cerchio di carico.

Questo molta attenzione ai dettagli è ciò che fa emergere la vera bellezza nelle microinterazioni delle app mobili.

6. Tab Microinteraction

Widget a schede sono abbastanza comuni per le app mobili a causa degli schermi più piccoli. Mi piace molto questa microinterazione creata da John Noussis, anche se penso che sarebbe più efficace a una velocità maggiore, ma l'animazione stessa è gloriosa e ben pensata.

La freccia di ancoraggio delle schede scorre verso destra proprio quando il nuovo contenuto rimbalza da destra. Dà l'illusione del schermo intero che si muove fisicamente a destra. L'animazione è squisita, ma dal momento che è così lento penso che molti utenti si infastidiranno dopo pochi giorni.

7. Precaricamento dell'animazione

Non ho detto molto barre di caricamento in questo post, ma sono altrettanto preziosi per l'esperienza complessiva. La maggior parte degli utenti non vuole aspettare il caricamento dei dati, ma sicuramente non vogliono fissare uno schermo vuoto mentre carica.

Bret Kurtz ha realizzato questo incredibile schermo precaricato che è sia divertente che informativo. L'utente può effettivamente essere intrattenuti guardando questa piccola animazione ripetere. Possono anche essere rassicurato che l'applicazione è ancora caricando i loro dati e non si è schiantato.

Avvolgendo

Tutti questi esempi dimostrano brillantemente il valore delle microinterazioni. Le app mobili ottengono molto più valore dalle microinterazioni perché gli utenti toccare fisicamente gli schermi con le dita. Gli utenti non toccano i loro monitor desktop o gli schermi dei loro laptop, ma tutti toccano i loro smartphone perché è il stato di interattività predefinito.

È un esperienza molto più personale, ecco perché il design delle app per dispositivi mobili può essere così processo sfumato. Se fatto correttamente, l'aggiunta di grandi microinterazioni mobili può creare un potente esperienza utente illusoria dal nulla, ma pixel e movimento.