Lezione 8b – Dall‘UX all’UI

Differenze fra UX (user experience) e UI (user interface)

Nota

I migliori libri su UX e UI Design?
https://www.grafigata.com/libri-di-grafica/

La UX (user experience) possiamo identificarla come l’esperienza personale che si ottiene interagendo con un prodotto (sito web, eCommerce, app, oggetto).

Il mercato delle esperienze è l’ambiente all’interno del quale si vendono i prodotti. L’esperienza negativa o positiva definisce la qualità di un prodotto.

“L’USER EXPERIENCE SI RIFERISCE SEMPLICEMENTE AL MODO IN CUI ESISTE E VIENE USATO UN CERTO PRODOTTO NEL MONDO REALE. C’È UNA UX POSITIVA QUANDO GLI OBIETTIVI SIA DEGLI UTENTI, SIA DELLE ORGANIZZAZIONI SI INCONTRANO”
J. J. GARRET


La User Interface (UI) è la cura e lo studio dell’interfaccia di un’applicazione, di un sito, di una web app, del software presente in un display o in un’apparecchiatura digitale ma anche della disposizione dei pulsanti su un prodotto, in un abitacolo, in una macchina fotografica, che dovrà essere utilizzata da qualcuno. L’interfaccia può essere fisica o digitale; 2D o 3D o 4D: è il mezzo tramite il quale l’utente cerca di accedere a un servizio, utilizzare un prodotto, ecc.

È l’interfaccia dello strumento che permette l’interazione tra uomo e dispositivo; in un sito web ad esempio una call-to-action è lo strumento che permette all’uomo di passare da un contenuto all’altro.

Più la UI è semplice da comprendere, curata, efficiente ed efficace, studiata per soddisfare al meglio, nel minor tempo possibile, le esigenze dell’utente finale, più la UX risulterà essere piacevole e si avrà un risultato positivo dall’utilizzo di un applicativo o un sito, ecc.

2-ux-designer

Normalmente chi si occupa di UX/UI design ha un background da creativo, legato alla comunicazione visiva e alla grafica in generale e spesso UX e UI designer sono la stessa persona.

Ad un certo punto arriva però il momento in cui dobbiamo rendere interattiva la nostra interfaccia, e per farlo (nel caso delle interfacce web) essa va sviluppata in HTML, Javascript, PHP, ecc..

Se una pagina è efficace dal punto di vista dell’esperienza utente ma è esteticamente inguardabile, probabilmente non è stato fatto un buon lavoro di UI design.
Se al contrario la pagina è accattivante e ben costruita ma presenta evidenti problemi di navigazione, manca alla base un processo di UX design.
Le due discipline si completano a vicenda e vanno sempre curate in egual misura.

3-image1-600x291


Cosa fa l’UX Designer?

La User Experience è un aspetto presente in tutti gli ambiti progettuali. La progettazione UX può essere applicata per migliorare l’esperienza di utilizzo di un ascensore, un libro, di una calcolatrice, di un App o di un sito wb.

Oggi lo UX Designer è il progettista che si occupa di studiare gli utenti e di creare una struttura che stabilisce dove si trovano le informazioni e come si possono raggiungere.

Un UX designer analizzerà lo user flow (da dove arriva l’utente? quali sono i touchpoint? dove avverrà la conversione? cosa succede quando si abbandona il prodotto/interfaccia? e quando si sbaglia?) e analizzerà l’architettura delle informazioni per disegnare  wireframe e prototipi.

-> L’UX designer svolge ricerche sugli utenti, analizza i competitor, verifica l’idoneità del prodotto con i bisogni individuati, progetta le interazioni per ottenere i risultati previsti.

-> L’UX Design detta le regole per la corretta implementazione delle funzioni e degli elementi che un sito o un’app dovrebbero avere per incontrare il gradimento del pubblico.  È quindi una disciplina variegata che oscilla tra marketing, design, project management e psicologia!

L’UX Design è un aspetto molto importante, perché la prima impressione che l’accesso a un sito o a un’app suscita nello spettatore, può incidere sulle probabilità di portare a compimento le conversioni e far ottenere i risultati di marketing previsti.

La User Experience è fondamentale, per esempio, negli e-commerce, per aiutare gli utilizzatori a trovare risposta nel più breve tempo possibile alle proprie esigenze. Pensate ad Amazon: 3 click e in un giorno ho a casa quel che mi serve.


