Le 5 icone universalmente riconosciute (e perché tutto il resto ha bisogno di un'etichetta)

Chiedi a una sala piena di designer di nominare le icone che userebbero senza etichette di testo, e riceverai venti liste diverse. Chiedi agli utenti cosa significano quelle stesse icone, e riceverai duecento risposte diverse. Il divario tra ciò che i designer assumono sia universale e ciò che gli utenti effettivamente comprendono è uno degli errori più costosi nella navigazione dell’ecommerce.

La verità, supportata da anni di ricerca del Nielsen Norman Group, Apple, Google e da aziende specializzate in test A/B su larga scala, è molto più ristretta di quanto la maggior parte delle persone pensi. Solo una manciata di icone può essere utilizzata da sola senza creare confusione. Tutto il resto ha bisogno di un’etichetta.

I cinque universali

Le icone che effettivamente funzionano senza testo sono quelle che sono state standardizzate tra le piattaforme per decenni e hanno implementazioni quasi identiche in praticamente ogni applicazione importante che gli utenti incontrano. La lista è breve.

1. Home (icona della casa)

L’icona della casa ha significato “vai alla homepage” per così tanto tempo che il suo significato è radicato nelle aspettative degli utenti. Ogni browser, ogni sistema operativo mobile e praticamente ogni app utilizza la stessa metafora visiva. I tassi di riconoscimento dell’icona home superano il 95% nella maggior parte dei test degli utenti.

Detto questo, l’icona home è in qualche modo ridondante nell’ecommerce. La maggior parte dei temi Shopify già utilizzano il logo del negozio come link alla homepage, che svolge la stessa funzione e rinforza l’identità del marchio. Se hai sia un logo che un’icona home, stai dedicando due porzioni di spazio di navigazione alla stessa azione.

2. Search (lente di ingrandimento)

La lente di ingrandimento è una delle icone più testate sul web. Il suo tasso di riconoscimento è costantemente superiore al 90%, e gli utenti la toccano senza esitazione. Questa icona ha il vantaggio di essere visivamente descrittiva—una lente di ingrandimento sembra uno strumento per trovare cose—ed è stata utilizzata nei sistemi operativi desktop sin dagli anni ‘80.

Nell’ecommerce, la ricerca è critica. L’icona della lente di ingrandimento può essere utilizzata in sicurezza da sola in un header mobile o in una tab bar, sebbene l’aggiunta della parola “Search” sotto di essa produca comunque un piccolo ma misurabile aumento dell’engagement. Anche le icone universali ricevono più clic quando etichettate.

3. Carrello della spesa o borsa

Decenni di shopping online hanno reso l’icona del carrello inconfondibile. Che sia un carrello della spesa di un negozio di alimentari o una borsa di un negozio al dettaglio, gli utenti sanno che significa “visualizza gli articoli che intendo acquistare.” L’icona tipicamente include un badge che mostra il numero di articoli, che aggiunge chiarezza funzionale.

I test dell’Istituto Baymard mostrano che il riconoscimento dell’icona del carrello nei contesti di ecommerce è superiore al 95%. A differenza di alcune altre icone, l’icona del carrello non è sovraccarica di significati alternativi—significa una cosa, e quel significato è stabile tra le piattaforme.

4. Menu (icona hamburger)

L’icona a tre linee dell’hamburger è diventata il simbolo predefinito per “apri il menu” sui dispositivi mobili. Il suo riconoscimento è cresciuto sostanzialmente nel corso dell’ultimo decennio man mano che il design mobile-first è diventato standard. Le prime critiche all’icona hamburger—in particolare un famoso test del 2014 che mostrava che la parola “MENU” superava l’icona—sono state in gran parte risolte man mano che gli utenti si sono adattati al pattern.

Detto questo, combinare l’icona hamburger con la parola “Menu” supera comunque l’icona da sola. I test del Nielsen Norman Group su centinaia di migliaia di sessioni hanno rilevato un aumento del 20% nell’engagement del menu quando l’icona era abbinata al testo. L’icona è compresa, ma l’etichetta rimuove l’ultimo barlume di esitazione.

5. Close (icona X)

L’icona X per chiudere finestre, finestre di dialogo e overlay è universalmente compresa. È stata una parte standard delle interfacce grafiche sin dai primi sistemi operativi desktop. Il riconoscimento è quasi del 100%, e gli utenti non esitano quando la vedono.

L’icona X è uno dei pochi casi in cui un’etichetta danneggerebbe effettivamente l’usabilità. Aggiungere la parola “Close” accanto a una X crea ridondanza senza aggiungere chiarezza, e occupa spazio che è spesso molto limitato nell’intestazione di una modale.

Perché tutto il resto fallisce senza un’etichetta

Una volta che esci da queste cinque icone, i tassi di riconoscimento crollano bruscamente. La ragione è l’incoerenza tra piattaforme. Lo stesso simbolo visivo significa cose diverse in contesti diversi, e gli utenti non hanno modo di sapere quale significato si applica al tuo negozio a meno che non glielo dici.

L’icona del cuore è un perfetto esempio. Su Instagram, significa “mi piace.” Su Pinterest, significa “salva.” Su molti siti di ecommerce, significa “aggiungi alla lista dei desideri.” Sulle app sanitarie, rappresenta i dati sanitari o i preferiti. Quando un utente incontra un’icona del cuore nel tuo negozio per la prima volta, sta indovinando. La ricerca del Nielsen Norman Group ha rilevato che le icone del cuore senza etichetta sono state fraintese da più del 40% degli utenti nei contesti di ecommerce.

L’icona della stella ha lo stesso problema. Può significare valutazioni, preferiti, funzioni premium o articoli in evidenza, a seconda dell’app. Senza un’etichetta, gli utenti devono decodificarlo dal contesto, il che introduce attrito.

L’icona della persona o dell’utente potrebbe sembrare ovvia—rappresenta “account” o “profilo,” giusto? Tranne per il fatto che su alcuni siti significa “login,” su altri significa “servizio clienti,” e su altri ancora apre un menu a discesa con più azioni relative all’account. Gli studi di riconoscimento mostrano che solo circa il 60% degli utenti identifica correttamente l’icona della persona come “account” al primo incontro.

Le icone griglia, tag, filtro e segnalibro soffrono tutte di grave ambiguità. Una griglia potrebbe significare “visualizza come griglia,” “categorie,” “collezioni” o “tutti i prodotti.” Un tag potrebbe significare “articoli in vendita,” “etichette” o “organizza.” Un’icona di filtro è un po’ migliore, ma comunque riconosciuta da solo circa il 70% degli utenti senza un’etichetta.

Il pattern è chiaro: le icone che hanno un significato stabile su tutte le principali piattaforme possono funzionare da sole. Le icone che significano cose diverse in app diverse non possono.

I dati sul riconoscimento

Il Nielsen Norman Group ha condotto più turni di test di usabilità delle icone nell’ultimo decennio. I loro risultati sono coerenti. In uno studio ampiamente citato, hanno testato 75 icone diverse utilizzate tra siti di ecommerce e contenuti. Solo sei icone avevano tassi di riconoscimento superiori all’80%. Il resto rientra in un intervallo in cui il 40–70% degli utenti ha frainteso l’icona o l’ha saltata interamente perché non era sicuro.

La ricerca interna di Apple, che informa le loro Linee Guida dell’Interfaccia Umana, li ha portati a raccomandare esplicitamente etichette di testo su tutti gli elementi della tab bar. La loro linea guida afferma: “Se rimuovi le etichette dalla tua tab bar, assicurati che le icone siano chiare e facili da comprendere.” Ma poi va oltre: “È generalmente meglio includere etichette perché aiutano gli utenti a comprendere lo scopo di ogni tab a colpo d’occhio.”

Le linee guida Material Design di Google sono ancora più dirette. La linea guida per la navigazione inferiore specifica: “Le etichette di testo devono essere utilizzate per tutte le destinazioni. Le destinazioni senza etichette di testo non comunicano abbastanza chiaramente da sole.” Hanno testato barre di navigazione inferiori solo con icone e hanno rilevato che l’aggiunta di etichette di testo ha migliorato i tassi di successo della navigazione del 18%.

Questo non è teorico. Quando piattaforme importanti con miliardi di utenti e risorse quasi infinite per i test ti dicono che le etichette di testo sono obbligatorie, è perché i loro dati hanno mostrato che le icone senza etichetta danneggiano l’usabilità.

Quando le icone universali traggono comunque beneficio dalle etichette

Anche i cinque iconi universali funzionano meglio con le etichette in molti contesti. La differenza è più piccola rispetto alle icone ambigue, ma è misurabile.

I test di Blend Commerce su negozi Shopify hanno rilevato che una tab bar mobile con icone e etichette di testo ha prodotto tassi di conversione superiori del 10% rispetto alla stessa tab bar solo con icone—anche se le icone utilizzate erano del set universale (home, search, collezioni rappresentate da una griglia, cart, account).

Perché l’aggiunta di un’etichetta a un’icona a lente di ingrandimento aumenterebbe l’engagement? Due ragioni. Prima, l’etichetta fornisce conferma. Un utente vede l’icona, la riconosce, e l’etichetta conferma che è corretto prima che tocchi. Quell’istante di fiducia rimuove l’attrito micro. Seconda, l’etichetta crea un target di tocco più grande e più tollerante, il che migliora l’usabilità su schermi piccoli.

Il takeaway pratico: le icone universali possono essere utilizzate da sole quando lo spazio è veramente limitato, ma l’aggiunta di brevi etichette è l’impostazione predefinita migliore.

Dove ti lascia la tua navigazione

Se stai costruendo o controllando la navigazione per un negozio Shopify, ecco il framework decisionale:

Icone sicure da usare da sole:

• Search (lente di ingrandimento)
• Cart o borsa
• Close (X)
• Home (se non ridondante con il logo)
• Menu (hamburger)

Icone che hanno bisogno di etichette:

• Tutto il resto. Collezioni, account, lista dei desideri, preferiti, filtro, ordinamento, condivisione, impostazioni, notifiche, chat e qualsiasi icona specifica di categoria che stai considerando.

Migliore pratica: Anche le icone universali dovrebbero avere etichette nella navigazione persistente come una tab bar mobile. Il costo dello spazio è minimo—una o due parole sotto ogni icona—e il guadagno di usabilità è reale.

Se la tua navigazione attualmente utilizza pulsanti solo con icone per qualsiasi cosa diversa da search, cart o close, esegui un test semplice. Aggiungi etichette di testo e misura l’engagement. Strumenti come Navi+ rendono facile attivare e disattivare le etichette senza ricostruire il tema. I dati quasi sempre favoriranno la versione etichettata.

Questo articolo fa parte della guida più grande su Icone vs testo nella navigazione: quando usare l’uno, l’altro o entrambi.