Progettazione GUI ed elementi di design UI/UX

Quello che affrontiamo in questo articolo è un argomento molto complesso. Gli stessi libri di testo delle scuole superiori non riescono ad essere esaustivi ma si limitano ad un semplice accenno ad un argomento che invece sta diventando decisamente molto importante la progettazione di interfacce grafiche. Le università tecniche e scientifiche, a meno di specifici rami, non affrontano nemmeno in modo completo l’argomento, se non relegato ad un esame/corso. Eppure se guardiamo gli annunci di lavoro, una delle figure più richieste professionalmente è lo sviluppatore front-end e, tra quelle più pagate, il progettista UI/UX. Proviamo in queste righe a fare un discorso il più organico possibile.

Definizione di UI/UX

La User Interface Design e la User Experience Design sono argomenti molto complessi da trattare e non coinvolgono, contrariamente a quanto si possa pensare, soltanto l’informatica, anzi. Psicologia,

La differenza tra le due discipline UX e UI può riassumersi così: la prima riguarda tutto ciò che permette all’utente di avere una buona esperienza di utilizzo di software, che sia online, su un software per desktop o mobile, il bancomat o qualsiasi altro elemento con una interfaccia grafico/visuale.

La seconda disciplina è per certi versi una sotto-porzione della user experience. Si occupa del modo in cui l’interfaccia si presenta a chi la utilizza.

Se parliamo però di UI/UX, non possiamo prescindere dal trascurare altri elementi differenti che vanno ad influire, come la SEO, il copywriting digitale e, in generale, l’approccio marketing ad un brand e il suo software collegato.

Design UI

Lo UI designer normalmente si concentra principalmente sulla realizzazione dell’interfaccia e dei suoi elementi a livello grafico. Per capirci: “usiamo Java Swing piuttosto che un’altra interfaccia e scegliamo questo widget specifico piuttosto che un altro”.

Fase in cui definiremo lo stile di comunicazione, realizzeremo graficamente i componenti e creiamo la User interface scegliendo anche le tecnologie del caso (Es. Java Swing vs JavaFx). 

Si tratta di creare il codice e i manufatti che implementa il progetto UX/UI. Lo sviluppatore software, rispetto al designer UI ha una skill completamente diversa: semplicemente in molti casi ignora il mondo grafico e le sue dinamiche. Risultato? Il lavoro dei designer viene sottovalutato, o almeno lo è stato per lungo tempo da una parte di pionieri imprenditori informatici. Lo sviluppatore UI spesso è un designer passato dalla parte del codice o uno sviluppatore che si avvicina al mondo delle interfacce grafiche, magari perché incuriosito o semplicemente costretto per necessità (ufficio piccolo, taglio costi dell’azienda di software). Risultato? Uno “schifo”, in molti casi con molti errori imperdonabili! Ovviamente è vero anche il viceversa: chi progetta e realizza interfacce a regola d’arte, non necessariamente ha le skill per il back-end dietro al software.

Design UX

In UX si effettua molta ricerca sperimentale, user test, progettazione delle architetture delle informazioni e usabilità.

 La UX include il processo di progettazione dell’interfaccia attraverso bozze o scheletri dell’interfaccia detti wireframes e prototipi (bozze interattive che simulano l’interazione dell’utente). 

In fase di definizione di wireframes e prototipi, l’interfaccia non è definita a livello grafico ma piuttosto sono definiti il layout (la struttura), la navigazione, i contenuti principali e gli hotspot (elementi interattivi).  Per capirci: “qui ci mettiamo un bottone, qui una etichetta, qui una immagine…” e il flusso con cui questi interagiscono tra di loro e l’utente.

Si può configurare in due modi:

• progettazione orientata al Sistema: quali funzioni fornisce il software o il sito web?
• progettazione orientata all’Utente:  quali sono i casi d’uso dell’utente?

La figura del progettista UX è frutto di anni di lotta all’approssimazione informatica. A lungo non solo la grafica, ma anche la sui fruizione è stata ad appannaggio di esperti che “se la cantavano e suonavano” in fatto di realizzazione ed uso dei software. La fruizione di massa soprattutto ottenuta dal mondo del web ha sovvertito le cose, facendo imporre la figura del progettista UX, oggi molto ricercata e ben pagata.

Riportiamo una carrellata di “mostri” frutto di questa approssimazione citata nella progettazione UI/UX in passato:

Strumenti per design UI/UX

La creatività e i software di image editing sono strumenti fondamentali in questo ambito. Difficile fare una carrellata di questi strumenti che vanno purtroppo secondo le mode. Probabilmente mentre scriviamo tra i software commerciali hanno ampio respiro la costellazione di strumenti Adobe, come Photoshop, Illustrator ecc e Figma, di recente acquistato sempre da Adobe, come wireframe e modellatore di provini ui/ux. Alternativa valida a Figma è Sketch, utilizzato anche per i progetti della Pubblica Amministrazione. In genere il progettista UX non ha bisogno di molti fronzoli e si preferiscono modellatori wireframe minimali, alcuni reperibili anche online/cloud. Interessante Pencil per il wireframe puro per tutti gli os e gratuito al contrari o dei molti software online che prevedono una versione free con limitazioni sugli oggetti usabili o numero di progetti.

