Potenzia la tua UX con questi principi di progettazione dell'interazione di successo

C'è una linea sottile tra un'interazione che funziona e una che è inutilizzabile. I principi di progettazione dell'interazione aiutano a colmare il divario.

Il design dell'interazione ben eseguito gioca un ruolo enorme nell'implementazione di una grande UX ed è indiscutibilmente uno dei fondamenti dei principi di progettazione dell'UX.

"Inutilizzabile" significa "Sto andando avanti" e non importa quanto sia "bello" il design visivo, quanto sia fantasiosa quell'animazione, rovina il design dell'interazione e la tua UX è kaput. Fallo bene e sarai sulla buona strada per una UX molto migliore anche se l'estetica non è all'altezza. Il prodotto avrà maggiori possibilità di successo, il che a sua volta contribuisce alla linea di fondo.

L'Interaction Design (IxD) è definito dall'Interaction Design Association (IxDA) come “la struttura e il comportamento dei sistemi interattivi. I designer di interazione si sforzano di creare relazioni significative tra le persone e i prodotti e servizi che utilizzano, dai computer ai dispositivi mobili, agli elettrodomestici e oltre".

L'esperienza è fondamentale, perché determina con quanta affetto le persone ricordano le loro interazioni. —Don Norman in The Design of Everyday Things.

Seguire i principi del design dell'interazione contribuisce immensamente a un ottimo design dell'interazione, che a sua volta contribuirà all'esperienza.

È possibile che tutti i dispositivi e la tecnologia odierni possano essere sostituiti con qualcosa di completamente diverso dall'oggi al domani, ma a causa dei suoi principi duraturi, sarebbe ancora realizzabile un ottimo design dell'interazione. Questi principi costanti riguardano ciò che motiva le persone, il loro comportamento e il modo in cui pensano.

Immagina se ogni maniglia di ogni porta funzionasse in modo diverso. Per uno dovresti spingere prima dentro la porta e poi giù; per un altro dovresti tirare su invece di premere verso il basso, e un altro ancora dovresti tirare su due volte e poi giù: un disastro totale. In effetti, la frase "girare la maniglia della porta" presuppone che ci sia un solo modo per farlo.

A nessuno piace essere picchiato in testa dal grido di "segui le regole", ma il design dell'interazione davvero eccellente si basa su una serie di standard, migliori pratiche, convenzioni e regole pratiche (euristica). Non è una scienza delicata, ma costituiscono la base di IxD e rendono possibile l'interazione con il minimo attrito. Gli standard di interfaccia non soffocano la creatività: non sono regole rigide e veloci, ma linee guida fondamentali che aiutano un designer a stabilire una base di "design usabile e familiare" da cui partire per innovare.

Principi di progettazione dell'interazione e migliori pratiche

Il design dell'interazione rientra nella disciplina dell'interazione uomo-computer (HCI), "Un campo di studio multidisciplinare incentrato sulla progettazione della tecnologia informatica e, in particolare, sull'interazione tra esseri umani (gli utenti) e computer". Fondazione per il design.

L'ottimo design dell'interfaccia utente raggiunge il puro piacere dell'utente combinando i principi di progettazione dell'interfaccia utente di base con il design dell'interazione orientato agli obiettivi.

• Il successo della progettazione dell'interazione utilizza obiettivi semplici e chiaramente definiti, uno scopo forte e un'interfaccia utente intuitiva.
• Nel tentativo di mantenere le interazioni semplici e facili, la progettazione dell'interazione guidata dagli obiettivi non mette nient'altro che il minimo assoluto necessario di fronte agli utenti affinché possano completare un'attività.

Entriamo in alcuni dei principi più importanti (non un elenco esaustivo in alcun modo):

Rilevabilità

Fondamentalmente, se l'utente non riesce a trovarlo, non esiste. Deve essere chiaro come un campanello quali azioni sono possibili in un'interfaccia utente in meno di un microsecondo, ad esempio etichettare le icone come best practice. Le icone senza etichetta equivalgono a creare blocchi stradali nel percorso di un utente perché dovranno fermarsi per decifrare il significato. Stai interrompendo il "flusso". Ed ecco uno shock... Non sono interessati a conoscere la tua interfaccia utente.

Significanti

