Quando gli utenti aprono un sito web o un’app, notano prima gli elementi di design più ovvi: logo, colori, icone, illustrazioni e immagini. Mentre questi elementi contribuiscono all’esperienza complessiva dell’utente, sono in realtà pezzi di un puzzle più grande: l’interaction design. Questo concetto può essere più sottile per gli utenti finali di una nuova e appariscente homepage, ma è essenziale nella creazione di un’esperienza digitale coinvolgente e intuitiva.

Che cos’è l’interaction design?

L’interaction design riguarda la facilitazione delle interazioni tra utenti e prodotti (molto spesso, questi prodotti sono app o siti web). Secondo la Interaction Design Foundation, “l’obiettivo dell’interaction design è quello di creare prodotti che permettano all’utente di raggiungere i propri obiettivi nel miglior modo possibile”. In altre parole, gli interaction designer sono responsabili della creazione di ogni elemento su uno schermo con cui un utente potrebbe interagire, sia attraverso il clic, lo scorrimento, il tocco o qualche tipo di azione.

Le cinque dimensioni dell’interaction design servono come un modello utile per capire cosa comporta. Introdotto per la prima volta da Gillian Crampton Smith, un’accademica di interaction design, il modello includeva solo quattro dimensioni. Kevin Silver, un senior interaction designer di IDEXX Laboratories ha aggiunto la quinta.

1D: Le parole dovrebbero essere semplici da capire e dovrebbero comunicare la giusta quantità di informazioni all’utente (troppi dettagli possono sopraffare, mentre troppe poche informazioni possono causare confusione).

2D: Le rappresentazioni visive, come immagini, tipografia e icone, dovrebbero integrare le parole per comunicare informazioni all’utente.

3D: Gli oggetti fisici o lo spazio si riferisce all’effettivo hardware e agli oggetti con cui un utente interagisce. Per esempio, stanno usando uno smartphone o un computer portatile con un mouse? E dove sono, alla loro scrivania o in una metropolitana affollata?

4D: Time si riferisce a come gli utenti potrebbero misurare i progressi, con suoni e animazioni per esempio, così come il tempo che trascorrono interagendo con le prime tre dimensioni.

5D: Behavior è stato aggiunto da Kevin Silver e comprende come le dimensioni precedenti definiscono le interazioni di un prodotto. Include anche le reazioni degli utenti e del prodotto.

Related: 6 motivi per cui gli UX designer dovrebbero esplorare l’interazione gestuale

10 esempi di interaction design

Come appare l’interazione del design nella vita reale? Ecco alcuni dei nostri esempi preferiti trovati su Dribbble.

Di Jony vino. Dividere il conto con i tuoi amici non è sempre così facile come sembra, specialmente se sei più una persona visiva che una persona di numeri. Questo concetto di app ti permette di inserire il conto totale, selezionare la percentuale di mancia, e poi vedere quanto pagherà ogni persona. La parte migliore? Invece di regolare manualmente la parte di ogni persona e dover aggiornare costantemente la quota di tutti, si può semplicemente ridimensionare la sezione di ogni persona nell’app e i numeri si ricalcolano automaticamente per tutti.

Di Prem Gurusamy. Sulla maggior parte dei siti di e-commerce, devi navigare in una parte completamente diversa del sito o dell’app per visualizzare il tuo carrello. Con questa interazione, puoi vedere istantaneamente i tuoi articoli “volare” nel tuo carrello non appena fai clic sul pulsante “Aggiungi al carrello”. Il carrello continua ad affiorare visivamente i tuoi articoli, anche mentre esplori altre parti del sito.

Di Igor Pavlinski. Le app dei social media sono famose per il sovraccarico di informazioni, mostrandoti tutte le storie più importanti, i video o gli articoli di tendenza e le ultime notizie in una volta sola. Questo concetto per una nuova app di social media rimette il controllo nelle mani dell’utente, organizzando i contenuti per fonte (come YouTube, Vimeo, Twitter o Reddit) e permettendo di scegliere quale canale esplorare. Questo layout simile a una carta elimina anche la necessità di saltare tra le app per consumare i tuoi contenuti preferiti. Invece, è facile alternare tra le fonti all’interno della stessa esperienza.

Da tubik. Ci sono un milione e uno di modi per personalizzare il tuo hamburger. E quando si ordina sullo smartphone, selezionare ogni singolo ingrediente su un piccolo schermo può essere un esercizio di destrezza. Questo concetto di UI per l’app Tasty Burger semplifica l’esperienza di ordinazione raggruppando gli ingredienti per tipo. Invece di visualizzare una lunga lista di ogni possibile variazione di formaggio, prodotti, carne o panino, si clicca prima sulla categoria dell’ingrediente (come il formaggio) e poi vengono presentati i diversi tipi, come gouda o comte.

Di Rahul.Design. Se stai cercando casa e non puoi vedere la proprietà di persona, la prossima opzione migliore è quella di ottenere un tour virtuale. Questo concetto di app immobiliare, Spec, sfrutta il nostro comportamento naturale quando guardiamo un nuovo spazio. È possibile fare clic in qualsiasi stanza, come la cucina o il soggiorno, e spostare il telefono per ottenere una vista a 360 gradi. È facile passare da una stanza all’altra con un solo tocco.

Di Forest Plasencia. I filtri offrono un modo potente e facile per far emergere diverse fette di informazioni. Ma il problema di molte interazioni con i filtri è che aprono un popup o una nuova pagina nell’app, nascondendo proprio le informazioni che si vogliono filtrare. Questa micro-interazione mantiene tutto nella stessa vista, anche quando si filtra. In questo modo, puoi vedere i dati cambiare istantaneamente quando selezioni diversi criteri di filtraggio.

Di Dmitro Petrenko. È più facile che mai armare e monitorare la tua casa grazie alle app per smartphone, ma tra il 94%-99%

Related: Creare uno strumento che registri le interazioni degli utenti

Di Gil. Questa semplice interazione della pagina migliora l’esperienza dell’utente sul sito e aiuta l’azienda a mantenere i visitatori sulle loro pagine, più a lungo. Lo scopo principale del sito è quello di mostrare come queste proprietà possono essere utilizzate in natura, come ufficio e come estensioni. Invece di creare esperienze separate per ogni scopo, questa pagina imita il flusso dell’utente che confronta e contrasta i diversi usi, e rimbalza senza soluzione di continuità tra loro.

Di Dominik Martin. Le interazioni non hanno bisogno di essere audaci e evidenti per avere un impatto. Questo concetto di app semplifica un comportamento che tutti noi disprezziamo – scegliere il nostro paese di residenza da una lunga lista. Invece di far scorrere l’elenco agli utenti e trovare il loro paese, questa micro-interazione ti fa prima scegliere la prima lettera del tuo paese e poi trovarlo da un elenco molto più piccolo e mirato di paesi.

Di Mykolas Puodziunas. Sempre più siti di vendita al dettaglio stanno rendendo più facile la “visualizzazione rapida” di un articolo, piuttosto che cliccare in ogni pagina di dettaglio e poi dover tornare ai risultati della ricerca per sfogliare altri articoli. Questo concetto fa un ulteriore passo avanti e permette di visualizzare ogni prodotto nei suoi diversi colori disponibili, senza dover lasciare la pagina della categoria.

Ci siamo persi il tuo esempio di interaction design preferito? Condividilo con noi su Twitter: @InVisionApp.