PROGETTAZIONE DI GUI - PARTE II

Secondo appuntamento della rubrica dedicata alla progettazione di GUI per dispositivi embedded (smartphone e devices). Se vi siete persi la parte 1 seguite questo link, buona lettura.

Semplicità

La semplicità è una caratteristica fondamentale. Naturalmente è anche un concetto puramente soggettivo: un programmatore esperto ritiene la shell unix un luogo rilassante con cui lavorare, un principiante invece si trova più a suo agio nella nuova interfaccia Metro di Windows 8, quindi fondamentalmente "la semplicità è relativa". La rimozione di componenti difficili da usare, poco intuitivi e ridondanti, che occupano spazio sullo schermo, può aumentare la semplicità del tuo sistema anche se, prima di sviluppare l'interfaccia più semplice del mondo, dovrai farne e rifarne almeno un centinaio nel corso della tua vita.

Evoluzione nel tempo

Nel lontano 1985 l'introduzione del linguaggio Clipper poteva sembrare una rivoluzione nello sviluppo di interfacce grafiche alle applicazioni, con l'introduzione degli ambienti a finestre la Microsoft ha costruito un intero sistema operativo e la fortuna su cui ora si poggia. Anche le bistrattate GIF sono state a tutti gli effetti una rivoluzione, soprattutto con l'avvento di Internet e dei siti le cui primitive animazioni venivano fatte con questa tecnologia. Siamo passati, con gli anni, da una interfaccia grafica statica ad una dinamica, da spigoli netti a spigoli morbidi, da una interfaccia mono colore ad una multi colore. Tuttavia il trend della moda in questo settore segue quello della estetica moderna: ritorno al vintage. Con gli ultimi sistemi operativi, specialmente in casa Microsoft, si ha avuto un ritorno agli spigoli netti, al mono colore (Visual Studio 2012 e Office 2013 ne sono l'esempio lampante) e al minimalismo, quest'ultima è la caratteristica vincente nel campo della progettazione. Rimuovere ornamenti inutili e fastidiosi aiuta a focalizzarsi sull'obiettivo.

Minimalismo

Hai già il mouse sul tasto "aggiungi menu"? Smettila. Cambia il tuo modo di pensare, non servono mille bottoni, menu, pannelli e oggetti complicati. Facciamo un esempio:

• "livello del volume (altoparlanti)" perchè inserire un testo del genere in una interfaccia grafica? la parola stessa "volume" ti permette di indicare quasi tutto di questa frase, in più se si sostituisce la parola "volume" con un simbolo internazionalmente riconosciuto dell'altoparlante () il gioco è fatto. 

La sostituzione delle parole con immagini può essere applicato anche nel mondo del digitale-analogico. Tornando all'esempio del volume:

• L'utente non sa che elettronicamente il volume di uno speaker è proporzionato ad un potenziometro applicato al segnale audio. Non c'è bisogno di far inserire il valore della resistenza in Ohm per intenderci. Tuttavia non scordiamoci la voglia dell'utente di avere la possibilità di scelta, per questo motivo non è saggio sostituire il valore percentuale del volume (0-100%) con un indicatore (alto-medio-basso), l'utente inconsciamente si sentirebbe offeso di una tale mancanza di libertà, rovinando la sua esperienza con il prodotto. (sembra assurdo, ma è così)

Tornando sulla questione dei simboli è interessante capire come colori e forme possano dare un aiuto: 

• Per qualunque persona sulla terra (civilizzata) il simbolo del triangolo con un punto esclamativo al centro è sinonimo di attenzione, il colore giallo indica uno warning e il rosso un allarme. Stesso discorso un cerchio blu con un punto interrogativo al centro sta ad indicare il pulsante di aiuto, un bottone rosso su sfondo giallo-nero indica un pulsante di emergenza. Fondamentalmente è necessario sostituire testo con immagini più autoesplicative possibile.

Non sono solo i comandi o le notifiche ad essere minimalizzate, possono essere mostrati anche valori analogici.

• Se per esempio abbiamo costruito un dispositivo che conta le calorie assunte durante i pasti, la quantità può essere espressa in un numero oppure con un'altra forma altrettanto esplicativa che rende maggiormente l'idea come un uomo stilizzato (uomo secco - uomo normale - uomo grasso, per indicare che si sta assumendo una quantità di cibo troppo elevata). Oppure una barra graduata che, al superamento di un certo valore si colora di giallo o rosso per indicare il superamento del limite.

Conclusione

Rendere semplice e facile da usare una interfaccia grafica ha un costo per un azienda, tale costo deve essere preventivato e pianificato, deve precedere lo sviluppo e continuare per tutta la durata del processo di implementazione. Una azienda che NON punta sulla grafica end-user non ha le carte per essere competitiva in un panorama così vario. Dedicare tempo allo sviluppo di icone, di un layout predefinito, anche solo dedicare soldi per un consulto con esperti di design del prodotto risultano tutte scelte perfette per domare il mercato e sfornare prodotti di ottima qualità. 

Che ne pensate? Avete qualche suggerimento da dare oltre a quelli elencati? Commentate qui sotto oppure tramite la pagina ufficiale Facebook.