UI design: come creare interfacce grafiche che stupiscono

Sta a te decidere se vuoi che sia il tuo asso nella manica oppure una qualsiasi carta buttata sul tavolo. In questo articolo vogliamo spiegarti che cosa sia, che cosa non sia (spesso viene sovrapposto a torto allo UX design) e come mettere in pratica i suoi principi.

Vuoi sapere come progettare una UX efficace? Scoprilo nel nostro eBook!

Che cos’è lo UI design e perché è importante

Lo UI design è l’opera di progettazione in cui si scelgono e organizzano gli elementi, il layout e l’aspetto dell’interfaccia. E di quest’ultima non si può proprio fare a meno. I software per definizione sono immateriali, dunque per usarli su un supporto hardware (mouse, tastiera, schermo di un Pc o di uno smartphone, microfono e altro ancora) è necessario un livello intermedio, che metta in relazione l’utente con il software stesso. Questo livello intermedio è spesso fatto di immagini, icone, testi, comandi cliccabili a cui corrisponde un’azione, e si parla in tal caso di interfaccia grafica: siti Web e applicazioni ne sono un esempio.

Stanno prendendo piede anche le interfacce vocali, quelle che permettono di interagire con software come Siri, Alexa e Google Assistant o con funzioni di riconoscimento vocale interne ad altre app. Abbiamo imparato a conoscere anche le interfacce gestuali: le usiamo (in sovrapposizione a quelle grafiche) ogni volta che eseguiamo un pinch to zoom, uno scrolling o uno swipe sullo schermo di un telefono. E poi c’è la realtà aumentata, in cui si mescolano interfacce grafiche e mondo materiale. In tutti i casi, il lavoro del designer è quello di rendere l’interazione fluida, semplice e piacevole, tendendo all’obiettivo ideale dell’interfaccia “trasparente”, che non si percepisce anche se c’è.

Con queste nuove modalità si stanno creando nuovi metodi di progettazione, ma i principi dello UI design restano gli stessi. Chiariamo però subito un piccolo dubbio…

Che cosa non è lo UI

A volte si fa un po’ di confusione tra i concetti di UI e UX design, che invece sono solo in parte sovrapponibili: la prima sigla si riferisce nello specifico all’interfaccia utente, la seconda al più ampio concetto di user experience. La progettazione dell’esperienza utente comprende sì lo UI design, ma deve tenere conto anche degli aspetti cognitivi (come le persone si informano su un’azienda, marchio, argomento o prodotto/servizio), della relazione emotiva con il brand, del livello di soddisfazione (puntualità e funzionamento di un sito Web, rapidità dei feedback, eccetera). I più illuminati ragionano in termini di customer journey, costruendo l’intero percorso che va dalla conoscenza, all’interazione, all’acquisto, al post-acquisto, all’uso del prodotto o servizio. Lo UI design è una tappa.

Principi e tecniche dello UI design

L’interfaccia può essere considerata come un’estensione del nostro corpo: l’obiettivo ultimo dello UI design è quello di renderla impercettibile, o “trasparente” come dicono gli addetti ai lavori. Per raggiungere lo scopo dovrai rispettare alcuni principi di progettazione. Ecco i più importanti.

Chiarezza. La regola d’oro. Significa creare interfacce leggibili, non faticose da fruire (evita, quindi, colori e font che affaticano l’occhio ed evita l’eccessivo sovraffollamento di contenuti in una pagina). Ma significa anche che non deve servire una laurea per poter navigare su un sito Web o usare un’app: devono essere fruibili alla prima visita e al primo utilizzo. Chiarezza non è sinonimo di ovvietà: puoi prevedere elementi di sorpresa, purché non siano di ostacolo alla facilità d’uso.

Coerenza. Gli elementi visuali e le interazioni devono seguire logiche di funzionamento uniformi. Se a ogni azioni corrisponde una reazione, che sia la stessa in tutte le pagine. La funzione associata a un colore, a un’icona o ad altri oggetti grafici, per esempio, deve restare la stessa in tutto il sito. Nelle interfacce vocali, similmente, una frase codificata in un certo comando non può cozzare con altre o produrre esiti diversi a seconda del contesto. Idem per i gesti, che devono produrre risultati prevedibili e non creare confusione (tant’è che i produttori di smartphone hanno adottato più o meno gli stessi, a volte anche litigando sulla paternità di un brevetto!).

Familiarità. Il Web è pieno di simboli più o meno codificati, parole ed elementi grafici diventati “etichette” che definiscono un concetto. Pensiamo al “carrello” dei siti di e-commerce, al colore verde per indicare il “via libera” o “procedura eseguita” e al rosso a segnalare un problema, al triangolino del tasto “play” per avviare la riproduzione di un video e alla clessidra che ci invita a pazientare. Infrangere queste convenzioni è concesso, ma dev’esserci una ragione per farlo. Spesso, di fatto, non è una buona idea.

Flessibilità. Una progettazione responsive permetterà al tuo sito Web di adattarsi al dispositivo su cui è visualizzato, assicurando la stessa chiarezza e semplicità d’uso su Pc, tablet e smartphone. Questo vale per le dimensioni dei caratteri, per la struttura delle schermate (sugli schermi dei telefoni è preferibile un’impostazione più verticale), per le dimensioni delle immagini e altro ancora. L’interfaccia deve piegarsi al mezzo, e non viceversa!

