Suggerimenti per la progettazione di siti Web multilingue con ConveyThis

Suggerimenti per la progettazione di siti Web multilingue con ConveyThis: migliora l'esperienza utente e la portata globale con strategie di progettazione pratiche.
Trasmetti questa demo
Trasmetti questa demo
suggerimenti per la progettazione multilingue

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 rendere multilingue il tuo sito Web è abbastanza semplice. ConveyThis può creare una versione tradotta del tuo sito in pochi minuti e quindi puoi personalizzare l'aspetto e il posizionamento del tuo selettore di lingua, apportare alcune modifiche al layout per adattarsi alle lingue più parole o da destra a sinistra e cambiare colori e immagini in quei casi in cui gli originali sono inadatto alla cultura di arrivo.

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.

Questo è super facile da fare in WordPress con ConveyThis, che identifica perfettamente il testo indipendentemente dal tema che hai scelto (anche se è personalizzato!) e lo traduce automaticamente, anche se stai lavorando con altri plugin.

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:

Multi lingua

Ed ecco la versione giapponese:

BFG3BDujbVIYhYO0KtoLyGNreOFqy07PiolkAVvdaGcoC9GPmM EHt97FrST4OjhbrP0fE qDK31ka

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.

Senza titolo3

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.

"Lingue" è meglio di "Regioni"

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:

vXH8q9Ebaz0bBmsIjXwrrdm FLGBdOQK86pf3A3xU6r BZB0hL5ICjrxSiv67P vOTNbP2pFSp17B530ArONrjgjryMZYqcQl5 WQuEAYvm6LArZbXFsMD9AiSX mEzsJilUu4a

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.

mbauMzr80nfc26dg2fEg0md0cxau0Hfp

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.

1l3Vpc9jCrtXorq3xIhcXx9cl8L svuH9FBeMcNHNJ4A8j6dgnjXJgkfloLwmWyra1FstnQSvXR8C9ccnAGE Us2dCg4qSqnGzjbxDMx

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!

wsEceoJKThGv2w9Qzxu gim H YPX39kktoHXy4vJcu aanoASp V KDOu90ae7FQpaIia1YKMR0RELgpH2qiql319Vsw

I caratteri cinesi contengono molte informazioni quindi non è necessario molto spazio, mentre l'italiano e il greco sono più prolissi e richiedono il doppio delle righe. Una buona regola empirica è presumere che alcune traduzioni potrebbero richiedere più del 30% di spazio in più, quindi sii flessibile con il layout e assegna ampi spazi per il testo. Quelle strette strette nel sito Web originale potrebbero non avere abbastanza spazio per la traduzione, l'inglese è una lingua particolarmente compatta e se trovi la necessità di abbreviare in inglese in modo che il contenuto si adatti, incontrerai sicuramente qualche problema quando è tempo di tradurre.

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:

mi0VUOKft9BUwkwgswENaj31P2AhB2Imd8TxbekEY3tDB FbkUj14Y2ZkJEVC9Cu kifYc0Luu2W

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

FParMQU h2KHVVvEMwFqW6LWDN9IF V89 GlibyawIA044EjbSIFY1u4MEYxoonBzka6pFDyfQztAoreKpsd33ujCAFjPj2uh EtmtZy2l

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

Secondo il W3C è altamente raccomandato codificare la tua pagina web utilizzando UTF-8 , che consente caratteri speciali.

È piuttosto semplice, la dichiarazione UTF ha questo aspetto

fbnRHXPPyY2OPijzOvFkH0y Ke

Assicurati anche che i caratteri siano compatibili con le diverse lingue, altrimenti il testo potrebbe sembrare illeggibile. Fondamentalmente, prima di decidere su qualsiasi font, controlla la sua compatibilità con tutti gli script di cui hai bisogno. Se vuoi entrare nel mercato russo, verifica che la scrittura cirillica sia supportata.

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.

tqld4w0nWjQGM9wtgp14c lhZSHppXp rYBRGFVjGTTcs8ghcedYxQUBqqWHLnt9OgAY 0qbDnNpxlclU

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.

T538ZEA t77gyTvD EANq7iYfFuZEpJdCNZSqODajCjtiSQFk0Dyii ZVWBXy0G3gAaTKFFYDJ LjK4czPyFPbrIpV2

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

EVTgCyVWk1ncmoRJsUrQBPVs6yF Et1WGOdxrGcCYfD5o6QVXSPHR16RamvBSIOLcin3qlTmSBZGyuOI7izJ6DlTo3eeFpU rQchvaz332E5dsCl9R T0by f2qOI9CQz2CfwdRj

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

