Centratura ottica delle icone: perché un simbolo perfettamente centrato sembra sempre storto

Un cerchio bianco spesso, dentro un cerchio blu con una luce che si accende al centro, e due lancette che puntano quasi nella stessa direzione: una scura, corta e panciuta, l’altra bianca, sottile, con una punta rosata. Guardala tre secondi e poi chiudi mezzo occhio: quell’icona sembra tirare verso sinistra. Il quadrante è tondo, il bordo è uniforme, le coordinate del file dicono che tutto è al centro. Eppure l’occhio insiste: qualcosa non è in asse.

Ho passato anni a spostare forme di uno o due punti dentro una griglia, e questa è la cosa che rispiego più spesso a chi inizia: l’occhio non misura, pesa. E quando pesa, il nero conta più del bianco, lo spesso più del sottile, il corpo pieno più della punta acuta.

Perché la centratura matematica non basta quasi mai

Quando alliniamo qualcosa al centro, il software calcola il centro del rettangolo che contiene la forma: area geometrica. Il sistema visivo, invece, ricostruisce una specie di baricentro percettivo, e lo fa tenendo conto della simmetria della figura e della distribuzione della sua massa. La ricerca sperimentale sulla percezione dei centri all’interno delle forme ha mostrato che il punto che giudichiamo centro si sposta in funzione degli assi di simmetria: più una forma è irregolare, più il centro percepito si allontana da quello calcolato.

Nell’icona che stiamo guardando succede esattamente questo. Le due lancette non sono distribuite intorno al perno: puntano entrambe verso sinistra, in un angolo ristretto. Il perno è geometricamente al centro, ma la massa grafica è tutta da una parte. Il risultato è che il disco blu sembra scivolato, e il bordo bianco sembra più sottile a sinistra e più grasso a destra, anche se non lo è.

Il nero pesa più del bianco: la massa prima della misura

C’è una seconda variabile che nessuno considera quando lavora al 400 per cento di zoom: la luminosità. Gli studi sull’equilibrio delle immagini definiscono il peso visivo come una funzione della quantità di luce che una zona emette e dello spazio che occupa, ed è su questa combinazione che il nostro sistema percettivo decide se una composizione è bilanciata. Le ricerche sperimentali sulla relazione fra luminosità e dimensione percepita raccontano la stessa storia da un altro lato: la chiarezza di una superficie altera la grandezza che le attribuiamo, indipendentemente dalla misura reale.

Tradotto in pratica: una lancetta blu notte spessa e una lancetta bianca sottile non pesano uguale nemmeno se hanno la stessa lunghezza. La scura ancora l’occhio, la chiara si dissolve nel gradiente. Per riportare l’equilibrio bisogna barare: spostare l’insieme di uno o due punti nella direzione opposta alla parte più scura, oppure ridurre di un capello la massa dominante. È lo stesso mestiere di chi, incidendo i caratteri, faceva debordare la O sopra e sotto la linea di riferimento perché altrimenti, accanto alla H, sembrava più bassa: correzione manuale, invisibile, indispensabile.

Griglie e keyline: normalizzare l’area ottica, non quella geometrica

I sistemi di icone hanno provato a industrializzare questo aggiustamento. Il principio è semplice: dentro la stessa scatola, un cerchio, un quadrato e un triangolo con la stessa altezza nominale non appaiono mai della stessa grandezza. Il cerchio sembra più piccolo, il quadrato più grande, il triangolo dipende da dove lo appoggi. Per questo esistono le keyline shapes, cioè forme di riferimento con dimensioni diverse che producono la stessa area ottica percepita.

Non è folklore da studio grafico: esiste ricerca sperimentale che ha confrontato proprio i criteri con cui i grandi sistemi operativi regolano dimensione e allineamento delle forme dentro i loro set di icone, misurando quale combinazione risulta percettivamente più coerente. La lezione utile è che la coerenza di un set non si ottiene con misure uguali, ma con pesi uguali.

Il bordo bianco, e il vero problema di quelle due lancette

