Progettare interazioni mirate

Scopri i principi chiave del design dell'interazione mirato, quali sfide di progettazione può risolvere l'interazione e come inserirlo nel tuo processo.

Quando pensiamo al design dell'interazione e all'animazione nell'esperienza utente, è facile scambiarlo per cose fantasiose: le campane e i fischietti, o gli oggetti volanti casuali che "danno a un sito web il fattore wow". Potrebbe portare piacere a breve termine, ma può presto diventare irritante per gli utenti regolari.

Per combattere questo tipo di futilità, daremo un'occhiata ai principi fondamentali della progettazione di interazioni significative, come può risolvere le sfide di progettazione comuni e come puoi introdurla nei tuoi sistemi e processi di progettazione. L'interazione non dovrebbe più essere un tocco finale che viene eliminato dall'ambito come un "bello da avere", ma una parte integrante dell'esperienza complessiva dell'utente.

Quattro principi chiave per un design dell'interazione significativo

1. Evita di creare ostacoli

Pensa a un "menu di hamburger" che impiega due o tre secondi per animare lo schermo intero. Ogni volta che un utente vuole navigare nel sito, deve aspettare. La creazione di tempi di attività più lunghi per l'utente è un modo garantito per farli rimbalzare fino al sito Web o all'app di un concorrente.

Vi sono tuttavia alcuni casi in cui ritardare l'avanzamento di un'interazione può trarre vantaggio. Quando l'interazione è complessa, rallentarla può fornire all'utente un contesto e un feedback migliori. Ecco alcuni esempi di quando potresti ritardare le interazioni e le animazioni:

• Inserimento di nuovi utenti in una nuova interfaccia. Assicurati di ridurre gli ostacoli con l'opzione di salto.
• Trascina e rilascia le interfacce che mostrano causa ed effetto. Troppo veloce e gli utenti potrebbero chiedersi dove sia andato a finire quel file.
• Aggiunta di un prodotto al carrello. Questo non dovrebbe creare una barriera prolungata al checkout, ma dovrebbe fornire all'utente un feedback sufficiente in modo che sappia che il suo compito è andato a buon fine.

Di norma, le interazioni semplici dovrebbero essere rapide e le interazioni complesse dovrebbero essere ritardate quanto basta per consentire all'utente di comprendere il contesto.

2. Abbina la mozione al messaggio

Se Apple decidesse che tutte le loro interazioni su iOS sarebbero state veloci, nitide, in faccia e avrebbero fatto un sacco di cose spinose, ti sembrerebbe di usare un prodotto Apple? Se stessi usando l'app Alton Towers e vedessi un'animazione in lenta dissolvenza e un'abbondanza di transizioni in stile Ken Burns, ti sembrerebbe un luogo magico di divertimento ed eccitazione, o uno spot televisivo M&S?

Il modo in cui un'interazione si anima dovrebbe sempre rappresentare il tono a cui miri che sembra giusto per i tuoi utenti: rende l'esperienza più coinvolgente e coerente. Se è un sito di intrattenimento per bambini, può essere un po' stravagante e appariscente. Se è una boutique di fascia alta, mantienila lenta, sofisticata e di buon gusto.

3. Dagli uno scopo

Il design dell'interazione ha così tanto potenziale per elevare un'esperienza utente, motivo per cui è così allettante abusarne e utilizzarlo senza uno scopo. Ricordi i siti Web Flash?

Scorri un po' oltre e dai un'occhiata alle otto sfide che l'interaction design può risolvere. Se le tue interazioni non seguono questi schemi, ci sono buone probabilità che non abbia uno scopo diverso da quello di deliziare gli utenti.

4. Rendilo invisibile

Sembra abbastanza straziante dato il tempo investito nella progettazione delle interazioni, ma se passa inosservato, è probabilmente perché hanno fatto un lavoro fantastico. Tendiamo a prestare maggiore attenzione all'utilizzo di un pezzo di tecnologia o di un'interfaccia quando va storto o qualcosa sembra goffo. Quando le cose sono lisce, l'utente può concentrarsi sul contenuto.

La quantità di considerazione del design dell'interazione su app e siti Web ampiamente utilizzati come Facebook, Pinterest, Twitter e prodotti Google è incomprensibile. Eppure, non te ne accorgeresti mai davvero finché qualcuno non te lo ha fatto notare. Rendono il design invisibile in modo che tu possa goderti l'esperienza e costruire una connessione emotiva più forte con il prodotto, il servizio o il contenuto.

Sei sfide progettuali che l'interaction design può risolvere

1. Orientamento e contesto

Questa è una sfida particolare per il design mobile quando lo spazio sullo schermo è limitato. Mostra tutto allo scoperto e l'utente è sovraccaricato cognitivamente. Mostrare cose vitali e nascondere cose meno critiche è ciò per cui ci sforziamo; tuttavia, nasconde una parte dell'esperienza. Quindi, utilizzando interazioni significative, possiamo insegnare visivamente all'utente dove vivono le cose, quindi è facile da ricordare e intuitivo.

Ecco un paio di esempi di creazione di contesto utilizzando l'interazione:

• Cambia colore di sfondo dei caratteri di Google. I colori sembrano vivere all'interno dell'icona del secchio di vernice.
• Il processo di aggiunta al carrello e checkout su Cotton Bureau. Piuttosto che portarti a una nuova pagina del carrello, è come un carosello che vive a destra della pagina visibile.

2. Dimostrare causa ed effetto

