Cliccabilità nelle interfacce: segnali e principi di progettazione

Cos'è la cliccabilità

La cliccabilità è il grado in cui un elemento dell'interfaccia comunica visivamente all'utente che l'interazione è possibile. In termini di UX design, questo fa parte del concetto di affordance, introdotto dallo psicologo James Gibson.

Il designer Don Norman ha reso popolare il concetto di affordance in relazione alle interfacce. Nel libro “La caffettiera del masochista” (2013), ha descritto come la forma e l'aspetto di un oggetto dovrebbero suggerirne l'uso. Un pulsante deve sembrare un pulsante — questa è l'affordance della cliccabilità.

Secondo UX Collective (2025), il 34% degli utenti non clicca su un elemento se non sembra cliccabile, anche se tecnicamente il clic viene elaborato. Questo evidenzia l'importanza del feedback visivo nell'interfaccia.

Anti-pattern: pulsanti non cliccabili

Testo senza sottolineatura, icone piatte senza evidenziazione, elementi grigi senza cursore pointer — questi sono anti-pattern classici in cui un elemento è interattivo ma non sembra. Gli utenti perdono tempo a cercare aree cliccabili, degradando l'UX.

Affordance visive della cliccabilità

Le affordance visive sono segnali esterni che indicano interattività. Si dividono in diverse categorie: forma, colore, ombra, texture e animazione.

Gli esseri umani si sono evoluti per capire che gli oggetti con determinate proprietà visive possono essere toccati o spostati. I designer utilizzano questi schemi percettivi innati per creare interfacce intuitive.

L'affordance più forte è l'ombra (effetto di sollevamento). Il Material Design di Google è costruito sulla metafora di strati fisici, dove ogni elemento interattivo ha la propria altezza (elevazione). Gli utenti capiscono intuitivamente che una carta con ombra può essere cliccata.

Stati degli elementi interattivi

Ogni elemento cliccabile deve avere almeno quattro stati: normal, hover, active, disabled. Le differenze visive tra gli stati aiutano l'utente a comprendere la situazione attuale.

/* Interactive element states */
.btn {
    background: #4A90D9;
    transition: all 0.2s ease;
}

.btn:hover {
    background: #357ABD;  /* Darker on hover */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn:active {
    transform: scale(0.97);  /* Press effect */
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

Stato normal — l'aspetto base dell'elemento a riposo. Stato hover — la reazione al passaggio del cursore, che conferma che l'elemento è pronto per l'interazione. Stato active — il momento del clic, che fornisce feedback tattile. Stato disabled — l'elemento è inattivo e visivamente attenuato.

Secondo Google Material Design Guide (2024), la dimensione minima del bersaglio tattile per i dispositivi touch è 48x48 dp, e la dimensione ottimale è 56x56 dp. Dimensioni inferiori riducono la cliccabilità sui dispositivi mobili.

Il cursore come indicatore di cliccabilità

Il cambio di cursore è uno dei modi più antichi ed efficaci per indicare la cliccabilità. La proprietà CSS cursor: pointer trasforma la freccia in una mano che punta, segnalando che l'elemento è interattivo.

/* Standard cursor values */
.clickable {
    cursor: pointer;   /* Pointer for buttons and links */
}

.moveable {
    cursor: grab;      /* Grab cursor for drag */
}

.resizable {
    cursor: ew-resize; /* Resize cursor for width */
}

La regola dell'indice: cursor: pointer dovrebbe essere usato su tutti gli elementi cliccabili — pulsanti, collegamenti, interruttori, icone. Sugli elementi non interattivi, il cursore dovrebbe rimanere la freccia standard (cursor: default).

Errori di utilizzo: cursor: pointer su testo normale fuorvia gli utenti. Non utilizzare il cursore pointer su elementi che non elaborano un clic — questo distrugge la fiducia nell'interfaccia.

Legge di Fitts nel design dei pulsanti

La legge di Fitts è una legge ergonomica che descrive il tempo necessario per raggiungere un bersaglio. Nel contesto delle interfacce: più grande e vicino è il bersaglio (pulsante), più velocemente l'utente ci clicca sopra.

Formula della legge di Fitts: T = a + b * log2(D / W + 1), dove T è il tempo di raggiungimento, D è la distanza dal bersaglio e W è la dimensione del bersaglio. Raddoppiare la dimensione del pulsante riduce il tempo di clic del 15–20%.

Secondo Apple Human Interface Guidelines (2024), la dimensione minima del bersaglio tattile è 44x44 punti. Google Material Design raccomanda 48x48 dp. In pratica, i pulsanti CTA dovrebbero essere di almeno 56x56 dp per un'interazione confortevole.

Angoli dello schermo — bersagli infiniti

Gli angoli e i bordi dello schermo sono bersagli infiniti secondo la legge di Fitts — il cursore non può sbagliare oltre il limite dello schermo. Ecco perché i pulsanti importanti (menu, chiudi) sono spesso posizionati negli angoli. Nelle interfacce mobili, i pollici si estendono naturalmente verso la parte inferiore dello schermo.

Pattern di elementi cliccabili

I pattern consolidati di cliccabilità si sono formati nel corso di decenni di web design. Il loro uso rende le interfacce intuitive senza formazione dell'utente.

Pattern del pulsante con ombra — lo standard Material Design. Il pulsante è sollevato sopra la superficie, l'ombra aumenta al passaggio del mouse e scompare al clic. Questo pattern è utilizzato in milioni di app e siti web.

Pattern del pulsante piatto — dopo l'aggiornamento di iOS 7, il design piatto senza ombre è diventato popolare. In questi pulsanti, la cliccabilità è trasmessa attraverso colore, bordo o icona. I pulsanti piatti richiedono accenti di colore più vivaci.

Pattern del pulsante fantasma — un pulsante trasparente con un bordo che si riempie di colore al passaggio del mouse. Utilizzato per azioni secondarie accanto al CTA principale.

• Seguire le convenzioni della piattaforma — iOS, Android e il web hanno i propri standard di cliccabilità
• Coerenza — gli stessi elementi appaiono uguali ovunque
• Feedback — ogni clic deve avere una reazione istantanea
• Accessibilità — la cliccabilità deve essere comprensibile anche quando si utilizza uno screen reader