Combinazioni icona + etichetta: pattern di layout che convertono meglio

Hai deciso di usare icone con etichette di testo nella tua navigazione. Scelta giusta—i dati lo confermano. Ma la domanda successiva è meno ovvia e altrettanto importante: come disponi l’icona e l’etichetta l’una rispetto all’altra? Impilate verticalmente? Affiancate? L’etichetta solo al passaggio del mouse? Ogni pattern produce risultati misurabilmente diversi a seconda del contesto, e scegliere il layout sbagliato può annullare i vantaggi dell’aggiunta di etichette.

La disposizione di una coppia icona-etichetta influisce su tre cose contemporaneamente: la scansionabilità (quanto velocemente gli utenti trovano quello che vogliono), l’accuratezza del tap (quanto spesso colpiscono il bersaglio giusto), e la densità visiva (quanta navigazione puoi inserire in uno spazio determinato). Per trovare il giusto equilibrio per la navigazione specifica del tuo negozio devi capire cosa fa bene ogni pattern e dove funziona meno.

Pattern 1: impilamento verticale (icona sopra, etichetta sotto)

L’impilamento verticale è il pattern icona-etichetta più comune nelle interfacce mobile. L’icona si trova in alto, l’etichetta di testo si trova direttamente sotto, e i due formano una singola unità visiva. Questo è il pattern usato in ogni barra di tabulazione iOS, in ogni barra di navigazione inferiore Android, e praticamente in ogni app importante.

Le Linee guida dell’interfaccia umana di Apple specificano esplicitamente questo layout per le barre di tabulazione: icone a 25x25 punti con un’etichetta di testo direttamente sotto nel font di sistema. Le linee guida Material Design di Google rispecchiano questo, specificando icone a 24x24 dp con un’etichetta di 12 sp sotto. Entrambe le piattaforme sono arrivate allo stesso layout indipendentemente perché lo stack verticale risolve il problema fondamentale del mobile: lo spazio orizzontale limitato.

Perché funziona su mobile:

Uno schermo di telefono in modalità verticale è tipicamente largo 375–430 punti. Una barra di tabulazione mobile deve adattare 4–5 elementi di navigazione su quella larghezza. L’impilamento dell’icona sopra l’etichetta ti permette di adattare più elementi perché ogni elemento occupa circa 70–80 punti di larghezza piuttosto che i 120–150 punti necessari per una disposizione orizzontale.

Lo stack verticale crea anche un bersaglio di tap naturale che è più grande dell’icona o dell’etichetta da sola. Quando gli utenti mirano all’area generale di una coppia icona-etichetta, hanno un bersaglio che è circa 48–56 punti largo e 44–52 punti alto—comodamente al di sopra del minimo di 44x44 di Apple e 48x48 di Google. Questo è approssimativamente il 30–40% più indulgente di un pulsante solo icone a 24–28 punti.

I test A/B sui siti di ecommerce mobile lo confermano. Il test di Blend Commerce su negozi Shopify ha usato il layout dello stack verticale (corrispondente alla convenzione iOS) e ha misurato un incremento di conversione del 10,37% rispetto alla navigazione solo icone. Lo stack verticale non è solo il pattern più comune—è quello più testato.

Quando usarlo:

• Barre di tabulazione mobile o barre di navigazione inferiore (3–5 elementi)
• Navigazione in stile app dove vuoi corrispondere alle convenzioni iOS e Android
• Qualsiasi navigazione mobile persistente che rimane sullo schermo attraverso le visualizzazioni di pagina

Quando non funziona:

Lo stack verticale è meno ideale per i menu a scorrimento o i cassetti di navigazione, dove gli elementi sono elencati verticalmente. In quel contesto, l’impilamento di un’icona sopra la sua etichetta per ogni elemento di menu spreca spazio verticale e crea un ritmo visivo insolito. I menu a scorrimento usano invece il pattern orizzontale.

Pattern 2: affiancamento orizzontale (icona a sinistra, etichetta a destra)

L’affiancamento orizzontale posiziona l’icona a sinistra dell’etichetta di testo sulla stessa riga. Questo è il pattern standard per i menu a scorrimento, la navigazione laterale, le barre di navigazione desktop, e gli elenchi di navigazione.