Sull’anello bianco molto largo ho un’opinione precisa, e non riguarda il gusto: ogni millimetro di cornice è millimetro sottratto al simbolo. In un’icona la superficie utile è pochissima, e il compito è farsi riconoscere a 16 o 24 pixel, di sbieco, in mezzo ad altre venti. Le norme internazionali che regolano la progettazione dei simboli grafici lavorano proprio su questo: leggibilità a distanza, contrasto, e verifica della comprensibilità con test su persone reali, non a occhio dell’autore. Un contorno spesso rende il quadrante più piccolo e le lancette meno riconoscibili come lancette: la forma perde il tratto che la rendeva identificabile in un colpo d’occhio.

Il difetto più sottile, però, è un altro: le due lancette hanno spessori e valori tonali diversi. Un orologio con le lancette è per definizione sbilanciato — la massa sta dove puntano — e su questo non si può fare niente. Ma se una lancetta è scura e grassa e l’altra chiara e magra, allo sguardo rapido non leggi due indici: leggi una macchia scura con un graffio bianco sopra. La gerarchia c’è, ma non è quella funzionale. Studi recenti sul confronto fra icone piene e icone a contorno mostrano che lo stile del tratto non è neutro: cambia la percezione dell’oggetto e la velocità con cui lo si interpreta.

Dai punzoni ai pixel disegnati a mano

Questo mestiere ha una genealogia bella. Nei pittogrammi del sistema segnaletico dei Giochi di Monaco 1972, Otl Aicher costruì un intero alfabeto di figure umane su una griglia rigidissima di orizzontali, verticali e diagonali a 45 gradi: proprio perché la regola era ferrea, ogni piccola correzione ottica diventava una decisione consapevole. Dieci anni dopo, i primi set di icone per interfaccia venivano disegnati a matita su carta millimetrata, un quadretto per ogni pixel, e i fogli originali di quel lavoro sono oggi in collezione museale. Quando i punti a disposizione sono ventiquattro, non esiste il centro automatico: c’è solo la scelta di quale pixel accendere.

La stessa legge vale sopra il divano

Qui l’icona smette di essere un fatto da grafici. La centratura ottica governa tutto quello che appendi o allinei in casa.

Il quadro sopra il divano: se l’immagine ha una zona molto scura o un soggetto spostato, il centro percepito non è il centro della cornice. Va appeso in funzione della massa, non del telaio.
Il numero civico o le lettere sul campanello: una cifra tonda come lo 0 o l’8 va leggermente più grande delle cifre a spigolo, altrimenti sembra rimpicciolita.
La maniglia sull’anta: una maniglia scura su un frontale chiaro sembra più bassa e più vicina al bordo di quanto sia. Alzarla di pochi millimetri la rimette in pari.
La mensola che sembra storta pur essendo in bolla: se gli oggetti sopra sono concentrati a un’estremità, l’occhio attribuisce la pendenza al legno.

Il protocollo di verifica in cinque mosse

È quello che uso da anni, funziona sia su uno schermo sia in salotto, e non richiede strumenti.

Rimpicciolisci: porta l’immagine alla dimensione minima d’uso, o allontanati di cinque passi dalla parete. Ciò che resta è la massa.
Sfoca lo sguardo: socchiudi gli occhi finché i dettagli sparisocno e vedi solo macchie chiare e scure. Lo sbilanciamento salta fuori subito.
Capovolgi o specchia: ruota la foto, o guardala riflessa in una finestra. Il cervello perde il riconoscimento e torna a valutare solo la geometria.
Guarda in negativo: invertendo i valori scopri se il peso stava nella forma o solo nel colore.
Correggi di uno o due punti nella direzione opposta alla parte più scura o più spessa, e ricontrolla dal punto uno.

Il senso di tutto questo non è inseguire una perfezione invisibile. È accorgersi che fra il centro calcolato e il centro percepito ci sono spesso pochi millimetri, e che quei millimetri sono esattamente il lavoro del progetto. La prossima volta che un’icona, un quadro o un’insegna ti sembrano fuori asse senza motivo apparente, non è un tuo difetto di percezione: è che nessuno ha spostato quei due punti.

Fonti

Tag:Interfacce digitali