Molto legato alla rilevabilità, l'uso efficace dei significanti garantisce che le affordances, la possibilità di un'azione su un oggetto, siano chiaramente indicate nell'interfaccia utente. I significanti forniscono indizi forti come segnali o cartelli. Indicando un'interazione disponibile, lampeggiano in verde all'utente gridando: "Eccomi, puoi toccarmi (fare clic, scorrere, ecc.)!" Un'affordance può esistere nell'interfaccia utente, ma può rimanere nascosta perché se manca di un significante, rimane invisibile. Un esempio potrebbe essere una "interazione gestuale nascosta" che non si rivela a meno che l'utente non scorri accidentalmente a sinistra oa destra (per eliminare qualcosa, ad esempio).

I vantaggi definiscono quali azioni sono possibili. I significanti specificano come le persone scoprono queste possibilità: i significanti sono segni, segnali percettibili di ciò che si può fare. I significanti sono molto più importanti per i designer di quanto non lo siano le affordances. —Don Norman (Norman, 2013)

Risposta

Dopo i significanti, la successiva comunicazione più importante per l'utente è il feedback. Feedback significa: informazioni esplicite sull'impatto dell'azione . Significa anche visibilità costante dello stato del sistema, ovvero il sistema deve assicurarsi che:

• Gli utenti sono tenuti informati su cosa sta succedendo.
• Ci sono informazioni continue sui risultati delle loro azioni e sullo stato attuale del prodotto (sistema).
• Non c'è confusione nella mente di un utente in merito allo stato del prodotto, ad esempio elaborazione, caricamento, ricerca, caricamento, ecc., o qualche altro cambiamento di stato.
• Dopo che un'azione è stata eseguita, è facile determinare il nuovo stato.

Modelli concettuali e modelli mentali

Il grande design dell'interazione presenta tutte le informazioni di cui un utente ha bisogno per creare un buon modello concettuale del sistema, portando così alla sua comprensione e al senso di controllo. Un modello concettuale migliora sia la rilevabilità che la valutazione dei risultati quando si utilizza il sistema.

I modelli mentali, o mappe cognitive, sono le immagini nella mente di un utente che informano le sue aspettative su una certa interazione e su come funziona qualcosa nel mondo reale. Le mappe cognitive sono rappresentazioni interne del nostro ambiente fisico, in particolare associate alle relazioni spaziali. Utilizzando efficacemente il modello mentale dell'utente, i designer dell'interazione possono creare sistemi che “sembrano” intuitivi.

Il progettista inventa un modello concettuale, il modello di progettazione, ed è così che il progettista intende che il dispositivo o il software funzionino. L'unico modo per comunicare questo modello agli utenti è implementarlo tramite un'interfaccia utente. Gli utenti interagiscono quindi con il modello concettuale e creano il proprio modello mentale di come funziona qualcosa.

I progettisti non possono dire agli utenti come intendevano far funzionare un'app: devono progettare un'interfaccia utente in modo appropriato per comunicarne chiaramente lo scopo. In altre parole, rendere l'interfaccia facile da capire e da usare. Una cattiva progettazione dell'interazione corre il rischio di creare il modello mentale sbagliato per l'utente. Ciò porta a confusione ed errore dell'utente perché stanno cercando di far funzionare l'app in un modo non previsto dal designer.

Mappature

La mappatura è la relazione tra i controlli e il loro effetto nel mondo. Il principio del feedback è un cugino stretto della mappatura perché i due principi lavorano insieme per creare un'esperienza senza interruzioni. Quasi tutti gli artefatti necessitano di una sorta di mappatura tra controlli ed effetti: nel caso della progettazione dell'interfaccia, è la relazione tra un controllo e la sua funzione risultante.

La mappatura naturale, sfruttando le analogie fisiche e gli standard culturali, porta a una comprensione immediata. Ad esempio, un designer può utilizzare l'analogia spaziale nell'interfaccia utente:

• Per aumentare un valore con un componente slider, fai scorrere un cursore verso destra,
• Per diminuirlo, scorri verso sinistra.

Alcune mappature naturali sono biologiche, come nello standard universale che un livello crescente rappresenta di più, un livello decrescente, meno.

Vincoli

Il concetto di progettazione dei vincoli è un modo per determinare come limitare il tipo di interazione dell'utente che può aver luogo in un dato momento. I vincoli di progettazione dell'interazione aiutano un'interazione efficiente fornendo "rotaie di guida" per gli utenti, quasi come una mano guida che guida le interazioni che possono verificarsi.