Perché funziona per menu ed elenchi:

Quando gli elementi di navigazione sono elencati verticalmente—come in un menu hamburger, una barra laterale, o un menu a discesa—l’icona funge da ancora visiva che aiuta gli utenti a scansionare l’elenco più velocemente. La ricerca dell’MIT AgeLab sui pattern di scansione visiva ha scoperto che le icone allineate a sinistra creano “punti di riferimento” di scansione naturali che riducono il tempo necessario per localizzare un elemento specifico del 18–25% rispetto agli elenchi di solo testo.

L’affiancamento orizzontale si mappa anche ai pattern di lettura naturali. Nelle lingue da sinistra a destra, gli utenti scansionano prima l’icona (riconoscimento istantaneo), poi l’etichetta (conferma). Il movimento dell’occhio è fluido e lineare. In uno stack verticale, l’occhio deve muoversi verso il basso dall’icona all’etichetta, il che è più lento quando si scansiona un elenco di molti elementi.

Dimensioni e spaziature che funzionano:

Material Design fornisce guida specifica per le coppie icona-etichetta orizzontali nei cassetti di navigazione: icona a 24x24 dp, 16 dp di spazio tra l’icona e l’etichetta, etichetta in font medium-weight di 14 sp. L’altezza totale di ogni riga è 56 dp, il che fornisce un bersaglio di tap confortevole.

Le linee guida di Apple per la navigazione in stile elenco sono simili: icone a 22–29 punti (a seconda della complessità dell’icona), con l’etichetta a destra nel font di sistema. L’altezza della riga è minimo 44 punti.

Quando usarlo:

• Menu a scorrimento o hamburger
• Navigazione laterale su desktop
• Menu a discesa
• Schermate di impostazioni
• Qualsiasi navigazione elencata verticalmente dove gli elementi sono impilati da cima a fondo

Quando non funziona:

L’affiancamento orizzontale non funziona bene negli spazi orizzontali limitati come le barre di tabulazione mobile. Cinque elementi, ciascuno con un’icona e un’etichetta affiancate, semplicemente non si adattano a 375 punti di larghezza senza truncare le etichette o rendere il testo illeggibilmente piccolo.

Pattern 3: etichetta al passaggio (solo icona, testo appare al passaggio)

L’etichetta al passaggio è un pattern sempre più comune su desktop, specialmente nella navigazione laterale come quella usata in Gmail, Slack, e varie applicazioni di dashboard. La navigazione mostra solo icone in una colonna stretta, e passare il mouse su un’icona rivela un tooltip con l’etichetta di testo.

Perché è allettante:

L’appeal è ovvio. Ottieni una navigazione compatta che occupa uno spazio minimo sullo schermo, più la capacità per gli utenti di scoprire le etichette quando ne hanno bisogno. Sembra il meglio dei due mondi.

Perché i dati raccontano una storia diversa:

L’etichetta al passaggio ha un problema fondamentale: richiede agli utenti di interagire prima di poter identificare gli elementi di navigazione. Questo è un passo indietro rispetto alle etichette sempre visibili, dove l’identificazione avviene a colpo d’occhio.

I test del Nielsen Norman Group sui tooltip basati al passaggio hanno scoperto che solo il 15% degli utenti passa il mouse intenzionalmente sui elementi di navigazione per rivelare le etichette. Il resto o già sa dove si trovano le cose (utenti esperti) o rinuncia e guarda altrove. Questo crea una curva di apprendimento ripida per i nuovi visitatori, che è esattamente l’opposto di quello che vuoi per un negozio di ecommerce dove la maggior parte dei visitatori sono principianti.

La ricerca del Baymard Institute sui pattern di navigazione di ecommerce ha scoperto che la navigazione dipendente da tooltip ha prodotto il 22% in meno di completamenti di navigazione riusciti rispetto alle etichette sempre visibili. Gli utenti erano più lenti, più propensi a fare errori di navigazione, e più propensi a usare il pulsante indietro del browser (un segnale che sono finiti nel posto sbagliato).