A proposito di UX, 5 errori da non fare in ambito di UX DESIGN https://it.semrush.com/blog/ui-5-errori-design-e-usabilita-esempio-pratico/


DESIGN e PSICOLOGIA

Gran parte della UI e della UX si riferiscono alla psicologia poiché il progettista deve capire per chi sta progettando e in che modo il prodotto che sta progettando sarà percepito e ricevuto.

Per comprendere meglio la percezione dell’utente, verranno spiegati alcuni principi di progettazione relativi alla psicologia.

L’Effetto Von Restorff, noto anche come effetto di isolamento, spiega come se fossero presenti più oggetti, quello che sembra diverso dagli altri è più probabile che venga ricordato. I progettisti utilizzano questo principio per esempio per pulsanti di azione principale su siti o applicazioni.

L’Effetto Posizione Seriale dimostra che un utente ricorderà il primo e l’ultimo elemento di un elenco o serie. Ecco perché la maggior parte delle applicazioni sono progettate con una barra di navigazione in alto o in basso, posizionando le azioni più importanti a destra o a sinistra.

La Legge di Hick

Per la legge di Hick il tempo necessario a fare una scelta è influenzato non solo dal numero delle alternative possibili, ma anche dal modo in cui queste sono organizzate. Con importanti ricadute per il design di menu, risultati di ricerca e liste in genere. La legge di Hick descrive la relazione fra il tempo necessario a compiere una scelta, il numero di alternative disponibili, e altre variabili. Formulata negli anni Cinquanta, la legge ha avuto fortune alterne nell’ambito della human-computer interaction, a causa soprattutto della sua controversa applicazione ai menu.

Teoria studi di Hick: https://www.lucarosati.it/download/papers/hick-law-classification.pdf

La Legge di Prossimità afferma che gli oggetti più vicini tra loro tendono ad essere raggruppati. Ciò dimostra come il cervello umano organizza le cose. I progettisti usano questo principio quando vogliono chiarire il raggruppamento delle cose e sono consapevoli dell’importanza di stare attenti a quale distanza posizionare gli oggetti.

Gestalt e web/graphic design

La psicologia della Gestalt è una corrente psicologica che si sviluppò all’inizio del ‘900, in Germania.

È una corrente psicologica che studiava principalmente la percezione delle forme e l’esperienza.

Alla base della psicologia della Gestalt c’è questa frase, pronunciata da uno psicologo tedesco – Kurt Koffka (1886 – 1941)

Il tutto è diverso dalla somma delle singole parti”.

La famosa frase di Kurt Koffka, alla base della Gestalt, significa sostanzialmente che noi esseri umani percepiamo gli elementi in modo diverso a seconda dell’insieme di cui fanno parte.

Non percepiamo i singoli elementi uno affianco all’altro, ma percepiamo un qualcosa di differente.

La Gestalt nell’UX e UI design?
https://corsoux.it/ux-visual-design/psicologia-gestalt/


Ecco 6 principi fondamentali

Legge della chiusura o chiusura sfondo

Secondo questa legge tendiamo a raggruppare quello che vediamo in termini di figure chiuse o complete invece che di figure aperte. Tendiamo pertanto a ignorare le discontinuità e a concentrarci sulla forma generale.

Un esempio famoso che sfrutta questo principio della Gestalt è quello del logo WWF, dove noi percepiamo la forma completa del Panda, pur non vedendolo davvero per intero.

Principio della vicinanza

Un altro principio della Gestalt è il principio della vicinanza, il quale afferma che all’interno di una composizione o di un’immagine, gli elementi vicini tra loro vengono percepiti come un elemento unitario.

L’esempio più importante, nella grafica, è quello delle colonne e dei paragrafi di testo e quindi della Tipografia.

Funzionano esattamente allo stesso modo, finché le righe di testo sono poste una vicino all’altra le percepiamo come un elemento unico: che sia un paragrafo o una colonna di testo.

Nel momento in cui inseriamo troppo spazio tra una riga e l’altra, le righe iniziano a sembrarci come elementi distinti tra loro e non come parte dello stesso testo.

Nei Loghi:

