Suggerimenti per la progettazione di siti Web multilingue con ConveyThis

Numerosi siti Web ora hanno molte opzioni linguistiche in modo che i visitatori di tutto il mondo possano navigare comodamente. Internet ha contribuito a rendere il mercato un'esperienza globale, quindi avendo un sito web hai aperto le porte della tua attività a chiunque abbia una connessione Internet. Tuttavia, se non capiscono la lingua, non rimarranno. Il sito web multilingue è facile.

Fortunatamente, il processo per trasformare il tuo sito web in più lingue è abbastanza semplice. ConveyThis puoi creare una versione tradotta del tuo sito in pochi minuti e poi puoi personalizzare l'aspetto e il posizionamento del tuo selettore di lingua, apportare alcune modifiche al layout per adattarsi alle lingue più prolisse o da destra a sinistra e cambiare colori e immagini in questi casi dove gli originali non sono adatti alla cultura di destinazione.

Il processo non è completamente automatizzato, dovrai fare qualche ricerca in anticipo. Questa guida spiega alcuni aspetti della progettazione di siti Web per aiutarti a entrare comodamente nel mondo dei siti Web multilingue e del design eccezionale.

Marchio coerente

L'esperienza dell'utente deve essere coerente indipendentemente dalla versione linguistica che sta visitando. L'aspetto dovrebbe essere molto simile in tutte le versioni, alcune differenze potrebbero essere necessarie a causa di differenze linguistiche o culturali, ma se passi da una lingua all'altra non dovresti avere la sensazione di essere stato reindirizzato a un sito completamente diverso.

Pertanto, elementi di design come il layout e il particolare stile di branding della tua azienda dovrebbero rimanere gli stessi in tutte le lingue.

This is super easy to do in WordPress with ConveyThis, that perfectly identifies text regardless of the theme you have chosen (even if it’s customized!) and automatically translates it, even if you are working with other plugins.

Questo ti aiuterà ad avere un modello globale con lo stesso tema per tutte le lingue e, quindi, la stessa esperienza utente.

La homepage di Airbnb funziona benissimo come esempio, diamo un'occhiata alla versione australiana:

Ed ecco la versione giapponese:

Senza dubbio questo è lo stesso sito web. Lo sfondo è lo stesso, così come la funzione di ricerca. Avere un design unificato aiuta l'identità del tuo marchio e fa risparmiare tempo e fatica quando aggiungi nuove lingue o aggiorni.

Cancella selettori di lingua

Scegli una posizione di rilievo per il selettore di lingua, come uno qualsiasi dei quattro angoli del tuo sito Web, e posizionalo su ogni pagina, non solo sulla home page. Deve essere facile da trovare, nessuno vuole mai cercare un pulsante nascosto.

Si raccomanda vivamente che i nomi delle lingue siano nella propria lingua. "Español" invece di "spagnolo", ad esempio, funzionerà a meraviglia. Asana fa questo, il loro sito ha una casella a discesa con le opzioni di lingua disponibili.

In questo modo aiuta i visitatori a sentirsi i benvenuti. Se il tuo sito web è tradotto, l'elenco delle lingue dovrebbe rifletterlo. Leggere “tedesco, francese, giapponese” su un sito inglese non facilita la navigazione e dà l'impressione che la versione inglese sia la più importante.

‘Languages’ is better than ‘Regions’

Molti grandi marchi internazionali ti costringono a cambiare regione per poter leggere il sito web nella tua lingua. Questa è un'idea terribile che rende la navigazione più difficile per i visitatori. Questi siti Web funzionano presupponendo che tu stia navigando nella regione in cui si parla la lingua, quindi ottieni il testo nella tua lingua ma potresti non ottenere il contenuto per la regione che ti interessa.

L'immagine seguente è stata presa dal sito Web di Adobe:

Le lingue non dovrebbero essere inestricabili dalle loro regioni. Prendiamo ad esempio tutte quelle città cosmopolite come New York, Londra e Parigi. Forse un belga che vive nel Regno Unito desidera acquistare dal sito del Regno Unito ma navigare in francese. Devono scegliere tra l'acquisto dal sito belga nella loro lingua o l'acquisto dal sito del Regno Unito in inglese, e non vogliono fare nessuna delle due cose. Hai così accidentalmente creato una barriera. Diamo un'occhiata a un sito Web che consente di specificare lingua e regione separatamente, il sito Web di Uber.

Questo è un design eccellente. In questo caso, l'opzione di cambio lingua è stata inserita nel piè di pagina a sinistra e invece di una casella a discesa hai un modale a causa delle numerose opzioni. I nomi delle lingue sono indicati anche nella loro lingua.

Come bonus potresti "ricordare" qual era la lingua scelta dall'utente in modo che dalla prima visita in poi non debba più cambiare lingua.

Rileva automaticamente la posizione

Questa funzione è super utile in modo che i tuoi visitatori non accedano attraverso la lingua sbagliata. E per risparmiare tempo da parte dell'utente in modo che non debba cercare il selettore di lingua. Ecco come funziona: il sito web identifica la lingua del browser o la sua posizione.

