Selettore della lingua del sito web: le migliori pratiche di progettazione

Non so voi, ma c'è qualcosa di davvero appagante in un selettore di lingua nitido e in linea con l'immagine del marchio.

Forse questo mi smaschera come un fanatico della localizzazione. Ma ascoltatemi.

Quel minuscolo pulsante racchiude un potere immenso. Con un solo clic, il visitatore passa dalla lettura di una pagina in lingua straniera alla navigazione nella propria lingua, senza mai abbandonare il tuo sito.

Un selettore di lingua è il punto d'incontro tra design e funzionalità. Se fatto bene, si adatta al tuo marchio, è facile da trovare e comunica ai visitatori internazionali che sono i benvenuti. Se fatto male, il contenuto tradotto risulta nascosto in un piè di pagina, etichettato in modo errato o talmente macchinoso che i visitatori abbandonano la pagina prima ancora di vederlo.

Quindi, cosa li distingue?

La maggior parte delle guide si attiene alle nozioni di base: rendere il selettore facile da trovare, utilizzare i nomi nella lingua originale ed evitare l'uso di flag per i simboli. Tratteremo anche di questi argomenti. Ma vogliamo anche rispondere alle domande più difficili, come ad esempio: come si ordina alfabeticamente un menu a tendina che mescola giapponese, arabo e portoghese? E perché metà di Internet associa la lingua che parli alla tua posizione geografica, quando così spesso si tratta di un errore?

In questa guida, imparerai quale modello di interfaccia utente si adatta al tuo sito, quali best practice si dimostrano valide nel mondo reale e come affrontare le due sfide che quasi nessuno riesce a risolvere correttamente: l'ordinamento dei risultati e la suddivisione per lingua, paese e valuta.

Entriamo nel dettaglio.

Cosa controlla un selettore di lingua (e cosa non controlla)

Un selettore di lingua ha un solo scopo: visualizzare la pagina in un'altra lingua. Non imposta la valuta, le spese di spedizione o la posizione del visitatore. Non si tratta di un pannello delle impostazioni o di un localizzatore di negozi e, nonostante molti siti lo trattino in questo modo, non sostituisce un selettore di paese.

In questo caso, meno è meglio. Un selettore di lingua che cerca di fare troppe cose spesso fallisce nell'unico scopo per cui è stato creato: aiutare i visitatori a capire il tuo sito.

Una ricerca del Nielsen Norman Group sulla localizzazione dell'e-commerce ha rilevato che gli acquirenti internazionali si aspettano di poter cambiare la lingua del sito indipendentemente dal paese di spedizione o dalla valuta utilizzata per il pagamento. Ciò ha senso se si osservano i mercati reali. In Canada, alcuni acquirenti preferiscono l'inglese e altri il francese, ma tutti si aspettano di pagare in dollari canadesi. In Spagna tutti pagano in euro, ma alcuni acquirenti preferiscono navigare tra i negozi in catalano piuttosto che in spagnolo.

In definitiva, un selettore di lingua che modifica inaspettatamente la valuta o le regole di spedizione apporta una modifica non richiesta da nessuno e può allontanare proprio i clienti internazionali che si sta cercando di conquistare.

Tipi di selettori di lingua

La maggior parte dei selettori rientra in uno dei quattro formati. Invece di chiedere quale sia la migliore in assoluto, la domanda più produttiva è quale si adatti al numero di lingue che si desidera includere e a quanto spazio visivo si può dedicarle.

• I menu a tendina si adattano meglio alle diverse dimensioni dello schermo. Sono la scelta predefinita più sicura una volta superate le tre o quattro lingue.
• Le file di bottoni trasmettono un senso di maggiore sicurezza e immediatezza. Ecco perché i siti con un insieme limitato e fisso di lingue tendono a preferirli, come ad esempio un sito governativo bilingue o un prodotto SaaS che si rivolge a due mercati.
• I link testuali funzionano bene nei piè di pagina, dove un componente completo risulterebbe troppo pesante.
• Le finestre modali mettono in primo piano la scelta della lingua, il che le rende utili per un suggerimento occasionale del tipo "Sembra che tu preferisca il francese?", ma diventano presto fastidiose se compaiono a ogni caricamento della pagina.

