Localizzazione dell'interfaccia: come impedire che le traduzioni lunghe danneggino il suo software

Le traduzioni lunghe possono danneggiare il layout del suo software. Scopra come mantenere la sua interfaccia pulita e funzionale in ogni lingua.

Quando si localizza un software, la lunghezza delle traduzioni non è sempre prevedibile. Alcune lingue occupano più spazio di altre, e queste differenze possono danneggiare elementi della sua interfaccia utente (UI).

Prenda l'esempio qui sotto. La traduzione polacca di «Low battery» è il 65% più larga della versione inglese. Senza spazio sufficiente, la traduzione potrebbe traboccare, venire tagliata o spostare altri elementi.

IngleseLow battery122 px

PolaccoNiski poziom baterii207 px

Ora, consideri il caso opposto. Alcune lingue, come il cinese, usano meno caratteri per esprimere lo stesso significato.

IngleseNew message120 px

Cinese新消息63 px

Se la sua interfaccia utente considera solo il testo inglese, le traduzioni più brevi possono lasciare troppo spazio vuoto, facendo apparire etichette e pulsanti scollegati.

Per prevenire problemi di layout prima del lancio, questa guida le insegna a:

Simulare traduzioni lunghe
Adattare i layout a diverse lunghezze di testo
Usare gli avvisi di controllo della lunghezza di PTC per individuare i problemi in anticipo

Buone pratiche per impedire che le traduzioni danneggino la sua UI

Una UI ben costruita si adatta sia alle traduzioni brevi sia a quelle lunghe. Nessun singolo approccio funziona per ogni interfaccia, ma queste buone pratiche aiutano a mantenere il suo layout adattabile e leggibile nelle diverse lingue.

1. Simuli traduzioni lunghe prima del deployment

Prima di aggiungere traduzioni reali, è importante verificare come la sua UI attuale gestisce un testo più lungo. Un modo per testarlo è generare traduzioni allungate artificialmente. Invece di modificare manualmente ogni stringa, può usare uno script per aumentare la lunghezza del testo in un intero file di risorse.

Per esempio, se sta sviluppando un tema o un plugin WordPress, può usare il nostro strumento di traduzione fittizia:

Dia un'occhiata al nostro strumento di traduzione fittizia su GitHub

Prende un file .po esistente, allunga le stringhe tradotte di un fattore prestabilito e genera un nuovo file .po e .mo per i test. Per impostazione predefinita, aumenta la lunghezza di 1,5 volte, ma può personalizzarlo in base alle sue esigenze.

2. Controlli manualmente la GUI del suo software per individuare i punti sensibili del layout

Dopo aver generato lunghe traduzioni fittizie, le carichi nel suo software e verifichi come la sua UI gestisce il testo allungato. Sebbene i test automatizzati possano individuare alcuni problemi di lunghezza delle traduzioni, non rivelano sempre i problemi di usabilità.

Navighi tra le diverse schermate e cerchi queste rotture comuni:

Testo tagliato

Parte del testo potrebbe scomparire o non venire visualizzata per intero.

Elementi sovrapposti

Pulsanti, etichette o componenti della UI possono entrare in collisione.

Layout disallineati

Le traduzioni più lunghe possono spostare gli elementi dalla loro posizione.

Testo illeggibile

Alcuni componenti della UI potrebbero rimpicciolire o comprimere il testo.

Spaziatura irregolare

Le traduzioni brevi possono creare spazi vuoti eccessivi.

Per ottenere i migliori risultati, ridimensioni le finestre (per le applicazioni desktop), esegua i test su diverse dimensioni dello schermo (per web/mobile) e faccia screenshot dei layout danneggiati. Questo la aiuterà a individuare le aree che potrebbero richiedere adattamenti di layout flessibili prima di aggiungere traduzioni reali.

3. Adatti il layout per renderlo flessibile

Se la sua revisione manuale rivela problemi di layout ricorrenti, non corregga gli elementi uno per uno. Renda invece la sua UI più adattabile.

Anziché forzare il testo a stare in spazi fissi, costruisca layout che si espandano e si restringano automaticamente in base al contenuto.

Usi elementi con ridimensionamento automatico

Si concentri solo sulle stringhe che possono causare reali problemi di UI. Pulsanti, etichette e campi di input dovrebbero adattarsi alla lunghezza del testo invece di avere larghezze fisse.

Dia un'occhiata agli esempi qui sotto. Il primo approccio imposta dimensioni fisse, limitando l'espansione del testo e rendendo difficile l'allineamento dinamico di icone e testo. Il secondo approccio usa unità relative e flexbox, consentendo al pulsante di crescere dinamicamente mantenendo testo e icone correttamente allineati.

Layout fisso (problematico)

button {
  display: inline-block; /* Static display */
  width: 150px; /* Fixed width */
  height: 40px; /* Fixed height */
  padding: 10px; /* Fixed padding */
  font-size: 14px; /* Fixed font size */
  …
}

Layout flessibile (approccio migliore)

button {
  display: inline-flex; /* Use flexbox for alignment */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  padding: 0.75em 1.5em; /* Relative padding for scalability */
  font-size: 1rem; /* Relative font size */
  …
}

Abiliti il ritorno a capo del testo

Le traduzioni più lunghe potrebbero non stare su una sola riga. Consentire al testo di andare a capo previene il troncamento.

Un pannello delle impostazioni etichettato come «Battery Percentage» in inglese può diventare «Prozentanzeige für Batterie» in tedesco, che non sta su una sola riga.

Senza ritorno a capo (problematico)

.nav-item {
  white-space: nowrap;
}

