Blog Trapstudio La Caffettiera del Masochista Cover

La caffettiera del masochista: lezioni di UI/UX design

La caffettiera del masochista. Il design degli oggetti quotidiani è un libro che reputo fondamentale per ogni designer: lo consiglio sempre a chiunque si avvicini al mondo del design e ne ho parlato spesso in presentazioni e newsletter.

Nonostante abbia diversi anni (la prima pubblicazione è del 1988), i concetti che Don Norman tratta sono applicabili a qualunque area del design, ed è per questo che in questo post troverete quelli che secondo noi sono le nozioni più importanti applicabili al nostro campo: lo UI/UX design.

Il compito del designer

I designer sono spesso coinvolti in progetti di natura molto diversa fra loro: a volte il focus è sulla tecnologia, a volte sul marketing, altre volte sull’estetica.

In La caffettiera del masochista si parla di design antropocentrico, o human-centered design, ovvero del design comprensibile ed usabile in grado di offrire alle persone un’esperienza d’uso gradevole e positiva.

Don Norman chiarisce fin da subito quello che dovrebbe essere il ruolo del progettista che sposa il concetto antropocentrico di design: il suo compito primario è quello di progettare prodotti che corrispondano ai bisogni e alle capacità umane, aiutando le persone a capire come funziona un determinato prodotto e cosa accade durante il suo utilizzo.

Le due macroaree in cui la progettazione viene coinvolta vengono chiamate Golfo dell’esecuzione e Golfo della valutazione: nel golfo dell’esecuzione l’utente si interrogherà quindi su cosa possa fare con la nostra interfaccia, mentre nel golfo della valutazione osserverà se il risultato delle sue azioni ha portato al risultato voluto.

Se nel golfo della valutazione lo strumento che più aiuta gli utenti è il feedback, nel golfo dell’esecuzione il designer può fare affidamento a diversi strumenti che possono aiutare l’utente: Affordance e significanti, mapping, e vincoli.

Feedback e feedforward

Abbiamo visto come il modo in cui l’utente interagisce con le interfacce (e più in generale con un prodotto), sia divisibile in due fasi principali: esecuzione e valutazione.

Queste fasi devono essere supportate da due tipi di informazione che le interfacce possono fornire: il feedback ed il feedforward.

Il Golfo dell’esecuzione viene supportato dal feedforward, mentre, come abbiamo già detto, il golfo della valutazione fa affidamento alle informazioni date dal feedback, ovvero quelle informazioni che l’interfaccia ci dà come risposta ad un’azione che abbiamo compiuto, rispondendo a domande come: “va bene così?”, “cosa significa?”, “cosa è successo?”.

Il feedforward permette invece all’utente di dipanare i dubbi sull’utilizzo dell’interfaccia, rispondendo a domande come: “Cosa posso fare?”, “Quali sono le alternative?”, “Come posso fare per compiere una determinata azione”?

La Caffettiera del masochista Introduzione

I 7 principi fondamentali del design

Esecuzione e valutazione, feedforward e feedback, si tratta di facce della stessa medaglia: l’azione.

Lo scopo finale del design di un’interfaccia è quello di permettere all’utente di compiere azioni in maniera semplice e comprensibile.

Il processo dell’azione può essere suddiviso in 7 domande fondamentali (alcune le abbiamo viste poco sopra) ed altrettante risposte che determinano 7 principi fondamentali del design.

Visibilità

fare scoprire immediatamente all’utente la gamma di azioni possibili.

Feedback

fornire continuamente informazioni riguardanti lo stato attuale del prodotto (Nielsen lo chiama più in generale “Sistema”) e i risultati delle azioni fatte dall’utente

Modello concettuale

ovvero l’informazione necessaria a favorire la comprensione ed il controllo del prodotto. Una buona interfaccia deve presentare controlli legati all’utilizzo che ne farà l’utente, e non al funzionamento interno del prodotto.

Affordance

come vedremo in maniera più approfondita, le affordance rendono possibili le azioni desiderate.

Significanti

si tratta di un principio vicino alle affordance, e permettono di identificare dove le azioni possono essere eseguite.

Mapping

all’interno del mondo delle interfacce si intende mapping le relazione tra i comandi e i rispettivi meccanismi di feedback.

Vincoli

i vincoli facilitano l’interpretazione e guidano l’azione, possono essere di diverse tipologie: fisici, logici, semantici e culturali.

E’ interessante notare come alcuni di questi punti siano presenti anche nelle 10 euristiche di Nielsen, a dimostrazione del fatto che si tratta di principi universali in qualsiasi ramo del design.
Nel caso dello UI/UX design molti di questi sono applicabili in maniera diretta, vediamoli qui di seguito.

Affordance e significanti

Questo libro ha il grande merito di aver introdotto il concetto ed il termine “affordance” nel mondo del design.
Questo principio è probabilmente uno dei più immediatamente comprensibili e applicabili del libro: si tratta letteralmente della relazione tra l’oggetto e la sua possibilità di utilizzo da parte dell’utente.

Spiegato in termini più vicini al mondo UI/UX, si tratta di come un elemento di interfaccia, ad esempio un campo di ricerca, “spiega” all’utente come può essere utilizzato: la sua forma rettangolare e l’elevato livello di contrasto rispetto allo sfondo, l’icona della lente d’ingrandimento ed il testo placeholder con scritto “cerca un libro”, sono tutte affordance.

