User Interface (UI): tutte le in­for­ma­zio­ni sulle in­ter­fac­ce utente

L’in­ter­fac­cia utente (UI) o in­ter­fac­cia grafica è la parte visibile e uti­liz­za­bi­le di un software o di un di­spo­si­ti­vo hardware. Di solito hai a di­spo­si­zio­ne elementi come pulsanti, menu e icone. Esistono però anche diversi tipi al­ter­na­ti­vi di in­ter­fac­cia, che possono essere con­trol­la­ti, ad esempio, tramite testo, voce o attività cerebrale.

Cos’è una UI (User Interface)?

Una “User Interface” o in breve UI (in italiano: “in­ter­fac­cia utente”) denomina quella piat­ta­for­ma at­tra­ver­so la quale l’utente in­te­ra­gi­sce con le macchine. Si tratta infatti dell’in­ter­fac­cia che ti permette di uti­liz­za­re un computer, ef­fet­tua­re un ordine su un negozio online oppure di uti­liz­za­re un’app sul tuo smart­pho­ne. L’in­ter­fac­cia utente comprende tutti gli strumenti di una su­per­fi­cie che l’utente vede e tramite i quali effettua azioni, che sia dalle semplici righe di comando basate su testo alle strutture com­pli­ca­te delle in­ter­fac­ce grafiche.

L’in­ter­fac­cia utente è stret­ta­men­te legata all’usabilità degli strumenti di un software o di un sito web. Quando si progetta una UI non si tratta più solo di creare un’in­ter­fac­cia utente fun­zio­na­le, ma ci si concentra anche sull’estetica e la sem­pli­ci­tà d’uso. La user ex­pe­rien­ce è diventata un punto centrale all’interno del design dell’in­ter­fac­cia utente. L’obiettivo di ogni web designer è quindi quello di gettare le fon­da­men­ta per una buona user ex­pe­rien­ce rea­liz­zan­do una UI intuitiva. Di norma ciò funziona al meglio tramite un’in­ter­fac­cia grafica, ma anche altre tipologie in­no­va­ti­ve di UI lavorano per al­leg­ge­ri­re sempre più l’in­te­ra­zio­ne con i computer e gli altri di­spo­si­ti­vi.

Quali tipologie di UI esistono?

Da quando è stato inventato il computer sono stati svi­lup­pa­ti metodi sempre più evoluti per per­met­te­re l’in­te­ra­zio­ne tra essere umano e macchina. Infatti, oggi esistono diversi tipi di in­ter­fac­cia utente. All’inizio di questa evo­lu­zio­ne c’erano semplici in­ter­fac­ce a riga di comando (CLI), ma numerose in­no­va­zio­ni tecniche come le Natural User In­ter­fa­ces (NUI) hanno portato a una gestione più semplice e diretta. Nella tabella seguente trovi una pa­no­ra­mi­ca dei metodi di in­ter­fac­cia utente più im­por­tan­ti, pre­sen­ta­ti poi sin­go­lar­men­te.

Command Line In­ter­fa­ces (CLI)

Ini­zial­men­te le in­ter­fac­ce utente erano vuote e spoglie. Sul primo computer, infatti, com­pa­ri­va­no esclu­si­va­men­te una riga di comando e un prompt sullo schermo nero, i quali in­di­ca­va­no la posizione o la richiesta d’in­se­ri­men­to. Si trattava del primo sistema operativo com­mer­cia­le della Microsoft Cor­po­ra­tion, MS-DOS. Digitando un comando si co­mu­ni­ca­va con il computer grazie a una Command Line Interface: questa in­ter­fac­cia mostrava il risultato dopo l’avvenuta ela­bo­ra­zio­ne della richiesta, na­tu­ral­men­te sempre sotto forma di testo.

Questa forma di in­ter­fac­cia utente è ormai con­si­de­ra­ta obsoleta, ma viene ancora uti­liz­za­ta ad esempio nei sistemi operativi cmd.exe di Windows, no­no­stan­te la sintassi si orienti ancora in larga misura all’antenato di DOS. L’utilizzo del computer tramite CLI avviene esclu­si­va­men­te per mezzo di una tastiera, per cui non si usa il mouse.

In sintesi:

✓ La CLI è il primo metodo per uti­liz­za­re l’in­ter­fac­cia utente (UI).