I vincoli nella progettazione assicurano che solo cose specifiche siano abilitate, o addirittura visibili, al fine di guidare l'utente verso determinate interazioni. Considera la dimensione, la scala, la proporzione, l'enfasi e lo stato e come questi, lavorando insieme in armonia, aiutano a creare la gerarchia e di conseguenza influenzano l'utente. I vincoli applicati correttamente aiutano anche a ridurre la possibilità di errore dell'utente.

L'opposto del vincolo è quando ogni opzione viene offerta all'utente, rendendo difficile per loro decidere cosa fare dopo. È il principio della scelta . Più opzioni ci sono, più è difficile sceglierne una qualsiasi: diventiamo sopraffatti da tutte le possibilità.

Un ottimo design dell'interazione non mette tutte le opzioni disponibili sull'interfaccia, ma la limita a ciò che è più importante in un dato momento.

Coerenza, standard ed euristica

Questi sono tutti correlati: fratelli ai modelli (sotto), se vuoi. Per prevenire errori dell'utente e rendere un'applicazione facile da imparare, è essenziale che un modello di interazione sia coerente. La coerenza migliora l'esperienza utente, l'usabilità generale e l'efficienza con cui gli utenti possono utilizzare i prodotti digitali.

Coerenza significa utilizzare elementi simili per ottenere compiti simili e avere funzioni e comportamenti simili in tutto: un'interfaccia coerente è quella che segue regole, come usare la stessa operazione per fare qualcosa.

I prodotti che si sforzano di essere altamente utilizzabili seguono convenzioni, standard, best practices ed euristiche di usabilità ben consolidati (regole generali, non linee guida di usabilità specifiche).

Ad esempio, la conformità a una convenzione può essere nel modo in cui è strutturata una pagina. Gli utenti Web trascorrono il 69% del loro tempo a visualizzare la metà sinistra della pagina e il 30% a visualizzare la metà destra. Pertanto, è più probabile che un sito sia redditizio se segue un layout convenzionale.

Uno standard potrebbe essere un percorso breadcrumb (un dispositivo di orientamento e navigazione immediatamente riconoscibile) o un menu di navigazione globale nella parte superiore della pagina come sul sito BCC.

Modelli e apprendibilità

Con quanta facilità un nuovo utente può imparare a navigare in un'interfaccia? Nessuno vuole imparare un nuovo modo di fare le cose a meno che non fornisca un vantaggio significativo rispetto a ciò che lo ha preceduto, eppure siamo costantemente sommersi da interazioni non testate e non convenzionali.

I componenti o i modelli comuni forniscono l'apprendimento istantaneo. Una volta che avrai imparato a usare un cucchiaio, saprai sempre come usarlo. Lo stesso vale per andare in bicicletta, pattinare... lo stesso costrutto si applica ai componenti dell'interfaccia utente che utilizziamo ogni giorno: pulsanti, campi di testo, menu a discesa, caselle di controllo, pulsanti di opzione, spinner, cursori, icone, fisarmoniche, caselle di ricerca, ecc.

I migliori progetti di interazione non cercano di reinventare la ruota, ma fanno un uso efficiente ed efficace dei modelli in un modo nuovo.

I modelli non solo incoraggiano l'apprendimento, ma forniscono anche coerenza (un altro principio, discusso sopra) e lo rendono in linea con le aspettative dell'utente su come dovrebbero funzionare le cose.

Gerarchia visiva ed enfasi

Durante la loro interazione con un sito o un'app, le persone cercano le informazioni più rilevanti per la loro ricerca. La gerarchia visiva riguarda la disposizione degli elementi in un modo che implica importanza. La gerarchia visiva nel design influenza l'ordine in cui l'occhio umano percepisce ciò che vede. Non a tutto viene dato lo stesso “peso”; l'ordine è creato dal contrasto visivo tra gli oggetti in un campo di percezione. Il contrasto visivo (enfasi) può essere ottenuto in base a dimensioni, prossimità, colore, opacità e contrasto tonale effettivo tra gli elementi.

Non sottovalutare il potere della gerarchia visiva. È stato utilizzato in modo molto efficace in tutti i tipi di design per eoni, nell'architettura e nel design industriale, nonché nel design della stampa. Dai un'occhiata ad alcuni fantastici design di poster. Usando bene questa tecnica nell'interaction design, le cose giuste sembrano apparire al momento giusto nel modo giusto.

I grandi designer di interazione usano il potere dell'enfasi per ottenere con successo progetti di interfaccia "snelli e meschini" che sembrano funzionare come per magia.

Legge di Fitts

