Briciole di pane e tostapane: perché le interfacce web hanno nomi di oggetti reali

Dallo scheumorfismo visivo a quello semantico. Un viaggio nei termini del web design diventati virali (di nuovo) sui social.

Se bazzichi su LinkedIn, Instagram o TikTok e il tuo feed è popolato da sedicenti "creator" di Web Design, probabilmente ti sei imbattuto di recente in un format video tanto semplice quanto martellante. Parte tutto da un video visto su LinkedIn, subito masticato, rigurgitato e clonato in mille varianti sui reel di mezzo mondo.

Il copione è questo: qualcuno ti spiega, con l'espressività di un elfo sedato, che il "radio button" si chiama così per via dei bottoni a scatto delle vecchie autoradio.

Fa sorridere vedere concetti da manuale di interazione uomo-macchina del 1995 spacciati per life hacking nel 2026. Eppure, dietro questa banalizzazione social, c'è un principio cognitivo affascinante che governa il mio lavoro da vent'anni: il cervello umano ha bisogno di aggrapparsi a concetti fisici per navigare nell'astrazione dei pixel.

Lo scheumorfismo non è mai morto (ha solo cambiato nome)

Ricordate l'interfaccia del primo iPhone? Quella in cui l'app Note aveva la texture in finta finta pelle gialla con le cuciture a vista e l'app YouTube sembrava una tv a tubo catodico? Quello era lo scheumorfismo visivo: l'ossessione per far somigliare le interfacce digitali agli oggetti analogici, per insegnare a un pubblico non alfabetizzato come usare uno smartphone.

Oggi abbiamo in gran parte eliminato quegli orrori grafici in favore del flat design o del neomorfismo, ma abbiamo mantenuto lo scheumorfismo semantico. Abbiamo smesso di disegnare il legno, ma continuiamo a chiamare i componenti testuali rubando dal mondo fisico.

Se ci pensate, è l'unico modo per costruire architetture architetture sensate e comprensibili. Ecco perché quando assemblo un'interfaccia, uso componenti che sembrano usciti da un supermercato degli anni '80 o da una fiaba.

Gli "oggetti" nelle User Interfaces

Cosa c'è in una tipica libreria di componenti UI? Un mix di riferimenti a cibo giapponese, materiale da ufficio e parchi divertimento.

Radio Button

Il prototipo della scelta unica. Sulle vecchie radio analogiche, premendo un tasto per cambiare stazione, quello precedente scattava automaticamente in fuori. Potevi ascoltare una sola stazione alla volta. Ecco perché in un modulo web, se puoi spuntare una sola opzione, usiamo i pallini tondi chiamati radio. Se puoi spuntarne di più, usi le checkbox (mutuate dalle vecchie liste cartacee).

Toast e Snackbar

Continuiamo con i componenti gastronomici. Un Toast è quel piccolo messaggio di notifica che "salta su" dal margine inferiore dello schermo, esattamente come la fetta di pane dorata scatta fuori dal tostapane quando è pronta. La Snackbar invece è una variante leggermente più sostanziosa: ti dà un "morso" di informazione veloce senza riempirti lo stomaco bloccando la pagina intera.

Tabs

Direttamente dagli archivi o dai faldoni in plastica colorata degli uffici. Sporgendo leggermente in cima, ti permettono di organizzare archivi complessi e dividere ordinatamente le informazioni in sezioni facilmente recuperabili. Sono state uno degli elementi più funzionali nelle interfacce web, ancor prima che arrivasse il responsive design sugli smartphone.

Carousel

Le immagini o i contenuti in evidenza ruotano sulla pagina in un ciclo continuo avanti e indietro, mutuando il nome dalla cara e vecchia giostra dei cavalli (il carosello). Paradossalmente, proprio come sulle giostre, finisce spesso per far venire la nausea agli utenti (usateli con parsimonia).

Accordion (Fisarmonica)

Un blocco di testo diviso in file orizzontali. Ci clicchi sopra, si espande svelando il contenuto nascosto. Ci clicchi di nuovo, e si contrae, strizzando i div esattamente come il mantice di una fisarmonica. La migliore (?) soluzione per nascondere le interminabili e noiose sezioni FAQ.

Chips

I classici bottoncini ovali che clicchiamo per filtrare risultati o applicare tag. Compatti, veloci, impilabili. Niente di meno e niente di più che fiches da poker buttate su un tavolo verde.

Skeleton Loading

Meno simpatico come concetto ma usato moltissimo per far capire all'utente che qualcosa si sta caricando. Mentre il browser o l'app fatica a scaricare i dati dal server, ti mostra prima l'ombra dei blocchi grigi. L'ossatura strutturale (lo "scheletro") della pagina, per darti l'illusione che stia per apparire qualcosa e tenerci calmi.

Bento Grid

Una delle disposizioni più usate e funzionali degli ultimi anni. Blocchi modulari, stondati e incastrati perfettamente tra loro che contengono widget diversi. L'ispirazione? Il Bento, la scatola portapranzo giapponese suddivisa maniacalmente.

Breadcrumb

I piccoli link di navigazione in cima alle pagine complessi (Home > Negozio > Scarpe > Sneakers). Direttamente dalla fiaba di Hänsel e Gretel, sono le mitiche briciole di pane seminate nel bosco per ritrovare la strada di casa quando ci si perde nei meandri di un e-commerce. Google le apprezza molto.

Interfacce grafiche funzionali e accattivanti

Il fatto che decine di sedicenti guru stiano riproponendo in loop questi concetti elementari sui social dimostra una cosa: il potere della nomenclatura evocativa resiste.

Abbiamo creato un ponte cognitivo tra i mobili dell'ufficio di trent'anni fa e uno schermo in vetro temperato nel palmo delle nostre mani. È il trionfo dell'associazionismo visivo, nonché la prova che la tecnologia moderna, sotto sotto, funziona ancora ad analogie sgangherate.

E sì. L'hamburger menu si chiama così perché tre linee orizzontali sovrapposte sembrano pane, carne, pane. Ve l'avevo detto che durante lo sviluppo avevamo molta fame.

Ispirazione: il video su LinkedIn