In questo logo vengono inseriti alcuni dei moltissimi prodotti venduti da questa multinazionale e vengono posizionati in modo tale da formare una U. Questo sfrutta proprio il principio di vicinanza della Gestalt.

Principio della somiglianza

Il secondo principio è quello della somiglianza. Afferma che all’interno di una composizione o di un’ immagine, gli elementi simili tra loro vengono raggruppati e percepiti come un elemento unitario. Questa somiglianza può essere data dalla forma, dal colore, dalla dimensione o dalla posizione.

Tutti i pattern e le texture, ad esempio, si basano su questo principio. Ma non solo, anche quando si costruisce una serie di icone.

Le icone devono essere simili tra loro per funzionare all’interno di un insieme che sia visivamente coerente.

Lo stesso principio si applica poi al branding, alla progettazione di un’immagine coordinata.

Quando si va a costruire l’immagine coordinata di un brand, infatti, si va ad utilizzare determinati elementi ripetendoli in ogni applicazione di quel logo o di materiale coordinato aziendale. Creando ritmo, consistenza.

Principio del destino comune

Nel principio del destino comune gli elementi con un movimento uguale tra loro e diverso dagli altri, vengono raggruppati tra loro.

In questo esempio percepiamo tre colonne verticali e una sola linea obliqua che gli passa dietro. Mentre in realtà si tratta di elementi spezzati che percepiamo come unici tra loro.

Principio di continuità

Molto simile al principio precedente, del destino comune, ma diverso, è il principio di continuità, dove gli elementi vengono uniti secondo la loro direzione.

In questo esempio da manuale, noi percepiamo due linee curve, ma in realtà potrebbero essere quattro righe completamente separate tra loro, ma semplicemente poste visivamente nello stesso punto.

Nel graphic design questi principi vengono utilizzati nelle immagini per dare un senso di armonia nel movimento, e far percepire come un tutt’uno degli elementi che in realtà sono slegati tra loro.

Un esempio molto bello, nel logo design, è il pittogramma del logo per l’Association des Hotels du Canada:

Principio dell’esperienza passata

Secondo questo principio, l’esperienza modella la nostra percezione. E quindi gli elementi di un insieme che riescono a far rivivere le esperienze percettive di un determinato oggetto, vengono raggruppati e formano una figura.

In questo esempio infatti non vediamo tre segmenti distinti, ma percepiamo in modo molto chiaro una lettera E maiuscola. Questo perché conosciamo la lettera E e le linee posizionate in quel modo stimolano il nostro ricordo e fanno sì che la percepiamo, anche se in realtà non c’è. Idem per il cubo (che non c’è ma lo vediamo) e per il triangolo “vuoto”

Tendiamo a preferire le forme chiuse, e quindi anche quando una forma non è chiusa, il nostro cervello la completa in automatico, ricostruendo una forma in base alla memoria che abbiamo di quella forma specifica.

Approfondisci la GESTALT qui: https://www.onicedesign.it/2015/10/teoria-della-gestalt-e-principi-del-design-alcuni-esempi/

Principi di UX Design

Donald Arthur Norman, psicologo e ingegnere statunitense, insieme a Jakob Nielsen, si è dedicato alla ricerca e allo studio dell’ergonomia, del design, e più in generale del processo cognitivo umano.
Ha fondato la sua analisi sulla progettazione antropocentrica, mettendo insieme due campi che ancora non comunicavano: tecnologia e psicologia.

Nel noto libro La caffettiera del masochista, racconta le deduzione dei principi di usabilità ed ergonomia che governano il nostro mondo, fin dall’antichità.

Lì descrive sei principi

1. Affordance

L’affordance, o invito, è la qualità fisica di un oggetto che suggerisce le azioni appropriate per manipolarlo.

Come scrive Norman,

Le affordance percepite ci aiutano a indovinare quali azioni siano possibili, senza bisogno di cartelli o istruzioni.

Nell’interactive design l’affordance rappresenta la prima regola fondamentale: essere intuitivo. Ovvero, l’interfaccia deve risultare comprensibile fin dal primo sguardo, senza necessitare di istruzioni (etichette, testi, CTA).

2. Significanti

I significanti sono “elementi” che arricchiscono un oggetto, raccontando il significato intrinseco dello stesso. In altre parole, segnalano le azioni possibili attraverso quell’oggetto e in che modo eseguirle. Hanno il compito di innescare il Feedforward, ovvero anticipare esattamente cosa succederà.