Le affordance identificano quindi quali azioni sono possibili, mentre l’indicazione di dove queste azioni possono essere eseguite si chiamano significanti: tornando all’esempio del nostro campo di ricerca, l’etichetta del pulsante “cerca” incluso nel campo è un significante.

La Caffettiera del masochista Affordance e Significanti

Mapping e feedback

Il mapping è la relazione fra due elementi che operano in modo congiunto, come ad esempio un bottone ed un sistema di feedback: quando alziamo il volume dello smartphone usiamo uno dei due pulsanti posizionati a lato del telefono, che azionerà poi una barretta sullo schermo come sistema di feedback visivo.

A seconda della direzione della barretta possiamo stabilire se il mapping è di tipo naturale, quindi buono, oppure no: se la barretta è orizzontale l’utente sarà costretto ad uno sforzo cognitivo maggiore per interpretare il feedback (feedback orizzontale vs pulsanti verticali), viceversa con una barretta verticale avremo un mapping naturale, che segue la disposizione dei controlli fisici (i due tasti posizionati sul lato del telefono).

Come abbiamo appena visto, il concetto di mapping si combina spesso con quello di feedback: specialmente nelle interfacce digitali è fondamentale che ogni azione indichi il suo risultato (o svolgimento) in maniera chiara ed inequivocabile.

La barretta del volume è quindi un ottimo esempio di mapping e feedback.

La Caffettiera del masochista Mapping e Feedback

Vincoli e funzioni obbliganti

Visto da un’altra prospettiva, il mapping può essere visto come una tipologia di vincolo: tra la disposizione spaziale di controlli ed il sistema di feedback, ad esempio.
Questo tipo di vincolo viene definito da Don Norman vincolo logico.

Un’altra categoria di vincoli sono i cosiddetti vincoli fisici, di cui fanno parte le funzioni obbliganti: si tratta di azioni vincolate in modo che un passaggio mancato impedisce di procedere al successivo.

Nelle interfacce digitali è facilissimo imbattersi in funzioni obbliganti: basti pensare ad una form dove è necessario inserire dei campi obbligatori, oppure ai requisiti minimi per creare una password.

Questo meccanismo è spesso utilizzato anche per la prevenzione degli errori: in questo le funzioni obbliganti assumono la forma di 3 metodi: interlock, lock-in e lockout.

La Caffettiera del masochista Vincoli e funzioni obbliganti

Interlock

Il metodo di interlock obbliga l’utente ad eseguire le operazioni in una sequenza ben precisa, senza possibilità di sequenze alternative: i wizard di configurazione a una via sono un esempio pratico di interlock.

La Caffettiera del masochista Interlock

Lock-in

Il metodo di lock-in impedisce l’interruzione accidentale di un processo: quando un’applicazione mi chiede conferma prima di chiudersi (hai salvato il file su cui stavi lavorando?), sta di fatto applicando un lock-in.

La Caffettiera del masochista Lock in

Lockout

Il lockout è l’esatto contrario: impedisce quindi l’accesso ad una funzionalità finchè non sono state completate le operazioni volute. Un pulsante disabilitato per una funzione che si attiva comprando la versione premium di un’app è un classico lockout.

Il valore degli standard

Nel mondo delle interfacce il concetto di standard è qualcosa di universalmente noto: la sezione “account” di un’applicazione web è generalmente in alto a destra, e si tratta di una posizione standard.

Ogni volta che applichiamo uno standard siamo ragionevolmente sicuri che l’utente lo riconosca e lo riesca ad utilizzare agevolmente: si tratta di un tipo particolare di vincolo, che viene definito vincolo culturale.

Sebbene i vincoli culturali varino a seconda della parte dell mondo dove un prodotto viene utilizzato, il linguaggio delle user interface è un linguaggio per lo più globale, motivo per il quale l’adozione estesa di pattern d’interfaccia standard renderà il nostro prodotto largamente comprensibile ed usabile.

Design complicato

In questo articolo abbiamo visto come in La caffettiera del masochista. Il design degli oggetti quotidiani siano presenti diversi concetti utili a rendere le nostre interfacce più usabili e gradevoli, ma Don Norman, nel libro, si sofferma anche sulle cose che rendono il design deliberatamente complicato.

Non tutto, infatti, deve essere semplice per essere corretto: tutte le volte che un prodotto presenta azioni critiche o pericolose, parti dedicate a sole persone autorizzate o dati che devono essere nascosti, le interfacce devono essere progettate in modo da rendere complicato l’accesso alla maggior parte delle persone.

Ancora una volta la forma segue la funzione.

La Caffettiera del masochista Design Complicato

Non solo interfacce

La caffettiera del masochista di Don Norman contiene molti concetti utili allo UI/UX design, ma si tratta di un libro dedicato allo human-centered design in ogni campo, e presenta spunti interessanti in ogni pagina, trattando la disciplina del design in modo analitico e razionale.

In questo articolo abbiamo visto solo una piccola parte di quello che tratta questo pilastro del design, ed in futuro tratteremo altri concetti applicabili al nostro mondo: esistono infatti diverse parti che meritano di essere approfondite, come ad esempio i capitoli dedicati agli errori, alle loro origini e alle metodologie per capirne le motivazioni.