Ux e Ui, responsive, mobile friendly, facciamo chiarezza

intervista a Sergio Baselice

Ciao Sergio, chi sei e di cosa ti occupi?

Questa è una bella domanda, in un mondo dove “devi” essere specializzato non saprei come definirmi se non semplicemente Designer, un designer che ama imparare cose.

Nello specifico nasco come grafico con la passione per la stampa ed il fetish per le carte particolari tipo le perlate della fedrigoni o la twist e la softy di favini, ho fatto stampa digitale grande formato e sono stato selezionato da RolandDG (quella dei plotter) come Roland Master nel 2013-14. Mentre oggi mi occupo molto di Design di interfacce digitali.

Quali sono le differenze tra UX e UI?

Ti rispondo con una frase tratta dall’hagakure “Esistere là dove non vi è nulla è il significato della frase “la forma è vuoto”. E il fatto che ogni cosa trae sostentamento dal nulla è il significato della frase “il vuoto è forma” sarebbe errato pensare che si tratti di due concetti distinti”

Hai presente il classico esempio della bottiglia di ketchup della Heinz?
Spesso mostrano le due bottiglie e dicono che la vecchia in vetro corrisponde alla UI quindi il solo aspetto, la forma della bottiglia, senza la parte di “usabilità” e la bottiglia nuova, la upside bottle, in plastica con la valvola di dosaggio corrisponde alla UX ecco secondo me questo è l’esempio sbagliato semplicemente perché le bottiglie a vederle sono tutte e due solo e semplicemente UI, mentre l’esperienza la UX avviene con l’uso.

Oggi tutti quanti sappiamo come funziona una topdown bottle, e proviamo anche una certa soddisfazione a farlo, ma riesci a immaginare all’inizio che frustrazione dovesse essere imparare a usare la nuova bottiglia dopo che per anni hai usato e ti sei allenato ad utilizzare bene quella in vetro?

UX e UI sono due aspetti di un tutto che deve essere armonico e far coniugare semplicità d’uso e bellezza in un ecosistema il più possibile integrato, e con la giusta tecnologia (anche perché di bottiglie in plastica che si schiacciavano già ne esistevano, ma la tecnologia della valvola ha fatto davvero la differenza nell’esperienza utente)

Cosa significano invece responsive e cosa mobile friendly?

Tecnicamente parliamo di “responsive” quando la nostra interfaccia è reattiva e si adatta alle diverse dimensioni di schermi.

Mobile friendly invece significa che è amico degli smartphone, e lo traduciamo con il sito lo vedi bene anche da mobile, inteso come la struttura del sito si adatta al meglio per la visione da schermi decisamente piccoli (rispetto ai pc che usiamo giornalmente)

Come possiamo fare per rendere il nostro sito responsive?

Lo fate fare ad uno bravo. No scherzo, per avere il sito responsive bisogna studiare un minimo le strategie di codice, se poi riuscite a collaborare con un programmatore risparmiate tante lacrime.

Imparare a gestire gli elementi con unità relative e non assolute è la via giusta per spendere meno notti possibile su cose che potrebbero farvi perdere la sanità mentale, lavorare in percentuale invece che in pixel o anche definire le grandezze del font-size in Em permette di sfruttare la flessibilità dei browser e avere un sito più reattivo e mobile friendly

Come si comportano le foto quando viene attivata la modalità responsive

Zaan zan zaaaaaann ecco questa me la dovevi fare prima, ce li hai 2-3 giorni?

Perché parlando di immagini e web c’è un problema, un grosso problema anzi anche più di uno.
Come si comportano le foto?
Le foto non si comportano, le mettiamo dentro dei contenitori e diciamo a questi contenitori di vedersi grandi e piccoli al bisogno, fin qui siamo d’accordo giusto? (tralasciamo volutamente che caricando in wordpress il CMS mi crea le versioni a differenti dimensioni in termini di pixel che richiama a seconda delle esigenze)

Ecco le immagini hanno però una grandezza definita, sono i pixel di cui si compongono, più ne abbiamo meglio è in linea di massima. Il problema è che dobbiamo trovare la giusta misura fra un’immagine leggera che si carichi in 0.3s e la qualità per non avere immagini sgranate su monitor molto grandi.
E questo è un problema tecnico, si fa una scelta e basta non c’è molto da parlarne.

Altra cosa è la nitidezza delle foto questo è un problema a cui ancora non ho trovato risposta. Quando andiamo a preparare una foto per la stampa, sappiamo a che dimensione verrà stampata e da che distanza sarà vista. Quindi prepariamo quella specifica immagine per quella finalità e andiamo a calibrare, migliorare la nitidezza, magari con una maschera di contrasto.
Questo per il web non è possibile farlo (almeno in produzioni piccole a basso budget), perché se noi lavoriamo per far vedere bene e bella nitida la nostra foto da 2000 px per lato, poi quando viene ridimensionata quella “croccantezza” della foto si andrà inevitabilmente a perdere con il rischio anche di andare a creare degli artefatti. Il sogno sarebbe avere un algoritmo di codifica delle foto, già integrato in photoshop, che crei delle immagini “responsive” come può essere un file SVG

Sergio Baselice

Art Director | Visual Designer | Digital Innovator | Adobe Addicted.

Dove puoi trovare Sergio

SILVIA PELUCCHI

Graphic designer | Visual designer | Packaging | Siti web | Materiali marketing |
Visual identity | Supporto aziende e PMI progettando linee esclusive di identità aziendale e per materiali di comunicazione

Seguimi sui social