Lezione 8b – UX/UI Design

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

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.

La User Experience..

“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, magari non solo web.

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 e Javascript.

Se una pagina è efficientissima 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 lo UI Designer?

Lo UI Designer si occupa di tutta la parte visual e interattiva di un prodotto web, app e tv digitale.

Guida l’utente con chiarezza e precisione nel trovare ciò che cerca, esclusivamente attraverso l’interfaccia. La sua progettazione è il ponte che collega l’essere umano con il prodotto.

L’esperto di User Interface: l’infografica

15-Infografica_UI_designer-TAG-Innovation_school

Cosa fa lo UI Designer?

L’esperto di User Interface, con competenze di Strategy & Content, Wireframe & Prototyping, Visual e Interaction Design, così come la conoscenza approfondita della Suite di Adobe e di tool di analisi, è un professionista in grado di:

• Impostare una semplice progettazione UX e svolgere User Research
• Progettare Usabilità in autonomia
• Utilizzare elementi di progettazione esclusivi del mondo digitale (atomic design) e rivisitati per il digitale (style guide)

• Applicare tool specifici per l’ottimizzazione del flusso di progettazione per il digitale • Impiegare processi e tecniche di progettazione innovative (design sprint)
• Conoscere gli standard e pattern specifici di ogni supporto digitale (web, mobile, smartwatch, tv)
• Applicare la teoria e i relativi tools di motion interface
• Produrre un prototipo avanzato
• Definire il giusto tono di voce e microcopy per una buona esperienza utente
• Dialogare al meglio con designer e developer
• Conoscere un approccio di design legato al business

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

Il ciclo di vita di un progetto digitale prevede quattro macro fasi principali: Ideazione, Design, Sviluppo e Rilascio. Le prime due fasi sono le più critiche in quanto prevedono una stretta collaborazione tra diversi team, figure professionali e spesso direttamente con il cliente.
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: gli 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 del 2018 (considerando anche Photoshop!):

Free & Pay 2018: https://blog.prototypr.io/10-best-prototyping-tools-for-ui-ux-designers-in-2018-6591ea1e2e71 e http://www.eulogik.com/2017/09/three-of-the-best-prototype-designing-tools-in-2017/ e https://www.creativebloq.com/web-design/top-10-prototyping-tools-2016-21619216

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

UI design: i trends (2018)

L’ormai sempre più crescente diffusione degli smartphones e la conseguente navigazione su browser mobile ha favorito il boom del Flat design: colori piatti, forme geometriche, icone, tipografia minimalista, ombre soppiantate da forme che simulano ombre allungate per alludere ad una terza dimensione, ma in maniera completamente lontana dal reale.

Il tutto è reso possibile da HTML5, CSS3 e JS, che permettono una riproduzione via codice di qualunque elemento grafico, che un tempo sarebbe per forza stato un’immagine caricata come risorsa esterna del browser.

5-flat-material-scheu

La grafica flat è inoltre perfetta per essere rappresentato e scalata sui dispositivi mobili.  Il material design riprende il flat design inserendo qualche elemento scheumorfico come le ombre per indicare i livelli di profondità

16-cover-1_949bb1d7-6f52-4d0e-99d1-fd8f813091fe

Responsive web design

Il Responsive web design è l’insieme di tecniche per la progettazione e lo sviluppo di siti web su dispositivi , capaci quindi di adattarsi graficamente alle risoluzioni di schermi diversi, in particolare mobili (desktop, tablet, smartphone…).

L’approccio Mobile first (70% circa della navigazione internet) mette in risalto i contenuti, la leggibilità dei testi per semplificare drasticamente navigazione, l’organizzazione dei contenuti e gli eventuali flussi di acquisto.

L’impaginazione pixel perfect (che definisce posizione e dimensione di ogni elemento fino al singolo pixel) non è più possibile, o almeno non è più così utile poiché l’importante è la definizione del layout e del suo comportamento per le diverse risoluzioni identificate da “breakpoints” (sui breakpoints: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a)

breakpoints sono le risoluzioni di riferimento per cui l’interfaccia verrà progettata e sviluppata. Nelle tantissime risoluzioni tra un breakpoint e l’altro il sito dovrà scalare ed adattarsi in modo armonico allo schermo, sfruttando le percentuali e filtrando i contenuti in base alla loro reale importanza.

