In un mondo sempre più connesso, i siti web multilingue sono sempre più comuni. Ma progettarli? È un'operazione più complessa di quanto si possa pensare, soprattutto se si considerano le modifiche di web design da apportare al sito.
Le basi sono semplici: con Weglot puoi aggiungere diverse lingue al tuo sito di e-commerce in meno di 5 minuti. Ma poi bisogna pensare a dove posizionare il commutatore di lingua, a come modificare il layout quando un utente passa dall'inglese a una lingua RTL e a come utilizzare colori, immagini e icone culturalmente appropriati.
In questa guida esamineremo alcune delle più importanti considerazioni di progettazione per aiutarvi a pianificare il tuo sito web multilingue.
Quando qualcuno arriva sul tuo sito multilingue, è consigliabile fornire un'esperienza utente coerente, indipendentemente dalla versione linguistica del vostro sito. Ciò significa che i visitatori indiani che visitano il vostro sito in inglese devono vedere lo stesso marchio e lo stesso design della versione in hindi.
Non puoi impedire che i visitatori bilingue o multilingue vedano versioni diverse del tuo sito multilingue, ma puoi fare in modo che vedano lo stesso marchio, lo stesso layout e gli stessi elementi di web design quando passano dalla lingua predefinita.
Se utilizzi un CMS, come WordPress, con Weglot è facile creare un sito web multilingue coerente. Weglot si integra perfettamente con il tema del tuo website builder e traduce automaticamente i tuoi contenuti. Si integrerà anche con tutte le altre parti importanti della funzionalità del tuo sito, come i plugin per l'e-commerce, il che significa che non c'è motivo di avere temi o design diversi per le diverse lingue che aggiungi al tuo sito multilingue.
Ad esempio, quando si visita la homepage di Airbnb da un paese come l'Australia...
... e poi passare al giapponese, il design e il marchio sono coerenti in entrambe le lingue.
Un design immediatamente riconoscibile non solo contribuisce a rafforzare il tuo branding, ma aiuta anche a gestire gli aggiornamenti futuri del sito multilingue e a ridurre i grattacapi quando le diverse lingue rendono necessarie modifiche all'interfaccia utente.
Colloca il menu a tendina per il cambio di lingua in una posizione ben visibile sulla tua homepage e su ogni altra pagina del tuo sito. Nei siti web multilingue il cambio di lingua si trova nell'intestazione o nel piè di pagina della pagina.
Qualsiasi opzione tu decida di adottare per il sito multilingue, assicurati che sia davvero facile da trovare.
Dovrai anche assicurarti che le opzioni per il cambio di lingua siano chiarissime. È meglio fare riferimento a una nuova lingua nella sua lingua madre. Ad esempio, usare "Deutsch" invece di "German" e "日本語" invece di "Japanese".
Asana, ad esempio, utilizza un menu a discesa con i nomi delle diverse lingue disponibili:
Ti consigliamo di far sentire i tuoi visitatori i benvenuti, indipendentemente dalla lingua che parlano. Posizionare l'interruttore di lingua in un punto facile da trovare ti aiuterà a raggiungere questo obiettivo.
Si potrebbe pensare che lasciare che gli utenti scelgano la loro lingua preferita sia una cosa ovvia, ma molti siti multilingue rendono davvero difficile la scelta della lingua. Al contrario, costringono gli utenti a cambiare regione.
I grandi marchi sono i peggiori. Spesso ne troverai molti che ti costringono a cambiare la regione del loro sito multilingue (ad esempio, a passare da www.adobe.com a www.adobe.com/kr/) quando vuoi solo cambiare la lingua predefinita.
Solo perché qualcuno parla hindi non significa che voglia passare a quella regione per il sito web multilingue di un'azienda. Cosa succede se una persona vive a New York e vuole acquistare dal sito statunitense, ma vuole leggere il sito in hindi? Non porre una barriera all'acquisto sul tuo sito multilingue: aiutali ad accedere ai contenuti nella loro lingua preferita.
Ecco un ottimo esempio di azienda che permette ai visitatori di scegliere la lingua preferita: Uber mostra le opzioni di cambio lingua nel footer:
Quando si fa clic su "English", si apre una finestra di dialogo che consente di scegliere la lingua preferita:
L'aspetto positivo del design del cambio di lingua di Uber è che permette ai visitatori di selezionare la loro lingua preferita senza costringerli a cambiare regione.
Se vuoi migliorare ulteriormente l'esperienza utente dei tuoi visitatori, considera l'idea di "ricordare" la loro lingua predefinita, in modo che la prossima volta che visiteranno il tuo sito multilingue, il caricamento avverrà automaticamente nella loro lingua madre.
Molti siti web multilingue rilevano la lingua nativa del browser web per impostare automaticamente la lingua principale per gli utenti.
Anche se questo fa risparmiare tempo agli utenti, il servizio di traduzioni automatiche tramite il rilevamento della lingua non è una scienza esatta. È importante tenere conto degli utenti che potrebbero finire sulla versione "sbagliata" del vostro sito web multilingue.
Un visitatore potrebbe trovarsi fisicamente in Spagna e il tuo sito multilingue lo rileverà automaticamente e visualizzerà lo spagnolo, ma potrebbe essere un madrelingua inglese che non sa leggere lo spagnolo.
Quindi, se hai intenzione di rilevare automaticamente le località, fornisci anche un selettore di lingua in modo che i visitatori abbiano la possibilità di selezionare diverse lingue.
Le bandiere sono spesso utilizzate per indicare una lingua, ma ci sono alcuni aspetti contestuali da tenere in considerazione:
In definitiva, si vuole fornire opzioni di cambio lingua che siano facili da capire in qualsiasi lingua.
Quando il testo viene tradotto da una lingua all'altra, come avviene con Google Translate, la lunghezza del testo originale e la traduzione risultante saranno diverse. Questo può essere un problema quando si tratta di impaginare il progetto.
Alcune lingue scritte sono più concise di altre. Lingue come il Giapponese e il Cinese utilizzano uno o due caratteri per trasmettere un'informazione, mentre in altre lingue sono necessarie diverse parole.
Lingue come lo Spagnolo e l'Inglese sono molto prolisse e a volte richiedono il 30% di spazio in più rispetto ad altre lingue.
La guida del W3C sulle dimensioni del testo nella traduzione, che consigliamo vivamente di leggere per intero, offre alcuni ottimi consigli.
Il W3C sottolinea il motivo per cui è fondamentale che gli strumenti di traduzione automatica abbiano elementi dell'interfaccia utente adattabili, come pulsanti, campi di inserimento e testo descrittivo.
Ad esempio, quando Flickr è stato tradotto in diverse lingue, i designer hanno dovuto considerare il testo sotto le foto che indica il numero di visualizzazioni.
La tabella seguente mostra la lunghezza comparativa della parola "view" in diverse lingue in rapporto all'originale inglese:
Si tratta di un'espansione del 300% dall'Inglese all'Italiano!
È bene ricordare che il testo normalmente si espande o si contrae in larghezza, quindi assicurati che il tuo sito multilingue ne tenga conto. Tieni inoltre presente che più piccolo è il testo di partenza, più lunga sarà probabilmente la traduzione. Se lo spazio è un problema, prova una traduzione diversa e meno letterale, oppure cambia la dimensione dei caratteri in base alla nuova lingua.
L'altezza dei caratteri e delle righe è un'altra considerazione. È comune che i testi non latini abbiano caratteri molto più alti di quelli latini. Anche le scritture come l'arabo necessitano di uno spazio verticale maggiore tra le righe rispetto alle lingue latine.
Il W3C afferma che è necessario specificare sempre la codifica delle pagine web. Raccomanda di utilizzare UTF-8 per assicurarsi che i caratteri speciali vengano visualizzati correttamente indipendentemente dalla lingua.
Ecco come fare la dichiarazione UTF nell'intestazione delle pagine:
I font web utilizzati dovranno essere compatibili con tutte le lingue diverse dall'inglese supportate dal tuo sito WordPress multilingue, soprattutto per le lingue non latine. Ciò significa che i font utilizzati devono contenere tutti i caratteri e i glifi necessari.
Alcuni font possono supportare le scritture latine ma non quelle RTL o cirilliche, quindi verifica che le lingue non inglesi di cui hai bisogno siano incluse prima di impegnarvi nell'uso di qualsiasi font.
Google Fonts, ad esempio, consente di selezionare le lingue prima di scaricare un pacchetto di font:
Una singola lingua può comprendere centinaia di caratteri, il che può rendere i file dei font di dimensioni enormi: un altro aspetto da tenere presente quando si scelgono i font per il proprio sito web multilingue.
Progettare pagine per le lingue da destra a sinistra può comportare delle sfide. Come scrive Robert Dodis, sviluppatore di SteelKiwi, per Smashing Magazine, progettare per il TRL significa "capovolgere l'interfaccia".
Ad esempio, ecco come appare il design da sinistra a destra di Facebook:
Ecco come appare il design da destra a sinistra di Facebook in arabo:
Il mirroring del progetto è un aspetto da tenere in considerazione se si progetta per entrambi i linguaggi LTR e RTL.
Consiglio vivamente di leggere l 'articolo di Robert su Smashing Magazine per una panoramica dettagliata su come progettare per RTL. Non voglio reinventare la ruota in questo articolo, quindi leggi il suo tutorial. Voglio mostrarti come Weglot supporta le lingue RTL e può semplificare il processo di traduzione del tuo sito multilingue.
Il servizio di traduzione di Weglot supporta le lingue RTL e con le regole CSS è possibile adattare il layout del sito multilingue per adattarlo. Ecco alcune delle lingue RTL disponibili:
Dopo aver aggiunto una lingua RTL al tuo sito multilingue con Weglot, puoi personalizzare la visualizzazione applicando le regole CSS al tuo layout. Nell'amministrazione di WordPress, vai su Weglot > Design del pulsante Lingua (opzionale) e scorri fino a Sovrascrivi CSS. Aggiungi le regole CSS che desideri nella textarea: potresti voler cambiare il carattere, la dimensione, l'altezza della riga e altro ancora per adattare la lingua principale al tuo design.
Questo è tutto ciò che devi fare per aggiungere e stilizzare le lingue RTL con Weglot! Per saperne di più su come Weglot supporta le lingue RTL, consulta la documentazione.
Immagini, icone e altri elementi grafici sono elementi essenziali di qualsiasi pagina web. Ma le immagini, per loro stessa natura, sono soggettive e possono essere interpretate in modi diversi se inserite in un altro contesto culturale.
Ad esempio, la versione francese della homepage di Clarins presenta una donna caucasica:
Ma quando si visita la homepage coreana dell'azienda, si trova l'immagine di una donna coreana:
Inoltre, le immagini potrebbero essere potenzialmente offensive. Immagini che potrebbero sembrare innocenti per il pubblico occidentale potrebbero essere tabù in un altro Paese. Per esempio, immagini che ritraggono coppie gay o la parità di genere non sarebbero accettate in Paesi in cui l'omosessualità è ancora illegale e i diritti delle donne non sono ancora pienamente riconosciuti.
Dovrai anche considerare piccoli elementi, come le icone, e il loro significato per le persone provenienti da particolari località che visitano il tuo sito multilingue. Ad esempio, l'icona di un mappamondo per un pubblico australiano di lingua inglese avrebbe un aspetto molto diverso per gli utenti africani:
La terza icona qui sopra indica un mappamondo, ma non presenta un paese o una regione specifici, il che la rende più appropriata per l'uso su un sito web multilingue.
Dovrai rivedere le immagini e gli altri elementi grafici, tenendo conto di eventuali sensibilità regionali e culturali.
Evita di utilizzare immagini e altri elementi grafici con testo incorporato. Non sarà possibile tradurre il testo incorporato con strumenti come Weglot, quindi evitalo del tutto.
Il modo in cui le diverse culture vedono e interpretano il colore varia notevolmente in tutto il mondo.
Nella cultura occidentale, ad esempio, il rosso simboleggia amore, energia, passione e pericolo. Nelle culture asiatiche è un colore molto importante, che simboleggia buona fortuna, prosperità, celebrazione e lunga vita. Al contrario, in alcuni Paesi africani il rosso è associato alla morte e all'aggressività.
Il blu è considerato la scelta cromatica più sicura e accettata a livello globale per il design, poiché ha molte associazioni positive. È un colore calmante, considerato tranquillizzante e pacifico, nonostante sia anche associato a tristezza e depressione. Il blu è anche il colore più popolare per i loghi bancari perché rappresenta fiducia e autorità.
Quando scegli i colori per il design del tuo sito web multilingue, assicurati di cercare su Google il simbolismo associato ai colori che intendi utilizzare.
Non tutti i Paesi utilizzano lo stesso formato di data, anche nella lingua inglese. Ad esempio, nel Regno Unito e in Europa è comune formattare la data come giorno-mese-anno, mentre negli Stati Uniti è formattata come mese-giorno-anno.
A seconda del pubblico a cui ci si rivolge, potrebbe essere necessario tradurre le unità di misura, il che è utile per la SEO. Mentre il 90% del mondo utilizza il sistema metrico, gli Stati Uniti, la Liberia e il Myanmar utilizzano ancora il sistema imperiale di pesi e misure.
I plugin di traduzione per WordPress sono disponibili in tutte le forme e dimensioni e il loro funzionamento con il tuo particolare progetto varia notevolmente. Una soluzione che garantisce una perfetta integrazione con il tuo sito web multilingue è Weglot.
È anche possibile utilizzare l'editor visuale di Weglot per tradurre i contenuti nel front-end del sito e nei sottodomini, in modo da vedere come appaiono nel contesto del design e del layout del sito, in modo simile a Google Translate.
Con Weglot, il design e la posizione del commutatore di lingua sono personalizzabili al 100%. Il pulsante predefinito è stato progettato per adattarsi a qualsiasi sito, ma potete anche personalizzarlo tramite CSS per utilizzare il formato che preferite.
Inoltre, Weglot supporta i principi di progettazione esposti in questo post, tra cui:
Diamo un'occhiata alla funzione più importante che Weglot offre per il design: la personalizzazione del commutatore di lingua.
Dopo aver installato il plugin Weglot sul tuo sito web multilingue WordPress e aver effettuato la configurazione, ti verrà richiesto di inserire la chiave API, la lingua predefinita e la lingua in cui desiderate tradurre i vostri contenuti, come Google Translate.
Se non hai già un account Weglot, dovrai crearne uno per generare la chiave API.
Una volta salvate le modifiche, aggiorna il front-end del tuo nuovo sito web multilingue e vedrai un nuovo selettore di lingua nell'angolo in basso a destra. Facendo clic su di esso, si espanderà per mostrare le lingue disponibili, consentendo di visualizzare la traduzione preferita.
Per iniziare a effettuare le personalizzazioni di base, vai su Weglot > Progettazione del pulsante della lingua (opzionale). In questa schermata è possibile scegliere:
Nella sezione Sovrascrivi CSS è possibile applicare le regole CSS per definire l'aspetto del commutatore di lingua sul sito web multilingue. Ad esempio, si può:
In questo articolo Weglot fornisce alcuni esempi di personalizzazione del design dei pulsanti della lingua.
Scorrendo la schermata di configurazione di Weglot, si trovano le istruzioni su come posizionare il commutatore di lingua:
Per mostrare come il commutatore di lingua può essere personalizzato su un sito web multilingue (che sia WordPress, Shopify o qualsiasi altro tipo di sito web), potete vedere qui sotto come Patyka visualizza il commutatore di lingua nell'angolo in alto a sinistra della pagina.
Le lingue sono visualizzate con i loro nomi e quando si fa clic sull'interruttore e si seleziona una lingua, il contenuto della pagina viene aggiornato traducendolo nella lingua scelta.
Fondata nel 2013, Maestrooo è un'agenzia di sviluppo web con sede in Francia che annovera tra i suoi clienti From Future e Patyka. Maestrooo gestisce oggi la maggior parte dei clienti di Shopify Plus in Francia.
Maestrooo era alla ricerca di una soluzione per siti web multilingue solida e affidabile, in grado di adattarsi facilmente alle esigenze dei propri clienti. Dopo aver testato molte soluzioni e aver riscontrato problemi di SEO o di gestione degli hreflang, il team ha scoperto Weglot.
Weglot traduce tutti i contenuti dei siti dei clienti di Maestrooo, sia che si tratti di contenuti dinamici, sia che si tratti di contenuti generati da altre app o persino del processo di checkout, senza impattare il layout del loro sito web multilingue.
Oltre a progettare siti web personalizzati per i clienti, Maestrooo sviluppa anche i temi ufficiali per lo shop di temi di Shopify. Mentre altre soluzioni per siti web multilingue spesso interrompono la formattazione dei temi di Maestrooo, Weglot fornisce una soluzione di traduzione che funziona sempre.
Maestrooo aiuta ogni anno tra gli 8.000 e i 12.000 clienti a iniziare a lavorare con Shopify utilizzando Weglot per il loro sito web multilingue.
Ognuno dei principi di progettazione che abbiamo esplorato in questo post ti metterà sulla strada giusta per creare un sito web multilingue che sia bello e offra un'esperienza utente piacevole.
Per offrire ai visitatori e ai clienti del tuo sito un'esperienza eccezionale nella loro lingua madre, vale la pena di guardare anche oltre il tuo sito multilingue. Considera anche la possibilità di tradurre il materiale di marketing e l'assistenza clienti.
Considera anche la velocità e le prestazioni del vostro sito multilingue. In alcuni Paesi che non hanno la fortuna di avere una velocità di Internet elevata, il download di pacchetti linguistici di grandi dimensioni rende più difficile per i visitatori accedere ai tuoi contenuti.
Con il giusto plugin per la traduzione di siti web multilingue e un design del sito che fornisce opzioni di traduzione facili da usare, fornirai ai tuoi clienti un'interfaccia utente visivamente accattivante nella loro lingua preferita.
