Indice articolo

La UX (User Experience) è presente in qualsiasi ambito della nostra vita, sta alla base della progettazione di qualsiasi progetto.

Che cosa è la UX?

 Per esperienza d’uso si intende ciò che una persona prova quando utilizza un prodotto, un sistema o un servizio (Rif. Wikipedia). Include anche le percezioni personali su aspetti quali l’utilità, la semplicità d’utilizzo e l’efficienza del sistema. In altre parole equivale al grado di aderenza soggettiva tra aspettative e soddisfazione nell’interazione con il sistema, sia esso fisico (es: una biglietteria automatica in stazione) piuttosto che digitale (es: lo shopping online/applicazione mobile).

 Rendere semplice e chiaro tutto ciò che è complesso: il prodotto o servizio deve suggerire la modalità di utilizzo per accorciare la curva dell’apprendimento dell’utente.

lo UX Designer mette sempre la persona (utente) al centro, cercando di comprendere la sua mente (come pensa, a cosa presta attenzione, come sceglie) attraverso un processo continuo fatto di analisi, progettazione e valutazione.

UX ≠ UI

L’UI è un sottoinsieme dell’UX design, è ciò che si frappone tra una macchina e un utente, consentendo l’interazione tra i due. Riguarda la progettazione della componenti più estetiche (più “superficiali”) dell’interfaccia l’utilizzo dei colori e dei caratteri tipografici, nel rispetto del tono che l’interfaccia deve possedere.

UX ≠ Usabilità

L’usabilità, ossia il grado di efficacia, efficienza e soddisfazione con cui l’uomo interagisce con la macchina, è solo una delle componenti della user experience: un sito può essere usabile senza garantire necessariamente un’esperienza d’uso piacevole.

**Nella UX convergono infatti molte discipline tra cui: usability engineering, communication design, branding, marketing….

Per ulteriori approfondimenti sui componenti su cui si basa la UXD vi invito ad osservare il diagramma “The Elements of User Experience“di Jesse James Garrett

Il modello messo a punto da Garrett si sviluppa secondo due piani che procedono in parallelo: il Web inteso come interfaccia software e il Web inteso come sistema ipertestuale. Nelle due fasi possiamo stabilire, rispetto ai due piani, gli obiettivi da raggiungere e la struttura del prodotto che vengono, poi, raffnati nello specifico.

http://www.jjg.net/elements/translations/elements_it.pdf

 *Dal punto di vista dell’esperienza utente la grafica è solo la parte finale del design, di cui bisogna occuparsi solo dopo aver progettato lo scheletro e la struttura logica dello strumento.Progettazione

Ricerca e Analisi

Ogni progettazione  inizia con una fase di ricerca e analisi, in cui vengono indagati sia i bisogni degli utenti sia i requisiti del prodotto (nel caso della web usability di un sito web o un’app).

Tutto comincia dall’esplorazione di idee. Idee che vengono “generate”  attraverso la creazione di moodboard(è una tavola che raccoglie suggestioni per restituire l’atmosfera e lo stile di un progetto, è una raccolta di immagini, che rappresentano le fonti di ispirazione che un designer ha seguito nel progettare qualcosa. E’ la rappresentazione visiva  dell’identità del progetto. )

Strumenti e Step della progettazione
  •   Step 1 – Sketch cartacei: le idee iniziano a prendere forma da  “scarabocchi” fatti con carta e penna: sono immediati da realizzare, veloci da modificare e facili comunicare, uno strumento potente (a basso impatto tecnologico!)
  • Step 2 – Wireframe: una volta raccolti i primi feedback sugli sketch si passa alla creazione di modelli più concreti, attraverso il disegno dei wireframe( una illustrazione bidimensionale di interfaccia che si concentra in particolare sulla ripartizione dello spazio e la prioritizzazione dei contenuti, sulle funzionalità disponibili e i comportamenti previsti), realizzati con appositi software di design. Essi rappresentano lo scheletro e l’impianto logico del prodotto. Nel wireframe la struttura e il contenuto, la gerarchia, l’interfaccia e i comportamenti del prodotto iniziano a prendere forma. I disegni sono arricchiti da annotazioni che ne descrivono i dettagli, le funzionalità e i cambiamenti senza intervenire, per il momento, nel campo della veste grafica.

  • Step 3 – Mockup Grafici : una volta “sigillata” la struttura della pagine dei wireframe è possibile procedere alla parte visual e “artistica” della progettazione. Il mockup rappresenta infatti la proposta grafica, non ancora definitiva ma contenente il look & feel del prodotto.