Che ci crediate o no, questa legge deriva dai primi studi che hanno esaminato il movimento dei muscoli umani e il targeting dell'operatore telegrafico e delle prestazioni delle attività della linea di produzione, ed è stata successivamente adattata all'HCI (interazione uomo-computer). Fondamentalmente dice: "Il tempo per acquisire un bersaglio è una funzione della distanza e delle dimensioni del bersaglio".

In termini più semplici, si tratta di quanto lontano e quanto è grande un obiettivo e quanto è vicino rispetto ad altri obiettivi. I movimenti o i tocchi più brevi del mouse sono migliori: è sempre più veloce fare clic o scorrere un bersaglio se è più vicino alla posizione iniziale. Le attività correlate dovrebbero anche essere molto vicine l'una all'altra in modo che gli utenti non debbano sfrecciare sullo schermo interagendo con l'interfaccia utente.

La legge di Fitts può prevedere con precisione la quantità di tempo necessaria per spostarsi e selezionare un obiettivo. Un target può essere un pulsante, un menu a discesa o qualche altro elemento interattivo su uno schermo. Se è troppo lontano, troppo piccolo o se gli elementi cliccabili sono troppo vicini tra loro, l'efficienza e l'usabilità dell'interfaccia utente sono notevolmente ridotte.

Diagramma di Gutenberg, layout Z e F-Pattern

Questi modelli sono applicabili in diverse situazioni a seconda del contenuto e sono utilizzati principalmente dal pubblico occidentale. Il diagramma di Gutenberg descrive uno schema generale attraverso il quale si muovono gli occhi quando guardano informazioni omogenee distribuite uniformemente, per lo più siti ricchi di testo come blog o siti di notizie. Il diagramma di Gutenberg suggerisce che le aree incolte forti e deboli cadono al di fuori del percorso gravitazionale di lettura e ricevono un'attenzione minima a meno che non siano enfatizzate visivamente in qualche modo.

Il motivo Z segue la forma della lettera Z. In alcuni casi questo motivo viene anche chiamato motivo Zig-Zag. La principale differenza con il diagramma di Gutenberg è che il modello Z suggerisce che gli spettatori passeranno attraverso le due aree incolte. Altrimenti iniziano e finiscono ancora negli stessi punti e passano ancora nel mezzo. Come con Gutenberg, un designer collocherebbe le informazioni più importanti lungo il percorso del modello Z.

F sta per veloce e si riferisce al modo in cui gli utenti leggono il contenuto. Il modello F è stato reso popolare da uno studio di eyetracking di NNGroup che ha registrato più di 200 utenti che leggono contenuti sul web. Ha scoperto che i modelli di scansione delle persone erano abbastanza coerenti in molti diversi tipi di siti.

Perché questo è importante? Su un sito di e-commerce, ad esempio, per massimizzare la scansione, potresti voler disporre i contenuti più importanti in un modo che segua il modello F.

Riconoscimento piuttosto che richiamo

Il riconoscimento si riferisce alla nostra capacità di "riconoscere" un evento o un'informazione come familiare, mentre il ricordo è molto più di un "fardello cognitivo" che comporta l'estrazione di dettagli correlati dalla memoria. Mostrare agli utenti cose che possono riconoscere migliora l'usabilità rispetto alla necessità di richiamare gli elementi da zero.

Ad esempio, l'utilizzo delle icone in un'interfaccia utente è potente perché consente il riconoscimento istantaneo di un simbolo. Il nostro cervello elabora (riconosce) i simboli circa 1000 volte più velocemente della lettura del testo. Se un designer visualizza un'icona di segnale di avviso standard in una finestra di dialogo, mette immediatamente l'utente a fuoco e presta attenzione perché l'azione successiva potrebbe essere distruttiva. Ma se un'icona è progettata in modo tale da costringere gli utenti a ricordare e decifrare il significato, ad esempio una mano alzata al posto dell'icona di avviso, diminuisce l'efficienza e l'usabilità dell'interfaccia utente.

Design estetico e minimalista

Devi comprendere a fondo l'essenza di un prodotto per poter eliminare le parti che non sono essenziali. —Jonathan Ive.

Questo è uno dei principi più impegnativi perché è difficile. La tendenza è che designer e product manager aggiungano tutte le opzioni disponibili sotto il sole e lasciano che sia l'utente a decidere il percorso che vogliono intraprendere. Questo è davvero l'approccio pigro e porta a prodotti pieni di disordine non essenziale.