Con ritorno a capo (approccio migliore)

.nav-item {
  white-space: normal;
  word-wrap: break-word;
}

Eviti i contenitori a larghezza fissa

Invece di impostare dimensioni rigide, consenta ai contenitori di adattarsi in base al contenuto. Questo permette a elementi come i menu della barra laterale di funzionare in tutte le lingue.

Larghezza fissa (problematico)

.sidebar {
  width: 250px;
}

Larghezza flessibile (approccio migliore)

.sidebar {
  min-width: 250px;
  max-width: 40%;
}

Usi una spaziatura relativa

Padding e margini fissi possono causare disallineamenti quando il testo si espande. L'uso delle percentuali garantisce che la spaziatura rimanga proporzionale. Un modulo di accesso con i campi «Username» e «Password» può apparire corretto in inglese ma risultare sbilanciato in francese («Nom d’utilisateur»).

Spaziatura fissa (problematico)

label {
  margin-right: 20px;
}

Spaziatura relativa (approccio migliore)

label {
  margin-right: 5%;
}

4. Tenga un breve elenco degli elementi della UI che necessitano di regolazioni manuali

Anche con layout flessibili, alcuni elementi della UI potrebbero comunque richiedere attenzione manuale. Questo include:

Menu di navigazione
Pulsanti, etichette o tooltip di piccole dimensioni
Elementi a larghezza fissa
Concatenazioni di stringhe

Se determinati componenti si danneggiano sistematicamente una volta tradotti, li segnali per tenere traccia degli elementi sensibili al layout che richiedono una revisione aggiuntiva.

Può quindi usare PTC per controllare i problemi di lunghezza delle traduzioni prima del deployment, assicurandosi che la sua interfaccia funzioni correttamente in tutte le lingue.

Come PTC la aiuta a individuare i problemi di layout

Una volta che si è registrato per una prova gratuita di 30 giorni e ha tradotto il suo primo progetto, può usare PTC per individuare i problemi di layout senza investire in processi di QA manuali lunghi e costosi.

Controlli i limiti di lunghezza delle traduzioni

PTC applica automaticamente i limiti di lunghezza per ogni lingua di destinazione, mantenendo le traduzioni entro lo spazio che la sua UI consente. Per esempio:

Polacco → Limite di lunghezza predefinito: 120%
Tedesco → Limite di lunghezza predefinito: 130%

Se una traduzione supera questo limite, PTC la segnala per la revisione. Segua il prompt, espanda le opzioni aggiuntive per la stringa segnalata e decida come procedere:

Consenta una traduzione più lunga se la sua UI ha spazio sufficiente.

Regolare il limite di lunghezza per questa stringa specifica le dà più spazio senza modificare i limiti delle sue altre stringhe.

Chieda a PTC di ritradurre la stringa per accorciarla.

PTC dà sempre la priorità alla migliore traduzione possibile, quindi una ritraduzione più breve potrebbe non essere altrettanto accurata.

Con questo approccio, lei:

Si concentra solo sulle stringhe che possono causare reali problemi di UI
Evita di applicare restrizioni di lunghezza non necessarie a tutto il suo progetto
Prende decisioni basate sul comportamento reale della UI

Revisione della traduzione nel contesto con PTC Visual QA

I limiti di lunghezza aiutano. Ma non individuano tutto.

Una traduzione può sembrare corretta nei suoi file e causare comunque problemi una volta inserita nel suo prodotto. La formulazione si legge in modo diverso accanto ad altri elementi della UI. Un formato di data è errato per la locale. Una stringa non è mai stata tradotta e nessuno se ne è accorto.

Trovare questi problemi significa aprire il suo prodotto in ogni lingua di destinazione e rivederlo schermata per schermata. Richiede ore, e ha bisogno di persone in grado di leggere davvero quelle lingue. Più a lungo va avanti, più cose vengono trascurate.

PTC Visual QA si occupa di quella revisione per lei. Invii screenshot della sua UI tradotta e PTC esamina visivamente ogni schermata, come farebbe un revisore QA.

Cosa ottiene:

Ogni lingua viene rivista prima che gli utenti la vedano
I problemi che PTC ha rilevato nelle proprie traduzioni vengono corretti automaticamente
Per i problemi a livello di codice, come stringhe hardcoded o chiavi di traduzione mancanti, PTC fornisce un prompt pronto all'uso così può correggerli rapidamente
Recupera ore a ogni release

Per iniziare, vada alla scheda AI Visual QA nel suo dashboard PTC e invii screenshot della sua UI tradotta per la revisione. In pochi minuti, PTC scopre e corregge sia i problemi di traduzione sia quelli di layout in tutte le lingue di destinazione. Per qualsiasi cosa richieda una modifica del codice, fornisce un prompt pronto all'uso che può incollare direttamente in un assistente di programmazione con IA.

Mantenga la sua UI pronta per qualsiasi lingua

Una UI ben pianificata si adatta alle diverse lingue senza danneggiarsi. Simulare traduzioni lunghe, testare il suo layout e rendere flessibile la sua UI può aiutare a prevenire i problemi prima che si verifichino.

PTC va oltre, rilevando le traduzioni che superano i limiti di lunghezza e offrendole opzioni su come procedere. Può regolare i vincoli di lunghezza, richiedere una ritraduzione o adattare la sua UI alla traduzione - tutto prima del deployment.

Non lasci che le traduzioni lunghe danneggino la sua interfaccia

Avvii la sua prova gratuita di PTC e traduca fino a 20.000 parole in 2 lingue. Si assicuri che ogni traduzione stia nel suo software.