✓ Con un’in­ter­fac­cia utente basata su testo, l’in­te­ra­zio­ne è gestita tramite l’im­mis­sio­ne dalla tastiera.

✓ Gli input vengono inseriti ed eseguiti in una riga di comando (orientata alle righe).

Text User Interface (TUI)

Più pratiche nell’utilizzo sono le Text User Interface. Anche qui l’in­te­ra­zio­ne con il computer passa solamente at­tra­ver­so la tastiera. La TUI evidenzia il passaggio da pura Command Line Interface a in­ter­fac­cia utente grafica: il termine si è infatti affermato suc­ces­si­va­men­te, dopo lo sviluppo delle in­ter­fac­ce grafiche, così da di­stin­gue­re le Text User Interface dalle CLI e da quelle grafiche.

La dif­fe­ren­za rispetto alle CLI consiste nel fatto che l’in­ter­fac­cia utilizza lo schermo in maniera piatta e non orientata alle righe. Tuttavia, come già sug­ge­ri­sce il nome, l’in­ter­fac­cia viene uti­liz­za­ta in modalità testuale. In genere, sono a di­spo­si­zio­ne 256 caratteri. Le TUI vengono usate ancora oggi, ad esempio per quanto riguarda i boo­tloa­der e i programmi di setup del BIOS.

In sintesi:

✓ Le TUI sono in­ter­fac­ce testuali che uti­liz­za­no l’intero schermo e con­sen­to­no un numero di caratteri maggiore rispetto alle CLI (orientate ai caratteri).

Graphical User In­ter­fa­ces (GUI)

Og­gi­gior­no le in­ter­fac­ce grafiche (GUI) sono lo standard. Il software è uti­liz­za­bi­le at­tra­ver­so elementi di comando grafici e simboli, ispirati nella forma a oggetti del mondo reale. Gli utenti so­li­ta­men­te uti­liz­za­no il mouse e la tastiera come strumenti di controllo, ma sempre più spesso si servono anche di sensori per touch screen in grado di reagire al contatto. Assieme all’in­ter­fac­cia grafica fanno il loro ingresso nel mondo digitale anche le icone, proprio come le singole finestre e il cestino. Con il mouse, ovvero toccando il touch screen, gli elementi de­si­de­ra­ti vengono se­le­zio­na­ti e aperti con un semplice clic.

Il design grafico si orienta all’ufficio analogico tra­di­zio­na­le. La con­se­guen­za è che tutti gli elementi sono fa­cil­men­te iden­ti­fi­ca­bi­li per cui le ope­ra­zio­ni si eseguono in maniera più intuitiva rispetto alla lista dei comandi delle Command Line Interface. Persino gli utenti inesperti riescono im­me­dia­ta­men­te a capire le funzioni delle icone: né il cestino per i file da eliminare, tantomeno il simbolo della busta delle lettere per indicare il programma di posta elet­tro­ni­ca ne­ces­si­ta­no di spie­ga­zio­ni ag­giun­ti­ve per essere compresi. Nel frattempo, questa forma di sim­bo­li­smo è diventata lo standard per le UI proprio come le stesse GUI. Infatti, non esiste un programma di grafica le cui icone degli strumenti non rimandino a oggetti del mondo reale: per cui fra le altre cose si ritrovano il pennello, la penna o la gomma da can­cel­la­re.

In sintesi:

✓ Le GUI oggi sono lo standard.

✓ La GUI descrive un’in­ter­fac­cia grafica utente in cui l’utilizzo avviene tramite clic o tocco di simboli grafici.

Voice User Interface (VUI)

No­no­stan­te le in­ter­fac­ce grafiche vengano uti­liz­za­te pra­ti­ca­men­te in ogni ambito, l’evo­lu­zio­ne delle UI con le GUI è ancora lontana dal trovare una fine: con la Voice User Interface l’in­te­ra­zio­ne con le macchine è possibile anche tramite il controllo vocale. Nel frattempo, ormai qualsiasi sistema operativo attuale offre un’in­ter­fac­cia utente di questo tipo: Apple viene fornito con l’as­si­sten­te vocale Siri e anche la ricerca Google funziona ormai tramite input vocali. Dato che le ap­pli­ca­zio­ni possono essere aperte con un richiamo vocale e il testo viene digitato au­to­ma­ti­ca­men­te dettando le parole, gli utenti riescono a lavorare in maniera più efficace. Un ulteriore vantaggio: il controllo vocale assicura sempre più una maggiore ac­ces­si­bi­li­tà.