17-breakpoints1

Questo concetto rivoluziona il mondo della progettazione grafica: un designer non saprà mai esattamente come sarà vista la sua interfaccia grafica in termini di dimensioni, colori, ecc…

La sintassi nel foglio di stile appare molto semplice, supponiamo di voler creare delle regole che valgano solo per gli Smartphone, in questo caso viene utilizzata una sintassi simile:

1
2
3
4
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
/* Stile CSS per telefonini */
}

17-breakpoint

Trends and inspirations:

https://tubikstudio.com/mobile-ui-design-15-basic-types-of-screens/

Guida al design delle APP per mobile: https://www.uxpin.com/studio/blog/guide-mobile-app-design-best-practices-2018-beyond/


UI design patterns

Cosa sono gli UI design patterns? Sono degli schemi di elementi di UI, anche detti UI o UX patterns.

A fronte di alcune esigenze funzionali, di navigazione o di presentazione, esistono componenti già progettati da qualcuno talmente efficaci da essersi diffusi ed usati in molte applicazioni fino quasi a diventare uno standard implicito, elementi di uso comune.

Gli UI patterns sono l’applicazione di soluzioni trovate a problemi pratici, normalmente legati all’usabilità e/o a vincoli di vario tipo.

Questi componenti includono un comportamento legato alla loro interazione con l’utente. È necessario individuare quali UI patterns sono necessari e funzionano nel nostro sito, quindi il contesto è fondamentale poiché uno UI pattern diffusissimo può non servire o non funzionare nel nostro contesto. Inoltre, l’interfaccia mette insieme più componenti che quindi devono funzionare anche a livello di sistema e non solo singolarmente.

Esempi di UI patterns possono essere:

        • hambuger menu per la navigazione
        • card layout
        • navigazione a tab
        • accordion
        • long scroll
        • scroll to
        • immagini “hero”
        • social sharing, ecc…

L’idea di pattern richiama il concetto di modularità che ben si sposa con l’approccio di sviluppo a componenti o widget web.

Un insieme di UI patterns dallo stesso aspetto (look & feel) si può definire come una UI library o UI pattern library che è appunto l’implementazione di questi componenti, disponibili in una pagina web di documentazione.

Gli UI patterns e la loro implementazione stabiliscono il legame diretto tra mondo UX e mondo sviluppo: data una funzionalità o un contenuto richiesto nel sito, lo UI pattern progettato dal designer indica allo sviluppatore come un elemento deve apparire visivamente e funzionare a livello di interazione.

Web Design e Grid System

Cosa sono e perché avere le griglie?

Una griglia è una rete di linee che si intersecano: è come un’armatura che il designer usa per creare forme, sistemare immagini, organizzare il testo. Così come scrivendo su un foglio le righe guidano la mano e l’occhio, allo stesso modo il designer si serve di linee orizzontali e verticali, colonne e margini per allineare gli oggetti gli uni agli altri.

La griglia è una struttura invisibile che serve non solo ad avere un processo efficiente di costruzione di un layout, ma anche a dare consistenza al design: è la griglia che permette a tutte le pagine, che siano su web o su carta, di avere una struttura uniforme. Attraverso la griglia organizziamo uno spazio vuoto e passivo, definendo il ritmo di tutto il progetto di design.

La griglia serve a creare:

      • ordine e comprensibilità; Le griglie organizzano e ordinano lo spazio e a fanno in modo che gli elementi e i testi siano allineati.
      • consistenza e armonia. Un design consistente è ciò che permette di navigare tra le pagine di un sito senza sentirsi disorientati!
        Continua la lettura e approfondisci su medium:

https://medium.com/designers-italia/le-griglie-alla-scoperta-dello-ui-kit-di-designers-italia-partendo-dalle-basi-d7943cbdccc9

Possiamo reperire online numerose “grids” sia per i programmi di design (anche PSD per photoshop) che in CSS.

griglie

Alcuni riferimenti online:

https://960.gs/

https://blog.prototypr.io/9-best-grid-system-for-web-mobile-ui-265c68d30c09

PSD: https://1440px.com/https://1200px.com/