Vi rimando a questo ottimo articolo per conoscere le alternative non commerciali per tutti i sistemi operativi. Le grafiche di questo articolo, aggiungiamo, sono state realizzate con Lunacy e Akira per Linux.

Fisiologia umana

Il cervello

Non serve scomodare libri di medicina per capire che il motore delle nostre attività sia il cervello. E’ un organo complesso e ancora con tante sorprese a livello medico. Durante la giornata il cervello consuma il 25% del nostro fabbisogno energetico pur avendo il 2% della massa corporea totale. Nei bambini ed adolescenti, il consumo è doppio rispetto ad un adulto e può arrivare al 66% del consumo giornaliero per i bimbi che sarebbero in fase di crescita e formazione del cervello stesso. Va da se che occorre un bel quantitativo di “combustibile” per tenerlo attivo.

L’energia utilizzata dal cervello è sufficiente per accendere una lampadina da 25 watt. Più impulsi elettrici sono generati in un giorno da un singolo cervello umano che dai telefoni in tutto il mondo. Sono 70.000 il numero di pensieri che si stima il cervello umano produce in un giorno medio. Dopo 30 anni, il cervello si riduce di un quarto di punto percentuale (0,25%) in massa ogni anno: vale la pena utilizzarlo bene! Un cervello media pesa circa 1,3/1,4 kg mentre il cervello di Albert Einstein pesava 1,2kg: non è la dimensione della testa che contano quindi, ma probabilmente secondo fonti mediche, il quantitativo di sinapsi costruite in eta adolescenziale e preadolescenziale. Ancora una volta: è fondamentale stimolare il nostro cervello nel modo corretto!

Cosa c’entra tutto questo con il design UI/UX? In realtà è fondamentale addentrarci nei meandri del cervello per capire come si comporta un utente quando utilizza per la prima volta o torna ad utilizzare un certo sito web o software.

In particolare del nostro cervello ci interessa la curva dell’oblio, ovvero un grafico che ci indica come la memoria dei dati appresi in una determinata sessione diminuisce con il passare delle ore e dei giorni. Nel momento in cui impariamo ad usare qualcosa o lo ripassiamo, il nostro cervello lo imprime ma se non ci fosse ulteriore ripasso, nel giro di 1 mese quello appreso può letteralmente sparire e ridursi ad un 20% del totale iniziale. Il grafico è impietoso: la situazione è già critica dopo una normale giornata di lavoro o giorno intero che siamo intorno al 40% della memoria iniziale.

Questo è un motivo valido per affermare che le lezioni a scuola, come la realizzazione di un software o sito web, deve essere semplice, in modo che all’utente non sia richiesto un apprendimento complesso che lo sarebbe ad ogni nuovo riutilizzo. Le curve dell’oblio ci aiutano a chiarirlo. L’utente tende a scordare come si usa un software od un sito. Ecco perché bisogna semplificarlo il più possibile e usare tecnologie e progettazione UI/UX che rispetti determinati standard in modo da non confondere l’utente e permettergli di tornare sul sito, sulle app e non trovarsi ogni volta spiazzato “da capo”.

Un esempio di sito che non rispetta questi standard? Paradossalmente quello delle www.poste.it che cambia interfaccia grafica con periodicità davvero elevata spiazzando anche l’utente più esperto tra le tante funzionalità che mette a disposizione. Meglio progettare bene all’inizio e cambiare solo pochi contenuti e dettagli!!!

Cos’altro accade al nostro di cervello di curioso ed inaspettato? Parliamo di percezione, o meglio, di come il nostro cervello reagisca a determinati stimoli visivi. Guardiamo i video sotto riportati.

La percezione selettiva è una distorsione cognitiva molto comune. Influenza il meccanismo di percezione facendoci vedere, ascoltare o concentrare su stimoli basati sulle nostre aspettative, tralasciando il resto delle informazioni. Noi vediamo di più quello su cui focalizziamo l’attenzione o quello su cui abbiamo già esperienza, uno storico pregresso. Ci interessa l’ultimo modello di scarpe Saucony, ci sembrerà di vedere decine di persone solo con quelle scarpe. Mio padre vuole comprare l’ultimo modello di BMW? Ci sembrerà di vedere solo quell in strada ma in realtà la statistica media dirà altri numeri.

L’occhio

Il fenomeno della visione ha inizio quando la luce, a contatto con la retina, viene trasformata in impulso elettrico, quest’ultimo viaggia lungo le vie ottiche fino ad arrivare alla corteccia occipitale (nel cervello, quindi) dove viene convertito in punti immagine. In particolare, il tutto si concentra nella fovea, un’area di circa 1,5 mm di diametro, densa di fotorecettori, posta al centro della retina. Nella foto, guarda in basso.

La fovea rappresenta 1% della retina, connesso direttamente al nervo ottico a cui passa passa il 50% della luce o, se preferite, il 50% delle info dell’intera retina. Una quantità di informazioni enormi per una porzione così piccola. Ma sta proprio qui il unto: le informazioni del mondo reale che vengono inviate al cervello sono tutto altro che corrispondenti al reale. Se veramente il nostro cervello elaborasse quello che viene dalla retina avremmo un modo piuttosto bizzarro, disomogeneo, più definito nella zona della fovea, più distorto altrove se non cieco in alcuni punti. Il cervello ha imparato a “correggere” o “scartare” gli errori, sostituire e rimaneggiare quello che occorre. Un vantaggio e uno svantaggio per diversi aspetti. Persino la visione 3D non è in realtà reale, ma un ulteriore rimaneggiamento/difetto di come la luce impressioni la retina che altrimenti avrebbe solo capacità 2D.