In sintesi:

✓ Le VUI offrono un’in­ter­fac­cia utente con­trol­la­ta dalla voce, che permette in­te­ra­zio­ni tramite comandi vocali.

✓ Le VUI servono per l’ac­ces­si­bi­li­tà.

Natural User Interface (NUI)

La co­mu­ni­ca­zio­ne con la macchina procede in maniera par­ti­co­lar­men­te intuitiva at­tra­ver­so una Natural User Interface. La NUI può essere con­si­de­ra­ta un passo suc­ces­si­vo nell’evo­lu­zio­ne dell’in­ter­fac­cia grafica e della Voice User Interface: l’in­ter­fac­cia di comando in­te­rat­ti­va reagisce sia ai gesti sia ai movimenti e al lin­guag­gio. In più ha la capacità di ri­co­no­sce­re i volti e gli oggetti. I diversi sensori, le vi­deo­ca­me­re e i microfoni per­met­to­no la co­mu­ni­ca­zio­ne con la macchina nei modi più dif­fe­ren­ti.

Non solo molti smart­pho­ne e tablet attuali sfruttano sempre più le tec­no­lo­gie NUI, ma anche la console Wii della Nintendo ha deciso di mettere a frutto in maniera giocosa il ri­co­no­sci­men­to dei gesti, dei volti e quello vocale. Anche molti smart­watch e di­spo­si­ti­vi o ap­pli­ca­zio­ni con realtà aumentata (AR) o realtà virtuale (VR) uti­liz­za­no tec­no­lo­gie di Natural User Interface. Il controllo tramite gesti, il ri­co­no­sci­men­to vocale e perfino il ri­co­no­sci­men­to facciale rientrano tra le funzioni chiave di questi di­spo­si­ti­vi, che rendono l’in­te­ra­zio­ne con la tec­no­lo­gia ancora più intuitiva.

Sempre più spesso le NUI vengono inoltre integrate con l’impiego dell’IA per in­ter­pre­ta­re in modo ancora più preciso gli input gestuali e vocali e in­te­ra­gi­re con il mondo fisico, con il risultato di un’espe­rien­za utente ancora più intuitiva e dinamica.

In sintesi:

✓ Le NUI con­sen­to­no un utilizzo semplice, basato su gesti, movimenti, voce e ri­co­no­sci­men­to degli oggetti.

✓ Le NUI vengono spesso integrate e ot­ti­miz­za­te con tec­no­lo­gie di in­tel­li­gen­za ar­ti­fi­cia­le.

Ge­ne­ra­ti­ve User In­ter­fa­ces (GenUI)

Un’in­ter­fac­cia utente ge­ne­ra­ti­va (spesso chiamata anche GenUI) indica una nuova forma di in­ter­fac­cia utente in cui l’in­tel­li­gen­za ar­ti­fi­cia­le genera o adatta di­na­mi­ca­men­te in tempo reale parti dell’in­ter­fac­cia stessa. Ciò significa che layout, com­po­nen­ti o fun­zio­na­li­tà cambiano au­to­ma­ti­ca­men­te a seconda di ciò che l’utente sta facendo o di cui ha bisogno. Di­ver­sa­men­te dalle classiche in­ter­fac­ce statiche, che appaiono uguali per molte persone, un’in­ter­fac­cia ge­ne­ra­ti­va può essere per­so­na­liz­za­ta, sensibile al contesto e adattata alla si­tua­zio­ne, così che per esempio in­for­ma­zio­ni, pulsanti o viste rilevanti vengano mostrate esat­ta­men­te quando servono.

In sintesi:

✓ Le GenUI sono in­ter­fac­ce utente generate di­na­mi­ca­men­te che fun­zio­na­no con l’in­tel­li­gen­za ar­ti­fi­cia­le.

✓ Ap­pren­do­no da dati e in­te­ra­zio­ni per rendere l’in­ter­fac­cia sensibile al contesto, per­so­na­liz­za­ta e adattiva.

✓ Le in­ter­fac­ce ge­ne­ra­ti­ve spostano l’at­ten­zio­ne dal design fisso verso espe­rien­ze su misura.

