Cos’è una Graphical User Interface (GUI)?

I tempi in cui i computer erano materia esclusiva di scien­zia­ti e svi­lup­pa­to­ri software sono ormai lontani. Al giorno d’oggi, pra­ti­ca­men­te tutti possono uti­liz­za­re un PC o un tablet, spesso anche senza una par­ti­co­la­re co­no­scen­za in­for­ma­ti­ca pre­e­si­sten­te. Ma questo ha richiesto lo sviluppo di in­ter­fac­ce grafiche, una forma di in­ter­fac­cia utente.

I primi concetti di in­ter­fac­cia grafica utente sono stati in­tro­dot­ti negli anni '70 dalla società Xerox. L’obiettivo prin­ci­pa­le era quello di uti­liz­za­re i PC con il mouse e la tastiera, anziché usare le istru­zio­ni testuali. Xerox Alto è stato il primo PC dotato di GUI. Negli anni '80 seguì Apple con il Macintosh. Con lo sviluppo di smart­pho­ne e tablet, il principio dell’in­ter­fac­cia grafica si è evoluto in modo si­gni­fi­ca­ti­vo, tanto che oggi i display si possono usare anche con movimenti delle dita e gesti.

GUI è l’in­ter­fac­cia che consente l’in­te­ra­zio­ne uomo-macchina. Il suo scopo è quello di ri­pro­dur­re il codice nel back end di un sistema nel modo più semplice possibile, per sem­pli­fi­car­ne il lavoro quo­ti­dia­no. I simboli e le immagini sono par­ti­co­lar­men­te im­por­tan­ti in questo caso, perché con­sen­to­no un utilizzo uni­ver­sa­le e in­di­pen­den­te dal testo. Per esempio, quasi tutti sanno com’è fatta l’icona del Wi-Fi, mentre la parola che la indica può variare da una lingua all’altra.

La GUI è un’in­ter­fac­cia utente che permette agli utenti di co­mu­ni­ca­re con il computer. L’in­te­ra­zio­ne più comune è tramite mouse e tastiera (anche se nel frattempo è diventato sempre più im­por­tan­te il comando tramite gesti): quando muoviamo il mouse di un computer, il cursore si muove sul nostro schermo. Il segnale del di­spo­si­ti­vo viene trasmesso al computer, che lo traduce nel movimento cor­ri­spon­den­te sullo schermo. Ad esempio, quando un utente clicca su una de­ter­mi­na­ta icona di un programma nel menu di selezione, viene eseguita l’ap­pli­ca­zio­ne cor­ri­spon­den­te e il programma viene aperto.

L’in­ter­fac­cia grafica è quindi una sorta di tra­dut­to­re nella co­mu­ni­ca­zio­ne uomo-macchina. Senza l’in­ter­fac­cia grafica, i programmi e le ap­pli­ca­zio­ni an­dreb­be­ro ri­chia­ma­ti tramite comandi nella riga di comando. Il comando per aprire Explorer, ad esempio, ap­pa­ri­reb­be così:

Una Graphical User Interface combina l’aspetto grafico e le funzioni di pro­gram­ma­zio­ne, offrendo pulsanti, menu a tendina, campi di na­vi­ga­zio­ne, campi di ricerca, icone e widget. Gli svi­lup­pa­to­ri devono porre par­ti­co­la­re at­ten­zio­ne alla facilità di utilizzo. Le com­po­nen­ti prin­ci­pa­li della GUI sono:

• Caselle
• Finestre
• Canvas
• Frame
• Pulsanti
• In­te­sta­zio­ni
• Campi di testo

Il cestino è un buon esempio di elemento che si trova nella maggior parte dei sistemi operativi ed è rap­pre­sen­ta­to gra­fi­ca­men­te come un cestino sia su Windows, sia su Mac. Questo rende im­me­dia­ta­men­te chiaro all’utente a cosa serva il cestino: eliminare documenti e file.

Quando scrivono le GUI, gli svi­lup­pa­to­ri si affidano alla pro­gram­ma­zio­ne basata su eventi perché non possono prevedere cosa farà l’utente. Pertanto, le GUI non possono essere pro­gram­ma­te in modo im­pe­ra­ti­vo, ma devono essere scritte in modo da eseguire un comando solo quando l’utente dà il segnale.

Un’in­ter­fac­cia grafica efficace deve prima di tutto agevolare l’espe­rien­za utente. Durante la pro­get­ta­zio­ne, è im­por­tan­te che la GUI consenta una gestione intuitiva da parte dell’utente. Pertanto, per rag­giun­ge­re quest’obiettivo, è ne­ces­sa­ria una buona com­pren­sio­ne delle esigenze e delle pre­fe­ren­ze degli utenti. Un design orientato alla user ex­pe­rien­ce mira a fornire all’utente ciò che si aspetta dall’ap­pli­ca­zio­ne. Quando si sviluppa una GUI bisogna as­so­lu­ta­men­te tenere conto dei seguenti aspetti:

• In­ter­fac­ce semplici: si consiglia di evitare elementi di design non necessari e di scegliere de­no­mi­na­zio­ni semplici e fa­cil­men­te com­pren­si­bi­li.
• Layout orientato allo scopo: ogni pagina deve essere ben strut­tu­ra­ta e ogni elemento deve svolgere una funzione chiara.
• Coerenza: quando si uti­liz­za­no più com­po­nen­ti ed elementi di grafica, è im­por­tan­te che vi sia armonia tra loro.
• Design e ti­po­gra­fia: le unità di design, i colori e il testo devono evi­den­zia­re gli elementi in primo piano o in back­ground. È anche im­por­tan­te uti­liz­za­re font e di­men­sio­ni dei caratteri che siano ap­pro­pria­ti alla funzione e fa­cil­men­te ri­co­no­sci­bi­li.
• Ag­gior­na­men­ti degli utenti: una GUI dovrebbe anche informare su errori e cam­bia­men­ti di stato.

Le in­ter­fac­ce utente grafiche si sono affermate perché offrono agli utenti numerosi vantaggi, ma pre­sen­ta­no anche qualche svan­tag­gio. Vi spie­ghia­mo i punti di forza e di debolezza delle GUI nella tabella sot­to­stan­te.