Design

11 min di lettura

UI Design: guida definitiva alla progettazione dell'interfaccia utente

Scritto da

Talent Garden

Non ti va di leggere? Prova ad ascoltare l'articolo in modalità audio 🎧

I siti non sono tutti uguali, molti di essi appaiono molto gradevoli nell’aspetto, ma offrono una navigazione poco intuitiva e ospitano contenuti difficili da reperire. Altri invece sono molto facili da utilizzare e propongono un’interfaccia utente piacevole, che permette di individuare velocemente e con pochi passaggi i contenuti che si cercano. In questo caso il sito è stato sviluppato nell’ottica dell’UI Design.

1. Cos'è lo UI Design

Lo User Interface Design ricomprende il web design, lo studio dei colori, l’interazione con l’utente e l’architettura delle informazioni. Nell’ambito della UX, lo UI Design cura principalmente l’esperienza di navigazione e l’architettura del sito, negli aspetti funzionali ed estetici.

Perché è importante curare lo UI Design

Tutti gli utenti apprezzano siti web funzionali e non li abbandonano. Un buon Design dell'interfaccia utente ha effetti positivi sull’esperienza utente, dunque sul volume di traffico e sul tempo di permanenza sul sito, fattori che influiscono, più o meno direttamente, sul numero delle conversioni e sul posizionamento. L’aspetto più importante di un sito user-friendly è la sua capacità di attrarre e trattenere i visitatori, offrendo con pochi passaggi ciò che essi stanno cercando. Un buon UI Design agisce positivamente sul rapporto tra volumi di traffico e conversioni, sui tempi di permanenza e impedisce che alcune sezioni del sito siano poco visitate dagli utenti. Questi fattori sono indispensabili nei siti che ospitano informazioni, intrattenimento e interazione sociale, ma ancora di più nel settore dell’e-commerce, nel quale milioni di aziende sono completamente dipendenti dal canale di vendita online. La progettazione di una interfaccia utente gradevole e funzionale rende un sito web molto più attrattivo, soprattutto se è stato progettato anche un funnel di vendita e attività di lead generation interne al sito. In questi casi l'usabilità favorisce le conversioni - consistano queste in attività di vendita diretta o di lead generation - perché risponde alle esigenze degli utenti.

I fattori che definiscono lo UI Design

L’UI Design è costruito sull’utente. Fino a un decennio fa tutti i siti erano “vetrine” sulle quali collocare i propri prodotti o contenuti. L’attenzione era focalizzata su aspetti grafici ed elementi attualmente percepiti come estremamente fastidiosi. Come non ricordare la musica di sottofondo, sgradevole negli uffici condivisi, le finestre pop-up, ormai inefficaci grazie alle nuove opzioni dei motori di ricerca, e i siti in flash, che offrivano animazioni troppo lunghe rispetto all’esigenza degli utenti di trovare risposte immediate ai loro bisogni. Attualmente il design dell’interfaccia utente è dunque orientato alle esigenze di chi naviga sul web, con un’attenzione al design gradevole e attraente.

Le caratteristiche di un corretto UI Design

Sono in molti gli esperti che hanno categorizzato i fattori più importanti per progettare una valida interfaccia grafica. Tra questi elementi i più comuni sono:

1. Visibilità dello stato della navigazione

Gli utenti devono sempre essere in grado di capire in quale parte dei sito si trovano attraverso elementi grafici ben visibili.

2. Controllo da parte dell’utente e navigazione libera

Gli utenti devono potersi muovere attraverso il sito con facili passaggi indietro e la possibilità di annullare e replicare le azioni, come la compilazione di un form o ripercorrere le fasi del funnel di acquisto.

3. Corrispondenza tra sistema e mondo reale

Gli User Interface designer sono chiamati ad avvalersi del linguaggio e dei concetti che gli utenti utilizzano nel mondo reale in base agli utenti target che sono stati definiti. Si tratta di un’attività che offre all’utente un sito modulato sulle sue caratteristiche e sul tono di voce che apprezza di più, sia esso formale e tecnico o più coinvolgente e vicino all’utente.

4. Coerenza e standardizzazione

L’UI design deve utilizzare elementi grafici e terminologia condivisa dalle diverse piattaforme, per siti desktop e mobile, dunque cross device. Un’icona che rappresenta un concetto non deve essere diversa a seconda del device con il quale si naviga sullo stesso sito. In siti particolarmente specializzati, una certa uniformità deve essere valutata anche rispetto ai competitor. Un comparatore di polizze assicurative, ad esempio, è chiamato a uniformarsi alle migliori esperienze della concorrenza, perchè è probabile che lo stesso utente navighi comunemente su più siti.

