Una revisione accurata delle icone di Mole

Volevo condividere qualche riflessione su come rinnovare le icone di un prodotto: a cosa fare attenzione e dove c’è ancora margine per migliorare.

Stamattina ho rifinito con cura le icone di Mole. Finora l’app usava le icone di sistema, che per un prodotto semplice secondo me bastano e avanzano, ma guardando da vicino mancava un po’ di carattere.

Quale libreria di icone

Dopo qualche ricerca, le due librerie più adatte alle icone di un’app erano Remix Icon e Phosphor Icons. Remix l’ho usata molto per il web, è semplice e piacevole, ma dentro un’app non mi convinceva, quindi sono passato a Phosphor, che ha davvero personalità e rende molto bene. Circa il 70% delle icone si poteva usare così com’era, e il restante 30% l’ho disegnato io facendo scrivere l’SVG a Opus 5.5, così l’insieme resta coerente.

Giudicarle sempre dentro il prodotto

Dal confronto qui sopra forse la differenza non si nota molto. Spesso bisogna mettere le icone nel prodotto vero, e io guardo anche come sta insieme tutto il gruppo di icone di uno stesso modulo. A volte ogni icona presa da sola è bella e il gruppo invece no, come un volto in cui ogni lineamento è bello ma insieme non si armonizza. Il mio consiglio quindi è semplice: quando cambi le icone, guardale nel prodotto reale, tutte insieme, ed è lì che vengono bene.

Le piccole idee danno vita al prodotto

In secondo luogo, penso da tempo che i prodotti che facciamo debbano avere un’anima, una sensazione di vita, invece di essere il freddo risultato di un AI Coding senza nessun pensiero tuo. I piccoli dettagli come le icone sono un buon punto di partenza per dare questa vita. Per «Schermo sempre acceso» ho usato una tazza di caffè, la metafora di Caffeine: il tuo Mac ha bevuto un caffè e non riesce a dormire. «Informazioni su Mole» di solito ha una i cerchiata, ma per me è un saluto, quindi è una mano che saluta. «Doctor» avrebbe normalmente un simbolo di diagnosi dei problemi, e qui è uno stetoscopio, come un medico che visita il tuo problema. In un prodotto c’è spazio per tante piccole idee così, e insieme lo rendono molto più divertente.

Allineamento, dimensioni e centratura

Infine, il bel design torna quasi sempre agli stessi principi: allineamento, ordine e un ritmo ben dosato. Far sì che icone, contenuti e blocchi sopra e sotto appaiano allineati, della stessa dimensione e persino centrati in verticale, così come li vede l’occhio, richiede di guardarli e sistemarli uno per uno. Questo comprende l’allineamento tra testo e icone, e come gestire caratteri cinesi e latini che già in partenza non condividono lo stesso centro verticale. Si può rifinire a lungo, ed è una cosa che trovo molto interessante.

Qualche esempio da questo giro. La batteria all’inizio era un contorno vuoto, uguale a qualsiasi livello di carica, così una batteria piena sembrava scarica; ora si riempie a quarti. Le icone dei menu all’inizio seguivano la dimensione delle icone di sistema e sembravano troppo grandi e marcate; da 14,3 pt sono scese a 12,5 pt, ancora un po’ grandi, fino a fermarsi a 11 pt. Alcune icone erano dimensionate sulla larghezza e altre sul lato più lungo, così la scopa e la freccia di uscita, alte e strette, sembravano grandi, mentre l’insetto e il grafico a linee, larghi e bassi, sembravano piccoli. Ora sono dimensionate sulla media tra larghezza e altezza, con un limite per il lato più lungo, e le nuove icone seguiranno automaticamente la stessa regola. E nell’immagine di confronto fatta per un tweet, la parola Mole nel titolo è composta in un carattere cinese con grazie le cui lettere latine stavano 4 pt più in alto del cinese accanto: ho dovuto abbassarle a parte perché le due scritture stessero sulla stessa linea.

Ascoltare gli utenti, poi un altro giro

Dopo la pubblicazione dell’articolo sono arrivati, un po’ alla volta, i commenti degli utenti. Alcune icone che a me piacevano a loro sembravano poco belle o poco familiari: «Verifica aggiornamenti» usava un’icona di download e veniva letta come download, il piccolo cubo della GPU non sembrava una scheda grafica, l’icona dell’archivio non si capiva, due moduli sovrapposti non facevano pensare alla memoria, e qualcuno trovava brutte la spugna di «Pulisci schermo» e la mano che saluta di «Informazioni su Mole».

È proprio il momento in cui due parole con gli utenti valgono più della propria convinzione, così ognuna di queste icone ha fatto un altro giro seguendo i loro suggerimenti. La verifica degli aggiornamenti è diventata una freccia in senso orario, la GPU una scheda grafica a due ventole, l’archivio una scatola, e l’audio è passato dalle note musicali alle cuffie. «Pulisci schermo» è tornato al pennello della primissima icona di sistema, «Informazioni su Mole» è tornato alla classica i cerchiata, ridisegnata con lo spessore del resto della colonna, e la memoria è tornata un chip. Alcune sono cambiate tre volte lungo la strada.

Il tempo risparmiato con l’IA, per rifinire

Questo tipo di lavoro può sembrare inutile, ma è qualcosa che mi piace molto fare. L’IA dà una grande spinta al buon codice e a un gusto sufficiente, e può sembrare che alle persone resti solo da dare istruzioni. Io penso il contrario: il ruolo della persona qui è ancora più grande. Il tempo che l’IA ti fa risparmiare è proprio quello da dedicare a rifinire il prodotto, perché quell’1% di utenti che ci fa caso provi ogni tanto, usandolo, la sensazione di capire al volo, di dire «wow», di assistere a un piccolo gioco di prestigio. È questo che ha davvero valore ed è divertente, e forse è proprio ciò che trovo più interessante nel creare prodotti indipendenti.