In­ter­fac­cia grafica: quali sono le ca­rat­te­ri­sti­che di un’in­ter­fac­cia grafica efficace?

I web designer, gli svi­lup­pa­to­ri di software e tutti coloro che stanno studiando per diventare tali, si im­bat­te­ran­no prima o poi nell’espres­sio­ne “in­ter­fac­cia grafica”. Anche le relative ab­bre­via­zio­ni come UI, TUI (Text User Interface) e GUI (Graphical User Interface) sono spesso motivo di per­ples­si­tà. Eppure proprio l’ultima è al giorno d’oggi di fon­da­men­ta­le im­por­tan­za per una buona user ex­pe­rien­ce, che sia su un sito web o uti­liz­zan­do un software. Molti non addetti ai lavori si chiedono cosa sia esat­ta­men­te l’in­ter­fac­cia grafica. E per quale motivo l’in­ter­fac­cia grafica è così im­por­tan­te per il successo di un sito web? La nostra guida contiene le in­for­ma­zio­ni es­sen­zia­li per pro­get­ta­re un buon design dell’in­ter­fac­cia utente e offre de­lu­ci­da­zio­ni su cosa si­gni­fi­chi nella pratica il termine “UI”.

Una “User Interface” o bre­ve­men­te 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 vi 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 vostro 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. Al contempo l’UI fa anche sì che la macchina invii un feedback all’utente di modo che quest’ultimo possa avere la conferma che la sua azione sia stata ef­fet­tua­ta con successo.

L’in­ter­fac­cia utente è stret­ta­men­te legata all’usabilità degli strumenti di un software o di un sito web. Da tempo ormai non si tratta più esclu­si­va­men­te di rea­liz­za­re un’in­ter­fac­cia che sia pret­ta­men­te fun­zio­na­le: ora anche gli aspetti estetici sono sempre più im­por­tan­ti. E al­tret­tan­to fon­da­men­ta­le è la UI per as­si­cu­ra­re una buona user ex­pe­rien­ce, ossia l’intera espe­rien­za che un utente raccoglie visitando un sito web o uti­liz­zan­do un software. 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.

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 ad oggi esistono diversi tipi di in­ter­fac­cia utente. Al principio di questa evo­lu­zio­ne c’erano i semplici Command Line In­ter­fa­ces (CLI), ma numerose in­no­va­zio­ni tecniche hanno in seguito portato a un’usabilità più immediata e diretta, per cui da tempo si è co­min­cia­to ad usare anche le Natural User In­ter­fa­ces (NUI). Esiste persino l’utilizzo di di­spo­si­ti­vi per la mi­su­ra­zio­ne delle attività celebrali (o meglio: EEG, ovvero “elet­troen­ce­fa­lo­gram­ma”), che sono sempre più oggetto di ricerche. A seguire in­tro­dur­re­mo le UI che spiccano, rias­su­men­do­ne le pe­cu­lia­ri­tà prin­ci­pa­li.

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, l’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.

Più pratici 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. Il termine è quindi un retronimo.

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. I pro­gram­ma­to­ri hanno a di­spo­si­zio­ne 256 caratteri dedicati a questo. Le TUI vengono uti­liz­za­te ancora oggi, ad esempio per quanto riguarda i boo­tloa­der e i programmi di setup del BIOS.

Og­gi­gior­no le in­ter­fac­ce grafiche sono lo standard. Il software è uti­liz­za­bi­le at­tra­ver­so elementi di comando 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 click.

Il design grafico si orienta al tra­di­zio­na­le ambiente da ufficio analogico. 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.

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 ha Siri, Microsoft attrezza le versioni attuali di Windows con Cortana e, premesso che sia presente il giusto hardware, anche la ricerca di Google funziona per mezzo di in­se­ri­men­ti vocali. Siccome 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à.

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 camere 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.

Una pre­sen­ta­zio­ne di un progetto di Microsoft ha attirato l’at­ten­zio­ne nel 2011: è stata svi­lup­pa­ta una tec­no­lo­gia con il nome di OmniTouch che proietta la funzione touch screen su qualsiasi su­per­fi­cie im­ma­gi­na­bi­le. OmniTouch si basa sul sistema di motion control Kinect di Microsoft, il quale è stato in­tro­dot­to sul mercato per la console Xbox 360 in risposta al con­cor­ren­te Nintendo Wii. Oltre a ciò entrano in azione anche un pro­iet­to­re laser e una vi­deo­ca­me­ra speciale. Questa speciale forma di Natural User Interface viene svi­lup­pa­ta anche per l’utilizzo su di­spo­si­ti­vo mobile e in questo caso l’hardware si porta sulla spalla.

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, anch’essa ab­bre­via­ta in TUI, la Per­cep­tual User Interface (PUI) e la Brain Computer Interface (BCI).

• Le Tangible User Interface (TUI) sono in­ter­fac­ce utente oggetto, quindi tangibili. Ciò significa che l’in­te­ra­zio­ne con la macchina avviene tramite oggetti fisici: che siano dadi, palline o altri oggetti ma­ni­po­la­bi­li dalle persone (ad esempio rigirati o schiac­cia­ti), grazie ai quali vengono eseguiti i mec­ca­ni­smi oppure vengono richieste le in­for­ma­zio­ni digitali. Le Tangible User Interface vengono spesso uti­liz­za­te nei musei e alle fiere.

• Lo sviluppo di Per­cep­tual User Interface (PUI) si trova ancora a uno stadio em­brio­na­le, ma la ricerca prosegue. Si tratta di un’in­ter­fac­cia utente con­trol­la­ta dalla per­ce­zio­ne, ovvero una con­nes­sio­ne tra VUI, GUI e un ri­co­no­sci­men­to elet­tro­ni­co dei gesti.