5. Prevenzione degli errori

Nel concetto di UI design c’è anche la maniacale cura nell’evitare i potenziali errori, affinché gli utenti non debbano trovarsi a tentare di risolvere problemi più grandi di loro, magari ingannando un form che non funziona perché le limitazioni nei campi non sono corrette. Attraverso i tool per le analytics del sito è possibile monitorare le pagine che registrano maggiori abbandoni: se una funzione del sito presenta errori che è difficile evitare, tanto vale interrogarsi sull’utilità di quella funzione ed eliminarla, quando possibile.

6. Riconoscimento piuttosto che richiamo alla mente

Un valido UI design tenta di ridurre al minimo il carico cognitivo dell’utente, mantenendo le informazioni rilevanti per l'attività all'interno del display mentre gli utenti navigano sull'interfaccia. L'attenzione umana è limitata e secondo gli studiosi, non mantiene più di cinque elementi contemporaneamente nella memoria a breve termine. Gli UI designer devono ottimizzare le funzioni del sito in modo che gli utenti possano semplicemente riconoscere informazioni invece di doverle richiamare alla mente. Una domanda a scelta multipla, ad esempio è più user-friendly perché permette di riconoscere una risposta da un elenco, invece di doverla richiamare alla memoria. Anche un form che compila automaticamente il codice fiscale calcolandolo attraverso i dati già inseriti - sesso, data e luogo di nascita - evita all’utente di richiamare alla mente informazioni.

7. Flessibilità ed efficienza d'uso

L’utente apprezza la riduzione delle interazioni con l’interfaccia, che rendono più veloce la navigazione. Una maggiore efficienza dell’interfaccia può essere ottenuta utilizzando abbreviazioni, tasti funzione e comandi nascosti. Gli utenti dovrebbero essere in grado di personalizzare l'interfaccia in base alle proprie esigenze, in modo da poter raggiungere più velocemente i contenuti che cercano. Ad esempio, i siti delle istituzioni scolastiche propongono spesso diversi percorsi a seconda che l’utente sia docente, studente o genitore.

8. Design curato e minimalista

È essenziale ridurre qualsiasi disordine. Tutte le informazioni non necessarie confondono l’utente e la sua ridotta capacità d’attenzione. Pertanto l’interfaccia principale deve comprendere solo gli elementi necessari per le attività più frequenti, fornendo allo stesso tempo elementi grafici chiaramente visibili e non ambigui per facilitare la navigare verso altri contenuti. Nell’UI design, come nella grafica, bisogna evitare la tentazione di aggiungere elementi ma saper invece togliere quelli superflui.

9. Messaggi di errore user-friendly

Eventuali messaggi di errore connessi alla compilazione di moduli o nelle fasi dell’ecommerce devono essere comprensibili e privi di elementi tecnici che l’utente medio non può capire, proponendo sempre una soluzione, sia essa il tornare indietro per ripetere la procedura o uno specifico richiamo alla mancata compilazione di campi essenziali.

10. Aiuto alla navigazione e contenuti utili

L’UI Designer si pone l’obiettivo di consentire una navigazione senza bisogno di aiuto, e propone guide e risorse all’interno del sito. Quando gli utenti hanno bisogno d’aiuto, è bene progettare soluzioni facilmente individuabili, specifiche rispetto alla singola attività e formulate in modo da condurre l’utente a compiere i passaggi necessari per risolvere il problema. Jon Wiley, attualmente direttore dell’Immersive Design di Google, ha affermato:

"quando penso al design e alla creazione di grandi esperienze utente, generalmente lo penso in termini di tre cose: usabilità, utilità e desiderabilità".

L’affermazione è del 2012 ma è quanto mai attuale anche nell’ambito dell’ UI design.

2. Chi è lo UI Designer

Il professionista dell’User Interface design si occupa di curare l’interfaccia grafica del sito per aiutare l’utente a trovare ciò che cerca, in modo veloce, gradevole e intuitivo, occupandosi dell’aspetto estetico e della navigabilità di siti e app. Le competenze dell’UI designer consistono nel saper svolgere una user research, progettare l’usabilità del sito, redigere e applicare una style guide, avvalersi di specifici tool e tecniche di progettazione e conoscere gli standard dei vari linguaggi e supporti digitali relativi a siti web, app e interfacce per smartphone, dispositivi indossabili e tv digitale.

Come si diventa UI Designer