Persino il movimento non esiste: sono fotogrammi in cui il nostro occhio effettua una “fissazione”, una fotografia di quello che percepisce e lo manda al cervello. Il movimento è scandito dal fatto che questi fotogrammi siano veloci a sufficienza da ingannare il nostro cervello che effettua ripetuti scatti. Circa ogni 150/200ms c’è uno scatto che dura circa 300ms in cui il nostro cervello legge quello che ha ricevuto. Se gli oggetti si muovessero ad una velocità superiore, il cervello non percepirebbe movimento, ma solo inizio e fine del movimento.

Nella retina esistono due tipi di fotorecettori: i coni e i bastoncelli. (vedi foto)

I coni sono localizzati nella parte centrale della retina (fovea) e sono deputati alla percezione dei colori e alla visione nitida. Esistono tre tipi di coni, rispettivamente per il rosso, il verde e il blu; mediamente sono 5-6,4 milioni. Interessante è la quantità di coni in base al colore che recepiscono:

• Coni rossi, il 64% dei coni totali 
• Coni verdi, il 32% dei coni totali
• Coni blu, tra il 2% e il 7% dei coni totali

Che considerazione possiamo fare in base a queste quantità? Il rosso è un colore che vine percepito con più insistenza perché in percentuale maggiore sono i coni preposti alla ricezione. Il rosso è il colore della concentrazione, della dinamicità, un colore spesso aggressivo e di impatto forte dal punto di vita visivo. Non è un caso se è usato molto a scopo professionale per un marketing d’assalto o se nel campo della seduzione, il rosso è il colore che “risveglia i sensi”. Al contrario il blu, è scarsamente recepito, quindi non sovra-stimola il cervello ed è inteso come colore più rilassante, ottimo ad esempio per pitturare le pareti di una camera da letto dove c’è bisogno di rilassamento visivo.

I bastoncelli, invece, si concentrano nella zona periferica della retina, sono assai più numerosi (mediamente 120 milioni) e intervengono nella visione notturna/movimento. Questi ultimi, infatti, sono più sensibili: basta un solo fotone per attivarli, mentre per attivare i coni ce ne vogliono almeno 100. 

Le differenze tra numerosità di questi elementi è anche specifica tra uomo e donna. Mentre gli uomini sarebbero in grado di percepire meglio cambiamenti di luminosità nello spazio, e quindi oggetti in movimento. Pare che, in queste differenze di visione abbia un ruolo importante anche il testosterone.

La donna ha una visione cosiddetta “periferica”, maggiore rispetto a quella dell’uomo, potendo coprire un arco di 45° più ampio da ogni lato, destra, sinistra, alto basso; quindi non propriamente “gli occhi dietro la testa”, ma quasi. La donna dunque riesce a scrutare senza nemmeno dover spostare la testa o “a trovare con semplicità i calzini”. L’uomo invece è dotato di una visione “a tunnel” ovvero capace di una ottima visione a lungo raggio per cacciare una preda in movimento ma sarà un disastro con i calzini!

Lo spettro luminoso e l’occhio

Ogni colore ha una particolare frequenza dello spettro luminoso (vedi foto da cit. fonte). La luce visibile è solo una porzione delle frequenze in giro per lo spazio e il nostro pianeta. Le frequenze più alte sono quelle verso la luce ultravioletta rinomatamente dannosa per i nostri occhi, motivo per cui occorre proteggersi con occhiali da sole dotati di questi filtri anti UV. Lo spettro visivo che si affaccia a quelle frequenze corrisponde alla visione dei colori viola e blu. La luce ultravioletta, nel lato sinistro dello spettro, è quasi interamente assorbita dalla parte anteriore dell’occhio e molto meno del 5% riesce a raggiungere la retina. La componente blu della luce tra 380 e 500 nm è anche nota come luce visibile ad alta energia (HEV). In particolare le lunghezze d’onda blu-violette comprese tra 380 e 440 nm sono considerate potenzialmente dannose e sono ritenute una delle possibili cause della fotoretinite.

La luce ha molti effetti benefici anche: i raggi UV, ad esempio, stimolano la produzione di alcune vitamine; la luce intensa, e in particolare la luce blu, influisce sul nostro equilibrio ormonale. Gli ormoni nel corpo regolano l’umore e il ciclo sonno-veglia. La porzione di luce blu di giorno è relativamente alta, mentre è significativamente ridotta la sera.

In condizioni di forte illuminazione esterna come con cielo terso, il corpo produce serotonina, detto l “ormone della felicità”  assieme al cortisolo, un ormone dello stress. Entrambi ci fanno sentire svegli e attivi. La famosa melatonina invece è considerata l’ormone del sonno e ci fa sentire stanchi  e dormire più serenamente quando è buio o in assenza di luce.

