Per avere un’idea al volo di cosa sia l’UI, ti basta aprire un qualsiasi sito web. Guarda bene. Li vedi i bottoni, i menu, il form per iscriversi alla newsletter o chiedere preventivo? Le vedi le icone del carrello e del profilo? Ecco: l‘insieme di questi elementi è l’UI, cioè l‘interfaccia utente (user interface).
A differenza dell’UX, che riguarda la progettazione complessiva dell’esperienza che fa l’utente su un sito (clicca sul link se non sai cos’è l’UX), l’UI è la forma attraverso la quale l’esperienza viene vissuta.
Un po’ come la distinzione tra front-end e back-end, tra i progetti di una casa e i mattoni: tra la mente e il corpo. Ma attenzione: non è solo questione di estetica.
Una buona UI è come se fosse invisibile: funziona, è intuitiva, ti incoraggia a rimanere sul sito, sai cosa puoi scegliere e hai subito chiaro come farlo. Una cattiva UI invece si nota subito, perché ti blocca, ti disorienta, ti fa chiudere la pagina.
Quando hai un sito, un’app o un e-commerce, hai in mano uno strumento che può farti decollare, farti schiantare… o essere totalmente inutile. E molto dipende proprio dall’UI.
Indice dei contenuti
L’UI è la parte tangibile dell’esperienza utente
L’esperienza dell’utente è fatta di aspettative, sensazioni e azioni. L’UI è l’insieme di oggetti verso i quali queste si rivolgono: è estetica funzionale, segnaletica, semiotica.
Il colore di un bottone quindi serve a guidare un’azione. La distanza tra due elementi serve a non confondere. La dimensione e la distribuzione dei testi serve a leggere senza sforzo. Un video messo al momento giusto serve a rilanciare l’attenzione e il messaggio.
L’arte sta proprio nel fare apparire questi elementi spontanei. In altre parole, una buona UI rende il sito chiaro, anche sacrificando un po’ di gusto artistico e narrativo. Un’ottima UI, invece, in ogni elemento riesce a comunicare potentemente l’identità del brand e a contribuire alla sua riconoscibilità, in un preciso connubio tra funzionalità ed estetica, appunto.
In questo senso quindi l’UI è una forma di scrittura visiva.
L’interfaccia utente serve ad accompagnare e convertire
Se pensi che la sostanza sia più importante della forma, in questo caso dovresti ricrederti un pochino. Sì perché l’UI è l’esempio di come certe forme siano determinanti ad accompagnare verso la sostanza. C’è poco da fare: se parli un linguaggio difficile da comprendere, nessuno si impegnerà a capirti, specialmente se non ti conosce. E pure se lo facesse non è detto che ti capisca.
O che capisca quello che intendi tu.
Quindi trattare l’UI ci educa a una forma di superficialità profonda: ci insegna a essere leggeri ed essenziali per suggerire e guidare senza reciproche forzature. E la mancanza di forzature, genera agio, rispetto e fiducia. Fattori che aumentano la permanenza sul sito e la possibilità di convertire.
Te lo dico chiaramente anche in questo articolo sulla user experience se vuoi approfondire: un’esperienza utente ben congegnata genera azioni.
E l’interfaccia utente è la forma di questa esperienza.
Non ha senso vestire un armadillo con un abito elegante
Separare UI e UX può avere senso solo nell’organizzazione dei lavori dietro le quinte. Ma alla fine non vivono l’una senza l’altra. Creare un’UI fatta bene a partire da un’UX disastrosa è come vestire un armadillo con un abito elegante… non ha senso!

