Susan Kare e il significato all’interno di una griglia di pixel
cioè assemblato un quadrato alla volta
Una griglia di piccole dimensioni lascia poco spazio alla decorazione. È necessario ridurre un oggetto riconoscibile, distinguere uno stato e definire una tonalità attraverso un numero limitato di pixel. I primi lavori di Susan Kare nel campo delle interfacce rendono visibili questi vincoli senza che il risultato appaia semplicemente limitato.
La documentazione del MoMA relativa al quaderno di schizzi delle icone del sistema operativo Apple Macintosh di Kare lo fa risalire al 1982 e descrive l’uso della carta millimetrata, in cui ogni quadrato rappresenta un pixel. Il caso dimostra come il disegno, la metafora e un’attenta selezione possano tradurre un sistema complesso in forme che l’utente possa iniziare a riconoscere.
la metafora offre un punto di partenza
Un’icona può attingere alla familiarità di un altro oggetto. Tale familiarità è utile quando collega una nuova operazione a qualcosa che l’utente già conosce. Tuttavia, può anche indurre in errore. L’immagine di un contenitore non chiarisce se l’azione consista nel salvare, archiviare o eliminare qualcosa. Il significato dipende dall’interfaccia e dalle sue convenzioni.
L’icona dovrebbe essere valutata tenendo conto della sua etichetta, della sua posizione e dello stato che ne deriva. Riconoscere un oggetto familiare è diverso dal prevedere cosa accadrà dopo averlo selezionato. Un’illustrazione ben riuscita può comunque rappresentare un comando ambiguo.
personalità entro i limiti imposti
Un’immagine di piccole dimensioni può trasmettere cordialità senza aggiungere complessità visiva. Le scelte espressive dovrebbero favorire la comprensione, anziché ostacolarla. La lezione da trarre non è che ogni interfaccia debba necessariamente presentare una faccina sorridente, bensì che i limiti tecnici lasciano spazio a un tono deliberato e al riconoscimento umano.
Questo vincolo incoraggia inoltre a prestare attenzione alle relazioni. Confronta un simbolo a grandezza naturale e rispetto a quelli adiacenti. Una forma che appare distinta quando ingrandita può fondersi con un’altra a scala normale. La famiglia deve lavorare in modo coordinato, includendo stati quali “disabilitato”, “selezionato” o “interrotto”.
Le convenzioni richiedono manutenzione
Il significato di un’icona può sopravvivere anche dopo che il suo referente è diventato poco familiare. Il dischetto, un tempo simbolo del salvataggio, ne è un esempio lampante. Questa persistenza non dimostra che il simbolo debba essere sempre sostituito, né che nessuno abbia bisogno di una spiegazione. Verificate il livello di riconoscimento tra gli utenti a cui è destinato e valutate il costo di una modifica della convenzione.
L’accessibilità introduce un ulteriore requisito: le informazioni essenziali non possono dipendere esclusivamente dal riconoscimento degli elementi decorativi. Le etichette e le descrizioni alternative devono illustrare accuratamente il funzionamento. L’immagine e il testo devono trasmettere lo stesso messaggio.
un esempio di progetto realizzato
Un file manager utilizza la stessa icona a forma di contenitore sia per l’archiviazione che per l’eliminazione. Le immagini sembrano correlate perché entrambe le operazioni rimuovono un elemento dalla vista corrente. Le loro conseguenze, però, sono diverse.
Il team può mantenere la somiglianza familiare, distinguendo al contempo le azioni tramite etichette, posizionamento e feedback sullo stato. Verificare se gli utenti riescono a prevedere cosa succede al file, non solo se riconoscono il contenitore raffigurato. Una nuova icona accattivante non rappresenta necessariamente un miglioramento se rinuncia a un’utile familiarità senza spiegare la distinzione.
Valutate le icone a grandezza naturale e nell’interfaccia completa. I controlli adiacenti possono alterare la percezione delle relazioni. La griglia di pixel diventa un vincolo operativo all’interno di un sistema informativo più ampio, proprio come gli schizzi di Kare traducevano piccole scelte visive in operazioni significative.
un esercizio pratico
Progetta tre icone per operazioni correlate all’interno di una griglia fissa. Descrivi l’operazione in un linguaggio semplice prima di disegnarla. Verifica cosa gli utenti deducono dalle sole icone, poi con le etichette e il contesto. Prendi nota di eventuali confusioni tra il riconoscimento dell’immagine e la comprensione dell’azione. Modifica l’elemento più piccolo che altera l’interpretazione ed esamina l’intera famiglia di icone a grandezza naturale.
La griglia è un vincolo nel disegno, non una scusa per tralasciare l’analisi del significato.
uno studio visivo
ulteriori approfondimenti e collegamenti
f/p design della comunicazione
proseguire con la progettazione dell’informazione, della gerarchia e di una comunicazione comprensibile.
f/p: design del marchio e identità aziendale
collegare una forma riconoscibile a un sistema di identità che possa essere implementato in tutti i punti di contatto.
Guida pratica: come scegliere un’agenzia di grafica e comunicazione
collegare questo argomento all’ambito del design della comunicazione, ai risultati attesi e alla selezione dei partner.
Stai pianificando un progetto in questo settore? Parlane con f/p design.
Guida pratica: come scegliere un’agenzia di grafica e comunicazione
collegare questo argomento all’ambito del design della comunicazione, ai risultati attesi e alla selezione dei partner.
Stai pianificando un progetto in questo settore? Parlane con f/p design.
riferimenti
Catalogo delle collezioni e delle mostre del Museo d’Arte Moderna
Crediti fotografici
1. SusanKare2019photo.jpg
autore o fonte indicata: Cooper Hewitt · CC BY 3.0
Fonte dell’immagine e dati relativi all’attribuzione
ridimensionata e codificata in formato JPEG per Word; nessuna modifica creativa. L’immagine mantiene la licenza sopra indicata.
2. Steve Jobs e il computer Macintosh, gennaio 1984, foto di Bernard Gotfryd – modificata.jpg
Autore o fonte indicata: Foto: Bernard Gotfryd – Modificata da un file TIF da Cart · Dominio pubblico
Fonte dell’immagine e dati relativi all’attribuzione
ridimensionata e codificata in formato JPEG per Word; nessuna modifica creativa. L’immagine mantiene la licenza sopra indicata.
3. ICONA PC – Schermata blu.png
autore o fonte indicata: Asterisk.CommonsAccount · CC0
Fonte dell’immagine e dati relativi all’attribuzione
ridimensionata e codificata in formato JPEG per Word; nessuna modifica creativa. L’immagine mantiene la licenza sopra indicata.
