Anatomia di un bottone
Un bottone non è un rettangolo cliccabile. È una promessa di azione, un piccolo contratto fisico tra dito e schermo. Lo smontiamo qui, pezzo per pezzo.
Un playground a capitoli
Altrove.
Un viaggio personale di UX, motion design e tipografia.
La UX migliore lascia l'utente essere altrove con la mente — perché lei lavora per lui. Tutto quello che succede senza che l'utente se ne accorga è la vera potenza dell'interfaccia. Qui ne raccolgo i frammenti, un capitolo alla volta.
Le interfacce migliori sono invisibili. Lavorano in silenzio mentre la tua mente è altrove.
La skill
Porta Altrove nel tuo agente
I principi del libro — timing in millisecondi nominati, stati che dicono la verità, motion che rispetta chi lo riduce — distillati in una skill. Il tuo agente li applica mentre tu sei altrove.
La skill nel repositorynpx skills add MatteoSchifano/altroveSi installa in .claude/skills — Claude Code, Cursor e più di 40 agenti.
Come lavoro
Pochi vincoli, tenuti con disciplina.
-
Un capitolo alla volta
Finito al 100% prima del prossimo. Un capitolo intero vale più di tre lasciati a metà.
- cap. 01 · il bottone Salva press · scale(0.97)
-
Prima la motivazione
Si scrive il perché prima del codice. Perché questa curva, perché questo timing.
- cap. 02 · l’attesa niente spinner sotto i 400ms
-
Il motion in millisecondi
Quattro preset di spring, durate con un nome. Si misura, non si va a sentimento.
- cap. 09 · il toggle Riduci il movimento entra 220ms · esce 160ms
-
Reduced-motion non è opzionale
Ogni animazione collassa con grazia. Niente librerie: solo CSS, clamp e container query.
Capitoli
13 esplorazioni finite
-
Capitolo 01 -
Capitolo 02 L'arte dell'attesa
La rete è lenta, l'utente no. La UX migliore finta di sapere già — e quasi sempre indovina. Skeleton, optimistic UI, errori che non gridano: il vocabolario di un'interfaccia che si fida del proprio prossimo click.
-
Capitolo 03 La voce del vuoto
Un'interfaccia che non ha niente da mostrare non è muta — è il momento in cui la sua voce si sente meglio. 404, liste vuote, ricerche senza risultati: piccoli vuoti che pesano molto, e che la cura distingue dall'abbandono.
-
Capitolo 04 Il dialogo silenzioso
Un dialog è un'interruzione che chiede permesso. Quando deve davvero parlare, lo fa con la tastiera in mano: focus dove serve, Escape che ricuce, animazioni che entrano come un sospiro e mai come un grido.
-
Capitolo 05 Lo scroll che racconta
Lo scroll è il gesto più trasparente che abbiamo. Non chiede permesso, non interrompe, non si insegna: già lo sappiamo fare. Una pagina che lo asseconda — invece di rincorrerlo — è una pagina che si lascia leggere fino in fondo.
-
Capitolo 06 Numeri che hanno peso
I numeri non sono mai solo numeri: sono cifre con un peso tipografico, un segno che dice subito, una convenzione locale. L'interfaccia che li tratta con cura non li mostra — li lascia leggere.
-
Capitolo 07 Anatomia di un input
Un campo da compilare è il momento in cui un sito chiede qualcosa all'utente — e in quel momento si vede subito che voce ha. Lo apriamo qui, dalla label che non mente alla validazione che ascolta.
-
Capitolo 08 La micro-tipografia
Quasi tutto, in un'interfaccia, è testo. E il testo ha mille piccole decisioni — la virgoletta che si curva, il titolo che non lascia parole sole, la riga che dura quanto basta — che decidono se la pagina respira o trattiene il fiato.
-
Capitolo 09 Anatomia di un toggle
Un bottone si preme e torna. Uno switch si impegna in una posizione e ci resta. Quella differenza — due posizioni, non due stati — cambia tutto il modo in cui si disegna un controllo binario, e nasconde una famiglia di parenti più larga di quanto sembri.
-
Capitolo 10 Anatomia di un toast
Un toast è la cosa più difficile da fare bene: dare un'informazione senza rubare l'attenzione, restare il giusto e andarsene quando ha finito. Sbagliare il tono, la durata o la voce lo trasforma da cortesia in interruzione.
-
Capitolo 11 Anatomia di un menu
Un menu offre una scelta, ma ogni scelta ruba un po' di contesto: copre quello che stavi guardando, sposta il fuoco, chiede di ricordare dov'eri. Il mestiere non è aprire un elenco — è offrire le strade tenendo l'utente ancorato a dove si trova.
-
Capitolo 12 Anatomia di una tab
Una tab non sceglie un valore: cambia il contesto sotto i piedi. Il problema vero non è dove mettere l'indicatore, ma come spostare l'utente in un altro pannello senza fargli perdere il filo di dov'era.
-
Capitolo 13 Anatomia di una scheda
La card sembra il componente più innocuo del web: un rettangolo con un bordo. Ma quel rettangolo deve dire in che ordine leggere, dove si clicca, quanto c'è sotto e cosa è onesto contare. Cinque card, cinque mestieri diversi nascosti nella stessa forma.
-
Capitolo 14 Anatomia di un divider
Una linea che separa è la decisione più piccola di una pagina, e per questo la più trascurata. Eppure scegliere fra una regola disegnata e un po’ d’aria che accade è scegliere come suona il silenzio fra due blocchi.
-
Capitolo 15 La pagina lunga
Dieci minuti di lettura sono un piccolo viaggio: chi parte vuole sapere dove si trova, quanto manca, e ritrovare il punto se si allontana. Sono i dettagli che tengono compagnia senza mettersi davanti al testo.
-
Capitolo 16 La griglia editoriale
Una pagina sembra elegante prima di essere bella, e quasi sempre per un motivo solo: ogni blocco si appoggia alla stessa linea. Cinque modi di costruire e spezzare la griglia con CSS — named lines, subgrid, full-bleed, container query — senza un solo file immagine.
-
Capitolo 17 La citazione
Dare la parola a un altro sembra questione di due virgolette. Ma quali virgolette, in che lingua, con quale fonte, e con quanta enfasi: ogni scelta cambia chi sta parlando, e quanto ci si fida di lui.
-
Capitolo 18 La nota a margine
Una nota non deve interrompere per essere letta. Vive a margine, si ripiega quando serve, e lascia che sia il lettore a decidere quanto vuole ascoltarti — è il modo più antico, e più gentile, di parlargli senza spezzargli il filo.
-
Capitolo 19 L’indice del libro
Un sito che parla di sé deve sapersi orientare al suo interno: indici che si espandono, briciole che omettono i livelli inutili, miniature fatte di tipografia e non di screenshot. La navigazione editoriale è prima di tutto una questione di onestà su dove ti trovi.
-
Capitolo 20 Le immagini in editoria
Un'immagine a volte porta informazione e a volte è solo respiro, e quasi tutto il lavoro sta nel non confondere i due casi: dove la foto dice qualcosa la si annota e la si apre, dove serve a far prendere fiato la si lascia muta.
-
Capitolo 21 Il drag e il drop
Trascinare è il gesto più diretto e il più escludente: nato per il mouse, lascia fuori chi usa la tastiera. Questo capitolo costruisce cinque drag-and-drop e a ognuno cuce addosso un gemello da tastiera con annunci a voce — perché un oggetto in volo deve poter essere afferrato anche senza mano.
-
Capitolo 22 La ricerca as-you-type
Una ricerca che risponde mentre scrivi sembra magia, ma è regia: debounce, token che invalidano le risposte vecchie, una soglia sotto cui lo spinner non deve apparire. Tutto succede tra un tasto e l'altro, dove l'utente non guarda.
-
Capitolo 23 Il calendario
Chiedere una data è uno dei modi più facili per far odiare un form: tre menu a tendina, un fuso orario taciuto, un «fra 3 giorni» che non dice quale. Cinque modi per chiederla con rispetto — tastiera-first, fusi espliciti, linguaggio naturale onesto.
-
Capitolo 24 La timeline
Una tabella di date si legge una riga alla volta; una timeline si legge con l'occhio. Trasformare il tempo in un oggetto visuale — una linea, un percorso, una barra, un nastro da riavvolgere — non è decorazione: è dare allo scorrere una forma che il cervello capisce prima di leggere.
-
Capitolo 25 Il gesto
Toccare non è cliccare: il dito segue, trascina, tira. Ma ogni gesto qui ha un pulsante e una scorciatoia che fanno la stessa cosa — perché un gesto è un acceleratore, non un cancello.
-
Capitolo 26 Il commiato
Per quasi tutto il libro abbiamo lavorato perché l'utente restasse. Questo capitolo chiede l'opposto: come si lascia andare qualcuno senza trattenerlo per forza, senza punirlo, senza fargli credere che andarsene sia un errore.
Roadmap
Dove sta andando il libro.
-
A Fase A · Primi 8 capitoli
-
Anatomia di un bottone
Cosa rende affidabile il gesto più elementare dell’interfaccia?
-
L’arte dell’attesa
Come si rende l’attesa un atto di rispetto?
-
La voce del vuoto
Come parla un’interfaccia quando non ha nulla da mostrare?
-
Il dialogo silenzioso
Come si interrompe l’utente senza fare rumore?
-
Lo scroll che racconta
Cosa può dire un’interfaccia con il solo gesto dello scroll?
-
Numeri che hanno peso
Quando una cifra è informazione e quando è rumore?
-
Anatomia di un input
Come ascolta un campo, mentre l’utente scrive?
-
La micro-tipografia
Dove finisce la lettera e dove comincia il ritmo?
-
-
B Fase B · Componenti primari
-
Anatomia di un toggle
La differenza tra un bottone e uno switch è solo grafica?
-
Anatomia di un toast
Come si dà un’informazione senza interrompere?
-
Anatomia di un menu
Come si offre una scelta senza nascondere il contesto?
-
Anatomia di una tab
Come si cambia contesto senza disorientare?
-
Anatomia di una scheda
La card è solo un rettangolo con bordo?
-
Anatomia di un divider Prossimo
Il silenzio nella pagina si disegna o si lascia accadere?
Prossimo
-
-
C Fase C · Pattern editoriali
-
La pagina lunga
Come si tiene compagnia a chi legge per dieci minuti?
In programma -
La griglia editoriale
Cosa rende una pagina elegante prima ancora di essere bella?
In programma -
La citazione
Quando si dà la parola a qualcun altro, come la si presenta?
In programma -
La nota a margine
Come si dialoga col proprio lettore senza interrompere il filo?
In programma -
L’indice del libro
Un sito che parla di sé, come si orienta al suo interno?
In programma -
Le immagini in editoria
Quando un’immagine è informazione e quando è respiro?
In programma
-
-
D Fase D · Pattern complessi
-
Il drag e il drop
Come si tiene un oggetto in volo?
In programma -
La ricerca tipo-as-you-go
Cosa succede tra ogni tasto premuto?
In programma -
Il calendario
Come si chiede una data senza odiare il browser?
In programma -
La timeline
Il tempo come oggetto visuale, non come tabella.
In programma -
Il gesto
Cosa cambia quando l’interfaccia si tocca, invece di cliccarla?
In programma -
Il commiato
Come si lascia andare un utente?
In programma
-
Cosa non è
- Un design system da distribuire
- Un framework, una libreria, uno starter
- Una raccolta di best practice universali
- Fatto per impressionare — semmai, per capire.
Astro, CSS nativo, Motion. Epilogue e Inconsolata. Niente Tailwind, niente UI kit.
Leggi i capitoli