Le interfacce devono essere ripulite dagli elementi e dai contenuti non necessari che non supportano gli obiettivi e le attività dell'utente. I progettisti non dovrebbero solo progettare interfacce utente esteticamente gradevoli, ma anche dare la priorità alle informazioni da schermo a schermo nel flusso dell'utente. Usando la gerarchia visiva e la magia dell'enfasi, dovrebbe essere presentato solo il minimo essenziale e assoluto di informazioni necessarie all'utente per completare un'attività.

Michelangelo disse del suo lavoro: "Ho visto l'angelo nel marmo e l'ho scolpito fino a quando l'ho liberato".

Progettare un'interazione che sia minimalista, esteticamente gradevole e semplice richiede al designer di capire esattamente cosa sta succedendo nel momento in cui le persone utilizzeranno il prodotto e di sbarazzarsi di tutto ciò che non è necessario. L'esecuzione di ricerche e test approfonditi sugli utenti per capire come gli utenti utilizzeranno il prodotto è in genere l'approccio migliore.

Prevenzione degli errori

Gli utenti sono spesso distratti durante l'esecuzione di un'attività, quindi è fondamentale prevenire gli errori inconsci mediante l'enfasi visiva, l'offerta di suggerimenti e l'uso di vincoli attentamente progettati. Una forma di protezione dagli errori, nota anche come Poka-Yoke, si riferisce all'implementazione di meccanismi di sicurezza per impedire che un processo produca errori.

Uno dei modi migliori per prevenire gli errori è progettare un modello mentale migliore. Molti errori dell'utente si verificano quando il modello del progettista e l'interpretazione di come dovrebbe funzionare il sistema non corrispondono al modello mentale dell'utente.

Le convenzioni di progettazione standard aiutano (uno dei principi sopra menzionati) perché aiutano gli utenti a capire quali azioni possono intraprendere. Gli utenti che interagiscono con il tuo sito Web o applicazione hanno utilizzato migliaia di altri siti e app e si aspettano che gli elementi interattivi comuni appaiano e funzionino in un certo modo. Possono verificarsi situazioni soggette a errori quando il prodotto si discosta da tali convenzioni.

Avvisa prima che vengano commessi errori e conferma prima di azioni distruttive. Ancora meglio dei messaggi di errore ben implementati è una progettazione attenta che impedisce in primo luogo il verificarsi di un problema. Cerca di eliminare le circostanze soggette a errori e continua a controllarle.

Il futuro dell'Interaction Design

Nuovi dispositivi, ambienti e interfacce continueranno ad avanzare con nuove possibilità di interazione. I controller per videogiochi sono in continua evoluzione e forniscono una vasta gamma di controlli di input, oltre a feedback tattile. Le interfacce gestuali matureranno dai touchscreen che supportano i gesti 2D e 3D, ad esempio i gesti su dispositivi iOS e Android, all'utilizzo dei gesti delle mani in spazi 3D per interagire con spazi di realtà virtuale, console di gioco e dispositivi IoT che ci consentono di controllare il nostro ambiente .

Come nel caso di Project Soli di Google, possiamo dire sayonara a mouse, trackpad e joystick e passare a interazioni gestuali più naturali usando la nostra mano e le dita per controllare i dispositivi. In alcuni casi, ad esempio nelle interfacce utente conversazionali, i metodi di input possono cambiare da tastiera a voce. Tuttavia, sarà ancora necessario il principio del feedback immediato e continuo in qualche forma (vocale, tattile e visivo).

I principi fondamentali della progettazione dell'interazione giocheranno sempre un ruolo centrale nella progettazione dei sistemi futuri ed è importante che i progettisti di UX/UI li tengano a mente. Non sono regole rigide e veloci, ma renderanno prodotti e servizi migliori e più coinvolgenti. Proprio come i film di successo utilizzano antiche tecniche di narrazione che seguono una struttura collaudata e radicata nel tempo, esistono principi di progettazione dell'interazione che esistono per una buona ragione. Seguirli andrà a vantaggio di qualsiasi designer di prodotti migliorando l'usabilità e promuovendo un'adozione più ampia dei propri prodotti.

Ulteriori letture sul blog di Toptal Design:

• Principi di progettazione: introduzione alla gerarchia
• Procedure consigliate per la progettazione dell'interfaccia utente ed errori comuni
• Esplorare i principi della Gestalt del design
• La guida completa all'architettura dell'informazione