In questo post
Quando lanci un sito web multilingue, una delle prime decisioni di design che ti trovi ad affrontare è come presentare le opzioni di lingua ai tuoi visitatori. Innumerevoli siti utilizzano come impostazione predefinita le icone delle bandiere. Anche se questo può sembrare attraente e far risparmiare spazio, spesso creano più problemi di quanti ne risolvano. Il problema va più in là dell'estetica perché le bandiere rappresentano i paesi, non le lingue.
In questo post vi illustrerò le difficoltà legate all’uso delle icone delle bandiere per la selezione della lingua e vi mostrerò come TranslatePress risolva questi problemi. Condividerò inoltre le migliori combinazioni di bandiere, codici lingua e nomi che garantiscono un’esperienza chiara ai vostri visitatori internazionali.
Perché i language switcher basati esclusivamente su flag creano problemi
Il problema fondamentale dei siti language switcher basati esclusivamente sulle bandiere è che confondono la geografia con la lingua. Questa confusione si manifesta in diversi modi che possono creare frustrazione nei visitatori e danneggiare il tuo usabilità del sito.
Ad esempio, decine di paesi parlano inglese come lingua ufficiale o principale. Se mostri solo una bandiera del Regno Unito, i visitatori degli Stati Uniti potrebbero chiedersi se il contenuto si rivolga all'ortografia e alla terminologia britannica. Se invece usi una bandiera degli Stati Uniti, rischi di confondere i visitatori del Regno Unito, dell'Irlanda, del Canada e dell'Australia. Non esiste una singola bandiera che rappresenti la lingua inglese senza creare questa ambiguità.
Il problema si moltiplica con le lingue parlate in molte regioni:
- Lo spagnolo è la lingua ufficiale in molti paesi.
- L'arabo funge da lingua ufficiale in un'altra serie di paesi.
- Il portogallo è parlato in Portogallo, in Brasile e in diverse nazioni africane.
Quando usi una singola bandiera per rappresentare queste lingue, stai facendo una scelta arbitraria che esclude la maggioranza dei parlanti.
Alcune lingue affrontano una sfida ancora più complessa perché non dispongono di uno Stato-nazione corrispondente. Il curdo è parlato da milioni di persone tra Turchia, Iraq, Iran e Siria, ma non ha una bandiera nazionale. Lo stesso vale per il catalano, parlato in parti di Spagna, Francia e Andorra. Per queste lingue, scegliere una bandiera diventa impossibile senza creare tensioni politiche o culturali.
Ci sono anche lingue regionali e dialetti che non hanno confini politici. In poche parole, quando il tuo localizzazione del sito web è necessario includere queste lingue, i sistemi di selezione basati su bandiere semplicemente non possono accoglierle.
Riconoscimento delle bandiere e problemi di accessibilità con i sistemi basati solo su bandiere
La maggior parte delle persone è in grado di identificare bandiere comuni come quelle degli Stati Uniti, del Regno Unito, della Francia e della Germania. Tuttavia, le bandiere di nazioni più piccole o con disegni simili possono confondere i visitatori. Per esempio, sapresti distinguere quale di queste bandiere è quella romena e quale quella ciadiana?
Entrambe utilizzano strisce verticali di colore blu, giallo e rosso. La confusione si estende alle bandiere che appaiono simili a piccole dimensioni, dove i dettagli diventano difficili da discernere.
Chi utilizza solo interruttori a bandiera può spesso fallire standard di accessibilità troppo. Molto simili ad altre immagini, i lettori di schermo non possono interpretare le immagini delle bandiere senza un testo alternativo adeguato. Anche con il testo alternativo, l'esperienza rimane subottimale. Gli utenti con problemi di vista trarranno molti più vantaggi da etichette di testo che indicano chiaramente il nome della lingua.
Quando i flag potrebbero funzionare per il tuo sito
Ho dipinto una panoramica leggermente negativa sull'uso delle bandiere, ma esse può funzionano in determinati contesti limitati. È importante riconoscere queste eccezioni perché rappresentano situazioni in cui l'attrattiva visiva delle bandiere supera la potenziale confusione.
Il fattore chiave in queste eccezioni è che le bandiere fungono da elementi visivi supplementari anziché essere l'unico mezzo di comunicazione. Quando combini le bandiere con chiare etichette di testo, ottieni il vantaggio visivo delle bandiere mantenendo al contempo usabilità e accessibilità. Questo approccio ibrido ti consente di avere un impatto visivo accattivante senza sacrificare la chiarezza.
Siti con poche lingue riconoscibili
Se il tuo sito supporta solo due o tre lingue che hanno forti associazioni nazionali, le bandiere potrebbero fungere da efficaci indicatori visivi. Un sito web turistico che offre contenuti in inglese e francese potrebbe usare bandiere ‘ancora’ accanto ai nomi delle lingue senza creare confusione.
Il Scopri l'Italia il sito turistico utilizza questo approccio.
Con una selezione limitata di lingue, la combinazione di bandiera e nome funziona perché le scelte linguistiche sono chiare e il pubblico di riferimento si aspetta queste opzioni specifiche.
Contenuti specifici per paese ed e-commerce
I siti con forti contenuti specifici per paese possono anche utilizzare efficacemente le bandiere. Se gestisci versioni separate del tuo sito per Stati Uniti, Canada e Regno Unito, ciascuna con contenuti localizzati, prezzi e informazioni di spedizione, le bandiere dei paesi hanno senso. In questo caso, stai cambiando interamente le esperienze specifiche per paese.
Ad esempio, Amazzonia utilizza le bandiere negli aspetti della sua navigazione globale perché ciascuna bandiera rappresenta un mercato completamente diverso con inventario, prezzi e opzioni di consegna unici.
Qui le bandiere comunicano la posizione geografica anziché la sola preferenza linguistica, il che si allinea al modo in cui opera la sua piattaforma.
I problemi delle comuni implementazioni basate su flag
È spesso possibile notare specifici errori di implementazione che si sommano ai problemi derivati dall'uso di selezioni basate unicamente sulle bandiere. Ad esempio, molti siti utilizzano le bandiere nei menu a tendina senza alcun testo di accompagnamento. L'utente vedrà una piccola icona di una bandiera nell'intestazione, cicliccherà sopra e si troverà di fronte a un elenco di altre bandiere.
Questo approccio è problematico perché, prima di tutto, gli utenti devono capire che possono cliccare sulla bandiera per accedere alle opzioni della lingua. Poi devono identificare ciascuna bandiera nel menu. È peggio sui dispositivi mobili perché è facile selezionare accidentalmente la lingua sbagliata. In ogni caso, il risultato è una scarsa esperienza utente.
A proposito di cellulari, le bandiere devono avere un numero sufficiente di pixel per essere riconoscibili, ma le immagini language switcher spesso occupano uno spazio limitato sullo schermo. Quando si riducono le dimensioni delle bandiere per adattarle a un menu compatto, i dettagli che distinguono bandiere simili tra loro scompaiono.
Come presentare le lingue nel modo giusto (3 consigli)
Secondo me, il metodo migliore per presentare una lingua unisce diversi elementi che insieme creano chiarezza. Ecco alcuni consigli per iniziare subito con il piede giusto.
1. Usa sempre i nomi in lingua originale
I nomi delle lingue dovrebbero apparire sempre nella loro forma nativa. Se offri il tedesco, visualizzalo come “Deutsch” anziché “German.” I nomi delle lingue native funzionano perché le persone riconoscono la propria lingua anche quando è circondata da testo straniero.
Il Sito web della BBC dimostra questo principio nei suoi servizi globali.
Ogni versione linguistica mostra le lingue nei rispettivi alfabeti e nomi nativi. Questo approccio garantisce che i visitatori possano trovare la propria lingua, che parlino arabo, bengalese, hindi o una qualsiasi delle altre lingue supportate dalla BBC.
2. Considera i codici lingua per layout con spazio limitato
I codici delle lingue possono fornire un'alternativa compatta quando lo spazio è limitato. Codici ISO 639-1 come “EN,” “ES” e “FR” occupano uno spazio minimo e funzionano bene in layout vincolati. Tuttavia, consiglio di utilizzare i codici solo quando lo spazio lo richiede assolutamente, poiché presuppongono che gli utenti comprendano queste abbreviazioni standardizzate.
TranslatePress offre un'opzione "con un clic" per utilizzare i codici lingua anziché il nome completo. Tuttavia, la difficoltà sta nel fatto che molti utenti di Internet non conoscono il significato, ad esempio, di "PT" che sta per portoghese o di "NL" che sta per olandese. Questi codici funzionano meglio per un pubblico tecnico o su siti in cui gli utenti hanno familiarità con le abbreviazioni linguistiche. Le piattaforme finanziarie e gli strumenti per sviluppatori utilizzano spesso questi codici con successo, poiché il loro pubblico li comprende.
3. Gestire le lingue da destra a sinistra
Le lingue con scrittura da destra a sinistra (RTL), come l'arabo, l'ebraico e il persiano, richiedono un'attenzione particolare, poiché l'intero sito (e quindi il selettore di lingua) deve essere adattato per queste lingue. Le combinazioni di bandiera e nome devono essere invertite, con la bandiera che appare sul lato destro del testo.
TranslatePress supporta i linguaggi RTL Rileva automaticamente quando una lingua utilizza una scrittura da destra a sinistra e adatta il sito di conseguenza. Ciò garantisce che il tuo selettore di lingua mantenga un flusso di lettura corretto indipendentemente dalla lingua selezionata dall'utente.
Opzioni di cambio lingua di "TranslatePress"
TranslatePress offre alcune opzioni di visualizzazione flessibili che risolvono la ‘polemica sulle bandiere’ e ti consentono al contempo di controllare l’aspetto del tuo sito.
TranslatePress Multilingue
L'approccio consigliato consiste nel visualizzare le bandiere accanto al nome completo del Paese. Questa è l'impostazione predefinita di TranslatePress e funziona bene perché è visivamente chiara. Si tratta di un ottimo compromesso, soprattutto per siti di e-commerce multilingue dove una comunicazione chiara è fondamentale per le conversioni. Tuttavia, se il tuo design richiede un approccio più compatto, puoi mostrare le bandiere con i codici delle lingue anziché i nomi completi.
Se desideri evitare del tutto l'uso dei simboli, TranslatePress ti permette di visualizzare solo i nomi nella lingua originale. In questo modo si evita ogni potenziale confusione, garantendo al contempo la massima chiarezza.
Anche se il selettore occupa leggermente più spazio orizzontale, elimina l'ambiguità su quale lingua rappresenti ciascuna opzione.
Infine—e sì, mi contraddirò un po'—potresti anche scegliere di mostrare solo le bandiere! I siti con un numero ridotto di lingue ampiamente riconosciute potrebbero preferire questo approccio visivo, sebbene tu voglia assicurarti di soddisfare i criteri che ho offerto prima. Dopotutto, è un'opzione specifica per uno scopo dedicato.
Configurazione del selettore di lingua in TranslatePress
Configurare il formato di visualizzazione nella lingua preferita in TranslatePress è semplice e veloce. Per prima cosa, vai su Impostazioni → TranslatePress all'interno di WordPress. Nel Cambio lingua In questa sezione troverai le opzioni sia per il selettore di lingua mobile che per altri metodi di visualizzazione, come le voci di menu e gli shortcode.
Puoi aprire il Personalizza layout pannello per posizionare le bandiere o nasconderle completamente. Il Personalizza il Design il pannello offre anche alcune opzioni extra per la visualizzazione delle bandiere:
Tra l'altro, puoi impostare i tuoi codici lingua e slug su Generale scheda. Una volta salvate le modifiche, TranslatePress applicherà le tue selezioni.
Dove posizionare il tuo selettore di lingua
Anche se questo post non riguarda il design selettore di lingua, io fare Voglio toccare il tema della sua posizione ottimale prima di concludere, poiché ciò influisce sulla facilità con cui i visitatori possono trovarlo e utilizzarlo. Ci sono quattro posti distinti in cui il tuo selettore può trovare spazio:
- Nell'intestazione.
- Nel footer.
- Fluttuante a seconda del viewport della pagina e del modello di scorrimento dell'utente.
- All'interno del menu di navigazione.
L'intestazione o il piè di pagina sono soluzioni adatte alla maggior parte dei siti web, soprattutto se si posiziona il selettore di lingua nell'angolo in alto a destra o in basso a destra. Il TranslatePress Anteprima dello switcher il display offre una rapida indicazione di come apparirà, ma un'anteprima del sito a schermo intero sarà un'opzione migliore.
Sembra logico che il selettore di lingua si trovi nell'intestazione, ma personalmente sono più propenso a cercarlo nel piè di pagina se il selettore non è mobile.
In generale, inserire il selettore nel footer ha senso quando la selezione della lingua avviene una volta sola all'inizio della visita di un utente. Se la maggior parte degli utenti arriva sul tuo sito nella propria lingua preferita attraverso motori di ricerca o rilevamento automatico, è probabile che l'accesso costante alle opzioni della lingua non sia una priorità.
L'impostazione predefinita di "TranslatePress" è un "selettore di lingua" mobile, ovvero un pulsante che segue l'utente durante lo scorrimento della pagina. Si tratta di un modo moderno per mantenere accessibili le opzioni linguistiche senza occupare spazio nell'intestazione o in altre parti della pagina.
Per i siti con più livelli di menu o una navigazione complessa, l'aggiunta di selettore di lingua al menu di navigazione principale rappresenta una valida opzione. Opzioni ’TranslatePress’ e ‘selettore di lingua’ includi menu separati per elementi mobili (floating), menu e incorporamento tramite shortcode, in modo da avere a disposizione una grande flessibilità.
TranslatePress rende la selezione della lingua semplice e chiara
"TranslatePress"’ Le opzioni di selettore di lingua ti consentono di partire da impostazioni predefinite ragionevoli, adatte alla maggior parte dei siti, che potrai poi personalizzare in base alle tue esigenze specifiche. Scegliere le giuste impostazioni di visualizzazione per le bandiere e la lingua associata all’identificazione del Paese migliorerà notevolmente la tua esperienza utente e, di conseguenza, la reputazione del tuo sito.
TranslatePress Multilingue
Le opzioni di configurazione semplici (ma potenti) di TranslatePress ti consentono di presentare il tuo selettore di lingua nel modo più ottimale per il tuo sito web. Naturalmente, il plugin ti permette anche di utilizzare traduzioni automatiche, modifiche manuali e funzionalità SEO per creare un pacchetto di traduzione completo e ben strutturato.
Ripenserai alla tua strategia riguardo alla visualizzazione delle icone delle bandiere delle lingue? Condividi i tuoi pensieri con me nella sezione commenti qui sotto!
