giovedì 7 febbraio 2013

Icone, mon amour.


Sapete tutti cosa sono le icone.
Per dirla a modino, sono una rappresentazione visiva di una funzione o un'azione all’interno di una interfaccia utente grafica, altrimenti detta GUI.
Le icone funzionano come una sorta di marcatore visivo, in modo che le persone di qualsiasi livello di alfabetizzazione informatica possono facilmente familiarizzare con un software o un sistema operativo anche se vi si accostano per la prima volta. Il sistema operativo di iPhone  e di iPad, per dire, è completamente basato sulle icone, ed è fortemente intuitivo.

Il cervello umano può ricordare molti più simboli che parole... quindi non solo un'icona ben progettata può guidare utenti poco esperti, ma aiuta anche quelli che usano il PC tutti i giorni  a lavorare in modo rapido ed efficiente.

Le icone, nel corso della breve storia delle interfacce utente, si sono evolute.
Quelle di poco successo sono sparite dai nostri dispositivi, mentre le icone di successo (come il cestino, l'orologio o la lente d'ingrandimento) sono diventate insostituibili nel nostro vocabolario visivo. Ancora di più: sono dei veri e propri simboli culturali... tanto che, in alcuni casi, le icone sono state traghettate nel mondo reale, come questo orologio in vendita nello store del Museo d'Arte Moderna di New York.

Ma come dev'essere un'icona che funziona?
In due parole, deve avere un forte impatto estetico e deve chiarire il suo utilizzo rapidamente, meglio ancora istantaneamente.
Il che, detta così, sembra piuttosto semplice.
In realtà, le cose sono più complesse.
Per progettare correttamente un'icona, un buon sistema è osservare gli errori più comunemente commessi dai designer.


1) insufficiente differenziazione tra le icone

A volte all'interno di un software o di un sistema operativo, ci sono troppe icone che si assomigliano, il che rende difficile capire cosa è cosa: le icone della sezione Utility nel Mac OS X sono un esempio di come sia facile per l'utente confondersi e quindi lanciare l'applicazione sbagliata... e il problema è aggravato nella vista con icone di piccole dimensioni.

2) Troppi elementi in un'icona
br /> La semplicità è sempre una buona regola di progettazione. Cercate di mantenere al minimo il numero di oggetti in una singola icona. L'aumento delle risoluzioni degli schermi hanno spinto i designer ad aumentare le dimensioni delle icone, passate dai 32x32 pixel del MacOS 7 ai 512x512 di MacOSX e, nelle versioni più recenti, alle gigantesche 1024x1024.
Alcuni progettisti hanno pensato che potevano aggiungere più dettagli, ma, come nel caso delle icone di Windows Vista, si sono fatti prendere la mano: se a grandi dimensioni l'icona è ancora comprensibile, a piccole dimensioni sono praticamente indecifrabili.


3) Mancanza di uno stile univoco
Questo errore è speculare al primo. Se progettate delle icone, queste conviveranno necessariamente accanto parecchie altre, e, pur mantenendo un'identità precisa, dovranno avere degli elementi comuni: schema di colori, prospettiva, dimensioni, stile o una combinazione di queste proprietà.
Questa regola è particolarmente importante tanto più è maggiore il numero delle icone nello stesso set, ad esempio, le icone per un sistema operativo.
Windows XP, in questo caso, è l'esempio da non seguire.


4) Metafore visive eccessivamente originali

Molto del lavoro nella progettazione di un'icona è associare una funzione ad un oggetto. E decidere quale oggetto usare è sempre un compromesso tra riconoscibilità e originalità.
È di certo una buona scelta non copiare gli altri, ma anche ricercare a tutti costi l'originalità potrebbe rivelarsi una scelta non funzionale.
Un esempio di originalità eccessivo è l'icona del cestino in Windows 98 che in realtà riproduce il contenitore di un impianto di riciclaggio... senza contare che la differenza tra il contenitore vuoto e pieno è microscopica, mentre questa metafora è parecchio più evidente nelle icone dei sistemi operativi Apple, fin dai suoi esordi.


5) Caratteristiche nazionali o sociali non prese in considerazione
Un'icona deve funzionare a Milano come a Pechino o a Seattle o a Dublino.
Le tradizioni culturali, oggetti di uso comune e abitudini possono differire anche radicalmente da paese a paese.
Pensate, ad esempio, di dover realizzare un'icona per un software di posta elettronica. Un approccio sensato è disegnare un'icona che usa una metafora della posta cartacea reale: tipo, una cassetta postale, giusto?
Giusto. Ma quanti tipi di cassetta postale esistono al mondo?