Esempio di mockup

Valutazione

La valutazione è la fase più importante, complementare e pervasiva in ogni fase della progettazione della UX. La valutazione infatti avviene durante tutti gli stadi proprio per avvicinarsi alla migliore soluzione e non perdere mai di vista l’obiettivo principale: l’utente.

Cos’è il buon design?

Dieter Rams, l’industrial designer della Braun, padre del “Less, but better“(la sua filosofia minimalista ha avuto un impatto incredibile sulla comunicazione di Steve Jobs e di Apple.), nel 1970 quando già aveva creato prodotti leggendari per Braun – alcuni dei quali sono oggi esposti al MoMa di New York – scrisse una serie di linee guida indirizzate ai designer.

Questi 10 principi hanno gettato le basi del design di prodotto, ma valgono, oggi più che mai, anche per la buona progettazione di interfacce web e mobile.

1. INNOVAZIONE

 IL BUON DESIGN È INNOVATIVO (GOOD DESIGN IS INNOVATIVE). Le novità tecnologiche offrono continuamente opportunità di innovazione, ma attenzione, il design innovativo non deve mai essere fine a se stesso.

2. UTILITÀ

IL BUON DESIGN RENDE UN PRODOTTO UTILE (GOOD DESIGN MAKES A PRODUCT USEFUL). Quando un prodotto viene acquistato, viene utilizzato. Un buon design oltre ad essere funzionale deve valorizzare l’estetica e la struttura del prodotto.

3.ESTETICA

IL BUON DESIGN È ESTETICO (GOOD DESIGN IS AESTHETIC). I prodotti che utilizziamo influiscono sul nostro benessere, per questo un prodotto dev’essere oltre che utile, bello.

4.SINTESI

IL BUON DESIGN AIUTA A COMPRENDERE UN PRODOTTO (GOOD DESIGN HELP US TO UNDERSTAND A PRODUCT). Il buon design non ha bisogno di istruzioni, è auto-esplicativo.

5.TRASPARENZA

IL BUON DESIGN È DISCRETO (GOOD DESIGN IS UNOBTRUSIVE). Progettare prodotti sobri ed essenziali, lasciando spazio all’auto-espressione dell’individuo.

6. ONESTÀ

IL BUON DESIGN È ONESTO (GOOD DESIGN IS HONEST). Non far apparire un prodotto più bello o innovativo di quanto non sia realmente, non manipolare il consumatore con promesse che non potete mantenere.

7. DURATA

IL BUON DESIGN SUPERA LE MODE E DURA NEL TEMPO (GOOD DESIGN IS DURABLE BEYOND TRENDS). Un buon design non appare mai antiquato, dura per molti anni e supera le mode.

8. PROFONDITÀ

IL BUON DESIGN LO È FINO ALL’ULTIMO DETTAGLIO (GOOD DESIGN IS CONSEQUENT TO THE LAST DETAIL). Tutte le fasi del processo di design devono avere la stessa importanza, ciò significa rispetto nei confronti dei consumatori.

9. ECOLOGIA

IL BUON DESIGN È ATTENTO ALL’AMBIENTE (GOOD DESIGN IS CONCERNED WITH ENVIRONMENT). Il ciclo di vita del prodotto riduce al minimo il suo impatto sull’ambiente.

10. ESSENZA

IL BUON DESIGN È “MENO DESIGN” POSSIBILE (GOOD DESIGN IS AS LITTLE AS POSSIBLE)

Risorse Utili

Strumenti – software di design per creare WIREFRAME:

https://wireframe.cc

https://app.moqups.com/edit/page/ad64222d5

https://balsamiq.com/index.html

https://cacoo.com/templates/wireframe-software

http://pencil.evolus.vn

Ricerca 

http://www.lovelyui.com

http://inspired-ui.com

https://www.uplabs.com/material

 http://doctorbrand.it/blog/