Ma fai attenzione nel caso in cui l'utente sia un turista e non abbia familiarità con la lingua locale perché avrà bisogno del pulsante della lingua per poter cambiare, per questo motivo lo strumento non è sempre preciso.

Quando progetti il tuo sito multilingue non scegliere tra il rilevamento automatico della lingua e il cambio lingua, quest'ultimo è obbligatorio mentre il primo è facoltativo.

I flag non sono adatti sostituti del nome di una lingua

Ci sono 21 paesi di lingua spagnola e 18 paesi di lingua inglese, e in Cina ci sono 8 dialetti primari, quindi le bandiere non sono grandi sostituti dei nomi delle lingue. Inoltre, i flag potrebbero non essere indicatori utili perché potrebbero confondere coloro che non li riconoscono.

Sii flessibile con lo spazio del testo

Questa può essere una sfida, ma è innegabile che le traduzioni non occupano lo stesso spazio del testo originale, alcune possono essere più corte, altre possono essere più lunghe, alcune potrebbero anche aver bisogno di più spazio verticale!

Chinese characters contain lots of information so not much space is needed, while Italian and Greek are wordier and need twice as many lines. A good rule of thumb is to assume that some translations may require more than 30% extra space so be flexible with the layout and assign ample spaces for text. Those tight squeezes in the original website may not have enough space at all for the translation, English is a particularly compact language, and if you find the need to abbreviate in English so the content will fit, you’ll definitely encounter some trouble when it’s time to translate.

Oltre ad avere spazio per allungare il testo, è anche una buona idea avere elementi dell'interfaccia utente adattivi in modo che anche i pulsanti e i campi di input possano crescere, puoi anche ridurre la dimensione del carattere, ma non troppo.

Il sito web di Flickr è multilingua, diamo un'occhiata al pulsante "visualizzazioni" originale:

Sembra fantastico, tutto è fantastico, ma "viste" risulta essere una parola più lunga in altre lingue, che richiede più spazio.

In italiano richiede il triplo dello spazio!

Molte scritture non latine, come l'arabo, richiedono più altezza affinché la traduzione si adatti. Quindi, per riassumere, il layout del tuo sito web dovrebbe essere sufficientemente flessibile da adattarsi alle diverse esigenze linguistiche, in modo che nel passaggio l'aspetto raffinato dell'originale non vada perso.

Compatibilità dei caratteri Web e codifica dei siti Web

According to the W3C it’s highly recommended that you encode your webpage using UTF-8, which allows for special characters.

È piuttosto semplice, la dichiarazione UTF ha questo aspetto

Also make sure that the fonts are compatible with the different languages, otherwise the text may end up looking illegible. Basically, before deciding on any font, check its compatibility with all the scripts you need. If you want to enter the Russian market, check that the Cyrillic script is supported.

L'immagine seguente è stata presa da Google Fonts e, come puoi vedere, puoi scegliere di scaricare qualsiasi versione di script di cui hai bisogno. Quelle lingue con una quantità maggiore di caratteri creano file di caratteri più grandi, quindi tienilo in considerazione quando scegli e mescoli i caratteri.

Per quanto riguarda le lingue da destra a sinistra

Man mano che il mercato mediorientale cresce, potresti prendere in considerazione la creazione di una versione del tuo sito Web che attiri visitatori da questa regione, ciò significa adattare il layout in modo che sia compatibile con la loro lingua. Una caratteristica della maggior parte delle lingue mediorientali è che si leggono da destra a sinistra! Questa è una grande sfida e la soluzione inizia con il mirroring dell'interfaccia.

Questo è il design di Facebook per le lingue da sinistra a destra, come l'inglese.

E questo è il design capovolto per le lingue da destra a sinistra, come l'arabo.

Guarda da vicino, il posizionamento di tutto nel design è stato rispecchiato.

Check out Robert Dodis’ article on design for Right to Left languages for further information on how to do this.

Some Right To Left languages are Arabic, Hebrew, Persian and Urdu and ConveyThis has no trouble adapting your website to accommodate for their language requirements and ensure a great user experience. And the best thing is you can customize the look of each language and make changes to the type of font or its size, and if necessary, edit the line height.

Scegli le icone e le immagini appropriate

Le immagini hanno una componente culturale molto pesante e sono elementi chiave di un corretto design del sito web. Ogni cultura assegna un significato a immagini e icone diverse, alcune interpretazioni sono positive e altre completamente opposte. Alcune immagini riflettono le esperienze degli ideali di una cultura ma in un contesto diverso faranno sentire gli utenti alienati.

Ecco un esempio di un'immagine che doveva essere sostituita perché non era culturalmente appropriata. Tieni presente che non tutte le immagini saranno offensive per gli altri, forse genererà solo apatia quando desideri che le persone siano curiose e interessate al tuo prodotto.

