Interfacce grafiche: storia, utilizzo e terminologia
Il mondo delle interfacce grafiche è ricco di sfaccettature che concorrono al funzionamento e al gradimento estetico del prodotto tecnologico col quale l’utente si interfaccia. L’avvento delle interfacce grafiche, a seguito di lunghi anni di ricerca e sviluppo, ha infatti segnato un momento decisivo nella storia dell’informatica e del modo in cui gli utenti si rapportano con computer e macchine.
Per conoscere il mondo delle interfacce grafiche è necessario ripercorrere la strada che ha portato alla loro invenzione, per capire come queste hanno cambiato l’approccio umano coi dispositivi tecnologici e comprenderne le peculiarità.
Prima dell’avvento delle interfacce grafiche per far svolgere determinate attività a un computer era necessario scrivere una riga di comando, ovvero una riga di testo che doveva rispettare una sintassi ben precisa. Tutto ciò avveniva attraverso l’utilizzo di uno schermo e di una tastiera, su una cosiddetta interfaccia a riga di comando (CLI) che, in risposta a comandi testuali, forniva risposte testuali.
Verso la fine degli anni Sessanta, inizia un momento spartiacque per la storia dell’informatica: il gruppo di ricercatori guidato da Alan Kay e Douglas Engelbart della Xerox al PARC (Palo Alto Research Center) in California, cerca un modo per far interagire gli utenti con i computer tramite elementi grafici come icone, pulsanti e finestre, senza che sia necessario inserire istruzioni testuali. Questa interazione tra utente e oggetti grafici avviene attraverso il puntatore del mouse: nasce così un nuovo strumento fondamentale.
Ciò voleva dire non dover più conoscere e inserire tramite tastiera i comandi, ma poter cliccare su di un’illustrazione di facile interpretazione.
Successivamente, nel 1981 Xerox lancia il sistema Xerox Star, seguita da Apple che nel 1984 lancia il Macintosh. Questo computer possedeva un’interfaccia utente intuitiva, anche se ancora in bianco e nero. È infatti proprio il Macintosh a introdurre il concetto di “desktop”, creato per posizionare le icone dei file e delle applicazioni che, una volta selezionate col puntatore del mouse, sono in grado di avviare le applicazioni. Un anno dopo arriva l’interfaccia grafica di Atari, in versione monocromatica; la stessa Atari è poi la prima azienda a rendere le interfacce grafiche disponibili a colori. Sempre nel 1985 anche Microsoft introduce la GUI (Graphical User Interface) con il lancio di Windows 1.0. La GUI diventa così ancora più diffusa e semplice da usare: permette infatti di aprire più finestre contemporaneamente e di navigare passando da una all’altra rapidamente, facendo presto di Windows il sistema operativo più diffuso al mondo.
Oggi, con il massiccio utilizzo degli smartphone dotati di un’interfaccia grafica accattivante e di molte applicazioni gratuite, si tende a pensare che sviluppare interfacce sia un compito alla portata di tutti, ma spesso non è così.
Le interfacce grafiche non sono infatti solo ciò che l’utente tocca con mano e percepisce, ma si articolano su diversi livelli: il back-end, che interagisce con l’hardware e i dati, e il front-end, ovvero ciò che l’utente vede e utilizza.
Un’ulteriore distinzione va fatta tra la grafica degli smartphone, la grafica del mondo web e la grafica in ambito industriale.
Nei contesti industriali, infatti, spesso si dà minor peso all’aspetto estetico, perché la caratteristica fondamentale è la funzionalità del dispositivo o macchinario. Nelle interfacce web invece, a differenza di quelle degli smartphone che hanno solitamente pochi tasti grandi e ben comprensibili, l’interfaccia grafica è più articolata. Perciò, per ogni contesto di utilizzo, target di clienti e dispositivo è necessario valutare che tipo di interfacce grafiche sia meglio sviluppare e utilizzare.
I contesti di utilizzo delle interfacce grafiche non si limitano però a questi, più ovvi e conosciuti. Un altro possibile settore d’impiego è ad esempio quello degli elettrodomestici: dai modelli base, dove l’interfaccia è in realtà quella dell’applicazione su un dispositivo esterno (ad esempio l’app che consente di controllare la lavatrice da remoto, quindi di nuovo un’interfaccia grafica per smartphone), ad interfacce più complesse come quelle dei frigoriferi dotati di telecamera interna e di funzioni in grado di vedere le scadenze degli alimenti. In questo secondo caso, l’interfaccia grafica è implementata direttamente nell’elettrodomestico. Ad oggi, tutti gli elettrodomestici che possiedono schede elettroniche hanno alla base una programmazione, anche se non tutti necessitano di un’interfaccia grafica.
Altri esempi di dispositivi che possono essere dotati di interfacce grafiche sono gli sportelli bancomat, le automobili, le casse automatiche dei supermercati, i distributori di benzina, i terminali di pagamento con carte di credito ecc.
Ma cos’è un’interfaccia grafica? Come si struttura dal punto di vista dell’esperienza utente?
Come abbiamo visto, le interfacce grafiche nel linguaggio informatico vengono chiamate GUI (ovvero Graphical User Interface, in italiano “interfaccia grafica utente”) e insieme all’HMI (ovvero Human-Machine Interaction, in italiano “interazione uomo-macchina”) in ambito industriale e all’HCI (ovvero Human-Computer Interaction, in italiano “interazione uomo-computer”) quando si parla di computer, contribuisce alla UI (ovvero User Interface, in italiano “interfaccia utente”) che a sua volta concorre a costruire la UX (ovvero User Experience, in italiano “esperienza utente”).
In primis è necessario capire di cosa si parla quando si nomina la UX e in cosa questa differisce dalla UI.
La UX si occupa della strutturazione dell’interfaccia utente e delle sue funzionalità nel definire l’interazione dell’uomo con qualsiasi dispositivo. Per riuscirci studia, ad esempio, il tempo necessario per completare dei task, il tasso di successo e analizza gli errori compiuti. La sua accezione è più strettamente legata al marketing e alla comunicazione: la UX riguarda ad esempio l’analisi e l’ottimizzazione di tutti i passaggi che semplificano la navigazione dell’utente all’interno di un sito web, rendendola un’esperienza naturale e facilitando l’esecuzione di azioni e ricerche.
La UI invece è un tema prettamente grafico e riguarda l’estetica in relazione alla semplicità di navigazione: prende per esempio in considerazione come vengono realizzati pulsanti, testi e cursori, o come vengono scelti immagini, layout, animazioni, font, colori, caselle di testo, menù a tendina ecc. Chi progetta la UI si occupa quindi dell’estetica in relazione alla praticità e all’intuitività d’uso.
Inoltre, progettare una buona grafica significa anche riflettere correttamente la Brand Identity, facendo sì che UI e UX ben completino l’identità di un brand.
La UI non ha solo uno scopo estetico ma anche funzionale: immagini, icone, testi, comandi cliccabili a cui corrisponde un’azione servono infatti per mettere in relazione l’utente con il software, che per sua definizione è immateriale, attraverso l’utilizzo di elementi concreti come mouse, tastiera, schermo, microfono ecc. Il programma e il sistema operativo traducono poi questi comandi in azioni che influenzano le informazioni e le azioni del computer.
Lo svantaggio che le interfacce grafiche possono portare con sé è una minore flessibilità: possono infatti essere eseguite solo indicazioni pre-programmate a livello di GUI.
Per progettare correttamente una UI è necessario tenere in considerazione alcuni aspetti:
– chiarezza: le interfacce grafiche devono essere leggibili e di facile fruizione;
– coerenza: deve esserci ad esempio uniformità nell’associare un colore a un’icona o a un’oggetto, che deve essere mantenuta per tutta la progettazione grafica;
– familiarità: si devono rendere riconoscibili gli elementi dell’interfaccia sfruttando le convenzioni grafiche, come ad esempio il triangolo per indicare “play” o il carrello negli e-commerce;
– flessibilità: si deve favorire un formato responsive che si adatti a diversi dispositivi;
– misura: bisogna dare all’utente il giusto numero di input, affinché egli non venga “bombardato”;
– controllo: l’utente deve avere la possibilità di controllare ciò che accade, anche se questo significa limitare azioni come aperture eccessive di popup automatici e similari.
Inoltre, quando si parla di mondo web, la UI deve tenere in considerazione aspetti rilevanti per la SEO: se i pulsanti sono troppo piccoli o non c’è sufficiente contrasto tra i colori, Google farà infatti scendere il posizionamento della pagina mal progettata sotto questo punto di vista.
La UI non è da confondersi con la GUI. Con GUI si indica l’interfaccia grafica di un qualunque programma. La GUI è la rappresentazione visiva che include elementi come icone, cursori e pulsanti, che progetta a livello di design la UI. La GUI è quindi un sottoinsieme della UI, orientata alla UX.
Quando si sviluppa una GUI occorre essere orientati alla creazione di interfacce semplici con elementi di design facilmente comprensibili e di layout orientati allo scopo, in cui ogni elemento deve svolgere una funzione chiara.
Le GUI hanno avuto origine nel mondo dei PC, a differenza delle HMI che invece sono nate nel campo dell’automazione industriale.
Le HMI consentono di controllare una macchina o attrezzatura, guidandola nell’esecuzione di determinati compiti. Alcune HMI sono costituite esclusivamente da manopole, leve e pulsanti senza uno schermo. In altri casi, incorporano la GUI per produrre immagini digitali per l’interfaccia.
Un’ulteriore distinzione esiste tra HMI e HCI: queste ultime permettono infatti di controllare i computer che archiviano ed elaborano i dati. Un esempio di HCI sono i touch screen e le periferiche come mouse e tastiere, se utilizzate per controllare un computer.
Non sempre è necessario sviluppare interfacce grafiche, ma quando occorre farlo scegliere il giusto programma è fondamentale.
Ad esempio, banalmente, non è necessario sviluppare un’interfaccia grafica quando la macchina con cui si va ad interagire non è provvista di schermo.
Quando invece si devono prevedere dei programmi con interfacce grafiche, un framework che permette di svilupparne di moderne e intuitive è qt, ideale per app multi-piattaforma.
Un linguaggio di programmazione molto utilizzato per lo sviluppo di interfacce grafiche è poi Python.
In generale, le interfacce grafiche possono essere più o meno complesse ed articolate: in base al risultato desiderato, può essere sufficiente l’intervento dello sviluppatore, altre volte invece è necessario anche l’intervento di un team grafico dedicato.