Consulta l'articolo di Robert Dodis sul design per le lingue da destra a sinistra per ulteriori informazioni su come farlo.

Alcune lingue da destra a sinistra sono arabo, ebraico, persiano e urdu e ConveyThis non ha problemi ad adattare il tuo sito Web per soddisfare le loro esigenze linguistiche e garantire un'ottima esperienza utente. E la cosa migliore è che puoi personalizzare l'aspetto di ogni lingua e apportare modifiche al tipo di carattere o alle sue dimensioni e, se necessario, modificare l'altezza della linea.

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.

I0XpdO9Z8wCAyISgVJtZVhwOOehAR1BYLkEKpzL1Cw7auye4NVvt7S YIgE30VXOxYqOXilRDqLAMyJzCJc tecDWVsRpE4oyyj9QFvOB0 dTzQkZjUKogNMo2sQnJD0UTAdAeIe

I tipi di immagini che possono offendere sono quelli che possono sembrare innocenti per alcune culture, ma, agli occhi di una cultura diversa, mostrano comportamenti illegali o tabù, ad esempio, raffigurazioni di omosessualità o emancipazione femminile.

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.

TsA5aPbhznm2N vvqL
(Fonte immagine:Ruba kiwi)

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.

cx90RYDHGTToOiC uMNKG9d8QM JDZzP0SFaSBobQduZ14CZwpuuKrgB1eUothyoAHsoxd77nQVgvnaocQm3oW R6X3bRxeHdjJ

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 ciò che è scritto su di esso quindi rimarrà nella lingua originale, quindi evita di incorporare il 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.

Questo articolo mostra le differenze nei significati dei colori in tutto il mondo , molto utile per iniziare la tua ricerca su quali sono i colori migliori per il tuo sito multilingue.

Aggiustamenti di formato

Considera di evitare di usare 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 usano 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 scrivi 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

Ci sono 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 possono variare. Con ConveyThis hai la garanzia di una perfetta integrazione indipendentemente dal design del tuo sito web.

ConveyQuesta è la scelta migliore per la traduzione di siti web con 92 lingue disponibili. È un plug-in 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.

ConveyQuesto include un pulsante di cambio lingua adatto a tutti che funziona con qualsiasi sito come predefinito, 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

Si ritiene comunemente che la traduzione del sito Web sia un processo complesso. Ma non c'è bisogno di rimandarlo perché non vuoi affrontare il mal di testa. Non è affatto scoraggiante! Con ConveyThis, diventa una semplice conversione. È senza soluzione di continuità e veloce.

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 checkout. ConveyQuesto è uno strumento semplice per la traduzione di siti Web multilingue che non rovinerà il tuo codice, come fanno gli altri.

È disponibile anche l'opzione per ordinare traduzioni professionali del tuo sito! Ti aiuteranno a trasformare completamente il tuo sito web multilingue in uno multiculturale, migliorando drasticamente l'esperienza dei tuoi clienti. Ricorda che se traduci un sito web, devi anche avere l'assistenza clienti disponibile nella lingua del tuo nuovo cliente. Considera l'idea di investire nella localizzazione e nell'adattamento dei contenuti per garantire ai tuoi visitatori un'esperienza utente eccezionale.

Commenti (4)

  1. La fine in vista per Google-Translate per i siti Web! – ConveyThis
    8 dicembre 2019 Rispondere

    […] Il testo relativo al computer in lingua svedese. Elementi come questi hanno aiutato il team di progettazione a formulare un percorso per i clienti che visitano la piattaforma, per una facile esperienza di traduzione ed evitare l'indice a scorrimento come in precedenza [...]

  2. Ottimizzazione globale dei motori di ricerca per tutte le piattaforme linguistiche - ConveyThis
    10 dicembre 2019 Rispondere

    […] Le idee attorno alla piattaforma multilingue e alla base di clienti devono essere formulate, il seguente sarebbe uno sguardo all'ingrediente testuale del linguaggio […]

  3. Trasforma il tuo WooCommerce multilingue - ConveyThis
    19 marzo 2020 Rispondere

    [...] e ottenere un linguista dal team ConveyThis per dare un'occhiata e modificarlo in modo da poter essere sicuri che la formulazione e il tono siano adatti ai valori del tuo negozio e [...]

  4. Quanto è personalizzabile WooCommerce? – ConveyThis
    23 marzo 2020 Rispondere

    [...] che le immagini sono sempre molto cariche di significato culturale e che pubblici diversi hanno aspettative diverse su come i negozi dovrebbero mostrare i loro [...]

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati*