014 • Icone

Sull’uso delle icone nella progettazione di interfacce per il web e non solo.

Su altri temi (vedi navigazione o viewport) noto che c’è un minimo di frizione. Con le icone è diverso. Le icone sono qualcosa di familiare. Non subito, ma quando si cominciano a progettare pagine web appaiono icone ovunque, come se ci fosse un obbligo implicito nel doverle aggiungere in ogni pagina web. E quando proprio non sono necessarie, appaiono le icone dei social, anche se in quel contesto magari non servivano. («Ma perché hai messo le icone dei social?», «Perché altrimenti il sito era senza icone»).

In un recente articolo, Nikita Prokopov ha analizzato le icone del nuovo sistema operativo Apple: ogni voce di menu ha un’icona accanto. Il risultato è un aumento di rumore visivo. «Adding an icon to everything is exactly the wrong thing to do. […] If everything has an icon, nothing stands out».

Le icone sono probabilmente il linguaggio visivo che sembra più universale. Negli anni ’60, Henry Dreyfuss auspicava un vocabolario grafico comune. Nel suo Symbol Sourcebook – che ispirò Susan Kare quando progettò le prime icone del Mac – scriveva che se fosse stato possibile compilare un sistema di simboli ugualmente riconoscibili avremmo potuto avere un mezzo di comunicazione universale. Forse le emoji ci hanno avvicinato a quell’idea, ma funzionano meglio per le emozioni che per le azioni e le funzioni.

Quando Amazon arrivò in India, racconta Luke Wroblewski, dovette realizzare un banner per spiegare il significato dell'icona della lente di ingrandimento, che pensavano fosse una racchetta da ping pong.

Le icone da sole, spesso, non funzionano. Sono ambigue e costringono chi usa l’interfaccia a fermarsi, interpretare, decifrare. Migliorano l’estetica delle interfacce, ma spesso «offuscano funzioni chiare mascherandole con uno strato di simboli oscuri»1.

Le icone «richiedono il nostro coinvolgimento per funzionare»2, nel senso che funzionano solo quando il significato è già condiviso. Quante saranno le icone riconoscibili da tutti, o quasi? Irene Pereyra, in Universal Principles of UX, ha provato a elencarle tutte: una casa per la home, una stampante per la stampa, una lente di ingrandimento per la ricerca, un ingranaggio per le impostazioni, un cuore per il like, una cartella per i file, una lettera per la posta, un fumetto per la chat, una matita per modificare, un’animazione di caricamento per il loading, una campana per le notifiche, un cestino per eliminare, un carrello della spesa per aggiungere al carrello, una fotocamera per le foto, una puntina per la posizione, un lucchetto per la sicurezza, una freccia per riprodurre e una silhouette per il profilo utente. Ve ne vengono in mente altre? Sono diciotto icone. Tutto il resto ha bisogno di un’etichetta e in alcuni casi anche queste elencate.

UIE ha condotto due esperimenti per capire meglio come usiamo le icone. In uno hanno cambiato l’aspetto delle icone lasciandole nella stessa posizione: gli utenti non hanno avuto grosse difficoltà a fare quello che facevano di solito. Poi hanno lasciato l’aspetto invariato e cambiato la posizione: gli utenti si sono confusi, si sono mossi più lentamente e, in alcuni casi, non sono riusciti a completare anche i compiti più semplici. In pratica, non ricordiamo come sono fatte le icone. Ricordiamo dove stanno.

Questo mette in evidenza un altro aspetto, che oltre al come sono fatte, è importante il contesto e la coerenza. Un’icona che sta sempre nello stesso posto, che accompagna sempre la stessa funzione, funziona. Funziona perché è prevedibile, e la prevedibilità, come abbiamo visto parlando di coerenza, migliora l’interfaccia, perché migliora il modo in cui gli utenti la utilizzeranno.


  1. Un articolo di iA, dal titolo On Icons, che avevo già ripreso in un altro mio articolo

  2. Scott McCloud, Capire, pensare e reinventare il fumetto, BAO Publishing, 2018