Un classico esempio è il maniglione anti-panico di una porta, non serve conoscerlo e nemmeno accompagnarlo dalla scritta “spingere”. Esiste un solo modo corretto per usarlo.

Nell’interattività, per poter sfruttare il concetto di significanti, bisogna stare attenti a non commettere due gravi errori ?:

Per fare un esempio basti pensare al superfluo Clicca qui, che risulta una vera tautologia: è ovvio che un bottone necessiti di essere cliccato, raccontami cosa succede se lo faccio!

Un altro esempio simile di errore di significante è lo Scopri di più, inserito spesso in maniera troppo generica in testi, video o Call to action.

L’eccesso di icone: Nella progettazione visiva, l’utilizzo sovrabbondante di icone, o forzato dove non necessario, dà luogo a quello che si definisce inquinamento visivo. L’utente viene sovraccaricato di informazioni ed è quindi messo in difficoltà nella fruizione del prodotto.

I significanti che non significano: cioè l’utilizzo di testi (nelle call-to-action) che non raccontano chiaramente l’azione o la pagina che l’utente sta per visitare.

3. Mapping

Mapping e principio di causa effetto.

Quante volte hai sbagliato l’interruttore della luce o la manopola del piano cottura?

Ecco, significa che c’è stato un errore di mapping in fase progettuale.

Il principio della mappatura indica la relazione tra due cose, ad esempio tra l’azionamento di un tasto ed i suoi effetti. Un buon mapping tiene conto dei modelli culturali appresi o delle analogie spaziali.

A proposito Norman scrive:

Quando il mapping usa la corrispondenza spaziale fra la collocazione dei comandi e quella dei dispositivi comandati, è facile capire come usarli.

Nel web design il mapping è estremamente legato ai significanti ed è veicolato dalla posizione e dal comportamento degli elementi. L’esempio più classico è lo scroll verticale in una schermata, che indica dove ti trovi rispetto alla pagina. Mentre lo trascini verso il basso (o l’alto) la pagina si sposta alla stessa velocità, mantenendo la condizione di posizionamento nello spazio.

4. Vincoli

I vincoli sono indizi potenti, che limitano l’insieme delle azioni possibili. 

– D. Norman.

I limiti si dividono in fisici, culturali, semantici e logici, a seconda del contesto, ma definiscono, con la stessa forza, degli “obblighi” che guidano l’utente all’interno di un percorso.

In un’interfaccia i vincoli possono essere ovvi, come quelli fisici della dimensione dello schermo, o più raffinati, come quelli logici di un’icona disattivata.

Sono vincoli logici, di anticipazione, le immagini metà dentro lo schermo e metà fuori, che permettono di intuire uno slideshow e fare swipe. Oppure la visualizzazione degli step di un processo, ad esempio durante il checkout di un e-commerce, che permettono all’utente di capire immediatamente qual è il percorso da seguire per arrivare alla fine (e soprattutto quanto manca!).

5. Feedback

Il feedback (che possiamo tradurre come “risposta”) è un messaggio di ritorno, da parte di un oggetto, che ci comunica che la nostra azione è stata recepita.

Norman in merito ci fa notare che

il feedback dev’essere immediato, anche un ritardo di un decimo di secondo può essere sconcertante.

Ogni giorno riceviamo feedback da parte dei prodotti/servizi che utilizziamo: la luce sul tasto dell’ascensore appena chiamato, o del semaforo pedonale o ancora della macchina del caffè. Ci permettono di avere delle conferme, senza brancolare nel buio dell’incertezza.

Se, al contrario, questo tipo di feedback non si verificasse, continueremmo a cliccare spasmodicamente sulla cartella, in preda ad un senso di frustrazione (perché non si apre?!).

6. Modello concettuale

Un modello concettuale è la spiegazione, di solito molto semplificata, di come funziona una cosa.

– D. Norman.

Un buon esempio che ci aiuta a capire sono le icone dei file e delle cartelle sul computer.

Nel computer non ci sono davvero fogli o cartelle ma, il concetto di “raccoglitore” (recuperata dal modo in cui organizziamo le cose  nella realtà) ne facilita la comprensione e l’interazione.

