Sai davvero riconoscere un’interfaccia “stonata”? Un test pratico per allenare l’occhio UI

Capita a tutti: apri una schermata e senti che “non funziona”, ma non riesci a dire perché. Quel perché, nella maggior parte dei casi, non è un mistero artistico: è la somma di piccole incoerenze su alcuni fondamentali.

Il problema diventa più evidente oggi, quando tra design system, component library e strumenti generativi è facile produrre rapidamente qualcosa di “presentabile”… ma altrettanto facile lasciarsi dietro difetti di qualità percepita. Se non sai individuarli, finisci per approvare UI che sembrano quasi giuste — e quel quasi pesa.

Qui sotto trovi un approccio pratico per allenare l’occhio, basato su sei fondamentali ricorrenti. L’obiettivo è semplice: guardare un’interfaccia e chiedersi quale principio è stato applicato male.

---

I 6 fondamentali da controllare (sempre)

1) White space (spaziatura)

La spaziatura è il “respiro” del layout: distanza tra elementi, padding, margini, ritmo verticale.

Cosa cercare:

• Elementi troppo compressi o troppo distanti senza motivo.
• Padding incoerente tra componenti simili.
• Blocchi che non seguono un ritmo (es. 8/16/24) e sembrano “casuali”.

In molte UI apparentemente ok, lo white space è quasi corretto: proprio per questo vale la pena di controllarlo per primo e scartarlo se non ci sono segnali evidenti.

---

2) Contrasto

Il contrasto è leggibilità, gerarchia e accessibilità. Ed è un punto dove si cade spesso, perché certe combinazioni “sembrano eleganti” finché non le usi davvero.

Cosa cercare:

• Testo scuro su sfondo scuro (o chiaro su chiaro) che affatica.
• Stati secondari (placeholder, hint, metadati) troppo deboli.
• Elementi interattivi che non emergono abbastanza rispetto al contesto.

Un classico errore: una label nera su grigio scuro. Non serve un redesign: spesso basta correggere valore e/o peso del colore per recuperare immediatamente qualità.

---

3) Colore

Il colore non è solo estetica: è semantica e coerenza. Se lo usi a caso, l’interfaccia comunica cose sbagliate.

Cosa cercare:

• Accostamenti che “vibrano” o stonano (es. viola su blu freddo con saturazioni simili).
• Colori semanticamente sbagliati (es. rosso per evidenziare un piano tariffario consigliato: il rosso richiama errore/pericolo).
• Troppi colori “protagonisti” che competono.

Quando un elemento spicca, chiediti: perché deve spiccare? e quel colore cosa suggerisce?

---

4) Tipografia

La tipografia è coerenza di famiglia, pesi, larghezze, stili e sistema di gerarchie.

Cosa cercare:

• Font o varianti che non appartengono allo stesso “set” (es. un condensed accanto a un extended).
• Titoli con personalità diversa rispetto al resto del sistema.
• Mischiare troppo spesso stili (caps, tracking, pesi) senza regole.

Un mismatch tipografico può sembrare un dettaglio, ma altera subito la sensazione di “prodotto rifinito”. Spesso la correzione è banalmente uniformare la scelta (stessa famiglia/asse ottico/ampiezza) e ricalibrare le gerarchie.

---

5) Scala

La scala riguarda le proporzioni: dimensioni relative tra titoli, sottotitoli, testo, icone, loghi e componenti.

Cosa cercare:

• Un titolo troppo grande rispetto al contesto (o il contrario).
• Gerarchie invertite (il brand enorme e il contenuto micro, oppure CTA che non guida lo sguardo).
• Componenti con dimensioni che non rispettano la stessa logica (es. badge enormi accanto a testo piccolo).

Un buon trucco: zoom out mentale. Se guardi l’insieme, la gerarchia dovrebbe essere leggibile anche senza leggere le parole.

---

6) Allineamento

L’allineamento è ciò che fa sembrare una UI “in ordine”. Basta un rientro strano per farla percepire trascurata.

Cosa cercare:

• Indent non giustificati che rompono una colonna.
• Elementi che non rispettano la griglia (logo allineato, menu no; titolo centrato, contenuti a sinistra senza motivo).
• Blocchi simili che non condividono la stessa baseline o lo stesso asse.

Esempio tipico: in un footer, il logo definisce una colonna. Se un elenco di link parte più a destra senza una ragione strutturale, sembra “sbagliato” anche se tecnicamente funziona.

---

Un metodo rapido: diagnosi per esclusione

Quando ti trovi davanti una schermata che non convince:

1. Parti dallo white space: se è coerente, mettilo da parte.
2. Controlla contrasto e colore: sono gli errori più immediati e impattano UX/accessibilità.
3. Guarda la tipografia: coerenza di stile prima ancora della “bellezza”.
4. Valuta scala e gerarchia: cosa guida l’occhio? ha senso?
5. Chiudi con allineamento: cerca la colonna/griglia implicita e verifica chi la sta violando.

Questo approccio è utile perché trasforma un “non mi piace” in un’ipotesi verificabile: è contrasto, è allineamento, è scala.

---

Perché queste micro-correzioni contano davvero

La qualità di un prodotto non crolla per un singolo padding sbagliato. Crolla quando:

• lo stesso tipo di errore si ripete su molte schermate;
• ogni componente introduce una piccola incoerenza;
• l’utente percepisce disordine, fatica visiva o ambiguità semantica.

Il punto non è diventare “puristi del pixel”: è costruire un’abitudine di controllo che ti permette di lavorare più velocemente e con più sicurezza, anche quando parti da template o generazioni automatiche.

---

Come allenarti (senza perdere settimane)

Un esercizio efficace è lavorare su schermate volutamente imperfette e provare a identificare quali fondamentali sono violati, verificando subito dopo la correzione.

Se vuoi, puoi anche trasformarlo in una routine da 10 minuti:

• apri una UI (tua o altrui),
• segnati 2 ipotesi (es. “contrasto + allineamento”),
• applica solo fix minimali,
• confronta prima/dopo.

Allenare l’occhio è una skill: più esempi vedi, più rapidamente individui pattern ricorrenti. E a un certo punto inizi a prevenire l’errore mentre disegni o implementi.