Ritorno alle origini

With the different formats in mind, let’s look at the classic best practices and see which ones still hold up in 2026.

• Utilizzare i nomi nella lingua originale . Le diciture "Deutsch" e "Español" indicano immediatamente al visitatore che la sua lingua è presente nell'elenco. Le parole "tedesco" e "spagnolo" costringono chi non parla inglese a scorrere velocemente un elenco scritto in una lingua che potrebbe non conoscere bene.
• Ignora le bandiere . Rappresentano paesi, non lingue, e la mappatura si interrompe continuamente. Lo spagnolo è lingua ufficiale in circa 20 paesi, l'inglese non è lingua ufficiale di nessuna nazione e la sola Svizzera ha quattro lingue nazionali sotto un'unica bandiera. Un'icona universale per la lingua, un globo terrestre, un glifo a forma di fumetto, un semplice segno “A/文”, si legge correttamente ovunque si trovi il visitatore.
• Rendilo facile da trovare . Per la maggior parte dei siti, ciò significa l'angolo in alto a destra dell'intestazione. I siti ricchi di contenuti o editoriali, dove lo spazio nell'intestazione è prezioso, possono utilizzare il piè di pagina. Su dispositivi mobili, inseriscilo nello stesso menu di navigazione anziché creare un'interazione separata solo per la lingua.
• Assicuratevi che i visitatori siano sempre aggiornati. Quando un utente cambia lingua sulla pagina di un prodotto, dovrebbe essere reindirizzato alla stessa pagina nella nuova lingua, anziché alla homepage. Costringere i visitatori a tornare sui propri passi è un modo rapido per perderli, soprattutto se erano vicini all'acquisto.
• Suggerisci, non imporre. Il reindirizzamento automatico dei visitatori in base al loro indirizzo IP o alle impostazioni del browser, senza possibilità di disattivarlo, è una delle lamentele più comuni relative ai siti multilingue. VPN, computer condivisi e viaggiatori sono tutti fattori che possono far naufragare questa previsione. Se intuisci una probabile preferenza, proponila come suggerimento e offri sempre ai visitatori un modo chiaro e permanente per tornare alla preferenza precedente.
• Ricordate la loro scelta. Una volta che un visitatore sceglie una lingua, mantienila su tutte le pagine e nelle visite successive. Una scelta fatta intenzionalmente da qualcuno dovrebbe sempre avere la precedenza su ciò che il tuo sito deduce dalla sua posizione o dal suo browser.

Oltre le nozioni di base: l'ordinamento e la suddivisione per lingua, paese e valuta.

Questi elementi fondamentali forniscono una solida base. Ma una volta che si inizia a costruire un selettore, emergono due questioni più complesse, che la maggior parte delle guide alle migliori pratiche trascura.

1. Come si ordina un elenco che mescola lettere dell'alfabeto?

Non esiste un unico ordine alfabetico che comprenda tedesco, giapponese e arabo, perché questi sistemi di scrittura non condividono lo stesso alfabeto. Anche all'interno delle lingue che utilizzano l'alfabeto latino, un semplice algoritmo di ordinamento automatico può commettere errori: posiziona "Čeština" dopo "Türkçe" perché interpreta la "Č" accentata come un carattere separato anziché come una sorta di "C".

Per la maggior parte dei siti, ovvero quelli che supportano fino a qualche decina di lingue, la soluzione pratica è:

1. Raggruppa le lingue per alfabeto. Latino, cirillico, arabo, CJK (cinese, giapponese, coreano) e così via.
2. Disponi i gruppi in un ordine fisso a tua scelta. Un approccio comune è quello di iniziare con il copione che la maggior parte del pubblico utilizza.
3. Ordina all'interno di ciascun gruppo utilizzando le regole specifiche di quello script. Per quanto riguarda il latino, ciò significa che Čeština si trova accanto a Dansk e Deutsch, non in fondo alla lista.