L’interactive design, come abbiamo appena capito, fa ampio uso di questo principio.

In associazione ai significanti (Home = casa, Taglia = forbici, Imbuto = filtra), i modelli concettuali ci permettono di associare un’azione virtuale ad una che compiamo nel quotidiano, e quindi più concreta, per una comprensione immediata e semplice.

contenuti e immagini by Grafigata.it

Le fasi del realizzazione del prodotto web UX+UI+DEVELOPING

CICLO PROGETTUALE DI UN PRODOTTO DIGITAL.. 

Riassumiamo. Il ciclo di vita di un progetto digitale prevede quattro macro fasi principali: Ideazione, Design, Sviluppo e Rilascio.
Nella fattispecie:

Nella fase iniziale di UX design si progettano la struttura e la navigazione del sito. In questa fase si individuano gli elementi di design e si definiscono le interazioni di base dei componenti. Si possono produrre sketch e wireframe con carta e matita!

Nella la fase di vera e propria di UI design definisce la comunicazione, i componenti grafici e stilistici e e la vera e propria la user interface. Si lavora con i software di grafica (Photoshop, Illustrator, Sketch, ecc..) e si possono produrre dei layout grafici più completi e dei mockup

Nella fase finale di UI development, si sviluppano il sito e i suoi componenti come definiti nella fase di UI design attraverso HTML e CSS e JS (ecc…)

3b-visual+design+versus+ux+design

WIREFRAME

Il wireframe non è altro che una bozza del lavoro che verrà svolto, è un documento a bassa-fedeltà: non sarà navigabile (essendo un’immagine statica) e descriverà la giusta posizione degli elementi all’interno della vista (pagina web).

Può essere considerato come lo scheletro del front-end dell’applicazione web, dove viene assicurata la giusta posizione dei blocchi principali del contenuto, una corretta struttura delle informazioni e descritte le principali interazioni utente-interfaccia.

8-wireframe-iplotz

PROTOTIPO

Il prototipo rappresenta la creazione di quello che sarà verosimilmente il prodotto finale. A differenza del wireframe che può essere considerato un artefatto statico, il prototipo è interattivo (quindi almeno HTML + CSS) ma valgono in linea di massima le stesse regole legate alla realizzazione dei wireframe come la flessibilità (facilità nell’apportare modifiche) e la bassa fedeltà rispetto al prodotto finale.

9-Proto_io1

MOCKUP

Come il wireframe, il mockup è una rappresentazione statica del prodotto finale però con la differenza che viene realizzato con il più alto livello di dettaglio e fedeltà possibile. Presa la struttura definitiva del wireframe vengono inseriti colori, stili visuali (spesso scelti dal cliente), immagini, font e altri elementi visivi (anche quelli del brand del cliente).

7-01-Free-perspective-website-mockup-824x542

UI design: strumenti

6-invision-studio-opener

InVision, mockup & prototyping

Il contesto della creazione di interfacce utente per il web è molto ricco di prodotti, tools, frameworks e soprattutto è dipende molto dalle mode del momento, spesso dettate dai big del settore (Apple, Facebook, Spotify, ecc..).

I tools per creare wireframe e layout, prototipi, mockup, sono tantissimi, ecco una carrellata (considerando anche Photoshop!):

–> descrizione di ciascun software, alcuni sono free altri a pagamento! https://careerfoundry.com/en/blog/ux-design/free-wireframing-tools/

  1. Mockplus
  2. Adobe XD
  3. Balsamiq Wireframes
  4. Sketch
  5. Wireframe.cc
  6. Figma
  7. Pencil Project
  8. NinjaMock
  9. FluidUI
  10. Mockflow
  11. proto.io

Open source (nell’elenco anche tools non di design): https://uxplanet.org/open-design-freeware-tools-for-designers-f7bdde99f2e0

Pay: https://www.digitalartsonline.co.uk/features/interactive-design/16-best-ux-tools-for-designers/

Web prototyping free con https://origami.design/tutorials/getting-started/Getting-Started.html


Un esempio di prototipo da presentare al cliente prodotto con Proto.io:

https://share.proto.io/8ZER4T/

Proto.io

STRUMENTI: https://www.neting.it/blog/ui-design-2020-strumenti-gratuiti.html