Dai LED alla luce allo xeno, dalle lampadine a risparmio energetico alla radiazione elettromagnetica degli schermi dei telefonini, siamo sottoposti ad una quantità di radiazione blu superiore a quella delle lampadine tradizionali a filamento. La luce blu permette una visione più nitida ma anche un maggior affaticamento per l’occhio/cervello. In percentuale, radiazione verde e rossa soprattutto, sono percepite da meno bastoncelli/coni in numero, ma non in proporzione rispetto agli stessi. Motivo per cui dovremmo evitare di guardare lo smartphone prima di addormentarci!

La messa “a fuoco”

L’occhio mette a fuoco un’area ristretta, rispetto all’insieme che prende in considerazione. Il cervello “corregge” e si occupa poi di crearne una versione “ragionata” complessiva. Non bisogna fidarsi troppo dei sensi: è il cervello che costruisce la realtà ma in funziona della su esperienza, delle sue aspettative!

Il neuroscienziato David Eagleman, che ha svolto ricerche sperimentali sulla percezione umana, scrive in merito: “affinché un essere umano possa “vedere” qualcosa devono esserci delle connessioni tra i dati in arrivo attraverso la retina e le sue aspettative“.

Un esempio è quando leggiamo e rileggiamo un testo, magari anche nostro, e ogni volta non ci rendiamo conto di aver scritto una parola male, il nostro cervello si aspetta che quella parola sia scritta in modo corretto quindi tende a saltare di intenderla come errore. (TODO aggiungi esempio immagine).

Se è il cervello a leggere e ricostruire, può accadere che qualcosa vada storto e le parole non vengano inserite nell’ordine corretto, qui ci troviamo di fronte ad anomalie patologiche che provocano la disgrafia.

L’occhio, dunque, è in continuo movimento. Il cervello però ne elabora solo il 5% di quello che gli inviato dall’occhio/retina. C i sono due processi fondamentali:

• visione periferica: serve soprattutto a intercettare il movimento a discapito dei dettagli di forma, colore ecc.
• fissazione:  (diciamo messa a fuoco di due punti diversi) richiede un ricalcolo al cervello molto più complesso del movimento

Eyetracking

Tutti questi elementi appena visti, sono alla base di come si comporta il nostro occhi. Conoscerli ci sono utili per capire come possiamo sfruttarlo per realizzare software specifico dalla massima resa. Qui di seguito riportiamo tre eyetracking, ovvero una misura di come e dove l’occhio si sofferma guardando una pagina web. Ci sono numerosi software che consentono con telecamere questo genere di riprese come https://www.hotjar.com/. Perché conoscere le posizioni? Ovviamente per posizionarci elementi che “monetizzano” la permanenza dell’utente: un bottone che procede agli acquisti o un qualche logo/immagine emozionale che coinvolga l’utente per fargli avere una buona opinione del nostro sito (e del nostro servizio offerto…). Google, ad esempio, usa il triangolo d’oro per posizionare le pubblicità a pagamento. Se il tuo sito non è in quella zona, probabilmente non sarà mai visitato ed occorre un nuovo lavoro SEO per portarlo su.

Altri usi dell’eyetracking? Non solo software o web:

• Posizionamento prodotti a scaffale (altezza mani / altezza occhi)
• Analisi del packaging (gli incarti dei prodotti)
• Video e Spot Pubblicitari.

Di solito la visione degli utenti segue una andamento a F o un andamento a Z e ci si deve quindi concentrare sul posizionamento delle varie componenti per tenere conto di tale lavoro. Se non fosse possibile, ad esempio su blog molto carichi di scritto, bisogna usare strategie mirate a non stressare l’utente ma guidarlo al meglio.

• usare un abstract o concentrare un riassunto importante nei primi paragrafi
• usare massicciamente titoli e sottotitoli con paragrafi di testo non troppo carichi (300/400 parole max)
• raggruppare elementi coerenti in gruppi con un contorno o uno sfondo diverso
• poche ma significative parole vanno in grassetto
• usa elenchi puntati/numerati per sintetizzare
• usa bottoni o link chiari “vai“, “clicca qui” ecc

In sintesi:

Studi recenti mostrano che esiste una significativa correlazione tra la dilatazione e l’interesse o attenzione verso un certo stimolo, e tra la contrazione e l’avversione o il disgusto. L’attenzione si concentra su una piccola porzione dell’informazione percepita, mentre il nostro cervello è alla continua ricerca di modalità per semplificare e fare imprinting delle sole cose percepite interessanti. Tutto questo per ricordarci che l’informazione ha valore solo quando viene vista!

Elementi di progettazione UI

Le caratteristiche desiderabili di un’interfaccia sono:

• trovare quello che serve (strategia, architettura dei contenuti)
• contenuti e funzioni comprensibili (proposta di valore, copy, UI design)
• facile da usare (usabilità e UX)
• rispettare le mode

Cerchiamo di approfondire questi elementi.

Tipologie di interfacce utente

Di interfacce utente ne esistono diverse, raggruppabili in alcune macrocategorie. La prima la Command-line UI. Utilizzata da tutti i programmatori in erba nel primi anni di programmazione C/C++, utilizzata ancora molto in ambito server per alleggerire i sistemi operativi ed evitare arresti o blocchi critici imputabili al software grafico. Essenziale quanto funzionale. Gli utenti Linux più avanzati usano la CLI in modo abituale come anche i dispositivi Cisco vengono configurati in tale modalità.