Sì, perché potrà pure essere simpatico. Ma fra poco ritornerà a 4 zampe, si sporcherà di terra e si libererà al più presto dell’abito per vivere da armadillo, come giusto che sia: l’hai colta l’antifona?
L’UX studia i bisogni, i comportamenti e le aspettative delle persone. Mappa i percorsi, identifica i problemi e costruisce le soluzioni. L’UI traduce queste soluzioni in elementi concreti.
Gli 8 elementi che compongono l’UI
Abbiamo capito a cosa serve l’UI, perché è importante e come è collegata all’UX. Sappiamo che l’UI non si riferisce solo a come appare il sito, ma a tutto ciò con cui l’utente può e deve interagire affinché l’esperienza sia fluida, diretta e intuitiva.
Quindi abbiamo a che fare con un sistema visivo e funzionale composto da elementi che nel loro insieme devono parlare il linguaggio dell’utente:
1) BOTTONI
I punti chiave della conversione. Devono essere ben visibili, cliccabili facilmente e con una call to action chiara. Niente fronzoli. L’utente vuole cliccare e vuole ricevere un feedback.
2) TIPOGRAFIA
Aiuta l’utente a orientarsi e a leggere senza sforzo. Quindi i font devono essere chiari, comprensibili, coerenti con il tono del brand e con una chiara gerarchia tra titoli, sottotitoli e testi del paragrafo (cosa che ti aiuta parecchio anche per piazzarti sui motori di ricerca).
3) COLORI
Non serve conoscere il neuromarketing per capire che “rosso” significa rifiuto e “verde” significa conferma. Quindi la questione è più profonda di così. I colori rappresentano l’identità visiva del brand, servono a creare contrasti, a dare feedback visivi, a indirizzare l’attenzione e a rispettare i criteri di accessibilità.
4) SPAZIATURA
Come sanno bene i musicisti, le pause sono importanti tanto quanto le note (e infatti si scrivono). Tutto è ritmo. E vale anche visivamente. Quindi gli spazi vuoti non sono mai vuoti. Ma sono il respiro dei contenuti e quindi dell’esperienza.
5) ICONE
Un solo simbolo, se inserito coerentemente al messaggio e al target, può esprimere più di mille parole. Quindi le icone sono elementi potentissimi, dal momento che nella cura dell’UI uno degli obiettivi principali è la chiarezza nell’immediato. Ma attenzione: scegliere un simbolo ambiguo o poco diffuso rischia di fare l’effetto contrario!
6) FORM E CAMPI DI INPUT
Tra le fasi più delicate nell’esperienza di navigazione, perché è una forma di azione ben più decisa rispetto visitare il sito e premere qualche bottone. Qui l’utente sceglie se mettersi in gioco veramente: decide di cliccare su delle spunte, di compilare, di dare le sue credenziali. Non saranno solo le tue parole qui a determinare queste scelte, perché sono state già prese prima. Devi solo assicurarti che per l’utente sia il più facile possibile prendere queste scelte.
7) MENU NAVIGAZIONE
La mappa rapida del sito. Con questo dai subito all’utente una chiara idea di cosa c’è nel sito e di dove andare. Se ti sembra scontato, prova a immaginare un sito senza menu, senza neanche i tasti nell’header che indicano le sezioni. Adesso immagina che un utente sia sul tuo sito con un’idea precisa di quello che vuole… perché fargli sorbire tutto il resto del sito? Perché aumentare le probabilità che se ne vada?
8) MICRO-INTERAZIONI
Si tratta di animazioni leggere, effetti hover, transizioni tra le pagine… vezzi? Abbellimenti? Col cavolo! Se usi questi elementi soltanto come aggiuntivi, stai solo appesantendo il sito web. Piuttosto, anche questi vanno concepiti in accordo col brand, col target, ma soprattutto considerando il ruolo che devono avere nell’esperienza di interazione in rapporto allo spazio in cui sono inseriti.
L’UI è un messaggio
In fondo l’UI non è neanche l’insieme di elementi che abbiamo appena visto. L’UI è comunicazione. Ogni scelta visiva manda un messaggio all’utente: può essere attenzione, vicinanza, chiarezza, fiducia… oppure confusione, trascurezza, incuria.
Si tratta di un messaggio discreto ma efficace, al servizio degli utenti e del brand.
Quindi investire nell’UI significa investire nella chiarezza, nella conversione e nel rispetto del tempo e delle energie degli utenti: cosa aspetti allora?
Contattaci per curare la progettazione e l’interfaccia del tuo sito, del tuo e-commerce o della tua app.