PROGETTAZIONE DI GUI - PARTE VI

Sesta parte della rubrica dedicata alla progettazione di interfacce grafiche; se vi siete persi gli articoli precedenti vi invito a guardare la sezione dedicata. Con questo articolo viene chiuso il cerchio riguardo questo argomento presentando finalmente esempi pratici su come le interfacce devono essere costruite.

La distrazione

Lasciamo perdere per un attimo tutti i grandi discorsi affrontati negli articoli precedenti riguardo minimalismo e semplicità, soffermiamoci sul motivo scatenante: la distrazione. Un utente NON deve essere distratto dalla interfaccia grafica, anzi deve essere accompagnato e aiutato nella ricerca delle operazioni che desidera compiere.

L'effetto cartellone pubblicitario

Uno degli esempi fondamentale si ha con i cartelloni pubblicitari, che riescono ad attirare l'attenzione al prodotto attraverso cose (hooks) che attirano l'attenzione, una interfaccia deve riuscire a contenere degli hooks in grado di rispondere alle richieste dell'utente. Se in una interfaccia di termostatazione (regolazione di temperatura) deve essere chiaro DOVE inserire il set point e mostrare L'EFFETTO che si avrebbe con un tale valore (6 gradi il fiocco di neve, 30 gradi il sole raggiante).

La nausea da sito web anni 2000

Come detto nel secondo articolo negli anni 90/2000 c'è stato il BOOM dei siti pieni di GIF animate e quant'altro. Quei siti, nonostante fossero futuristici come grafica (mi vien da ridere) erano una vera e propria distrazione per l'utente! Cercate dei siti come quelli a giro per il web, ce ne sono ancora a giro, vedrete in un attimo che è difficile anche solo leggere il contenuto con quei colori a contrasto, animazioni e sfondi colorati.

Nel mio settore, l'automazione industriale, è ancora presente un trend immortale: le animazioni. Se in un impianto deve esserci un motore che gira un elica, questa deve girare quando il motore è acceso (quando basterebbe una semplice icona ON/OFF). Ho trovato impianti dove lo schermo era letteralmente INVASO da animazioni di questo tipo, non riuscivo nemmeno a capire se l'impianto stava andando o se stava prendendo il volo con tutte quelle eliche!

Guardiamo ora due foto:

La prima per noi maschietti toglierà la nostra attenzione dall'argomento della interfaccia distraendoci dall'ottenere l'informazione giusta. La seconda invece darà una chiara risposta immediata alle nostre necessità di utilizzo.

Analogico vs Digitale

Sempre restando in tema di numeri è interessante sapere l'importanza dell'analogico e del digitale. C'è chi preferisce uno o l'altro, io sono dell'idea che, come molte altre cose, devi sapere quando usare una visualizzazione digitale e quando una analogica. Facciamo una serie di esempi (A=analogico, D=digitale):

• Controllo della capienza di un serbatoio.
  (A) un misuratore che indica con una lancetta la capienza ti aiuta a capirne il contenuto senza badare all'unità di misura. aggiungendo anche delle aree colorate per indicare una zona critica, si riesce ad aiutare l'utente a capire la situazione critica.
  (D) il valore in Kg del serbatoio non da alcuna informazione aggiuntiva al fatto che sia vicino al limite di capienza. l'unico modo per rendere efficacie una visualizzazione digitale è quella di riportare un valore percentuale, utile a capire la capienza massima.
• Tabellone di orario di lavoro
  (A) un orologio analogico non rende l'idea di che ore sono con la stessa immediatezza di un orologio digitale
  (D) se un operaio deve lavorare dalle 08 alle 17, attraverso un orologio digitale sarà in grado di capire se è l'ora di andare a casa.
• Registrazione di un peso
  (A) Una bilancia analogica non riesce a fornire un valore così preciso portando l'utente ad effettuare delle approssimazioni
  (D) Una bilancia digitale fornisce un numero preciso che può essere "copiato ed incollato" così com'è senza portare l'utente a sbagliare.
• Capienza di un magazzino
  (A) Una visualizzazione grafica di un magazzino che si riempie aiuta a capire la situazione
  (D) Un numero espresso in quantità di colli e prodotti non aiuta a capire la capienza del magazzino. L'unico modo per aiutare è inserire anche la quantità massima fornendo un valore di rapporto.

Di esempi potremmo riempire questa pagina, meglio non esagerare.

Colori e simboli

Come ultimo punto di questa interessante guida abbiamo i colori e simboli. Due componenti che NON possono essere slegate fra loro. I colori (che possono essere fraintesi da persone con problemi di vista) associati alle immagini sono più efficaci di 100 parole. Vediamo tre immagini:

Ognuna di queste immagini fornisce, attraverso un numero, un colore ed un simbolo, la precisa situazione in cui ci troviamo.

Ora facciamo un'altro esempio di come i colori e i simboli non bastano e serve una visualizzazione grafica:

La prima immagine da sola fornisce solo un problema per chi la osserva. La prima impressione che si ha è che il sistema sia in allarme e l'errore sia presente e grave. In realtà se guardiamo la seconda immagine notiamo come si, siamo a 40°C ma siamo molto vicini la soglia di warning quindi ancora in grado di riprendere il controllo della situazione. 

Conclusione

Spero di essere riuscito a fornire quanti più strumenti possibili per la realizzazione di interfacce grafiche utili a questo scopo. Fatemi sapere se siete interessati ad un ulteriore approfondimento di questi argomenti lasciando un commento o attraverso la pagina ufficiale Facebook.

Prima di lasciarvi vi invito a leggere questo interessante libro da cui molte delle mie conoscenze provengono o sono state fortificate (il prezzo potrebbe essere un po' eccessivo ma sappiate che è un libro altamente professionale)