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.

Lo User Experience designer lavora seguendo gli obiettivi: “cosa e come devo progettare affinché l’utente target raggiunga gli obiettivi prefissati?”.

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.

Lo UX design si  può sviluppare in più fasi:

1. osservazione campioni, raccolta dati, analisi dello scenario in base agli obiettivi, elaborazione personas
2. progettazione e interaction design, durante la quale si utilizzano i dati ottenuti nella fase precedente per dare vita all’interazione  tra prodotto e utente finale (es. user flow); architettura informazioni e tassonomia, wireframe, prototipi
3. test di usabilità dell’interfaccia
4. analisi dei dati e criticità
5.  una quinta fase di correzione e implementazione prototipo

-> 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 definisce le regole per un’implementazione delle funzioni e degli elementi che un sito o un’app dovrebbero avere per incontrare il gradimento del pubblico. La UX è una disciplina 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/

Con usabilità si intende la capacità di garantire che un prodotto interattivo sia facile da usare, utile, efficace e piacevole per l’utente.

L’usabilità è un componente fondamentale e integrante del UX design. 

Negli anni sono state date diverse definizioni al concetto di Usabilità. La definizione riportata dallo standard ISO 9241 Ergonomics of human-system interaction è:

“l’efficacia, l’efficienza e la soddisfazione con le quali determinati utenti raggiungono determinati obiettivi in determinati contesti”.

[…] il grado con cui un prodotto può essere usato da specifici utenti per eseguire specifici compiti con efficacia, efficienza e soddisfazione in uno specifico contesto d’uso

[Fonte: https://blankgrowth.agency/blog/digital-marketing/cosa-e-usabilita ]

Parlando di usabilità possiamo individuare sei obiettivi/metriche:

1. efficacia: capacità del sistema di fare quello per cui è stato progettato;
2. efficienza: il prodotto/servizio aiuta gli utenti a portare a termine le loro azioni; 
3. sicurezza il prodotto non deve danneggiare l’utente
4. utilità: il prodotto o servizio che progettiamo deve essere utile all’utente, deve aiutarlo e permettergli di portare a termine i compiti che esso vuole svolgere, altrimenti il senso stesso del sistema viene meno;
5. facilità di apprendimento: il sistema deve essere caratterizzato da funzioni facili da imparare;
6. facilità di memorizzazione delle funzioni da svolgere con il prodotto o servizio. 

Le 10 euristiche di Nielsen

Qui sono spiegate e illustrate bene: https://www.neurowebdesign.it/it/alla-scoperta-delle-10-euristiche-di-nielsen/

e anche qui: https://www.serenaripoli.com/articles/le-10-euristiche-di-nielsen-per-la-ux

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

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.

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/

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

RIASSUNTO: IL 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…)