Migliori pratiche per la progettazione del selettore della lingua

di Bahasa Aorinka
5 dicembre 2023

Blog > Guida > Migliori pratiche per la progettazione del selettore della lingua

Il selettore della lingua è un elemento importante a cui dovresti prestare molta attenzione quando crei un sito web multilingue perché il selettore della lingua è ciò che gli utenti visiteranno spesso quando vogliono cambiare lingua.

Un pulsante di cambio lingua efficace può offrire numerosi vantaggi a un sito Web, dall'aumento dell'ottimizzazione web all'aumento delle vendite.

In questo articolo discuteremo le migliori pratiche per la progettazione dei selettori di lingua. Ne parliamo ulteriormente nel seguente articolo.

Cos'è un selettore di lingua?

Un selettore di lingua è un elemento o funzionalità dell'interfaccia utente che consente agli utenti di selezionare la lingua con cui desiderano interagire con un sito Web, un'applicazione o qualsiasi piattaforma digitale. Si trova comunemente su siti Web, applicazioni software e altre interfacce digitali per adattarsi agli utenti che parlano lingue diverse.

Il selettore della lingua solitamente visualizza un elenco di lingue disponibili e l'utente può selezionare la lingua di sua scelta da tale elenco. Una volta selezionato, il contenuto dell'interfaccia, inclusi testo, etichette e talvolta immagini, verrà visualizzato nella lingua selezionata. Ciò è particolarmente importante per i siti Web e le app che servono un pubblico globale o una base di utenti diversificata.

I selettori della lingua contribuiscono a una migliore esperienza utente rendendo i contenuti digitali accessibili a un pubblico più ampio, indipendentemente dal livello di competenza linguistica. Sono una componente chiave degli sforzi locali, poiché consentono a sviluppatori e designer di adattare i loro prodotti a diversi contesti linguistici e culturali.

Perché è necessario personalizzare il selettore di lingua?

La personalizzazione del selettore di lingua su un sito Web multilingue presenta numerosi vantaggi importanti.

Allineamento del marchio e stile visivo: personalizzando il selettore della lingua, puoi garantire che l'aspetto e lo stile della lingua utilizzata siano coerenti con il marchio e lo stile visivo del tuo sito web. Puoi personalizzare i pulsanti o i menu per il cambio di lingua per adattarli al design generale del tuo sito web, creando coerenza nell'esperienza utente.
Maggiore controllo sulle lingue visualizzate: a volte potresti voler limitare alcune lingue visualizzate nel commutatore di lingua. Ad esempio, potresti avere una versione limitata del tuo sito web in diverse lingue e desideri visualizzare solo quelle lingue nel commutatore di lingua. Personalizzando il selettore di lingua, puoi scegliere quali lingue visualizzare, offrendoti un maggiore controllo sui contenuti disponibili.
Esperienza utente ottimizzata: personalizzando il selettore di lingua, puoi creare un'esperienza utente ottimizzata. Ad esempio, puoi regolare il layout o la posizione del selettore di lingua per facilitarne la ricerca da parte degli utenti. Puoi anche aggiungere funzionalità come notifiche o istruzioni per il cambio di lingua che aiutano gli utenti a capire come utilizzare facilmente la funzionalità.
Soddisfa le diverse esigenze degli utenti: ogni utente ha preferenze linguistiche diverse. Personalizzando il cambio di lingua, puoi soddisfare le esigenze di utenti con background linguistici diversi. Ciò potrebbe includere utenti locali, visitatori internazionali o utenti che si sentono più a loro agio in una lingua diversa.
Aumentare la conversione delle vendite: un'adeguata personalizzazione del cambio di lingua può anche offrire il vantaggio di aumentare la conversione delle vendite. Perché un efficace cambio di lingua può offrire comfort all'utente durante l'interazione con il tuo sito web. Secondo i dati di CSA Research, il 72,4% dei consumatori ha dichiarato che sarebbe più propenso ad acquistare prodotti che contengano informazioni nella propria lingua. Quindi è impossibile che anche il tuo livello di vendita aumenti.

Diversi tipi di selettore della lingua

Ogni proprietario di un sito web valuterà sicuramente attentamente l'aspetto del selettore della lingua, ogni sito web avrà ovviamente preferenze diverse. Per quelli di voi che cercano un tipo di selettore di lingua che possa essere utilizzato, eccone alcuni.

Pulsante della lingua

Questo è uno dei tipi di cambio di lingua comunemente usati. Il pulsante della lingua è solitamente un'icona o un testo che indica la lingua visualizzata, ad esempio "EN" per l'inglese o una bandiera di un paese per rappresentare una lingua specifica. Quando gli utenti fanno clic sul pulsante della lingua, verranno reindirizzati alla versione del sito Web nella lingua appropriata.