• Anche la Brain Computer Interface (BCI) non è più fan­ta­scien­za: con l’aiuto di elettrodi i flussi celebrali vengono misurati e tradotti in comandi dagli algoritmi. I ri­cer­ca­to­ri hanno potuto già celebrare i primi successi: negli Stati Uniti una paziente pa­ra­liz­za­ta è riuscita a manovrare un braccio robotico con il pensiero. Come tale le BCI prima o poi po­treb­be­ro ri­vo­lu­zio­na­re l’utilizzo senza barriere dei computer o di altre macchine.

Ogni web designer o svi­lup­pa­to­re di software dovrebbe af­fron­ta­re ap­pro­fon­di­ta­men­te il tema delle UI: perché se intendete con­vin­ce­re gli utenti con la vostra app o i vi­si­ta­to­ri del vostro sito web o ancora avere successo con il vostro negozio online, dovete chiedervi come strut­tu­ra­re l’utilizzo del vostro 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. Di norma per prima cosa dovete con­cen­trar­vi sull’in­ter­fac­cia grafica; la fun­zio­na­li­tà, la praticità d’uso e l’estetica sono criteri decisivi per una buona user ex­pe­rien­ce. Pro­get­tan­do la vostra in­ter­fac­cia grafica, non dovete mai perdere d’occhio il fattore dell’usabilità: 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 con la vostra 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 click, dello scrolling, del movimento del mouse o degli occhi e suc­ces­si­va­men­te reso con gra­da­zio­ni cro­ma­ti­che. Solo nel secondo passaggio si arriva all’estetica. 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 quindi 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.

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 un target o a un altro. 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 o da svi­lup­pa­to­re di software 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, rac­co­man­da­zio­ni e a una com­mer­cia­liz­za­zio­ne del prodotto virale, quindi sup­por­ta­ta dal cliente.

Oltre alla GUI vale la pena anche di integrare ulteriori in­ter­fac­ce utente: se ad esempio è possibile uti­liz­za­re il controllo vocale con un’app o se un notebook funziona anche con il touch screen, il risultato sarà una maggiore ac­ces­si­bi­li­tà e porterà a una migliore user ex­pe­rien­ce. In questo modo gli utenti hanno una varietà di pos­si­bi­li­tà più ampia di uti­liz­za­re il prodotto. Ciò fa sì che ci sia più fles­si­bi­li­tà e che il raggio d’azione dell’app e del prodotto aumenti.

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 ad orien­tar­si senza problemi, navigando sul vostro 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 state pro­get­tan­do le GUI del vostro sito web, dovreste sempre tentare di mettervi nei panni del vi­si­ta­to­re che sta vedendo il vostro 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 na­vi­ga­zio­ne: in questo modo, infatti, i vi­si­ta­to­ri possono muoversi da una pagina all’altra del vostro 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. Un prov­ve­di­men­to sensato è ad esempio la co­sid­det­ta brea­d­crumb na­vi­ga­tion, la quale rende la UI de­ci­sa­men­te più user-friendly, poiché grazie ad essa il vi­si­ta­to­re 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.   A questo scopo il percorso ef­fet­tua­to sul sito web viene indicato in aggiunta alle barre di menu po­si­zio­na­te in alto o di lato. In un negozio online di ab­bi­glia­men­to potrebbe ad esempio apparire quanto segue: Homepage – Moda Donna – Pantaloni – Jeans. Di norma una simile na­vi­ga­zio­ne brea­d­crumb si trova nella parte centrale sopra il content, come ad esempio nella nostra Digital Guide. Ulteriori in­for­ma­zio­ni riguardo ai link interni dalla pro­spet­ti­va della SEO e per una buona struttura del sito web potete trovarle in questo articolo della nostra guida.

Siccome esistono svariate tipologie di in­ter­fac­ce utente, non è possibile elencare degli esempi per ognuna di queste. I seguenti esempi 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.

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, dopodiché si può già iniziare. Una struttura del genere è de­ci­sa­men­te più user-friendly di un modulo di iscri­zio­ne chi­lo­me­tri­co. Ancora più comodo è la pos­si­bi­li­tà di re­gi­strar­si con un account di Google senza che sia ne­ces­sa­rio creare un profilo apposito.  Un’altra ca­rat­te­ri­sti­ca im­por­tan­te, im­me­dia­ta­men­te visibile all’utente, è l’accesso a partire da qualsiasi di­spo­si­ti­vo e in ogni momento.

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.

Le icone delle app per YouTube, News, Maps e così via sono a comparsa e facili da trovare con un semplice click. 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. Una volta che sarà calibrato sulla propria voce, la ricerca funziona anche con gli in­se­ri­men­ti vocali e si attiva pro­nun­cian­do “OK Google”.

A pre­scin­de­re che si scelga il percorso generico o quello specifico per gli am­mi­ni­stra­to­ri, ad ogni utente vengono pre­sen­ta­ti i settori tematici adeguati e le im­po­sta­zio­ni di supporto. Anche la na­vi­ga­zio­ne è chiara: più ci si addentra all’interno delle pagine, passando da una categoria ai temi specifici, più la pagina scorre verso destra. Grazie all’aiuto delle frecce è possibile procedere e re­tro­ce­de­re, così da ap­pro­fon­di­re un tema o saltarlo e passare alla scheda suc­ces­si­va o a quella pre­ce­den­te. Per ogni evenienza l’indice rimane sempre a portata di click. Grazie alla rea­liz­za­zio­ne grafica in toni pastello e alla pratica na­vi­ga­zio­ne, l’in­ter­fac­cia grafica riesce a con­ci­lia­re estetica a usabilità.