Sui principi base di UI — An Habeetat School Story (Vol. 2)
Cosa vuole l’utente e di cosa ha bisogno (designer POV)
Previously on:
In un giorno di ordinaria follia divenni designer
Recap Season 1
Abbiamo parlato di un trono corteggiato da sette regni, di porte che non reggono (AHIA) e di totoscommesse su chi lascerà la serie e in quale modo brutale.
O forse no.
“Al gioco dei designer o si vince o si muore.”
Quindi abbiamo visto insieme:
- S01E01 — Chi sono
- S01E02 — Chi è il designer?
- S01E03 — Cosa significa Design?
- S01E04 — UX vs UI
- S01E05 — Cos’è la User Experience?
- S01E06 — Human-centered Design
- S01E07 — Fondamenti e strumenti della UX
- S01E08 Special Episode — Inclusive Design
Nella seconda stagione c’è un ribaltamento del punto di vista su un personaggio già apparso nella prima stagione, ovvero la User Interface (UI).
Lo so già che non ti ricordi qual è la differenza tra UX e UI.
Ti direi di guardarti di nuovo la prima stagione.
Ma io sono tra quellə che, se si inchioda il pensiero su una scena in particolare, fa di tutto per trovare solo quell’estratto.
Quindi ti do l’estratto.
La User Experience, o UX, si occupa dell’architettura dell’interazione: è quasi invisibile, come per l’uomo l’apparato scheletrico o muscolare.
La User Interface, o UI, si occupa dell’aspetto formale dell’interazione: è esposto e visibile, come la pelle o i capelli (lunghi, corti, ricci, lisci, biondi, castani, ecc.).
Fatte le dovute differenze.
Cos’è la UI?
“Le interfacce utente multimediali incorporano, integrano e sincronizzano media diversi (media statici come testo, grafica, immagini e media dinamici come audio, animazione, video o altre modalità sensoriali).”
– Software ergonomics for multimedia user interfaces (Part 1: Design principles and framework)
Nella prima stagione abbiamo preso confidenza insieme col mantra del “dipende”: progettare implica tante variabili e poche costanti, continue validazioni, possibili reiterazioni. Questo non permette di avere quindi regole “scientifiche”. Possiamo però avere dei riferimenti che in fase di progettazione aiutano a farci le domande giuste per tracciare la soluzione migliore.
Questi riferimenti sono gli attributi di presentazione:
- Chiarezza: il contenuto delle informazioni viene trasmesso in modo rapido e preciso;
- Discriminabilità: le informazioni visualizzate devono essere distinte in modo accurato;
- Concisione: gli utenti non devono essere sovraccarichi di informazioni estranee;
- Coerenza: il design deve essere un unico filo conduttore dell’esperienza, pertanto deve essere conforme alle aspettative dell’utente;
- Rilevabilità: l’attenzione dell’utente deve essere veicolata verso le informazioni rilevanti;
- Leggibilità: le informazioni devono essere di facile lettura;
- Comprensibilità: il significato deve essere chiaramente comprensibile, inequivocabile, interpretabile e riconoscibile.
Durante le due lezioni rispettivamente di UX e UI, volevamo ammazzare la noia e spezzare i lunghi momenti nozionistici con alcuni giochi.
Uno di questi è l’immagine sopra, in cui viene chiesto innanzitutto di riconoscere il prodotto e poi assegnare a ciascuna forma quale rappresentasse la UX e quale la UI.
È la quarta volta che lo proponiamo, a persone totalmente diverse. Target lontanissimi tra loro.
Ma quasi tutti vedono il packaging del ketchup, indotti anche dal colore rosso.
La maggior parte risponde che il packaging a sinistra è la UI, perché quella forma è riconoscibile facilmente (Chiarezza, Leggibilità) in una bottiglia che, dato il suo comune utilizzo, porta a pensare che la sostanza contenuta è più o meno liquida (Coerenza) e che quindi l’aspettativa di quella esperienza è quella di “svitare il tappo e versare il contenuto” (Comprensibilità). Quasi tuttə di pancia rispondono che questa forma è più “bella”. La percezione di questa “bellezza” è data proprio dalla sua leggibilità, chiarezza, coerenza e comprensibilità: una bottiglia è fatta in un certo modo con delle caratteristiche che conosciamo e ci dà comfort riconoscerla e conoscere il suo utilizzo. Apparentemente questo comfort ci fa risparmiare energie nel capire come funziona qualcosa.
Se sprechiamo energie è bello.
Perché siamo pigri.
A questo punto c’è sempre qualcuno o qualcuna che interviene dicendo:
Sì, però che rottura far scendere il ketchup con quella di sinistra!
L’energia quindi la impieghiamo nell’esperienza con quella bottiglia “classica” contenente il ketchup perché, seppur apparentemente più facile, quella progettazione non tiene conto:
- di come incide la temperatura sul prodotto contenuto nella bottiglia che, essendo denso, può fare più o meno resistenza alla bottiglia e di conseguenza modifica l’esperienza;
- della necessità di dosare il prodotto contenuto nella bottiglia che, essendo un “condimento”, l’obiettivo non è svuotare la bottiglia ma scegliere quanto prodotto far scendere nel piatto;
- del bisogno di dover accelerare la caduta del prodotto con le famose “botte” al fondo della bottiglia posizionata a testa in giù, che ovviamente ci rende l’esperienza demotivante perchè, appunto, non si può dosare un “colpo”.
Quindi questi tre punti sono stati analizzati da designer per risolvere quelle frizioni nell’esperienza. Innanzitutto rivisitando la forma invertendo l’apertura già verso la direzione verso cui il prodotto deve andare; sostituendo il materiale del packaging da vetro a plastica, cosa che permette la manipolazione e quindi l’atto di premere; infine riprogettando totalmente il sistema d’uscita del ketchup con un tappo dosatore che, premendo più o meno il packaging, permette di dosare il contenuto.
Tutto questo ha permesso di avere una UX centrata sull’obiettivo dell’utente, sulle sue aspettative e sulla sua soddisfazione. Viene sacrificato qualche attributo della UI, certo, ma viene colmata ampiamente la UX.
Una giusta mediazione.
Come ci si comporta invece con esperienze digitali?
Quelle famose variabili di cui sopra.
Ecco, dipende.
Di fronte alla progettazione di esperienze digitali (website, app, tool, software, ecc) dobbiamo fare qualche passo indietro, agli inizi del XX secolo, per “rubare” qualche concetto di percezione visiva dalla corrente tedesca Gestalt.
La psicologia della Gestalt (dal tedesco Gestaltpsychologie, “psicologia della forma” o “rappresentazione”) nasce in Germania agli inizi del XX secolo ed è una corrente psicologica incentrata sui temi della percezione e dell’esperienza. Max Wertheimer, nel 1910, è spesso considerato il pioniere del movimento della Gestalt. Le idee chiave della Gestalt riguardano la percezione e la cognizione, sottolineando l’importanza delle configurazioni organizzate e della comprensione della totalità dell’esperienza, piuttosto che della semplice somma delle sue parti.
Alcuni dei principi che possono guidarci:
Vicinanza
Elementi tra loro vicini e simili vengono considerati dal nostro cervello un tutt’uno.
Zona comune
Gli elementi posizionati all’interno della stessa regione vengono percepiti come raggruppati.
Somiglianza
Gli elementi con caratteristiche comuni (dimensione, colore, peso, posizione, forma, ecc.) vengono percepiti come appartenenti ad uno stesso gruppo.
Forma chiusa
La nostra mente è predisposta a fornire le informazioni mancanti per chiudere una figura.
Simmetria
Elementi simmetrici sono percepiti come appartenenti allo stesso gruppo, dandoci una sensazione di ordine e solidità.
Continuità
Le linee sono percepite più facilmente quando sono continue. In casi di interruzione, la mente percepisce una figura unitaria anche quando questa non esiste nella realtà.
Destino comune
La mente percepisce come appartenenti allo stesso gruppo quegli elementi che sembrano muoversi nella stessa direzione.
Questi sono ovviamente piccoli suggerimenti che ci aiutano a organizzare i contenuti e a comunicarli in maniera chiara, discriminabile, rilevabile e leggibile.
Ma se parliamo di organizzazione di elementi non possiamo non parlare di Atomic Design, UI Pattern e Design System.
Atomic Design
[ADD TO LOOT]
L’Atomic Design è l’insieme di componenti visivi organizzati per complessità in diversi blocchi: atomi, molecole, organismi, modelli e pagine.
Atomi
Nel contesto di una UI gli atomi rappresentano degli elementi non ulteriormente suddivisibili e inseparabili, li si può descrivere come dei mattoni che utilizzati insieme permettono di costruire una casa. Dal punto di vista della progettazione di UI, gli atomi possono essere assimilati ai pulsanti di un form o ad un campo di testo. Una delle caratteristiche peculiari degli atomi riguarda il loro elevato livello di astrazione, motivo per il quale possono essere considerati come tali anche le animazioni o i font.
Molecole
A differenza di quanto accade con gli atomi, che per loro natura sono delle monadi, le molecole si presentano come degli insiemi. Una molecola è sostanzialmente un gruppo di atomi che possono essere combinati con lo scopo di svolgere una funzione. L’etichetta di un form, un campo di input e un pulsante di invio sono degli atomi inutilizzabili se presi singolarmente, se uniti diventano invece un modulo per l’invio di feedback o per la formulazione di una query ad un motore di ricerca.
Organismi
Nell’Atomic Design un organismo è il risultato della combinazione di più molecole. Si pensi ad esempio al caso dell’header di una pagina web. Essa può contenere un motore di ricerca interno, un menu, il logo di un brand e le icone per il collegamento ai social network. Ognuna di queste molecole partecipa quindi alla formazione di un organismo che è appunto l’header, ma esistono diverse tipologie di organismi e la loro natura dipende dal tipo di molecole in essi aggregate. Per questo motivo possono essere considerati organismi anche componenti di una UI come, per esempio, un footer.
Template
Con la fase relativa ai template l’Atomic Design supera in parte il modello ispirato alla chimica iniziando a proporre quello che dovrebbe essere il risultato finale della progettazione di una UI. Un template è infatti un insieme di organismi che quando uniti portano alla formazione di uno schema (layout) per le pagine. Volendo proporre una definizione dei template, possiamo affermare che essi sono raffigurabili come degli aggregatori in grado di offrire un contesto ad atomi, molecole e organismi.
Pagine
Le pagine rappresentano i template, ciò significa che permettono di visualizzare le UI nella loro forma definitiva, compresi i contenuti che sono destinate ad ospitare. Oltre che essere la fase culminante dell’Atomic Design, le pagine permettono di mettere alla prova l’efficacia del Design System adottato. Se i test dovessero far emergere delle criticità sarà necessario intervenire su molecole, organismi e template per applicare le modifiche necessarie ad una resa più performante della UI progettata.
Grazie a questo “modo di pensare”, esistono degli aggregati di atomi/molecole ricorrenti che ormai sono diventati quasi degli standard, dei pattern.
Questi appunti si chiamano UI Pattern.
I pattern di interfaccia sono soluzioni ricorrenti che risolvono problemi comuni di progettazione. Gli UI Pattern sono punti di riferimento standard per gli UI designer e per i developer.
Quando facciamo swipe sul cellulare o navighiamo in internet, davanti ad una nuova app o website, difficilmente impieghiamo energia per imparare ad usarli. Questo perchè alcuni pattern li riconosciamo: un’app bar, un menù, una pagina di sign in o di login sono tutti pattern ricorrenti.
Soluzioni già consolidate a problemi di interfaccia e usabilità.
A Napoli si dice:
‘O cocco ammunnato e buono
E se tutto è già pronto e anche strutturato, documentato e ready-to-use, ci troviamo di fronte ad un Design System.
Il Design System è un insieme completo di standard di progettazione, documentazione e principi comprendente un toolkit (componenti e modelli riutilizzabili).
A questo punto della lezione, facciamo sempre una domanda:
Perché utilizzare un design system?
Quasi tutti rispondono perchè con un design system è più veloce progettare e sviluppare un prodotto digitale.
E non solo. Un design system va a risolvere una serie di problemi durante tutto il flusso di progettazione in cui sono coinvolti tanti attori:
- Perché migliora il lavoro tra designer e dev;
- Perché il processo produttivo è più veloce;
- Perché è centralizzato, riutilizzabile e scalabile;
- Perché semplifica il lavoro di progettazione;
- Perché concede coerenza alla UI.
Come lavorano quindi un/una UX/UX designer in una software house?
Nella prima parte abbiamo parlato di mediazioni, di contaminazioni e del mantra “dipende”.
E la UX/UI si trova nella terra di mezzo tra il business e il development. L’immagine ovviamente è a solo scopo illustrativo: i designer non volano e i developer amano la luc… ah no.
Zoomando sull’E2E della produzione di esperienze digitali, in weBeetle adottiamo un approccio agile “ciclico” più che lineare che include quindi una continua valutazione, progettazione e testing delle soluzioni prima di arrivare alla “messa online” (deploy).
Concludo riportando una domanda a tre teste che durante le lezioni della Habeetat School arriva sempre e sento che è importante ribadire:
Quindi voi cosa fate in azienda? Che programmi utilizzate? Cosa avete studiato prima di lavorare?
Rispondo per me, anche se io e Davide Albanese abbiamo un background simile.
In weBeetle, ho iniziato come UI Designer perchè ho studiato Graphic Designer all’Accademia di Belle Arti di Napoli. La UX, che ovviamente è impossibile separare dalla sua gemella, si è inserita successivamente sul percorso, per necessità, per voglia e per la bella contaminazione avuta da Francesca Postiglione.
Non sono una UX Designer ma faccio anche UX. E voglio cogliere l’attimo per ribadire una differenza importante:
Un o una UX Designer e un o una UI Designer hanno background formativi completamente diversi: il/la primo/a probabilmente avrà, oltre l’esperienza, una formazione in scienze psicologiche, psicologia cognitiva o neuroscienze; il/la secondo/a avrà, oltre l’esperienza, una formazione umanistica in comunicazione, progettazione grafica per l’impresa o graphic design.
Due mondi così opposti eppure così vicini.
Tipo Hanna Montana.
In quanto UI Designer, con background da Graphic Designer, gli strumenti che ho utilizzato negli anni sono quelli che mi permettevano di progettare e visualizzare diversi tipi di output (web, app). Molti designer hanno iniziato proprio con Adobe Photoshop o Illustrator, io studiai su Adobe Muse, un software della CC ormai dismesso.
Subito dopo ho provato molti tool specifici tra cui Zeplin, Sketch, InVision, fino ad atterrare su Adobe XD. E oggi sono in passaggio su Figma. Questi tool ovviamente sono stati progettati e migliorati proprio per soddisfare e facilitare la progettazione di interfacce utente, difatti quasi tutti tendono a centralizzare variabili e componenti.
Dato che non è una trilogia e non ci sono DeLorean volanti, la storia finisce qui.
Ma voglio concludere con una riflessione:
Come fa allora Emmett Brown, oggi, ad essere sempre uguale dal 1985? Non è che c’entra ‘sta storia dei viaggi nel tempo?
La riflessione ovviamente non era questa.
Ma:
Ci tengo che sia chiara la distinzione tra UX e UI, perchè è davvero un tema che confonde neofiti e non. Ma ci tengo anche a dire che, sempre in quanto progettisti e mediatori, i confini sono sempre astratti. La realtà è sempre fatta di contaminazione quando si sta in un team multiprofessionale. La collaborazione sana e appassionata abbatte quei confini che ci lascia avvicinare e scoprire tanti mondi professionali limitrofi, pur rispettando la professionalità verticale reciproca.
I contenuti della lezione tenuta nella Habeetat School sono stati elaborati a quattro mani da me e Davide Albanese.