Praticamente, una per ogni Paese. Imbarazzante, vero?
Una volta di più, una buona indicazione può trovarsi nelle guidelines che Apple fornisce agli sviluppatori per la  creazione di icone per Mac OS X (potete trovarle QUI): "Utilizzate  immagini universali che la gente può riconoscere con facilità. Evitate di concentrarsi su un aspetto secondario di un elemento. Per esempio, per un'icona di un programma di gestione di posta, una cassetta postale rurale sarebbe meno riconoscibile di un francobollo".

L'idea di utilizzare un francobollo con tanto di timbro, come nel software Mail incluso nei sistemi operativi Apple è di certo buona, ma l'uso dell'aquila è probabilmente troppo legata ad un simbolismo e a una tradizione americana. Più efficace l'icona utilizzata per la stessa versione del programma per iOS.


6) Testo all'interno delle icone
Questo errore è tipico delle icone delle applicazioni.
Chiaramente la prima cosa che viene in mente quando si progetta l'icona di un'applicazione è quella di adattarne il logo.
Cosa c'è di sbagliato nell'inserire del testo nel design di un'icona?
In primo luogo, è direttamente correlata alla lingua impedendone la localizzazione.
In secondo luogo, quando l'icona è visualizzata in piccole dimensioni, è impossibile leggerne il testo contenuto.
Infine, nel caso di icone delle applicazioni, il testo viene ripetuto nel nome dell'icona stessa.


Di seguito, invece, trovate alcune delle mie icone preferite di sempre.
Alcune risalgono all'era di Susan Kare (QUI trovate un post a lei solo dedicato), altre sono più recenti e alcune portano con sé anche qualche aneddoto: ad esempio, all'interno del bundle di MacHeist II era incluso anche CSSEdit. Ce l'ho nella cartella applicazioni, ma non l'ho mai usato perché di CSS non capisco un accidente.
Guardando meglio l'icona, però, si può notare "l'omaggio" che gli sviluppatori hanno fatto a Internet Explorer: in basso a sinistra si può leggere IE Sucks (IE fa cagare).

Oppure, ingrandendo l'icona di Texedit, l'utility di MacOS per editare testi, si può leggere  il celeberrimo slogan che Apple usò nella campagna pubblicitaria “Think Different”:

Dear Kate, here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see thing differently. They’re not fond of rules. And they have no respect for the status quo. You can praise them, disagree with them, quote them, disbelieve theme, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things.

7 commenti:

Leonardo ha detto...

La differenza fra i due grandi competitor (Apple e Microsoft) si vede già dalle icone :D
Bell'articolo comunque Luca! ;)

Sekhemty ha detto...

I set di icone non armonizzati e non coerenti con sé stessi non piacciono nemmeno a me, danno l'idea di qualcosa fatto in maniera superficiale.
Io sono un utente linux e fintanto che ho usato l'ambiente desktop Gnome mi sono sempre trovato bene con il Tango Icon Set, molto semplice e pulito anche se forse poco accattivante.
Poi da quando sono passato all'ambiente KDE mi sono trovato di default le icone Oxygen, ma non mi sono mai piaciute più di tanto, e ho ripiegato sull'ottimo Faenza.

Bel post!

Matteo ha detto...

Bel post, molto interessante. In effetti finché usavo Windows non mi era mai saltata all'occhio la differenza fra il cestino vuoto e pieno. Il cervello lavora per minimizzare il consumo energetico e se le cose non sono evidenti le tralascia.
Invece - soprattutto con i nuovi cestini di OSX bucherellati - la differenza è evidente.

Ma è chiaro che Apple dal punto di vista della cura dei dettagli è sempre stata avanti.

Anche se ormai le icone, per quanto sono definite, sembrano più che altro foto e hanno perso quella necessità di meravigliosa sintesi grafica che avevano all'inizio. Ma nonostante ciò le basi sono rimaste le stesse.

Maura ha detto...

Io uso il pc da sempre, e pur riconoscendo l'utilità di avere le icone "giuste" devo dire di non farne un grande uso. Utilizzo prevalentemente viste ad elenco e a colonne, dove le icone sono molto piccole, e non mi baso su quelle per trovare gli elementi che mi servono... immagino che il mio sia un approccio più "testuale" che visivo.

Alex McNab Girola ha detto...

Post eccezionale, complimenti.
Io non sono schierato con nessun brand, quindi posso dire tranquillamente che le icone Apple sono migliori.

Angel-A ha detto...

Quell'orologio è bellissimo.... ma non lo vendono più!!!! Sigh & sob!!!!!!

Gabriele Russo ha detto...

Ottimo post. Grazie Luke!