Quali altre tipologie di UI ci sono?

Oltre a queste forme di UI di uso quo­ti­dia­no, esistono anche alcune tipologie e in­no­va­zio­ni per così dire esotiche, che non hanno ancora raggiunto il mercato di massa: come, ad esempio, la Tangible User Interface, a sua volta ab­bre­via­ta in TUI, la Per­cep­tual User Interface (PUI) e la Brain Computer Interface (BCI). Nella tabella seguente trovi una pa­no­ra­mi­ca di queste in­ter­fac­ce utente, pre­sen­ta­te poi sin­go­lar­men­te.

Tangible User Interface

Le Tangible User In­ter­fa­ces (anch’esse ab­bre­via­te in TUI, da non con­fon­de­re con Text User Interface) sono in­ter­fac­ce utente fisiche, cioè tangibili. Questo significa che l’in­te­ra­zio­ne con la macchina avviene tramite oggetti fisici. Cubi, sfere o altri oggetti vengono ma­ni­po­la­ti dalla persona (ruotati, premuti o simili), in­ne­scan­do mec­ca­ni­smi o ri­chia­man­do in­for­ma­zio­ni digitali. Vengono uti­liz­za­te spesso nei musei o alle fiere.

Per­cep­tual User In­ter­fa­ces

Lo sviluppo delle Per­cep­tual User In­ter­fa­ces (PUI) (in italiano: “in­ter­fac­ce utente per­cet­ti­ve”) è ancora agli inizi, ma viene sempre più promosso dalla ricerca scien­ti­fi­ca. Si tratta di un’in­ter­fac­cia utente guidata dalla per­ce­zio­ne, quindi di una com­bi­na­zio­ne di VUI, GUI e di un sistema elet­tro­ni­co di ri­co­no­sci­men­to dei gesti.

Brain Computer In­ter­fa­ces

Anche le Brain Computer In­ter­fa­ces (BCI) non sono più fan­ta­scien­za: con l’aiuto di elettrodi vengono misurate le onde cerebrali e tradotte da algoritmi in comandi di controllo. La ricerca ha già ottenuto i primi successi e ha permesso, per esempio, a una paziente pa­ra­liz­za­ta negli USA di con­trol­la­re un braccio robotico con il pensiero. Le BCI po­treb­be­ro quindi un giorno ri­vo­lu­zio­na­re l’ac­ces­si­bi­li­tà nell’uso di computer o di altre macchine.

Come puoi ot­ti­miz­za­re la tua in­ter­fac­cia utente?

Chi si occupa di web design dovrebbe af­fron­ta­re ap­pro­fon­di­ta­men­te il tema delle UI: infatti, se intendi con­vin­ce­re gli utenti con la tua app o i vi­si­ta­to­ri e le vi­si­ta­tri­ci del tuo sito web o ancora avere successo con il tuo negozio online, devi chiederti come strut­tu­ra­re l’utilizzo del tuo prodotto nella maniera più intuitiva e semplice possibile. Per questo motivo è in­nan­zi­tut­to in­di­spen­sa­bi­le in­di­vi­dua­re con pre­ci­sio­ne il proprio target. Il design delle UI dovrebbe essere per­so­na­liz­za­to in base al target. La fun­zio­na­li­tà, la praticità d’uso e l’estetica sono criteri decisivi per una buona user ex­pe­rien­ce.

Primo passaggio: ottimizza l’usabilità

Per ot­ti­miz­za­re la tua UX, dovresti con­cen­trar­ti in­nan­zi­tut­to sull’in­ter­fac­cia grafica utente. Devi sempre tenere sotto controllo l’usabilità, cioè l’ef­fi­cien­za, l’efficacia e la sod­di­sfa­zio­ne delle persone che la uti­liz­za­no: se un’app è difficile da uti­liz­za­re, nemmeno un design ac­cat­ti­van­te basterà a con­vin­ce­re l’utente della tua offerta.