Questa è la homepage di Clarin per la lingua francese, con una donna caucasica. Ed ecco la versione coreana, con una donna coreana come ambasciatrice del brand.

The kind of visuals that may offend are those that may seem innocent to some cultures, but, in the eyes of a different culture, they are displaying behaviours that are illegal or taboo, for example, depictions of homosexuality or female empowerment.

Questo vale anche per le icone, mentre negli Stati Uniti un'icona con due coppe di champagne che brindano rappresenta la celebrazione, in Arabia Saudita è illegale bere alcolici quindi l'icona dovrà essere sostituita con un'icona culturalmente appropriata.

Pertanto sarà necessaria una ricerca per garantire che le icone che hai scelto siano appropriate per il mercato di riferimento. Se non sei sicuro puoi sempre andare sul sicuro.

Ad esempio, queste tre icone raffigurano la Terra, la prima è stata progettata per il pubblico australiano; il secondo, per il pubblico africano; e l'ultimo è adatto a un pubblico più ampio e globale in quanto non è presente alcuna area particolare.

Ultimo ma non meno importante, ConveyThis può tradurre qualsiasi testo, purché non sia incorporato in un'immagine. Il software non sarà in grado di identificare cosa c'è scritto sopra quindi rimarrà nella lingua originale, quindi evita di incorporare testo.

Scelta dei colori

Come accennato nella sezione precedente, le culture interpretano le immagini in modo diverso e la stessa cosa accade con i colori. I loro significati sono soggettivi.

Ad esempio, in alcune culture, il bianco è il colore dell'innocenza, ma altri non sarebbero d'accordo, è il colore della morte. Lo stesso accade con il rosso, nelle culture asiatiche viene utilizzato nelle celebrazioni ma per alcuni paesi africani non ha una connotazione così positiva in quanto legato alla violenza.

Tuttavia, sembra che il blu sia il più sicuro di tutti i colori, comunemente associato a significati positivi come calma e pace. Molte banche usano il blu nei loro loghi perché può anche significare fiducia e sicurezza.

This article shows the differences in color meanings all over the world, very useful for starting your research on what are the best colors for your multilingual site.

Aggiustamenti di formato

Considera di evitare di utilizzare solo numeri quando scrivi le date perché ci sono molti modi diversi per scriverle, negli Stati Uniti il formato ufficiale è mm/gg/aaaa e se puoi vedere solo i numeri alcuni utenti di altri paesi che utilizzano sistemi diversi (come gg/mm/aaaa) potrebbero confondersi. Quindi le tue opzioni sono: assicurarti che le versioni tradotte abbiano il formato della data adattato o scrivere il mese in lettere in modo che ConveyThis scriva sempre la data corretta.

Inoltre, mentre negli Stati Uniti viene utilizzato il sistema imperiale, la maggior parte dei paesi utilizza il sistema metrico, quindi dovrai decidere se sarebbe adatto per il tuo sito trasformare le misure.

Il miglior plugin di traduzione per WordPress

Esistono così tante opzioni quando si tratta di aggiungere un plugin di traduzione al tuo sito Web WordPress e non tutte funzionano allo stesso modo, i risultati varieranno. Con ConveyThis ti viene garantita un'integrazione perfetta, indipendentemente dal design del tuo sito web.

ConveyThis è la scelta migliore per la traduzione di siti web con 92 lingue disponibili. È un plugin WordPress affidabile che ti consentirà di avere rapidamente una solida versione multilingue del tuo sito web. Può comprendere il layout del sito, rilevare tutto il testo e tradurlo. ConveyThis include anche un editor intuitivo per la personalizzazione del testo.

ConveyThis include un pulsante per cambiare lingua adatto a tutti e funziona con qualsiasi sito come impostazione predefinita, ma puoi anche modificarlo quanto vuoi. Seguiamo anche i principi di progettazione indicati in questo articolo:

• Branding coerente su tutte le versioni linguistiche del sito web.
• Chiaro selettore di lingua e possibilità di scegliere una lingua preferita.
• I siti web sono codificati automaticamente con UTF-8.
• Interfacce adeguate per le lingue da destra a sinistra

ConveyThis: una soluzione per siti web multilingue di cui ti puoi fidare

It is commonly believed that website translation is a complex process. But there is no need to postpone it because you don’t want to deal with the headaches. It’s not daunting at all! With ConveyThis, it becomes a straightforward conversion. It is seamless and fast.

Dopo una rapida installazione, tutti i tuoi contenuti possono ora essere tradotti senza influire sulla formattazione, inclusi i contenuti generati da altre app e il processo di pagamento. ConveyThis è uno strumento semplice per la traduzione di siti Web multilingue che non rovinerà il tuo codice, come fanno gli altri.

The option to order professional translations of your site is also available! They will help you completely transform your multi language website into a multi cultural one, drastically improving your clients’ experience. Remember that if you translate a website, you must also have customer support available in your new client’s language. Consider investing in content localization and adaptation to guarantee a superb user experience for your visitors.