Il risultato sarà simile a questo: Čeština, Deutsch, English, Español, Français, Português → Русский, Українська → العربية → 中文, 日本語, 한국어 .

Se il tuo elenco comprende centinaia di lingue, l'ordinamento manuale smette di essere pratico e avrai bisogno di strumenti di ordinamento specifici per ogni gruppo di alfabeti.

2. Lingua, paese e valuta dovrebbero essere un'unica opzione o tre?

Ricordate gli acquirenti canadesi e spagnoli di prima? È qui che quell'idea diventa pratica.

Molti grandi siti di e-commerce combinano lingua, paese e valuta in un unico selettore di "mercato". Per un rivenditore, il motivo è che le regole di spedizione, le tasse e i metodi di pagamento variano da paese a paese, quindi un'unica opzione semplifica la procedura di acquisto. È un compromesso ragionevole.

Si tratta di un compromesso inadeguato per prodotti in cui i tre elementi non devono necessariamente essere presenti insieme, come ad esempio strumenti SaaS, siti web di informazione o qualsiasi prodotto digitale utilizzato da espatriati, lavoratori da remoto o chiunque la cui lingua preferita non corrisponda al paese di fatturazione. Un tedesco residente in Brasile desidera testi in tedesco e prezzi in real brasiliani, non un mix forzato dei due.

La regola generale:

• La lingua modifica il testo sulla pagina.
• Il tasso di cambio influenza la modalità di visualizzazione dei prezzi.
• Il concetto di Paese o regione va oltre le differenze linguistiche e può prevedere vari gradi di localizzazione.

Mantienili come tre controlli separati, a meno che il tuo prodotto non possa funzionare senza collegarli.

Rilevamento, reindirizzamenti e aggiunta di lingue in un secondo momento

Utilizzare il rilevamento per suggerire, non per decidere.

Ricordate il motto "suggerire, non imporre"? Ecco come farlo bene.