Per ot­ti­miz­za­re il sito web o l’app nor­mal­men­te è in­di­spen­sa­bi­le ef­fet­tua­re test det­ta­glia­ti. Gli studi con gli utenti possono fornire risultati al­tret­tan­to utili come le mi­su­ra­zio­ni tecniche grazie all’analisi per mezzo di una heatmap. Così facendo viene vi­sua­liz­za­ta l’usabilità: il com­por­ta­men­to dell’utente viene ri­co­strui­to per mezzo del trac­cia­men­to dei clic, dello scor­ri­men­to, del movimento del mouse o degli occhi e suc­ces­si­va­men­te reso con gra­da­zio­ni cro­ma­ti­che.

Secondo passaggio: con­cen­tra­ti sull’aspetto visivo

Ora che fun­zio­na­li­tà e facilità d’uso sono garantite, puoi dedicarti, nel passo suc­ces­si­vo, all’estetica del tuo progetto. Qui regna il motto: “less is more”. Il design deve sup­por­ta­re la fun­zio­na­li­tà dell’in­ter­fac­cia grafica. Di con­se­guen­za la struttura deve essere chiara e ben or­ga­niz­za­ta. Ciò non significa che i designer non si possano sbiz­zar­ri­re: l’im­por­tan­te è conoscere le abitudini d’utilizzo del target, senza limitare la fun­zio­na­li­tà con il design.

Perché le UI intuitive sono così es­sen­zia­li per il web design e lo sviluppo dei software?

Ma per quale motivo le UI intuitive sono con­si­de­ra­te così im­por­tan­ti? Proviamo a chiarirlo ser­ven­do­ci di un esempio: il simbolo di una farfalla può essere bello e con una certa pro­ba­bi­li­tà piacerà anche a diversi target. Ma se viene uti­liz­za­to come icona del tasto “Salva”, l’im­me­dia­tez­za del programma dovrà pagare le con­se­guen­ze del design, visto che pra­ti­ca­men­te nessuno associa una farfalla al processo di me­mo­riz­za­zio­ne. Invece la scelta di un dischetto come icona verrà im­me­dia­ta­men­te compresa: perché anche se il mezzo di per sé raf­fi­gu­ra­to è ormai obsoleto, verrà comunque sempre usato come simbolo per il processo di me­mo­riz­za­zio­ne.

Gli utenti si aspettano di vedere questo simbolo e lo cercano quasi istin­ti­va­men­te, come succede anche per altre icone standard. Di con­se­guen­za per pia­ni­fi­ca­re una buona user ex­pe­rien­ce e un’in­ter­fac­cia grafica com­pren­si­bi­le in maniera intuitiva, an­dreb­be­ro tenute in con­si­de­ra­zio­ne le con­ven­zio­ni sim­bo­li­che in uso.

L’esempio riportato dimostra che da web designer bisogna sempre trovare l’equi­li­brio tra estetica e fun­zio­na­li­tà per avere successo con un prodotto. L’ot­ti­miz­za­zio­ne della UI è fon­da­men­ta­le per garantire sempre all’utente la migliore espe­rien­za possibile. Infine, a seconda dell’orien­ta­men­to del sito web o del software, ciò porta a più con­ver­sio­ni o rac­co­man­da­zio­ni del prodotto.

Quale ruolo gioca l’in­ter­fac­cia grafica nell’ambito della SEO?

Una valida in­ter­fac­cia grafica ha un effetto positivo anche sull’ot­ti­miz­za­zio­ne per i motori di ricerca (SEO). Se gli utenti riu­sci­ran­no a orien­tar­si senza problemi, navigando sul tuo sito web, allora si tro­ve­ran­no bene e pas­se­ran­no vo­len­tie­ri il tempo a esplo­rar­lo: un fattore es­sen­zia­le, visto che i motori di ricerca, nel frattempo, ri­co­no­sco­no anche grazie al tempo di per­ma­nen­za quanto è rilevante una pagina web per la ri­spet­ti­va richiesta di ricerca inserita. Per questo motivo quando stai pro­get­tan­do le GUI del tuo sito web, dovresti sempre tentare di metterti nei panni del vi­si­ta­to­re e della vi­si­ta­tri­ce che sta vedendo il tuo progetto per la prima volta. Se l’utente non si trova a suo agio alla prima visita, allora ab­ban­do­ne­rà subito la pagina e si metterà alla ricerca di un’al­ter­na­ti­va migliore che sia più facile da navigare. Quindi il concetto chiave valido qui, come già nello sviluppo di software, è la na­vi­ga­zio­ne intuitiva.