Misura. Collegato al principio della chiarezza è quello della misura. Nell’ansia di voler dire tutto o mostrare tutto si rischia di esagerare: meglio, invece, dosare la quantità di testo, immagini, pulsanti e link in modo da non travolgere di input chi sta davanti allo schermo. Svelare un prodotto o una storia un po’ alla volta, tra l’altro, può stimolare la curiosità e favorire l’esplorazione di un sito.

Controllo. L’utente deve avere il coltello dalla parte del manico: è lui che determina il funzionamento dell’interfaccia, le azioni prodotte. Quindi attenzione a non esagerare con i video in autoplay, con gli elementi grafici che si aprono senza preavviso, con musiche ed effetti sonori sovrastanti.

Prima il dovere, poi il piacere… ovvero le emozioni

“Se vogliamo che agli utenti piaccia il nostro software, dovremmo progettarlo in modo che si comporti come una persona piacevole: rispetto, generoso e in grado di aiutare”, diceva il designer e programmatore software Alan Cooper. Verissimo: seguendo i principi fondamentali sarai già a buon punto. Ma ti mancherà ancora quella marcia in più: il coinvolgimento emotivo dell’utente. Per ottenerlo dovrai puntare sui contenuti (ambito che esula dall’interfaccia) ma anche sulla sensorialità e sulle modalità di interazione. Perché è importante? Nell’epoca del sovraffollamento di offerta, anche questa è una leva di marketing. Le interfacce migliori non sono soltanto “rispettose, generose e in grado di aiutare”, ma anche capaci di creare una sorta di legame con l’utente. Come? Vediamo alcuni esempi.

Il “dialogo” diretto. Le applicazioni a controllo vocale piacciono e cresceranno (secondo una recentissima ricerca di Juniper Networks, si passerà dai 2,5 miliardi di installazioni di assistenti vocali del 2018 a 8 miliardi entro il 2023) perché sono comode da usare, evitando la digitazione, ma anche perché creano l’impressione di dialogare con qualcuno. Siri, il prodotto di Apple, è tra i più sofisticati perché nei suoi scambi di battute c’è anche un pizzico di ironia, insomma è quasi “umano”. Amazon ha scelto per la sua Alexa un nome femminile, Microsoft ha pescato riferimenti al mondo dei videogame per Cortana, e scommettiamo che questo sia solo l’inizio.

La psicologia dei colori. Per il marketing non è certo una novità, ma le sue tattiche sono evergreen, per dirla con un gioco di parole. Vale certo la soggettività della percezione e dei ricordi, ma in generale il verde stimola il senso di tranquillità e culturalmente è associato all’idea di natura; il giallo attira l’attenzione e quindi è ottimo per le “vetrine” (quelle dei negozi fisici così come quelle dei siti); il rosso comunica urgenza (e non a caso marchia offerte e prezzi scontati); l’arancione richiama valori come l’energia e l’entusiasmo; il nero simboleggia l’eleganza (lo sanno bene le aziende di luxury), il blu trasmette fiducia (banche e assicurazioni ne fanno gran uso); il viola è sensuale e stimola la calma (dunque è spesso associato ai prodotti di cosmesi), e via dicendo.

Le immagini. Inserire delle immagini chiare, belle, visualizzabili anche a tutto schermo ha fatto la fortuna di moltissimi siti di diverso genere: dai social network come Facebook, Instagram e Pinterest a luoghi di e-commerce come Zalando. Questi elementi hanno un chiaro valore informativo (per esempio mostrare la vestibilità e i dettagli di un capo d’abbigliamento) ma contribuiscono anche a evocare il valore del prodotto, a stimolare l’immaginazione dell’utente, a creare un maggior senso di “immersione”. Il potenziale emotivo dell’immagine, d’altronde, è alla base della fotografia e del cinema, mica poco. E ora che le connessioni Internet diventano sempre più veloci e gli schermi dei dispositivi aumentano di risoluzione, puoi permetterti di usare, dosandole bene, immagini a tutto schermo. Ottimo esempio è quello del New York Times, che ha scelto di riservare ad alcune inchieste un layout speciale: l’articolo è preceduto da una carrellata di immagini a tutto schermo con frasi introduttive in sovraimpressione, che si visualizzano click dopo click, creando una sorta di “atmosfera” e un senso di anticipazione.

Padroneggia i segreti della progettazione

L’universo delle interfacce è in rapida evoluzione, tra app di realtà virtuale e aumentata, visori e smart glasses, smartphone e smartwatch. Ma per essere “smart”, cioè furbi, valgono ancora i principi tradizionali di progettazione. Se punterai sulla chiarezza, riducendo la fatica cognitiva e la curva di apprendimento dell’utente, se eviterai incoerenze e sorprese sgradite e se garantirai che tutto fili liscio su diversi dispositivi, allora avrai fatto un buon lavoro. Se saprai anche interpretare le tendenze del momento e aggiungere un contenuto “emotivo” all’interfaccia, allora riuscirai ancora meglio a farti apprezzare e ricordare.

L’interfaccia è però solo una tappa del customer journey. Per scoprire come realizzare la migliore esperienza d’uso per il tuo prospect o cliente ti bastano pochi gesti: cliccare e scaricare il nostro eBook gratuito, “Come progettare una user experience efficace”.