C’è poi la Text User Interface. La TUI è l’immediata conseguenza della CLI. Utilizzata quando l’hardware dei pc era mediocre ma si volevano cominciare ad introdurre interfacce più funzionali anche per utenti non esperti di comandi e righe dos/shell. Per utilizzare unaTUI, si fa un uso largo della tastiera e di combinazioni di tasti che velocizzano le procedure. Sembra strano ma nel 2023, questo genere di interfacce lo possiamo trovare ancora in giro e ben radicato: le poste, software gestionali dei magazzini del Trony o del corriere GLS, banche o sistemi amministrativi dei comuni. Strano ma non assurdo: la TUI è a prova di utente maldestro che ha difficoltà col mouse, non si blocca praticamente mai, non richiede di aggiornare l’hardware viste le esigue esigenze di calcolo necessarie.

L’ultima UI è quella più moderna a cui siamo abituati, la Graphical User Interface. Le belle e stilose finestrelle con bottoni e widget vari da cliccare col mouse. Ne esistono varianti di ogni tipo ed ogni linguaggio di programmazione ne ha una o più tra i suoi attrezzi.

C++ e C# sono associati a Windows Presentation Foundation, reso open source da Microsoft nel 2018 assieme a Windows UI (fino alla versione 2) e Forms e basate sulla piattaforma .NET Framework (leggi dot net). Microsoft ha annunciato il pensionamento di .NET Framework giunto alla versione 4.8 e di conseguenza ha decretato la morte di queste GUI. Considerando il supporto pluriennale, continuare a sviluppare o imparare queste tecnologie a scuola non rappresenta un errore. Cominciare invece da zero sul prossimo framwork che a fantasia non si chiamerà più .NET Framework ma .NET Core, anzi no, in corsa è stato rinominato semplicemente .NET, non rappresenta un errore ma si acquista di modernità e, soprattutto, performance. Mentre scriviamo .NET ex .NET Core è giunto alla versione .NET 7 con la nuova GUI WinUI 3.

Il concorrente di casa Microsoft dovrebbe essere JAVA. Oracle ha declinato il suo framework in molte versioni anche open source. Anni fa aveva tirato fuori una interfaccia GUI innovativa, la JavaFX che sostituiva le vecchie Swing. Ne ha deciso il rilascio open source e la Glucon ne cura lo sviluppo con la collettività. Tecnologia molto versatile e performante che sfrutta l’hardware 3D, design pulito, suddivisione MVC con file FXML per l’esportazione e creazione dell’interfaccia. Oracle in realtà sta spingendo molto ad abbandonare l tradizionali GUI desktop per spingere le interfacce Web. Una su tutte è la ElectronJS, basata su Javscript: in pratica il software apre una finestra custom del browser Chromium sul quale i bottoni ed elementi sono basati su HTML/CSS. E’ la tecnologia con cui è sviluppato Whatsapp, Visual Studio Code ed altri.

Queste sono le UI più diffuse e di interesse per gli informatici. Ne esistono altre meno note me che hanno comunque un interesse: Voice UI – Natural UI – Tangible UI – Brain UI.

I trends

Molte scelte delle tecnologie e stili che vediamo in giro per software, app e siti web sono dettate da mode. Chi le lanci o meno non è ben rintracciabile ma fatto sta che si diffondono periodicamente alcune scelte funzionali, cromatiche ecc. Una storica è quella del disegnare le icone e i loghi in determinati modi. Quello che va per la maggiore oggi è il material design, essenziale e pulito, ma non scordiamo come agli inizi degli anni 2000 le icone erano basate su Skeumorfismo con l’effetto 3D pacchiano e sovrabbondante.

I trends non sono da valutare anche alla luce della Legge di Jakob: “Le persone che utilizzano il tuo sito web passano più tempo su altri siti che sul tuo. Ecco perché gli utenti si aspettano che il tuo sito web funzioni come tutti gli altri.” Quindi bene avere estro e creatività ma se i bottoni sono ovunque rettangolari con i bordi smussati, non li posso fare a freccia o fiorellino sul nostro software/sito!

Proviamo a tracciare i trends mentre scriviamo nel 2023 per capire un po’ quello che ci circonda. Il data story-telling, ovvero la moda di inserire grafici, istogrammi in ogni dove per semplificare l’enorme quantità di dati che vengono spesso sottoposti agli utenti, soprattutto delle app e dei software desktop gestionali. Selle app scompaiono i bottoni a rilievo, sostituiti da una grafica flat. Sui colori molto si concentra sul dark mode, con colori scuri tendenti al nero. Tra le mode più interessanti segnalo le microinterazioni, ovvero la moda di inserire piccole animazioni ad ogni click o azione dell’utente che rendono l’interattività di quello che si fa sulla UI. Interessanti ma spesso anche piuttosto complesse per gli sviluppatori che devono integrare in modo massiccio CSS avanzato e JavaScript.

Mobile first e tecnologie responsive

