Stati di colore nella navigazione: hover, attivo, focus—mantenere la coerenza

Un proprietario di negozio una volta mi ha mostrato le analitiche del suo sito e mi ha indicato uno schema strano: gli utenti stavano passando il mouse sugli elementi di navigazione ripetutamente—a volte 5 o 6 volte sullo stesso link—prima di fare clic. Lo stato hover era lì, tecnicamente. Ma il cambio di colore era così sottile (da #333333 a #444444, un cambiamento appena percettibile) che gli utenti non riuscivano a capire se stessero puntando a un elemento cliccabile o solo spostando il mouse sulla pagina.

Hanno cambiato lo stato hover per includere una sottolineatura visibile e uno spostamento di colore verso l’arancione del loro marchio. Il tempo medio al primo clic è sceso di 4 secondi. I clic sulla navigazione sono aumentati del 28%. Stessi elementi di menu. Stessa struttura. L’unica differenza era la chiarezza degli stati di interazione.

La navigazione ha molteplici stati—predefinito, hover, attivo, focus, visitato—e la maggior parte dei negozi progetta con attenzione solo lo stato predefinito. Il risultato è menu dove gli utenti non riescono a capire con sicurezza dove stanno puntando, cosa hanno cliccato o dove si trovano attualmente. Risolvere questo non significa aggiungere più colori. Si tratta di definire un sistema coerente che funzioni in ogni stato.

Perché gli stati di navigazione sono importanti per l’usabilità

Su desktop, gli utenti si affidano al feedback hover per determinare cosa è cliccabile. Su mobile, non c’è hover—quindi lo stato predefinito deve chiaramente segnalare l’interattività. Su entrambi, lo stato attivo mostra dove si trova l’utente, e lo stato focus (per la navigazione da tastiera) fornisce accessibilità e precisione.

Quando questi stati hanno colori incoerenti, gli utenti sperimentano micro-confusione: “Il mio hover è stato registrato? È cliccabile? Sono su questa pagina o su un’altra?” Ogni momento di dubbio aumenta il carico cognitivo e rallenta la navigazione. Nel corso di una sessione, si accumula in frustrazione e abbandono.

Il Nielsen Norman Group ha scoperto che gli utenti si affidano a un feedback interattivo coerente per costruire modelli mentali di come funziona un sito. Se il tuo stato hover è una sottolineatura sulla homepage ma uno spostamento di colore di sfondo sulle pagine di categoria, gli utenti devono imparare di nuovo la tua navigazione su ogni pagina. È uno sforzo mentale sprecato che dovrebbe essere dedicato alla valutazione dei prodotti.

I cinque stati di navigazione che devi progettare

La maggior parte della navigazione ha almeno cinque stati distinti. Ognuno ha bisogno di un suo chiaro trattamento di colore.

1. Predefinito (stato di riposo)

Questo è come appare l’elemento di navigazione prima di qualsiasi interazione. Dovrebbe essere ad alto contrasto (7:1+ con lo sfondo) e chiaramente distinguibile dal testo non cliccabile.

Strategia di colore: Usa il tuo colore di testo di navigazione primario—tipicamente nero, grigio molto scuro o un colore di marchio ad alto contrasto.

Errore comune: Usare grigio medio che sembra moderno in Figma ma non supera i controlli di contrasto e si fonde nella pagina.

2. Hover (passaggio del mouse)

Quando un utente passa il mouse su un elemento di navigazione, lo stato hover conferma che è interattivo. Il cambio deve essere immediatamente notevole—non sottile.

Strategia di colore: Tre approcci affidabili:

• Spostamento verso colore di accento: Predefinito è nero, hover cambia verso arancione del marchio (con sottolineatura o sfondo)
• Scurisci o schiarisci: Predefinito è #2a2a2a, hover diventa #000000 (con sottolineatura aggiunta)
• Aggiungi sfondo: Predefinito è testo scuro su sfondo chiaro, hover aggiunge uno sfondo di colore chiaro dietro il testo

Regola: Lo stato hover deve avere almeno 3:1 di contrasto con lo stato predefinito (così gli utenti possono notare la differenza) e mantenere 7:1+ di contrasto con lo sfondo (così rimane leggibile).

Errore comune: Stati hover che riducono il contrasto. Predefinito è nero (#000000), hover diventa grigio chiaro (#cccccc)—gli utenti letteralmente non riescono a leggere quello su cui stanno puntando.

3. Attivo (attualmente in fase di clic)

Lo stato attivo fornisce un feedback al decimo di secondo che un clic è stato registrato. È l’equivalente visivo di un pulsante che si preme. La maggior parte degli utenti non lo noterà consciamente, ma la sua assenza crea una sensazione sottile che l’interfaccia non sia reattiva.

Strategia di colore: Breve enfasi visiva—leggermente più scuro di hover o un flash di sfondo rapido. Questo stato dura solo millisecondi, quindi non ha bisogno di essere bello—solo notevole.

Errore comune: Nessuno stato attivo, o uno identico a hover (così gli utenti non ottengono la conferma del clic).

4. Focus (navigazione da tastiera)

Quando gli utenti navigano con la tastiera (tasto Tab), lo stato focus mostra quale elemento attualmente ha il focus da tastiera. Questo è legalmente richiesto per l’accessibilità (WCAG 2.1) ed essenziale per gli utenti esperti.

Strategia di colore: Un contorno colorato (solitamente 2-3px solido) nel colore di accento del tuo marchio. Il contorno dovrebbe essere chiaramente visibile sia sullo sfondo della navigazione che sul testo del link.

Regola: I contorni focus devono avere 3:1 di contrasto con lo sfondo. Non impostare outline: none nel tuo CSS a meno che non lo sostituisca con un indicatore di focus personalizzato altrettanto visibile.

Errore comune: Rimuovere completamente i contorni focus perché “non hanno un bell’aspetto”. Questo interrompe la navigazione da tastiera per gli utenti con disabilità di accessibilità e gli utenti esperti che preferiscono i tasti di scelta rapida.

5. Corrente (indicatore della pagina attiva)

Lo stato corrente mostra agli utenti quale pagina stanno visualizzando. Un utente che visualizza “Prodotti” dovrebbe vedere l’elemento di navigazione “Prodotti” visivamente distinto dagli altri elementi—solitamente attraverso colore, peso in grassetto o una sottolineatura.

Strategia di colore: Usa il tuo colore di accento primario e/o il peso in grassetto. Questo stato dovrebbe essere il più visivamente distinto dopo hover, poiché fornisce un feedback di orientamento persistente.

Errore comune: Rendere lo stato corrente troppo sottile (testo leggermente più scuro) così gli utenti non riescono a capire quale sezione visitano. Oppure renderlo incoerente—sottolineato su alcune pagine, grassetto su altre.

Costruire un sistema coerente di stati di colore

Ecco un framework pratico per definire colori degli stati di navigazione che funzionino insieme.

Passaggio 1: Inizia con il tuo stato predefinito

Il tuo testo di navigazione predefinito dovrebbe avere un alto contrasto con lo sfondo. Diciamo che lo sfondo della navigazione è bianco (#ffffff) e il tuo testo predefinito è grigio molto scuro (#1a1a1a)—questo è un rapporto di contrasto 16.1:1, ben al di sopra dell’obiettivo 7:1.

Passaggio 2: Definisci il tuo stato hover

Il tuo stato hover ha bisogno di essere notevolmente diverso ma comunque ad alto contrasto. Tre opzioni:

Opzione A: Spostamento di colore + sottolineatura

• Predefinito: #1a1a1a (grigio scuro)
• Hover: #ff6b35 (arancione del marchio) + bordo inferiore 2px nello stesso arancione
• Contrasto con sfondo: 4.7:1 (supera WCAG AA, vicino a AAA)

Opzione B: Scurisci + sottolineatura

• Predefinito: #1a1a1a
• Hover: #000000 (nero puro) + bordo inferiore 2px
• Contrasto con sfondo: 21:1 (massimo)

Opzione C: Spostamento di sfondo

• Predefinito: #1a1a1a testo su bianco
• Hover: #1a1a1a testo su sfondo pesca chiaro (#fff4f0)
• Contrasto: Testo-sfondo rimane 16.1:1; lo spostamento di sfondo è sottile ma chiaro

Scegli l’approccio che corrisponde allo stile visivo del tuo marchio, quindi applicalo in modo coerente a tutti gli elementi di navigazione.

Passaggio 3: Definisci il tuo stato attivo

Per la maggior parte dei siti, attivo può essere una versione leggermente più scura o più satura di hover. Se hover è arancione con una sottolineatura, attivo è arancione più scuro con la stessa sottolineatura. Ha solo bisogno di essere percettibilmente diverso per una frazione di secondo.

Passaggio 4: Definisci il tuo stato focus

Usa un contorno solido 2-3px nel colore di marchio primario. Testalo sia sullo sfondo della navigazione che sul colore del testo per assicurarti che sia visibile. La maggior parte dei browser moderni utilizza per impostazione predefinita un contorno blu, ma dovresti personalizzarlo per adattarlo al tuo marchio.

Esempio CSS:

a:focus {
  outline: 2px solid #ff6b35; /* arancione del marchio */
  outline-offset: 2px; /* spazio tra testo e contorno */
}

Passaggio 5: Definisci l’indicatore della pagina corrente

Lo stato corrente dovrebbe usare il colore di accento primario del tuo marchio e essere visivamente distinto senza competere con hover. Modelli comuni:

• Grassetto + colore di accento: Il testo è in grassetto e usa l’arancione del marchio al posto del grigio predefinito
• Sottolineatura + colore di accento: Il testo ha una sottolineatura persistente in arancione del marchio
• Sfondo + accento: Sfondo chiaro nel colore del marchio dietro il testo

Scegli un modello e usalo in modo coerente. Gli utenti dovrebbero essere in grado di dare un’occhiata alla tua navigazione e individuare istantaneamente l’indicatore della pagina corrente.

Errori comuni negli stati di colore della navigazione che confondono gli utenti

Errore 1: Stati hover invisibili

Il problema: Lo spostamento di colore hover da #3a3a3a a #4a4a4a—un rapporto di contrasto 1.1:1 che è impercettibile agli utenti. Passano il mouse e niente sembra accadere.

La soluzione: Mirare ad almeno 3:1 di contrasto tra gli stati predefiniti e hover. Aggiungi una sottolineatura o uno spostamento di sfondo se il colore da solo non è sufficiente.

Errore 2: Stati hover che riducono la leggibilità

Il problema: Predefinito è testo nero (#000000) su sfondo bianco (contrasto 21:1). Hover cambia il testo in grigio chiaro (#cccccc) su bianco (contrasto 1.6:1). Gli utenti non riescono a leggere il link su cui stanno passando il mouse.

La soluzione: Hover dovrebbe mantenere o aumentare il contrasto con lo sfondo. Se vuoi usare un colore più chiaro su hover, aggiungi uno sfondo scuro dietro di esso.

Errore 3: Indicatori di pagina corrente incoerenti

Il problema: Sulla homepage, l’elemento di navigazione corrente è in grassetto. Sulle pagine di categoria, è sottolineato. Sulle pagine di prodotto, è un colore diverso. Gli utenti non hanno un modo coerente per orientarsi.

La soluzione: Scegli un trattamento visivo per lo stato corrente (grassetto + colore di accento è comune) e applicalo ovunque. La coerenza crea riconoscimento.

Errore 4: Nessuno stato focus (o stato focus invisibile)

Il problema: Il CSS include a:focus { outline: none; } per “ripulire” il contorno browser predefinito, ma nessuno stile focus personalizzato lo sostituisce. Gli utenti da tastiera non riescono a capire quale link ha il focus.

La soluzione: Non rimuovere mai i contorni focus senza sostituirli. Usa un contorno colorato o uno spostamento di sfondo che sia chiaramente visibile.

Errore 5: Stati mobile che non si traducono

Il problema: Su desktop, gli stati hover sono perfetti—chiaro cambio di colore, sottolineatura appare, tutto funziona. Su mobile, non c’è hover. Lo stato predefinito non segnala chiaramente cosa è cliccabile, e gli utenti toccano esitanti.

La soluzione: Gli stati predefiniti su mobile dovrebbero essere leggermente più enfatici che su desktop. Considera di aggiungere un’icona sottile (freccia, chevron) o rendere il testo leggermente più in grassetto in modo che l’interattività sia ovvia senza hover.

Definire stati per diversi componenti di navigazione

Diversi elementi di navigazione hanno bisogno di trattamenti degli stati leggermente diversi.

Elementi di menu di primo livello (barra di navigazione orizzontale)

Queste sono le tue categorie primarie: “Negozio”, “Chi siamo”, “Contatti”. Hanno bisogno del trattamento completo di cinque stati: predefinito, hover, attivo, focus, corrente.

Modello consigliato: Predefinito in grigio scuro, hover con colore del marchio + sottolineatura, pagina corrente in grassetto + colore del marchio.

Elementi di menu a discesa/mega menu

Gli elementi all’interno dei menu a discesa sono una navigazione secondaria. Dovrebbero usare lo stesso sistema di colori degli elementi di primo livello ma possono essere leggermente meno enfatizzati (testo più piccolo, nessun grassetto nello stato predefinito).

Modello consigliato: Predefinito in grigio medio-scuro, hover con sottolineatura solo (nessun cambio di colore necessario), pagina corrente uguale al primo livello.

Pulsanti CTA nella navigazione

Il tuo pulsante “Acquista ora” o “Iscriviti” nella navigazione è visivamente distinto—è già un pulsante con uno sfondo. I suoi stati dovrebbero essere coerenti con il modello di pulsante in tutto il tuo sito.

Modello consigliato: Predefinito con sfondo colorato del marchio, hover con sfondo leggermente più scuro o scala/ombra leggera, focus con contorno al di fuori del pulsante.

Elementi hamburger mobile e tab bar

La navigazione mobile spesso utilizza icone con etichette. Il sistema di stati dovrebbe adattarsi a questo modello visivo mantenendo coerenza.

Modello consigliato: Icona predefinita + etichetta in grigio scuro, il tocco cambia lo sfondo per una frazione di secondo (stato attivo), pagina corrente usa il colore di accento sia per icona che etichetta.

Testare il tuo sistema di stati di colore

Il test hover

Apri la tua navigazione su desktop e sposta lentamente il mouse su ogni elemento. Puoi dire istantaneamente quando stai passando il mouse? Dubbi mai se il tuo hover è stato registrato? Se c’è una qualsiasi esitazione, il tuo stato hover non è abbastanza distinto.

Il test della pagina corrente

Accedi a tre pagine diverse sul tuo sito. Su ogni pagina, dai un’occhiata alla navigazione per un secondo. Puoi dire immediatamente quale pagina stai visitando? Se devi studiare la navigazione per capirlo, il tuo stato corrente non è sufficientemente ovvio.

Il test da tastiera

Scollega il mouse. Accedi a tutto il tuo sito usando solo il tasto Tab e Invio. Puoi sempre dire quale elemento di navigazione ha il focus? Se perdi traccia di dove sei, i tuoi stati focus hanno bisogno di lavoro.

Il test di tocco mobile

Su mobile, tocca un elemento di navigazione e osserva attentamente. Ottieni un feedback visivo immediato che il tuo tocco è stato registrato? Oppure c’è un momento di dubbio dove ti chiedi se devi toccare di nuovo? Gli stati attivi mobile sono cruciali per la reattività percepita.

Il test di coerenza

Naviga su più pagine e più sezioni del tuo sito. I colori hover si comportano sempre nello stesso modo? Gli indicatori di pagina corrente usano sempre lo stesso modello visivo? Qualsiasi incoerenza crea confusione.

Audit veloceApri la tua navigazione in Chrome DevTools, fai clic con il pulsante destro su un link e ispeziona il CSS per `:hover`, `:active`, `:focus` e `.active` (o come il tuo tema contrassegna le pagine correnti). Sono definiti tutti e quattro gli stati? Soddisfano i requisiti di contrasto? Se qualcuno manca o ha basso contrasto, aggiungerli ora migliorerà immediatamente l'usabilità.

La documentazione degli stati di colore di cui hai bisogno

Una volta definiti gli stati di colore della navigazione, documentali. Questo previene che futuri designer o sviluppatori rompano il sistema.

Crea un riferimento semplice come questo:

Stati di colore della navigazione

Includi codici hex, pesi, stili di bordo—tutto ciò che serve per ricreare gli stati in modo coerente.

Per i negozi che utilizzano un generatore di navigazione come Navi+, puoi salvare questi stati come preset e applicarli a tutti i componenti di navigazione senza codificare manualmente ogni stato. Questo blocca la coerenza e rende gli aggiornamenti (come cambiare il colore del tuo marchio) propagarsi automaticamente a tutti e cinque gli stati su desktop e mobile.

La conclusione

Gli utenti non riescono a navigare con sicurezza se non riescono a capire dove stanno puntando, cosa hanno cliccato o dove si trovano attualmente. Gli stati di colore della navigazione risolvono questo fornendo un feedback coerente ad alto contrasto in ogni punto di interazione.

Definisci tutti e cinque gli stati—predefinito, hover, attivo, focus, corrente—usando un approccio sistematico. Rendi gli stati hover chiaramente distinti (contrasto 3:1 con predefinito). Mantieni alto contrasto con gli sfondi in ogni stato (minimo 7:1+). Usa lo stesso modello visivo per gli indicatori di pagina corrente in tutto il tuo sito.

Testa i tuoi stati usando effettivamente la tua navigazione: passa il mouse, naviga da tastiera, cambia pagina e controlla mobile. Se c’è un momento di dubbio su se un elemento è interattivo o quale pagina stai visitando, i tuoi stati hanno bisogno di perfezionamento.

La coerenza degli stati di colore non è decorazione. È un’usabilità fondamentale che influisce direttamente su quanto velocemente e con quanta sicurezza gli utenti navigano nel tuo negozio.

Questo articolo fa parte della guida più ampia su Psicologia del colore nella navigazione: quali colori spingono all’azione?.