Un classico esempio di ciò è un'interfaccia drag and drop. Quando prendi un oggetto multimediale e lo sposti nella "zona di rilascio", dovrebbe esserci un feedback per l'utente per dire loro che lo hanno raccolto e che si sono spostati nel posto giusto in cui rilasciare l'elemento. Una volta inserito, dovrebbe esserci una convalida per dire all'utente che ha avuto successo nel proprio compito. Questo può essere fatto attraverso cambi di colore, messaggi di convalida positivi o persino effetti sonori.

3. Fornire feedback

Per questo esempio, prendiamo un pulsante di pagamento. Quanti gateway di e-commerce mal eseguiti hai sperimentato in cui fai clic sul pulsante "Paga ora" bello e brillante, solo per incontrare confusione sul fatto che tu l'abbia fatto clic o meno perché è in elaborazione? Non ha detto che era quello che stava facendo. Quindi, l'interazione può cambiare lo stato di un pulsante e, con un po' di animazione, può dire all'utente che "il pagamento è in elaborazione" e quindi dire all'utente quando "il pagamento è stato ricevuto" prima di spostarsi su una pagina di conferma dell'ordine. Non dovrai più chiederti cosa sta succedendo per dieci secondi e chiederti se hai rotto Internet.

4. Evidenzia le informazioni chiave

Quando alcuni contenuti hanno una priorità più alta all'interno della stessa visualizzazione dello schermo, l'uso del colore e della tipografia per promuoverli può rompere la coerenza del tuo sistema di progettazione o sembrare fuori luogo se abusato. L'interazione può aiutare ad accentuare i contenuti importanti senza compromettere il layout.

Pensa alle app per il fitness: quando carichi per la prima volta la dashboard, vuoi vedere l'attività principale e le statistiche di oggi. L'uso di semplici animazioni può far emergere questo contenuto senza diluire la quantità di cose mostrate sullo schermo.

5. Crea la percezione della performance

La velocità è un argomento scottante e per una buona ragione, in quanto è un fattore comune associato alle frequenze di rimbalzo. Ci saranno casi in cui hai massimizzato l'ottimizzazione della velocità sulla pagina e ci vuole ancora un po' di tempo per caricare la pagina. Esistono alternative per non mostrare nulla all'utente o mostrare un'icona di caricamento.

Il caricamento scheletrico può essere utilizzato per mostrare un layout prevedibile in forma wireframe in modo che prima che la pagina venga caricata, l'utente sa approssimativamente dove guardare e come potrebbe interagire con l'interfaccia. Psicologicamente, sembra che la pagina si sia caricata più velocemente rispetto a non vedere accadere nulla, ma in realtà si carica nello stesso tempo.

Puoi anche utilizzare i tempi di caricamento come un'opportunità per educare gli utenti su ciò che sta accadendo e cosa sta per accadere con messaggi amichevoli che diffondono il tempo di attesa.

6. Aggiungere personalità al marchio

I marchi guidati dal carattere possono trarre grandi vantaggi dall'introduzione dell'interazione per portare personalità nell'esperienza. Puoi sfruttare le caratteristiche umane delle mascotte. Quando non hai nulla di visivo nel tuo marchio, puoi comunque aggiungere personalità usando velocità e frequenza. Pensa a Google e ai suoi eccentrici pre-caricatori di punti o all'attivazione dei comandi vocali che offrono un approccio amichevole e divertente in un modo semplice.

Costruire una connessione emotiva con l'utente è un ottimo modo per ottenere visite regolari. Il design dell'interazione può far sembrare la tecnologia più incentrata sull'uomo, il che è sempre bene puntare.

Introdurre l'interazione nel processo di progettazione

Schizzi e composizioni a bassa fedeltà

Strumenti di progettazione dell'interazione

• Keynote: se stai cercando qualcosa di grezzo e semplice per trasmettere la tua idea, Keynote è la vittoria rapida.
• Adobe Animate: mantieni tutto all'interno di Adobe e incrocialo perfettamente con altri strumenti. Questo è l'ideale per l'animazione illustrativa.
• Tumult Hype: se hai familiarità con l'interfaccia di Sketch e conosci le linee temporali, ti sentirai a casa con Tumult.
• Framer: questo è uno strumento di progettazione dell'interazione appositamente creato che ha capacità davvero avanzate per abbinare la tua animazione a JavaScript.
• Principio: con un bel collegamento a Sketch, Principio sta diventando il punto di riferimento per l'interazione. È relativamente semplice da imparare e ciò che puoi ottenere è fantastico.
• Atomico: aggiungi dati, logica e variabili per rendere le tue interazioni pratiche come la build finale. Questo è per il designer avanzato che ha una certa conoscenza della codifica.
• Invision Studio: è ancora agli inizi, ma Invision Studio ha alcune grandi capacità e somiglianze con Principle. Il tempo dirà se questo sarà abbastanza avanzato da dominare il mercato della prototipazione e della collaborazione.

Note dettagliate sulla consegna

Lasciare le note dello sviluppatore è un pomo della discordia se ti trovi in ​​un ambiente altamente collaborativo, ma se lavori in remoto, note dettagliate sulle tue idee e sui prototipi con un buon passaggio di consegne possono garantire che le tue interazioni siano prese in considerazione nella build.

Compila una libreria di demo e ispirazione

Aggiungilo al tuo sistema di progettazione

Se hai risolto con successo un problema comune (correttamente testato) con l'interazione, inseriscilo nel tuo sistema di progettazione o nella libreria di modelli per riutilizzarlo in scenari simili senza l'investimento di tempo per fare qualcos'altro da zero.

Per assistenza con il web design e l'esperienza utente (UX), mettiti in contatto con noi oggi.

Se hai bisogno di aiuto con la tua User Experience non esitare a contattarci.