Il mondo della tecnologia visiva è variato profondamente dagli anni ’90 dove hanno cominciato ad imporsi le GUI. Lo spostamento progressivo verso il web, la comparsa dei dispositivi mobili come smartphone e tablet che hanno rubato la scena ai pc desktop fissi, ha modificato molto l’esigenza di progettare interfacce adatte a questi dispositivi dallo schermo ridotto. Non a caso si è imposta la dicitura “mobile first“, ovvero la scelta di progettare un sito o un’applicazione partendo prima dalle esigenze dei dispositivi mobili. Siti web per dispositivi fissi e mobili hanno profonde esigenze che richiedono progettazioni completamente differenti spesso ma per esigenze di SEO e di indicizzazione dei motori web, la necessità di avere siti responsive è un obbligo, pena essere declassati a scapito di visualizzazioni e profitto.

La progettazione mobile first mette in risalto i contenuti, facilita la leggibilità dei testi e semplifica drasticamente la navigazione e organizzazione dei contenuti e, se presenti, flussi di acquisto. L’impaginazione pixel perfect dei tempi d’oro dello XHTML non ha ragione più di esistere. Si scelgono spesso delle risoluzioni fisse dette breakpoints per adattare la visione su dispositivi diversi. L’uso massiccio delle media query sono un obbligo tra chi vuole lavorare da programmatore front-end ma spesso a scuola gli alunni sottovalutano persino i CSS. Molti framework come Bootstrap e Fundation almeno mettono a disposizione tool per semplificare la realizzazione di interfacce e componenti responsive.

Patterns

Nell’ottica di facilitare gli sviluppatori, aderire a mode e trends, esistono set di widget abbondantemente studiati e diffusi, ormai di pubblico dominio che è facile ritrovare in molti siti e software. Li conosciamo già da Bootstrap ma valgono casi analoghi come GTK+, QT, Metro. Alcuni sono:

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

Le regole fondamentali

Esistono alcune regole fondamentali che ogni designer da manuale dovrebbe conoscere. La prima è un acronimo dal nome inglese ambiguo ma essenziale: CRAP Design. Ovvero in similitudine già tradotta le parole Contrasto  Ripetizione  Allineamento  Prossimità. Vediamo applicate a qualche esempio descrittivo significativo.

Contrasto