Il miglior segnale per capire se un sito web è visitato per la prima volta è la lingua del browser o del dispositivo utilizzato (inviata nell'intestazione Accept-Language o letta tramite navigator.language in JavaScript). A differenza della geolocalizzazione basata sull'indirizzo IP, riflette la lingua effettivamente impostata dalla persona.

Questo lo rende un indizio molto più utile, ma deve comunque rimanere tale e non una decisione che prendi al posto loro. In questo modo, non cambia nulla finché il visitatore non dice di sì, quindi è lui a effettuare la chiamata invece di essere reindirizzato automaticamente.

Crea il progetto per le lingue che aggiungerai in seguito.

Molti siti non mantengono il numero di lingue inizialmente previsto al momento del lancio, quindi cosa fare una volta che il numero di lingue disponibili nel selettore attuale supera tale limite?

La risposta è semplice: genera automaticamente l'elenco delle lingue del selettore a partire dalle lingue che hai già pubblicato e genera allo stesso modo i tag hreflang, invece di gestirli manualmente. Bablic , ad esempio, lo fa automaticamente. Se hreflang e x-default sono concetti nuovi per te, la nostra spiegazione dettagliata di hreflang e x-default ne illustra il funzionamento.

Creazione del proprio selettore

Il modo in cui si crea un selettore dipende da come è configurato il sito multilingue.

Se ogni lingua ha il proprio URL (sottocartelle come /es/ , sottodomini come es.example.com o un parametro URL), il selettore più semplice è un elenco di link, ognuno dei quali punta alla stessa pagina in un'altra lingua:

html

<nav aria-label="Lingua">

<a href="/it/prezzi/" hreflang="it" lang="it">Inglese</a>

<a href="/es/pricing/" hreflang="es" lang="es" aria-current="page">Spagnolo</a>

<a href="/ja/pricing/" hreflang="ja" lang="ja">日本語</a>

</nav>

Ogni dettaglio contribuisce a raggiungere un obiettivo importante:

• lang indica ai lettori di schermo come pronunciare correttamente il nome di ciascuna lingua.
• "aria-current="page" indica alla tecnologia assistiva quale lingua è attualmente attiva.
• Ogni link punta alla stessa pagina in un'altra lingua (in questo caso, la pagina dei prezzi), non alla homepage, in modo che i visitatori non perdano la pagina.

I tag hreflang nella pagina <head> (o nella sitemap) devono corrispondere esattamente a questa struttura URL, perché è così che i motori di ricerca la utilizzano per mostrare la versione corretta all'utente corretto. Google consiglia di utilizzare sottocartelle o sottodomini anziché parametri URL per le versioni linguistiche.

Se la lingua viene memorizzata in un cookie o nel browser anziché nell'URL, non esistono URL di lingua a cui collegarsi, quindi i semplici link non funzioneranno. Il selettore deve aggiornare la lingua memorizzata e ricaricare la pagina.

La scelta di visualizzarli come menu a tendina, riga di pulsanti o semplici link è una questione di design. Ciò che conta di più è la struttura dell'URL sottostante. La maggior parte dei siti utilizza sottocartelle (/es/) o sottodomini (es.example.com). I parametri di query (?lang=es) funzionano, ma Google li sconsiglia per le versioni linguistiche. Qualunque sia la tua scelta, i tag hreflang nella pagina <head> (o nella tua sitemap) devono corrispondere esattamente a quella struttura. È così che i motori di ricerca si servono per fornire la versione corretta all'utente che effettua la ricerca.

Se il tuo sito è tradotto con Bablic , puoi scegliere il percorso più adatto al tuo team:

• Utilizzare il selettore integrato. Seleziona uno stile predefinito da Progetto → Selettore nella dashboard Bablic e personalizzalo in modo che si adatti al tuo marchio. Non è richiesto alcun codice.
• Personalizzalo con CSS personalizzato. Mantieni il selettore di Bablic , ma perfeziona colori, caratteri, spaziatura e icone in modo che corrispondano esattamente al tuo sistema di design.
• Crea il tuo selettore personalizzato con la libreria Bablic : il pacchetto @ bablic -io/selector ti offre due funzioni: getLanguages() restituisce le lingue pubblicate dal tuo progetto e contrassegna quella corrente, mentre setLanguage() cambia lingua utilizzando il metodo che il tuo progetto utilizza (cartella, sottodominio, parametro URL, cookie o memoria del browser). Tu progetti l'interfaccia, mentre Bablic si occupa del passaggio tra le diverse piattaforme.

I team che desiderano un lancio rapido possono utilizzare le impostazioni predefinite, mentre i team che vogliono che ogni singolo pixel sia in linea con il marchio hanno a disposizione un ampio margine di personalizzazione.

Qualunque strada tu scelga, solo i tuoi dati possono dirti quale modello funziona meglio per il tuo pubblico. Se sei indeciso tra due design, puoi eseguire un semplice test. Monitorare la frequenza con cui i visitatori cambiano lingua e se, una volta fatto ciò, rimangono sul sito.

Scegliere cosa si trova dietro il selettore

Un ottimo selettore è utile solo se la traduzione che lo supporta è di qualità. Bablic combina la traduzione automatica con un editor contestuale, in modo che un membro del team che parla la lingua possa rivedere e correggere righe specifiche direttamente sulla pagina, invece di tradurre da zero. Se vi state chiedendo se la traduzione automatica sia abbastanza affidabile da poter essere pubblicata autonomamente, la nostra analisi sull'affidabilità di Google Traduttore è un buon punto di partenza.

Confrontare gli strumenti? Consulta il nostro hub di confronto Bablic o leggi la guida al funzionamento Bablic per saperne di più sulla configurazione. Puoi anche provarlo gratuitamente per 30 giorni, senza bisogno di carta di credito.

FAQ