E poi c’è il problema ovvio: il passaggio del mouse non esiste su mobile. Gli schermi touch non hanno uno stato hover. Un tap su una navigazione solo icone attiva immediatamente l’azione oppure apre un tooltip che richiede un secondo tap—aggiungendo un passo extra che gli utenti mobile non si aspettano e non tolleranno.

Quando potrebbe essere accettabile:

• Strumenti dashboard o admin interno dove gli utenti sono addestrati e usano l’interfaccia quotidianamente
• Applicazioni solo desktop dove lo spazio sullo schermo è estremamente limitato
• Barre degli strumenti secondarie (come barre degli strumenti di formattazione) dove le icone sono altamente standardizzate

Quando evitarlo:

• Qualsiasi navigazione di ecommerce rivolta ai clienti
• Navigazione mobile di qualsiasi tipo
• Navigazione primaria dove i visitatori per la prima volta devono trovare il loro cammino

Pattern 4: etichetta sotto nello stato attivo

Una variazione che ha guadagnato trazione è mostrare etichette solo sull’elemento di navigazione attualmente attivo. Questo è comune nelle implementazioni Material Design dove la barra inferiore mostra icone per tutti gli elementi ma visualizza solo l’etichetta di testo sulla scheda selezionata.

Il compromesso:

Questo pattern risparmia spazio orizzontale mentre fornisce comunque contesto per la posizione attuale. Le linee guida Material Design di Google l’hanno offerto come opzione per la navigazione inferiore con più di tre elementi.

Tuttavia, il testing ha mostrato che questo approccio è inferiore a mostrare etichette su tutti gli elementi. Uno studio condotto dal team UX di Booking.com (condiviso a una conferenza NNG del 2019) ha scoperto che le etichette sempre visibili hanno ridotto gli errori di navigazione del 15% rispetto al pattern di etichetta solo attiva. Gli utenti avevano bisogno di vedere quali fossero tutte le opzioni, non solo quale avevano già scelto.

Material Design da allora ha aggiornato la sua guida per raccomandare la navigazione etichettata per tutte le destinazioni, non solo quella attiva.

Scegliere il pattern giusto per il tuo negozio

La decisione dipende da due fattori: il contesto di navigazione e il dispositivo.

Contesto	Pattern migliore	Perché
Barra di tabulazione mobile (3–5 elementi)	Stack verticale	Corrisponde alle convenzioni della piattaforma, grandi bersagli di tap, si adatta alla larghezza
Barra di tabulazione mobile (5+ elementi)	Stack verticale con barra scorrevole	Ancora stack verticale, ma consenti lo scorrimento orizzontale
Menu a scorrimento	Affiancamento orizzontale	Scansione naturale in elenchi verticali
Header desktop	Affiancamento orizzontale o solo testo	Ampio spazio orizzontale
Barra laterale desktop	Affiancamento orizzontale (etichette sempre visibili)	Gli utenti devono scansionare le opzioni rapidamente
Navigazione footer	Solo testo	Le icone non aggiungono valore qui
Pulsante d’azione mobile	Solo icona (con tooltip)	Azione singola, l’icona è sufficiente

Test rapidoApri il tuo negozio su un telefono e prova a identificare ogni elemento di navigazione senza leggere un'etichetta. Se esiti anche su un elemento, è lì che dovrebbe andare un'etichetta. Se la tua barra di tabulazione mobile usa affiancamenti orizzontali e gli elementi sembrano affollati, passa agli stack verticali. Navi+ ti permette di alternare tra pattern di layout nel menu builder, quindi testare combinazioni diverse richiede secondi piuttosto che ore di editing dei temi.

L’impostazione predefinita più sicura per la maggior parte dei negozi Shopify è lo stack verticale per le barre di tabulazione mobile e l’affiancamento orizzontale per i menu a scorrimento. Questi pattern corrispondono a quello che gli utenti già si aspettano dalle app che usano ogni giorno, e hanno i dati di test più forti dietro di loro. Inizia da lì e itera in base alle analitiche del tuo negozio.

Questo articolo fa parte della guida più ampia su Icone vs testo nella navigazione: quando usare quale (e quando usare entrambi).