Il contrasto serve a dirigere l’attenzione del visitatore e a creare la distinzione tra gli elementi. Una mancanza di contrasto può rendere il design meno comprensibile e difficile da navigare. Può avere due impatti ambivalenti, sia per gli elementi grafici (i colori ad esempio delle icone in basso a sinistra, piuttosto che il disco cromatico che ci dice come il nostro occhio si senta maggiormente appagato se vengono scelti in primo piano e background due colori opposti nel disco cromatico. Potete misurare la bontà del contrasto con numerosi tool anche web come WebAIM o il versatile digitale.co/accessibilita

Anche che per i contrasti tipografici, i font scelti possono essere decisivi per la chiarezza. Qui la scelta è fondamentale maiuscolo, minuscolo, font con e senza grazie. (foto in basso)

Ripetizione

La ripetizione è la chiave per design attraenti e coerenti. Ripetere i colori, il trattamento del testo con medesimi font, la grafica con forme geometriche, contenitori ed elementi vari è una pratica decisiva per creare connessioni visive e creare un forte stile visivo che dia identità al tuo sito o software/app. Vale sia se ci riferiamo ad una pagina singola, a maggior ragione tra pagine diverse dello stesso sito o software.

Se la definizione non fosse chiara, ecco un esempio di quello che non è ripetizione -> https://arngren.net/

Questo sito, ha numerosi problemi: differenti font con taglie differenti e colori differenti; le immagini hanno dimensioni differenti con stili differenti e fortemente disomogenee perché prese in modo amatoriale e non riadattate, raggruppate con bordi neri spessi senza una apparente correlazione. La stessa barra della ricerca è presente in diversi punti. Tutto diventa caotico e non aiuta l’utente nella navigazione e comprensione dei contenuti.

Se proprio non riusciamo a ripetere gli elementi, stiamo attenti soprattutto ai menu in alto o sinistra che siano coerenti e ben replicati almeno quelli con allineamenti consistenti.

Allineamento

Ogni elemento della pagina/software dovrebbe essere posizionato intenzionalmente, non posto arbitrariamente. Allineare gli oggetti verticalmente, orizzontalmente (ad esempio in JavaFX usando contenitori HBOX, VBOX) o sfruttando i sistemi di aiuto per far corrispondere bordi ed etichette.

Ricorda, che gli allineamenti sono uno strumento di comunicazione. Molti design sono costruiti su griglie, pixel perfetti, ma altri utilizzano layout più organici per trasmettere un tono più naturale.

Un esempio interessante che in realtà coniuga diverse buone pratiche è trello.com

Prossimità

ll principio di prossimità afferma che oggetti o elementi che sono correlati appartengono alla stessa pagina (o insieme se si preferisce). Bisogna utilizzare raggruppamenti logici di elementi grafici, di messaggi testuali per trasmettere relazioni contestuali mentre è opportuno mettere larghi spazi vuoti tra elementi che devono essere distinti.

La percezione non tiene conto delle singole parti che compongono il campo d’osservazione, ma della sua globalità. Infatti, il motto della psicologia della Gestalt è che ”II tutto è più della somma delle singole parti”. Tra i principi di Gestalt ce ne sono diversi che interessano la nostra progettazione.

Non fanno parte direttamente dell’acronimo C.R.A.P. ma afferiscono comunque le leggi di Gestalt: Chiusura, destino comune, connessione, simmetria, sfondo e primo piano.

La chiusura, spesso usata nei loghi, è una proprietà per cui non si usano contenitori o linee chiuse per determinati oggetti, ma si lascia alla correzione del cervello che tende a “chiudere” elementi che lo sembrano anche se non lo sono pienamente. (TO DO disegno)

Il destino comune è un’altra tecnica per cui elementi raggruppati dal punto di vista grafico, sottendono ad un comune contenuto o gruppo di interesse. E’ indirettamente la tecnica usata nelle form per raggruppare elementi di natura simile: ad esempio tutte le informazioni anagrafiche raggruppate piuttosto che interessi ed hobby inseriti in un secondo gruppo. (TO DO disegno)

La simmetria si ricongiunge al discorso degli allineamenti. Come quest’ultimi, una grafica con elementi simmetrici “rilassa” l’utente e lo mette a suo agio nell’individuare contenuti ed oggetti di interesse. Non a caso molti siti web ormai sono basati su un layout a colonna centrale con spazi laterale di colore di sfondo differente alla colonna centrale, ma comunque di egual larghezza tra loro. (TO DO disegno)

Per approfondire suggeriamo la guida del gruppo di lavoro Agid per la realizzazione di UI per la pubblica amministrazione qui. Decisamente illuminante per un designer alle prime armi.

Spazio negativo

Si può definire spazio negativo, quella porzione di una interfaccia UI, fotografia, quadro o altro elemento visuale che circonda il soggetto principale (detto a sua volta spazio positivo). Seppure la definizione contenga una accezione negativa, lo spazio “vuoto” o di “sfondo” ricopre una importanza fondamentale.

Generalmente lo spazio negativo è un’area che non presenta dettagli significativi o che risaltano in modo esplicito, isolando il soggetto e valorizzandolo al massimo. Un esempio lampante di uso di spazio negativo nella vita quotidiana è la galleria d’arte o museo. Qui le tele appese ai muri sono ampiamente distanziate e intervallate dal muro bianco in modo da incentivare il fruitore dei quadri a concentrarsi su un’opera alla volta, anche allontanandosi di qualche metro dalla tela stessa.

Mentre nella fotografia si predilige uno sfondo il più anonimo possibile, nei software desktop e pagine web si predilige uno spazio negativo con un colore uniforme, spesso il bianco o il nero nelle loro gradazioni.

Lo spazio negativo va comunque usato con parsimonia: troppo vuoto potrebbe essere frustrante per la produttività del software stesso. Eccezione fattibile solo per i design minimal di alcuni siti web, dove c’è il desiderio esplicito di spiazzare l’utente con una grafica anche eccessivamente inusuale sotto il profilo della densità di elementi visivi.

Lo spazio negativo va progettato in coerenza con la già citata legge della Prossimità. Spesso è utili progettare una griglia ed inserire i dettagli in modo opportuno, sfruttando le altre leggi per ottenere simmetria e linearità

Gestione dello spazio

Esistono alcune semplici regole nella gestione dello spazio. Prima di tutto impostiamo sempre l’importanza degli oggetti del nostro design seguendo una ipotetica Z. Negli anni passati i contenuti erano spesso invece impostati seguendo una ipotetica F ma studi ritengono questo genere di visualizzazione meno efficace se non per gli elementi strutturali di un software/pagina come per l’uso dei menù ad esempio

E’ buona norma prefissare una serie di spaziature fisse tra gli oggetti in modo da avere una sorta di regolare ripetizione non solo negli elementi del design ma anche tra gli spazi. Non a caso Bootstrap prevede delle classi -xs, -sm, -md, -xl, -xxl o w-25, w-75 per gestire in modo costante larghezze e spaziature.

Spunto interessante è la spaziatura del testo. Elementi di rilievo sono non solo lo spazio tra titoli e paragrafo, ma anche l’interlinea. Un uso non consapevole dello spazio in questi elementi potrebbe generare anomalie disastrose per una UI. Una parola chiave, soprattutto nel testo, è la parola gerarchia che dovrebbe guidare soprattutto il copywriter a creare testi ben divisi in paragrafi in cui sia chiaro il sommario e la gerarchia degli stessi.

Da tenere sempre a mente è la Legge di Fitt: il tempo per acquisire/vedere un certo elemento è in funzione della sua dimensione e distanza rispetto ai restanti oggetti. Quindi se dimensioni e distanza sono sproporzionati saranno scarsamente percepiti dall’utente. Classico esempio sono i bottoni troppo piccoli o distanti dalle form a cui afferiscono.

Sempre nella gestione dello spazio, la legge di Hick ci indica come il tempo necessario per prendere una decisione varia in funzione del numero di opzioni disponibili. Se dobbiamo vendere un articolo quindi è bene che sullo schermo non ce ne siano troppi visibili, così come se stiamo inserendo voci di risposte/sondaggi, o bottoni sarà bene non inserirne troppi in una sola videata ma sparpagliarli magari su più pagine, tab, tendine ecc.

Gestione dell’input

L’input è la parte più critica di un software. A scuola si tende a sottovalutare la gestione dell’input per via delle tempistiche a disposizione ma nella creazione di una UI/UX è un punto essenziale

• Guida l’utente all’inserimento corretto: usa delle label chiare poste sopra i vari campi. Se non è possibile inserire label sopra i campi, inseriscile di lato a sinistra (vecchia abitudine), usa dei placeholder con parsimonia, poiché il suggerimento scompare quando l’utente ci comincia a digitare sopra. Prediligi eventuali micro suggerimenti in prossimità del campo (ad esempio sotto con un box di colore diverso)
• Dai un feedback chiaro sull’inserimento sia corretto che errato di un campo. Deve essere chiaro e tangibile. Prediligi colorare di verde o rosso i bordi del campo, inserisci eventualmente una icona spunta verde o x rossa di fianco al campo. Non rimanere vago se qualcosa è sbagliato.
• I controlli andrebbero fatti contestualmente all’inserimento e non all’invio del modulo, poiché si perde memoria dei dati inseriti e potrebbe indispettire l’utente facendolo scappare dal nostro software.
• In HTML 5 esistono numerosi tipi di input (text, email, tel, number, password, date, datetime, month, color, file) che aiutano l’input corretto. Nelle principali UI standard c’è solo il tipo testo che andrebbe pesantemente integrato con codice di controllo o librerie supplementari (che in realtà ci sono ma obbligano ad una curva di apprendimento più complessa)
• Nelle app o dove possibile utilizzare tastiere digitali già selezionate dei simboli ammissibili, tipo il tastierino numerico per far inserire codici dal telefono

Gestione degli errori

La gestione dell’errore andrebbe fatta di pari passo con quella dell’input. Se in fase di invio di una form sopraggiungono errori non individuati, si dovrebbe mettere l’utente in condizione di sanare solo l’errore. Spesso però i form non sono costruiti con AJAX e ricaricano i dati da capo, obbligando in molti casi, l’utente a reinserire parte della form, provocando grande disagio se non l’abbandono da parte dell’utente del software o sito web. Un errore UX che si incontra spesso purtroppo, sanabile con un piccolo frammento di codice javascript.

Se un campo presenta errore deve essere ben chiaro: meglio tralasciare scritte invisibili sul lato o, peggio, asterischi anonimi, ma piuttosto prediligi un bordo o contenuto di sfondo rosso del campo incriminato.

Bene fornire un feedback in realtà anche positivo di campi inseriti in modo corretto, bordandoli di verde, inserendo una spunta verde sul lato oppure semplicemente rendendoli opachi e non modificabili.

Gestione del colore

Il colore è un elemento essenziale nella definizione di un’interfaccia: può servire a differenziare, connettere, evidenziare, nascondere. Contribuisce alla gerarchia visiva e può essere un elemento di supporto alla comunicazione. In genere in un sito i colori sono dettati dallo stile del logo o brand. Diverso è il discorso dei software da desktop che hanno per lo più interfacce cromatiche dipendenti dal sistema operativo.

Per ogni lavoro è necessaria comunque coerenza: si deve sceglie un campionario, ovvero palette, di tre, massimo cinque colori, dove al massimo tre hanno differente tonalità. Le palette possono essere monocromatiche, quindi con più sfumature dello stesso colore, o policromatiche con differenti colori.

Quando si sceglie una palette, è bene tenere presente la regola del 60/30/10. E’ una regola che vale per siti e software ma molto utilizzata anche nell’arredamento. La potete trovare praticamente in tutte le catene che presentano soluzioni di arredo non solo dal punto di vista cromatico ma anche di contenuti fisici esposti, vedi Ikea, Maison du Mond e simili. Passa quasi inosservata la regola benché le esposizioni, in virtù di tale proporzione, risultino equilibrate ed eleganti. Ad esempio:

• 60%: colore primario, quello delle pareti;
• 30%: colore secondario, colore di mobili, tende e tappeti;
• 10%: i dettagli, cioè quadri, lampade e altri accessori.

Nei colori la regola del 60/30/10 è ancora più valida: un colore predominante per il 60% delle superfici o pagine, 30% per un colore secondario o dello stesso tono o contrasto, per finire con un colore di rifinitura al 10% spesso a contrasto.

Un dettaglio non trascurabile è l’uso del bianco e nero. Molte interfacce hanno adesso il “dark mode“, ovvero cariche di colore nero soprattutto nello sfondo. Sull’uso del dark mode si potrebbe discutere a lungo sulla valenza soprattutto per alcune scelte tecniche ma non è missione di questo compendio. Ci limitiamo a dire che la scelta del bianco e nero non dovrebbe essere fatta con tonalità spinte. In natura in realtà non esiste il colore bianco #000000 o nero #ffffff. Ecco perché è buona norma usare delle versioni “sporche”, meno impattanti la visione. Un esempio qui sotto: a sinistra i colori puri, a destra la versione reale

Non esiste solo questa proporzione, ma infinite altre ad esempio #f2f2f2 per il testo e #121212 e lo sfondo. Anche se non usi il nero ma altri colori scuri, prediligi in generale una saturazione (colori opachi e non lucidi/accesi) maggiore di sfondo contro testo chiaro. Buona norma prevede che ci sia la possibilità di disattivare la modalità dark attraverso un pulsante/menù o toggle.

Ultima modifica 25 Settembre 2023

Articoli simili:

Le tecnologie per le Mobile App Algoritmo di Dijkstra con esercizo svolto