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.
Dropdown vs. Elenco vs. Pop-up: quale funziona meglio?
Scegliere il giusto modello di interazione per il tuo selettore di lingue è fondamentale per offrire un'esperienza utente senza soluzione di continuità e intuitiva. Ogni metodo, sia a discesa, elenco in linea o pop-up, offre diversi vantaggi a seconda del layout del tuo sito Web, del numero di linguaggi supportati e del comportamento dell'utente. Di seguito è riportato un confronto tra i tre principali modelli di interazione per la selezione del linguaggio, concentrandosi su UX, accessibilità e contesto di implementazione.
Tipo | Strenghts | Limitazioni | Miglior caso d'uso |
Cadere in picchiata | Compatto, pulito, scalabile, con molte lingue | Richiede l'interazione (clic/tocca), potrebbe non essere ovvio per tutti gli utenti | Siti Web multi-lingua con vincoli di spazio |
Elenco di testo | Visibile senza interazione, accesso più rapido per le lingue chiave | Può ingombrare l'interfaccia utente, non scalabile per molte lingue | Siti con 2-4 opzioni di lingua primaria |
Apparire | Può includere un campo di ricerca, progettazione dell'interfaccia utente flessibile | Può interrompere il flusso dell'utente, necessita di un pulsante di chiusura e accessibilità chiari | Siti globali con oltre 10 lingue |
Migliori pratiche e suggerimenti per la selezione della lingua
La progettazione di un selettore di lingue efficace prevede la fornitura di un'esperienza senza soluzione di continuità su tutti i dispositivi e garantire l'accessibilità per gli utenti di vari background. Con un pubblico sempre più globale, il tuo switcher linguistico dovrebbe essere intuitivo, accessibile e reattivo per garantire che gli utenti possano interagire comodamente nella loro lingua preferita.
Di seguito sono riportate le migliori pratiche che puoi applicare per assicurarti che il tuo selettore di lingue sia chiaro, conveniente e accessibile per tutti gli utenti.
Dai la priorità al design reattivo
La maggior parte degli utenti accede ai siti Web da dispositivi mobili, quindi il tuo selettore di lingue dovrebbe essere reattivo e adatto ai dispositivi mobili. Assicurarsi che il pulsante o il menu siano facili da toccare, non coprano contenuti importanti e rimanga visibile su schermi più piccoli.
Ad esempio, il sito Web del selettore linguistico sembra così.
Quindi, quando si guarda dal lato mobile, è ancora possibile accedere facilmente al selettore linguistico e non si muove o scompare.
Usa i distorsioni o i menu espandibili per mantenere ordinato il layout e assicurarsi che gli obiettivi touch abbiano una spaziatura sufficiente per un'interazione comoda. Questo aiuta gli utenti a selezionare facilmente il loro linguaggio preferito senza frustrazione causata da elementi angusti o difficili da fare clic.
Posizionamento ponderato nell'interfaccia
Posizionare il selettore linguistico in aree altamente visibili e previste come l'angolo in alto a destra dell'intestazione o del piè di pagina inferiore. Queste sono luoghi intuitivi in cui gli utenti cercano in genere opzioni linguistiche.
Evita di nascondere il selettore all'interno di icone ambigue o menu secondari. Mantenere il suo posizionamento coerente in tutte le pagine in modo che gli utenti che cambiano le lingue spesso possano trovarli facilmente in qualsiasi momento.
Usa gli attributi di accessibilità (Aria)
Per garantire che il tuo selettore di lingue sia accessibile agli utenti con disabilità, utilizzare gli attributi ARIA (Accessible Rich Internet) come ARIA-Label, Aria-Haspopup e ARIA-espansi. Queste aiutano le tecnologie di assistenza come gli screen lettori comprendono il ruolo e la funzionalità dell'elemento.
L'implementazione dell'accessibilità soddisfa gli standard WCAG e garantisce che il tuo sito sia inclusivo e utilizzabile da un pubblico più ampio. Il design inclusivo avvantaggia tutti, non solo utenti con esigenze specifiche.
Usa etichette linguistiche chiare e riconoscibili
Visualizza ogni opzione linguistica usando la sua etichetta nativa, ad esempio "español" anziché "spagnolo" o "deutsch" anziché "tedesco". Ciò consente agli utenti di riconoscere rapidamente la loro lingua preferita, anche se non capiscono l'attuale lingua del sito.
Le etichette native sono più inclusive e riducono il carico cognitivo, in particolare per gli utenti internazionali. Evita di usare oscure abbreviazioni o codici linguistici a meno che il tuo pubblico non li conosca.
Evita il sovraccarico con troppe opzioni
Mostrare troppe opzioni linguistiche contemporaneamente può ingombrare l'interfaccia e confondere gli utenti. Visualizza prima le lingue più rilevanti o comunemente usate e posiziona il resto in un menu a discesa o in una sezione "più lingue".
Ciò mantiene l'interfaccia pulita e migliora l'usabilità, specialmente sui dispositivi mobili. Utilizzare l'analisi del traffico del sito Web per decidere quali lingue dovrebbero essere prioritarie o nascoste.
Usa icone e segnali visivi appropriati (senza fare affidamento su bandiere)
I segnali visivi come icone Globe (🌐), frecce verso il basso (▾) o evidenziazioni di stato attivo aiutano gli utenti a capire che un elemento è cliccabile. Tuttavia, evitare di usare bandiere nazionali per rappresentare le lingue, poiché una lingua può essere parlata in più paesi.
Le bandiere possono anche trasportare implicazioni culturali o politiche. Se usi elementi visivi, abbinali a etichette di testo per garantire chiarezza e mantenere le icone coerenti e culturalmente neutrali attraverso il tuo design.
Resta coerente con la progettazione e il marchio del sito Web
Il tuo selettore di lingue dovrebbe allinearsi visivamente con lo stile generale del tuo sito Web. Che si tratti di utilizzare pulsanti, collegamenti di testo o icone, assicurarsi che la tipografia, i colori e gli stati hover corrispondano al tuo marchio. Ciò migliora la fiducia e rafforza l'esperienza dell'utente.
Se stai costruendo un selettore personalizzato, testalo su diversi browser e dispositivi per assicurarti che funzioni come previsto. La progettazione coerente e la funzionalità affidabile contribuiscono a un percorso utente multilingue senza soluzione di continuità.
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 .
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
