In questo post
Se stai creando un sito web multilingue, ci sono alcune best practices di progettazione di siti Web multilingue che vorrai seguire per assicurarti di creare una grande esperienza per i visitatori in tutte le lingue.
Quindi quali sono queste importanti best practice? Beh, è praticamente di questo che parla questo post!
Di seguito, descriveremo in dettaglio otto migliori pratiche di progettazione di siti web multilingue da considerare durante la creazione di un sito web multilingue.
Questi consigli funzioneranno indipendentemente da come stai rendendo il tuo sito web multilingue. Tuttavia, se usi WordPress, usando il plugin multilingue TranslatePress ti dà una marcia in più per quanto riguarda il design perché puoi gestire tutte le tue traduzioni da un'interfaccia visiva. Di più nel post!
Senza ulteriori indugi, addentriamoci nei nostri consigli per la progettazione di siti web multilingue...
Otto consigli e migliori pratiche per la progettazione di siti web multilingue
Se vuoi perfezionare lo sviluppo del tuo sito web multilingue e garantire un design ottimale, segui questi otto consigli e best practices.
1. Metti il tuo selettore di lingua in un punto ben visibile
Se sul tuo sito sono disponibili più lingue, devi aggiungere un selettore di lingua in modo che i visitatori possano scegliere la lingua che preferiscono.
Poiché questo selettore di lingua avrà un ruolo così importante nell'esperienza degli utenti sul tuo sito, è fondamentale posizionarlo in un punto facilmente individuabile.
L'ultima cosa che vorresti è che tutto il duro lavoro impiegato per tradurre i tuoi contenuti vada sprecato perché qualcuno lascia il tuo sito senza nemmeno rendersi conto che è multilingue.
Ci sono due punti “principali” in cui posizionare il tuo selettore di lingua:
- Un selettore di lingua flottante, solitamente nell'angolo in basso a destra. Questo selettore di lingua rimarrà sempre visibile, anche quando l'utente scorre la pagina verso il basso. Si tratta di un ottimo approccio se vuoi che il tuo selettore di lingua sia impossibile da non notare.
- Un menu selettore di lingua questo fa parte del menu di navigazione principale, solitamente nella sezione dell'intestazione del tuo sito. Questo rende anche molto facile la ricerca per i visitatori, poiché la maggior parte di essi guarderà il menu di navigazione principale a un certo punto.
Ecco un esempio del selettore di lingua fluttuante predefinito tratto da TranslatePress:
Alcuni siti web inseriscono il selettore di lingua anche nel piè di pagina o nella barra laterale. Tuttavia, queste aree possono passare più facilmente inosservate (soprattutto il piè di pagina), motivo per cui è solitamente meglio optare per una delle prime due opzioni.
Se tu Usa TranslatePress per tradurre il tuo sito WordPress, TranslatePress aggiungerà automaticamente, per impostazione predefinita, un elemento selettore di lingua mobile nell'angolo in basso a destra del tuo sito.
Tuttavia, puoi facilmente spostarlo in una posizione diversa, ad esempio aggiungendolo come voce di menu utilizzando lo strumento di gestione dei menu integrato di WordPress.
Per saperne di più, guarda il nostro tutorial su come aggiungere un selettore di lingua a WordPress.
2. Non limitarti a usare le bandierine nel tuo selettore di lingua
Se hai seguito il consiglio precedente, i visitatori non dovrebbero avere problemi trovando Il tuo selettore di lingua. Ora parliamo di come ottimizzare il design e l'esperienza d'uso dello stesso selettore di lingua.
Per consentire ai visitatori di scegliere facilmente la lingua che preferiscono nel tuo selettore di lingua, assicurati di includere il nome effettivo della lingua nel selettore di lingua.
Sebbene sia accettabile includere delle bandierine nel selettore di lingua se si desidera aggiungere un elemento visivo alla selezione della lingua, non si dovrebbe mai usare solo bandiere.
Come il sito web “Flags are not languages” ci ricorda, Le bandiere sono simboli per i paesi, non per le lingue.
Per esempio, supponiamo che tu voglia aggiungere una bandiera per la lingua inglese. Quale bandiera dovresti usare? Dovresti usare la bandiera inglese perché è da lì che proviene la lingua? La bandiera britannica perché è più riconoscibile di quella inglese? La bandiera degli Stati Uniti perché gli Stati Uniti hanno più madrelingua inglesi del Regno Unito?
E per quanto riguarda la bandiera per l'hindi? Dovresti usare la bandiera indiana perché ci sono più di 400 milioni di madrelingua hindi lì? Ha una certa logica... ma allora cosa fai se vuoi offrire anche il bengalese per gli 80 milioni di parlanti bengalesi in India? Non puoi usare di nuovo la bandiera indiana.
Per eliminare qualsiasi confusione, è molto meglio includere semplicemente il nome della lingua in testo normale, tipicamente come viene scritto in quella lingua. Ad esempio, useresti “Deutsch” e non “tedesco” poiché “Deutsch” è il termine più pertinente per un madrelingua tedesco.
Se vuoi davvero la rappresentazione visiva di una bandiera, puoi quindi aggiungere la bandiera accanto a il testo.
Le bandiere possono anche aiutare a rappresentare la localizzazione. Ad esempio, se hai diverse versioni del tuo sito per ispanoparlanti provenienti dalla Spagna e dal Messico, aggiungere la bandiera può aiutare le persone a scegliere la loro versione locale.
Se utilizzi TranslatePress, è facile includere sia il nome del testo che la bandiera nel tuo selettore di lingua. Oppure, se non desideri utilizzarle, puoi anche disattivare facilmente le bandiere dei paesi.
Puoi accedere a queste impostazioni andando su Impostazioni → TranslatePress → Cambio lingua scheda. Troverai le opzioni del flag nella Disposizione sezione di ciascun tipo di commutatore.
Per ulteriori consigli, abbiamo una guida completa Come ottimizzare il pulsante selettore di lingua.
3. Usa un modello di sito web multilingue per un design coerente
Per garantire un'esperienza coerente tra le diverse lingue sul tuo sito, ti consigliamo di utilizzare lo stesso modello di sito web multilingue di base per ciascuna lingua.
Cioè, non vuoi che il tuo sito abbia un aspetto completamente diverso a seconda della lingua che una persona ha scelto.
Esso è buono a localizza il tuo sito. Per esempio, potresti cambiare immagini, icone, colori secondari e così via in base alla lingua dell'utente (ne parleremo più avanti).
Ma in termini di design fondamentale del vostro sito web, non volete che cambi, poiché ciò può confondere i visitatori quando vedono qualcosa di completamente diverso dopo aver cambiato lingua.
Se utilizzi WordPress, è facile da realizzare. Ad esempio, quando utilizzi TranslatePress per tradurre il tuo sito WordPress, il sito continuerà a utilizzare lo stesso tema WordPress indipendentemente dalla lingua che scegli.
Ma allo stesso tempo, hai la possibilità di intervenire e modificare piccoli dettagli di design per la localizzazione, come la modifica delle immagini.
4. Controlla il tuo design in diverse lingue per individuare problemi
Quando hai creato il design del tuo sito web, probabilmente ti sei assicurato che tutto sembrasse perfetto utilizzando il testo nella lingua originale.
Ad esempio, potresti aver affrontato qualche giro di correzioni solo per assicurarti che il titolo della tua homepage occupi una sola riga sui dispositivi desktop.
Sfortunatamente, quando traduci il tuo sito web in una nuova lingua, tutto quel lavoro meticoloso che hai dedicato all'ottimizzazione della spaziatura nel tuo design potrebbe cambiare.
Il testo tradotto potrebbe essere più lungo o più corto del testo originale, e in entrambi i casi ciò può avere effetti sgradevoli sulla spaziatura e sul design del tuo sito.
Per tenere conto di ciò, ti conviene controllare il tuo design in diverse lingue e fare eventuali correzioni se necessario.
Per il modo più semplice di farlo, puoi utilizzare uno strumento di traduzione che ti offre un'anteprima visiva.
Per esempio, se tu usa TranslatePress per tradurre il tuo sito, potrai gestire tutte le tue traduzioni da un'interfaccia visiva che ti offre un'anteprima dal vivo di esattamente come apparirà il tuo sito ai visitatori in diverse lingue:
Questo consente di apportare facilmente le modifiche necessarie per creare il design perfetto, indipendentemente dalla lingua in cui la persona sta navigando.
5. Verifica della compatibilità dei caratteri e dei problemi di codifica
Un altro dettaglio di design che vorrai ricontrollare riguarda eventuali problemi di compatibilità o codifica dei caratteri.
Se tutte le vostre lingue usano l'alfabeto latino, è improbabile che riscontriate problemi. Tuttavia, una volta superato questo limite, è importante assicurarsi che il vostro carattere tipografico sia compatibile con tutte le lingue presenti sul vostro sito.
Ad esempio, non tutti i caratteri supportano l'alfabeto cirillico, il che può essere un problema se stai traducendo i tuoi contenuti in una qualsiasi lingua slava (come il russo).
Puoi trovare diversi strumenti utili che ti permettono di verificare la compatibilità di un file di carattere. Ecco alcune buone opzioni:
- Underware.nl – utilizza una mappa per mostrarti la compatibilità del tuo carattere tipografico. Questo non è perfetto perché, come abbiamo discusso sopra, i paesi non sono lingue. Ma ti dà comunque un'ottima idea della copertura di un carattere a colpo d'occhio. Più in basso, puoi ottenere uno sguardo molto più dettagliato sulla sua copertura.
- Verificatore del set di caratteri alfabetici – un'opzione più complessa e configurabile che consente di selezionare lingue specifiche.
Ad esempio, ecco i risultati per il popolare carattere Roboto (in grassetto) dallo strumento di Underware.nl:
Alcuni mercati di caratteri tipografici ti offriranno anche strumenti per visualizzare in anteprima o scaricare caratteri in lingue diverse. Ad esempio, Google Fonts ti consente di scegliere una lingua per vedere i caratteri che supportano quella lingua (e visualizzare il testo di anteprima in quella lingua):
Infine, dovresti anche utilizzare la codifica UTF-8, che contribuirà a garantire che i caratteri speciali di una lingua vengano visualizzati in ogni caso.
Se usi WordPress, dovrebbe utilizzare automaticamente la codifica UTF-8 senza richiedere alcun intervento da parte tua. Tuttavia, per i siti Web personalizzati, potresti dover specificare manualmente UTF-8.
6. Regolare immagini e icone per la localizzazione
La localizzazione del sito web è una importante best practice di progettazione di siti web multilingue per garantire un'esperienza ottimizzata ai visitatori di diverse località.
Mentre la traduzione consiste nel tradurre i vostri contenuti nella nuova lingua, la localizzazione riguarda l'aggiornamento di altri dettagli di design affinché corrispondano.
Ad esempio, diciamo che hai una pagina in cui vuoi mostrare un monumento famoso in ogni paese. Per la versione inglese/statunitense della pagina, potresti avere la Statua della Libertà.
Tuttavia, se tu ha tradotto quella pagina in francese, non avrebbe molto senso mantenere la stessa immagine. Invece, potresti cambiarla con la Torre Eiffel. Questo creerebbe un'esperienza più “locale” per i visitatori francesi.
Oltre alle immagini, potresti voler localizzare altri elementi visivi, come le icone utilizzate dal tuo sito.
Fondamentalmente, pensa a tutti gli elementi visivi sul tuo sito e se potrebbe creare un'esperienza migliore modificare tali elementi in base alla lingua dell'utente.
Se stai utilizzando TranslatePress, ecco come puoi tradurre immagini e altri elementi visivi.
7. Regola i formati se necessario (data, ora, ecc.)
Per un'altra parte importante della localizzazione del design del sito web, vorrai anche regolare il formato di vari contenuti sul tuo sito, come date, ore e così via.
L'esempio più comune sarebbero i diversi formati di data – ad esempio. mese/giorno/anno contro /giorno/mese/anno.
Alcune lingue potrebbero anche usare formati di ora diversi, ad esempio un orologio a 12 ore rispetto a un orologio a 24 ore.
Se utilizzi uno di questi formati nel tuo design, vorrai aggiornarli in base alla lingua dell'utente.
8. Adatta per le lingue da destra a sinistra se necessario
Questo ultimo consiglio di design per siti web multilingue non si applica a tutti i siti web. Tuttavia, se desideri offrire il tuo sito in lingue scritte da destra a sinistra oltre a quelle da sinistra a destra, ciò richiederà ovviamente alcune modifiche al design.
Ecco alcune modifiche di design comuni che dovrai apportare per tenere conto delle lingue da destra a sinistra:
- Allineare il testo a destra invece che a sinistra.
- Specchiatura di alcune icone quando necessario (solo se il significato dell'icona cambia in base alla sua direzione).
- Aggiornamento delle immagini per la lettura da destra a sinistra, se necessario.
- Modifica dei campi del modulo e dell'allineamento.
- Modifica del layout dell'intestazione (per esempio, posiziona il logo sul lato destro invece che sul lato sinistro come è comune con le lingue da sinistra a destra).
- Allineamento dei percorsi di navigazione a destra anziché a sinistra.
Praticamente, vorrai pensare a riflettere molti degli elementi sul tuo sito per passarli dall'allineamento a sinistra all'allineamento a destra.
Crea oggi il design perfetto per un sito web multilingue
La creazione di un sito web multilingue è un ottimo modo per offrire una migliore esperienza utente ai visitatori multilingue e connettiti con più visitatori innanzitutto grazie a SEO multilingue.
Tuttavia, se vuoi ottenere il massimo dai tuoi sforzi di traduzione, ci sono alcune importanti migliori pratiche per i siti web multilingue che vorrai seguire per quanto riguarda il design.
L'implementazione di queste pratiche garantirà ai tuoi visitatori un'ottima esperienza sul tuo sito, indipendentemente dalla lingua in cui stanno navigando.
Se hai creato il tuo sito con WordPress, puoi usa il plugin gratuito TranslatePress per creare un sito web multilingue che segua tutte queste best practices. Non solo ti offre tutti gli strumenti di cui hai bisogno per tradurre e localizzare completamente il tuo sito, ma utilizza anche un'interfaccia visiva in modo da poter collegare facilmente il design del tuo sito web alle tue traduzioni.
Se vuoi iniziare, dai un'occhiata alla nostra guida su come realizzare un sito WordPress multilingua.
Se hai un negozio WooCommerce, abbiamo anche una guida su come creare un negozio WooCommerce multilingue.
TranslatePress Multilingue
Hai ancora domande sulla progettazione di siti web multilingue o sulle migliori pratiche per i siti web multilingue? Faccelo sapere nei commenti!
Se hai trovato utile questo post, ti invitiamo a visitare il nostro Canale YouTube, dove carichiamo costantemente brevi tutorial video facili da seguire. Puoi anche seguirci su Facebook e Twitter per essere tra i primi a sapere ogni volta che pubblichiamo.
Grazie! È una descrizione informativa ma semplice. Come parte di Contenteam, i ragazzi che localizzano i siti web, voglio aggiungere che tutta l'attenzione dedicata alla traduzione e al design viene sempre ripagata. E sì, il problema con quell'indicatore della lingua – per me sembra logico posizionarlo in alto nell'angolo. E assicuratevi che funzioni, dato che a volte è impossibile aprirlo.