Per i pulsanti delle lingue, si consiglia di visualizzare un numero limitato di lingue per evitare una visualizzazione ingombrante. In generale, avere più di 4 o 5 lingue può creare un effetto visivo intenso. È importante posizionare il pulsante in una posizione visibile in modo che gli utenti possano trovarlo facilmente. Parleremo più approfonditamente di questi aspetti nella prossima sezione di questo articolo.

I pulsanti della lingua possono essere adatti per le aziende che si rivolgono a mercati specifici o servono comunità internazionali in determinate località. Di seguito è riportato un esempio di utilizzo del pulsante della lingua sul sito Web dell'OMS.

Collegamento testuale

I collegamenti di testo sono un tipo di cambio di lingua che utilizza il testo sotto forma di nome della lingua come collegamento. Ad esempio, puoi visualizzare collegamenti di testo come "English", "Français" o "Español" che indirizzano gli utenti a una versione del sito Web nella lingua selezionata. Questo collegamento testuale viene solitamente inserito in un elenco o in un menu a discesa per facilitare agli utenti la selezione della lingua desiderata.

Un tipo di selettore della lingua dei collegamenti viene utilizzato dalla grande azienda Facebook, oltre alle lingue elencate, puoi anche premere l'icona (+) per trovare più lingue.

Successivamente la pagina verrà immediatamente tradotta nella lingua precedentemente selezionata.

Menù di selezione

Un menu di selezione è un tipo di commutatore di lingua che utilizza un menu a discesa o un menu aperto per selezionare una lingua. Quando gli utenti fanno clic sul menu delle opzioni, vedranno un elenco di lingue disponibili e potranno selezionare la lingua desiderata. Il menu delle opzioni può contenere icone o bandiere di paesi come indicatori di lingua, nonché nomi di lingue nel testo.

Il menu di selezione è molto diverso dal pulsante della lingua, questo tipo è più complesso di un semplice pulsante. Come l'esempio qui sotto che proviene dal sito web di Porsche.

Forniscono un sito Web di selezione della lingua in cui gli utenti possono annotare direttamente la propria lingua o il paese di destinazione.

Migliori pratiche e suggerimenti per la selezione della lingua

Dopo aver compreso i vari tipi di selettori di lingua che possono essere utilizzati sui siti Web, nella creazione di un selettore di lingua è importante applicare le migliori pratiche in modo da poter creare un selettore di lingua che sia efficace e in grado di fornire una buona esperienza utente. Ecco alcune migliori pratiche.