Dopo aver acquisito una competenza di base nella realizzazione di siti web e una conoscenza dei tool che operano sulle immagini, è necessario frequentare un corso di formazione o un master specifico per l’ UI Design. Letture, corsi online e formazione on the job possono ovviamente fornire strumenti adeguati, tuttavia le competenze di un UI designer si acquisiscono attraverso una specifica formazione. È infatti necessario possedere adeguate competenze su tecniche di user research, che consiste nella raccolta e analisi dei dati su come gli utenti percepiscono l’esperienza di navigazione, effettuata attraverso tool, interviste, test di usabilità e misurazioni di tipo quantitativo che riguardano anche il ROI. Un UI Designer deve conoscere elementi della ricerca socio-antropologica, della statistica e degli studi di mercato, competenze non semplici da acquisire con l’autoformazione.

3. Un caso di studio di UI Design: SPID

SPID, il Sistema Pubblico di Identità Digitale, è uno strumento fondamentale per la digitalizzazione del rapporto tra cittadino e pubblica amministrazione. SPID è di fatto una sorta di identità digitale nazionale che permette al cittadino di comunicare facilmente con le amministrazioni e accedere ai servizi online in maniera sicura e veloce. SPID opera attraverso il coinvolgimenti di diversi soggetti: le amministrazioni pubbliche, gli identity provider, cioè i soggetti che gestiscono il processo di autenticazione degli utenti e che le credenziali per l’accesso ai servizi e i service provider, ovvero i reali erogatori di servizi online accessibili grazie a SPID. Attualmente il servizio di identità digitale è utile per accedere ai bonus governativi, come 18App e Carta del docente, gestire il rapporto con INPS e Agenzia delle Entrate e alcuni enti locali, ma scalabile fino a rappresentare lo strumento per accedere a servizi pubblici e, presto, privati, con gli enti fornitori di energia elettrica e tanto altro. L’attività di UI design per SPID si è occupata di trasformare un protocollo tecnico in un prodotto e poi in un servizio al cittadino.

SPID: da prodotto a servizio partendo dall’usabilità e dal design

Il progetto complessivo di UX Design si è avviato con la parte relativa alla User Interface Design. Si è curata l’usabilità attraverso un approccio centrato sull’utente, analizzando:

le fasi di conoscenza del servizio, la registrazione e la sua fruizione
i touchpoint tra SPID e l’utente, con riferimento alle interfacce digitali
i processi e i sistemi di relazione presenti

Dalle interviste al co-design

La fase di user research, indispensabile in un progetto di UI Design, è stata svolta attraverso workshop con i numerosi attori del progetto, in un approccio partecipativo. Sono state effettuate interviste con i principali stakeholder, per analizzare il contesto e le opportunità, i bisogni e tutte le informazioni utili per realizzare un prodotto efficace. A partire dalle interviste, il team ha definito i tre momenti principali nella fruizione di SPID, temi importanti da affrontare nella progettazione:

la conoscibilità e la promozione di SPID
la fase di registrazione e autenticazione
la fruizione del servizio

Si è passati quindi allo svolgimento di un workshop di co-design, attività di design partecipativo,con rappresentanti di AgID, del Team Digitale e di alcuni service provider e identity provider. Dopo il workshop è stata effettuata una selezione delle idee migliori per ottimizzare l’usabilità e quindi l’esperienza utente. L'interfaccia che è stata realizzata è molto pulita, con pochi elementi essenziali e la call to action in evidenza “richiedi SPID”, così come la funzione “serve aiuto”. Una grafica semplice ma curata, con caratteri grandi e leggibili, sfondo bianco e tre colori principali, ben armonizzati. Il processo di registrazione, complesso perché richiede l’identificazione fisica e l'esibizione di un documento d’identità all’operatore, o attraverso una videochat a pagamento, risulta ben concepito e lineare, senza troppi passaggi.

I tool più utili alla UI Design

Gli strumenti a disposizione della UI Designer riguardano gli aspetti della user research e del testing delle interfacce, che permette di verificare che siano di facile usabilità per l’utente.

Adobe XD

Si tratta di un software che integra Illustrator e Photoshop ed è molto utilizzato per la progettazione e la prototipazione di interfacce utente, siti web e app. Adobe XD, acronimo di Experience Design consente di creare rapidamente interfacce web e propone strumenti per testare i prototipi in versione desktop e mobile. Difficile da sostituire con altri programmi perchè multipiattaforma. Opera infatti su Android, iOS e Windows.

Sketch

Il vero competitor di Adobe XD è Sketch, che funziona in ambiente iOS. Si tratta di un prodotto innovativo e diffuso, in quanto su licenza open source, intuitivo e dotato di numerose funzioni e strumenti di progettazione dell'interfaccia utente. Da un paio d’anni anno la sua diffusione sta aumentando in modo esponenziale.

InVision