Inserire link interni utili, ad esempio, può essere d’aiuto per arrivare a una buona struttura di na­vi­ga­zio­ne: in questo modo, infatti, i vi­si­ta­to­ri e le vi­si­ta­tri­ci possono muoversi da una pagina all’altra del tuo sito web. Inoltre, questi link vengono seguiti dai crawler dei motori di ricerca. I percorsi do­vreb­be­ro perciò essere sempre chiari e non troppo lunghi. Una misura sensata è ad esempio la co­sid­det­ta na­vi­ga­zio­ne brea­d­crumb, la quale rende la UI de­ci­sa­men­te più user-friendly, poiché grazie ad essa chi visita il sito ha la pos­si­bi­li­tà di tenere sempre sotto controllo dove si trova con­cre­ta­men­te sulla pagina e sa even­tual­men­te in quale punto tornare indietro.

User Interface: i migliori esempi dal mondo del web design

Siccome esistono svariate tipologie di in­ter­fac­ce utente, non è possibile elencare degli esempi per ognuna di queste. Gli esempi seguenti presi dal web design con­ten­go­no però le linee guida di base per una UI intuitiva e ne mostrano il loro uso concreto.

Evernote

Evernote è un programma per creare appunti. Le note scritte sono fa­cil­men­te sin­cro­niz­za­bi­li così che l’utente sia in grado di attingere alle proprie idee annotate a partire da qualsiasi di­spo­si­ti­vo. L’in­ter­fac­cia grafica della pagina iniziale condensa funzioni molto eleganti, campi d’ap­pli­ca­zio­ne e vantaggi, rendendo l’utilizzo dell’app un gioco da ragazzi.

Il modulo d’iscri­zio­ne è pro­get­ta­to in maniera sobria ed es­sen­zia­le. Vengono richiesti solamente un indirizzo di posta elet­tro­ni­ca e una password. In al­ter­na­ti­va, viene offerta la re­gi­stra­zio­ne tramite un account Google o Apple, riducendo no­te­vol­men­te l’impegno richiesto agli utenti per re­gi­strar­si.

Evernote è di­spo­ni­bi­le come app nativa per quasi ogni piat­ta­for­ma. L’in­ter­fac­cia grafica dell’ap­pli­ca­zio­ne web è re­spon­si­ve per cui si adatta per­fet­ta­men­te a qualsiasi di­men­sio­ne dello schermo. Anche questa scelta per il design della UI assicura una migliore user ex­pe­rien­ce, poiché l’ap­pli­ca­zio­ne può essere uti­liz­za­ta in ogni momento e da qualsiasi di­spo­si­ti­vo.

Google

Google lo conoscono tutti: uno dei tanti motivi della sua po­po­la­ri­tà è che la sua in­ter­fac­cia utente è allo stesso tempo semplice e fun­zio­na­le ma anche vi­si­va­men­te ac­cat­ti­van­te. Una barra di ricerca e due pulsanti bastano già per una delle tec­no­lo­gie più ri­vo­lu­zio­na­rie della storia dei computer che ha optato per uno sfondo estre­ma­men­te ridotto e tra­di­zio­nal­men­te bianco. Sono stati esclusi design frivoli ed esercizi di stile superflui, come anche i menu in­ca­stra­ti l’uno nell’altro. Cio­no­no­stan­te, l’azienda prova che non le manca il senso dell’umorismo con i suoi doodle creativi applicati alla scritta “Google”, al­leg­ge­ren­do il design in occasioni speciali, ov­via­men­te senza mai com­pro­met­te­re l’usabilità.

Le icone delle app per YouTube, News, Maps e così via sono a comparsa e facili da trovare con un semplice clic. Inoltre, sono di immediata com­pren­sio­ne, logiche ed evi­den­zia­no la loro funzione prin­ci­pa­le con l’immagine simbolo che le rap­pre­sen­ta. In più, con l’im­ple­men­ta­zio­ne di un’in­ter­fac­cia VUI il motore di ricerca diventa un modello da imitare: in questo modo, infatti, Google è in grado di com­pren­de­re le ricerche vocali, anche tramite l’app per di­spo­si­ti­vi mobili. Quando attivi Voice Match, l’as­si­sten­te impara a ri­co­no­sce­re la tua voce e ti fornisce risultati per­so­na­liz­za­ti.