Posizionamento chiaro e ponderato dei pulsanti della lingua: posizionamento dei pulsanti della lingua in posizioni intuitive e facili da raggiungere per gli utenti. In genere, posiziona i pulsanti della lingua nella parte superiore della pagina (ad esempio, a destra o a sinistra dell'intestazione) o nella parte inferiore della pagina (ad esempio, nel piè di pagina). Assicurati che il pulsante non sia nascosto da altri elementi e che sia facile da trovare per gli utenti.
Bandiere o non bandiere: l'uso delle bandiere come icone linguistiche è un argomento controverso. Sebbene le bandiere possano fornire una chiara indicazione visiva della lingua scelta, è importante ricordare che le bandiere nazionali hanno anche significati politici e culturali complessi. preparati a utilizzare icone in un linguaggio neutro e più universale se desideri evitare potenziali problemi associati all'utilizzo dei flag.
Nome completo o iniziali della lingua: quando si seleziona un'etichetta della lingua su un pulsante, è possibile utilizzare il nome completo della lingua (ad esempio, "English" o "Français") o le iniziali della lingua (ad esempio, "EN " o "FR"). Spiega il livello di comprensione dell'utente della lingua utilizzata. Se ti rivolgi a un pubblico di lingue diverse, utilizzare il nome completo della lingua può essere più facile da comprendere.
Pulsanti della lingua delle icone: puoi utilizzare le icone al posto o in aggiunta al testo o ai flag per rappresentare lingue specifiche. Icone della lingua chiare e facilmente riconoscibili possono aiutare gli utenti a identificare la lingua che desiderano selezionare. Assicurati che le icone siano coerenti e facili da comprendere per gli utenti provenienti da contesti culturali e linguistici diversi.
Dai priorità alla lingua pertinente: mostra la lingua più pertinente per il tuo pubblico di destinazione. Analizza il traffico del tuo sito web e i dati demografici degli utenti per identificare le lingue che dovrebbero essere visualizzate in primo piano. Dare la priorità alle lingue più comunemente usate o ampiamente utilizzate può migliorare l’esperienza dell’utente e aumentare il coinvolgimento.
Etichette linguistiche chiare: utilizza etichette linguistiche chiare e concise per rappresentare ciascuna opzione linguistica. Visualizza il nome della lingua nella rispettiva lingua, ad esempio "English" per l'inglese o "Español" per lo spagnolo. Ciò aiuta gli utenti a identificare rapidamente la loro lingua preferita anche se non hanno familiarità con la lingua utilizzata sul tuo sito web.

Rompere le barriere linguistiche

Dì addio alle barriere linguistiche e dai il benvenuto a una crescita illimitata! Prova oggi stesso il nostro servizio di traduzione automatica.

Inizia subito a tradurre

Impostazione del selettore della lingua con Linguise in 7 passaggi

A questo punto, conosci le migliori pratiche per i selettori della lingua. Questa traduzione può essere eseguita dopo aver utilizzato il servizio di traduzione del sito web. Tuttavia, non tutti i servizi di traduzione offrono flessibilità nelle impostazioni di selezione della lingua.

Ma non preoccuparti perché Linguise non è così. Linguise è un servizio di traduzione automatica che fornisce la personalizzazione del cambio di lingua da parte dell'utente. Alcuni dei vantaggi che otterrai utilizzando Linguise includono.

Linguise può essere utilizzato e integrato in più di 40 CMS ( WordPress , Joomla , Drupal , ecc.).
La traduzione in varie lingue verrà eseguita automaticamente in pochi secondi dopo aver aggiunto la lingua al commutatore di lingua sul sito web.
Sono disponibili più di 80 lingue che possono essere aggiunte al selettore della lingua.
Linguise preparerà automaticamente un URL univoco in base alla lingua di destinazione della traduzione. Ad esempio l'URL linguise .com/de/ per una pagina che viene tradotta in tedesco.
Creerà automaticamente un URL canonico per evitare contenuti duplicati nei motori di ricerca quando sono presenti varianti linguistiche in una pagina.
Puoi impostare il cambio di lingua in modo flessibile in base alle esigenze del sito web, a partire dall'icona e dal colore fino al nome della lingua.
Puoi visualizzare le statistiche sulla visualizzazione della pagina dei visitatori per lingua, per ciascuna lingua aggiunta al selettore della lingua.

In questo tutorial utilizzeremo WordPress come esempio del CMS utilizzato.

Passaggio 1: registrazione dell'account gratuito Linguise

Per accedere al cambio lingua su Linguise , il primo passo che devi fare è registrare un account su Linguise . Linguise offre anche una prova gratuita di un mese, che include una varietà di funzionalità di cui puoi sfruttare.

Passaggio 2: aggiungi il dominio al tuo sito web multilingue

Il secondo passo è aggiungere il dominio del sito web in Linguise che già possiedi alla Linguise . Ci sono diverse cose che devi compilare, a partire da.

Account
URL
piattaforma
Lingua
Lingua di traduzione
Traduci URL

Successivamente, è necessario attivare la chiave API e impostare l'URL della lingua. Per una guida completa su come aggiungere il dominio di un sito web puoi leggere la documentazione, mentre specificatamente per WordPress puoi vederla installando la traduzione automatica Linguise WordPress o guardando il video tutorial qui sotto.

Passaggio 3: installa il plugin Linguise

Dopo aver aggiunto con successo un sito web, apri la WordPress e installa il Linguise , fallo tramite Plugin > Aggiungi nuovo > Linguise > Installa > Attiva.

Se il plugin è già installato, vai alla dashboard Linguise e copia la chiave API.

Quindi apri il plugin Linguise e incolla il codice API che hai ottenuto dalla dashboard Linguise nella colonna seguente.

Passaggio 4: impostazione del display principale

Per configurare un cambio di lingua o visualizzare i flag di lingua, i passaggi si svolgono tramite la Linguise nel menu Impostazioni > Visualizzazione dei flag di lingua.

Durante la configurazione iniziale, apporteremo modifiche al display principale, tenendo conto dei diversi componenti.

Una considerazione iniziale è la configurazione del formato di visualizzazione dell'elenco delle lingue, che offre tre opzioni tra cui scegliere: affiancato, a discesa o popup. Sul lato sinistro è presente un'anteprima per ciascun formato.

Il primo formato, come mostrato di seguito, è un layout affiancato.

Il seguente formato adotta uno stile a discesa, come illustrato nell'immagine seguente.

Infine, abbiamo il formato popup come opzione finale.

Successivamente, procediamo al passaggio successivo, che prevede la configurazione della posizione del selettore di lingua. Hai la flessibilità di scegliere tra varie opzioni di posizione, quindi è importante selezionare una posizione che sia facilmente visibile ai visitatori.

Infine, devi decidere la preferenza di combinazione per la visualizzazione delle opzioni della lingua. Puoi scegliere tra opzioni come bandiera + nome della lingua, bandiera + nome breve o semplicemente visualizzare solo la bandiera. Questa decisione dipenderà dalle tue preferenze di progettazione specifiche e dalle preferenze del tuo pubblico target.

Passaggio 5: imposta il design della bandiera

Successivamente, sotto la sezione del display principale, troverai configurazioni di design specifiche per la bandiera. L'immagine fornita di seguito mostra alcune delle opzioni di impostazione disponibili.

Visualizzazione del nome della lingua : hai la possibilità di visualizzare il nome della lingua in base al Paese o alla lingua stessa. Ad esempio, puoi scegliere di visualizzare "Tedesco" o "Deutsch".
Tipo di bandiera inglese: questa opzione è applicabile quando si tratta di lingue che presentano più varianti, come "inglese USA" o "inglese britannico". Scelte simili possono essere fatte per lingue come spagnolo, taiwanese, tedesco e portoghese.
Stile bandiera: questa impostazione consente di definire la forma dell'icona della bandiera, se deve essere rotonda o quadrata (rettangolare).

Passaggio 6: imposta il colore e la dimensione della bandiera

Una volta impostato il design della bandiera, il passaggio successivo prevede la regolazione dei colori, delle dimensioni e di vari altri elementi. Nella seguente interfaccia troverai numerose impostazioni personalizzabili, tra cui:

Raggio bordo bandiera: consente di personalizzare il raggio del bordo in pixel quando si utilizza una bandiera rettangolare.
Colore nome lingua: è possibile selezionare il colore del testo predefinito per il nome della lingua.
Colore lingua popup: questa impostazione determina il colore del titolo della lingua nelle aree popup o a discesa.
Dimensione bandiera: hai la possibilità di modificare la dimensione della bandiera in base alle tue preferenze.
Colore al passaggio del mouse sul nome della lingua: questa impostazione controlla il colore del testo quando si passa il mouse sui nomi delle lingue.
Colore al passaggio del mouse sulla lingua popup: allo stesso modo, questa impostazione determina il colore del testo quando si passa il mouse sul titolo della lingua nel popup o nel menu a discesa.

Passaggio 7: imposta l'ombra del riquadro della bandiera

Nella fase finale, hai la possibilità di personalizzare le impostazioni dell'ombra per la bandiera. L'impostazione iniziale ti consente di specificare un'ombra per ogni bandiera visualizzata sul tuo sito web, mentre l'impostazione successiva riguarda l'effetto ombra quando passi il mouse sopra la bandiera della lingua.

Ricordati di fare clic sul Salva per preservare le impostazioni di personalizzazione che hai effettuato per il cambio di lingua. Ciò garantisce che le configurazioni selezionate per gli effetti ombra vengano implementate e salvate per un uso futuro.

Dopo aver effettuato tutte le configurazioni, ecco un esempio di visualizzazione del selettore della lingua tramite un popup, posizionato in alto a destra, e utilizzando le iniziali. Questo è solo un esempio, il resto puoi personalizzarlo come desideri e in base alle esigenze del sito.

Oltre al WordPress , puoi anche utilizzare altre piattaforme di siti Web e seguire la guida dettagliata come il cambio di configurazione per OpenCart , il cambio di lingua per Drupal e il cambio di impostazione per PrestaShop .

Pronto ad esplorare nuovi mercati? Prova gratuitamente il nostro servizio di traduzione automatica con la nostra prova senza rischi di 1 mese. Nessuna carta di credito necessaria!

Richiedi la tua prova gratuita di 1 mese

Progetta il tuo selettore di lingua per un'esperienza multilingue senza soluzione di continuità con Linguise !

Qui hai acquisito informazioni sulle migliori pratiche per la progettazione di selettori di lingua e su come farlo utilizzando Linguise ! Credimi, la creazione di un cambio di lingua può offrire molti vantaggi e garantire l'ottimizzazione in base ai punti sopra menzionati.

Quando crei un selettore di lingua, assicurati di seguire i suggerimenti e le migliori pratiche che abbiamo spiegato sopra, a partire dall'uso delle icone e dalla selezione delle lingue pertinenti, fino al posizionamento.

Ora registra un account Linguise , aggiungi il tuo sito web e ottimizza il selettore della lingua per fornire un'esperienza utente migliore. Non dimenticare di provare la funzione di prova gratuita di 1 mese per sfruttare le funzionalità superiori di Linguise