Potente strumento di progettazione e prototyping di siti web e mobile, InVision fa superare i tradizionali mockup trasmessi al cliente via email per ottenere un feedback. Il tool permette di realizzare prototipi di interfacce utente, effettuare test sulla usabilità e condividerli con il proprio team o con il committente. È stato utilizza per realizzare interfacce di siti molto noti, come Eventbrite, Mailchimp e Uber, grazie alla funzione di gestione dell’intero progetto di UI design.

I libri più noti che trattano di UI design

Una buona lettura è sempre uno strumento valido per apprendere tecniche e strumenti, tanto più su argomenti legati al web, i cui strumenti online affaticano chi trascorre per lavoro molte ore davanti a un monitor. Tra i libri da consigliare nell’ambito dell’usabilità e del design ecco i più noti:

Web usability 2.0. L'usabilità che conta

Autore: Jakob Nielsen e Hoa Loranger Anno di pubblicazione: 2006 Anche se non recente, il testo è interessante per entrare nell’ottica dell’utente, perché la tesi degli autori è che sia l’usabilità a governare il web. L’utente che gestisce il mouse è alla fine colui che può determinare il successo di un sito e l’UI Designer, che cura la sua usabilità e gradevolezza, è un soggetto fondamentale nello sviluppo di un progetto di visibilità sul web.

Web Usability: Guida completa alla user experience e all'usabilità per comunicare e vendere online

Autori: Jacopo Pasquini e Simone Giomi Anno di pubblicazione: 2014 Si tratta di un libro piacevole e completo, nel quale gli autori evidenziano come in un mondo dominato da relazioni gestite attraverso piattaforme digitali, sia necessario conoscere i meccanismi che rendono elementare e piacevole l’esperienza dell’utente. La cura dell’UI Design dunque un elemento fondamentale per l’utilizzo e l’interazione dell’utente.

I siti che trattano di UI Design

Sono molte le risorse sul web che pubblicano articoli e guide sull’ UI Design. Ecco i siti più noti:

Collect UI

Tra i siti che propongono esempio di UI Design aggiornati quotidianamente, Collect UI presenta risorse molto utili al designer in cerca di ispirazione. Centinaia di esempi per la pagina d'errore 404, icone per le App, form di contatto e molto altro. Le risorse sono classificate in modo semplice da raggiungere e ben concepite.

UI Movement

Bottoni, calendari, chatbot e interfacce per tutti gli usi, con una newsletter settimanale alla quale sono registrati circa ventimila professionisti. Il sito propone esempi che possono ispirare gli UI designer per creare interfacce funzionali e di buon design.

UI Kit

Un sito inaspettato. UI Kit propone un set di componenti visive già sperimentate per realizzare l’interfaccia utente di siti e app, sulla base delle linee guida per i servizi digitali della Pubblica Amministrazione. Realizzato da AgID, l’Agenzia digitale italiana, il sito offre anche numerose risorse di qualità che spaziano dalle linee guida alla pubblicazione degli esiti di studi sulla user research, al service design, fino all'interfaccia utente. Si tratta di materiali basati sugli esiti degli studi sulla user research degli italiani. Non male per chi si occupa di UI design accessibile e orientato alle caratteristiche dell’utente del nostro Paese.

Le linee guida per l0 User Interface

L’efficacia di una interfaccia utente è garantita se si seguono le linee guida elaborate da motori di ricerca e sviluppatori di linguaggi come Android e iOS.

Google Design

Il sito mette a disposizione risorse e linee guida per il design di siti e interfacce web nell’ottica del material design. Google Design presenta anche esempi e tutorial per Android e iOS. Icone, font e tante risorse sono a disposizione gratuitamente.

Human Interface Guidelines

Anche Apple dedica un sito a idee e risorse per creare interfacce nei linguaggi macOS, iOS, watchOS e tvOS. Il sito propone risorse e templates gratuiti per Sketch, Photoshop e Adobe XD e una sezione, Interface Essentials, dedicata alle interazioni con l’utente. Le linee guida aiuteranno gli UI designer a creare risorse realizzate in ottica utente, per interfacce che vanno dal desktop ai wearables.

Following User Interface Guidelines | Microsoft Docs

Anche Microsoft pubblica le linee guida per l'user interface design in ambiente Windows. Si tratta di una raccolta di raccomandazioni a disposizione di UI designer e sviluppatori che aiutano a creare interfacce per le applicazioni. Principi generali, ricerche sul comportamento umano, metodologie di progettazione e risorse gratuite fanno del sito una vera risorsa da consultare.

Articolo aggiornato il: 14 agosto 2023

Scritto da

Talent Garden, Digital Skills Academy

UI Design: guida definitiva alla progettazione dell'interfaccia utente