Localisation d'interface utilisateur : comment éviter que les traductions longues ne cassent votre logiciel

Les traductions longues peuvent casser la mise en page de votre logiciel. Découvrez comment garder votre interface propre et fonctionnelle dans chaque langue.

Lors de la localisation d'un logiciel, la longueur de traduction n'est pas toujours prévisible. Certaines langues prennent plus de place que d'autres, et ces différences peuvent casser des éléments de votre interface utilisateur (UI).

Prenez l'exemple ci-dessous. La traduction polonaise de « Low battery » (batterie faible) est 65 % plus large que la version anglaise. Sans espace suffisant, la traduction pourrait déborder, être coupée ou décaler d'autres éléments.

AnglaisLow battery122 px

PolonaisNiski poziom baterii207 px

Considérez maintenant le cas inverse. Certaines langues, comme le chinois, utilisent moins de caractères pour exprimer le même sens.

AnglaisNew message120 px

Chinois新消息63 px

Si votre interface utilisateur ne prend en compte que le texte anglais, les traductions plus courtes peuvent laisser trop d'espace vide, donnant l'impression que les libellés et les boutons sont déconnectés.

Pour éviter les problèmes de mise en page avant le lancement, ce guide vous apprend à :

Simuler des traductions longues
Adapter les mises en page pour différentes longueurs de texte
Utiliser les avertissements de longueur de traduction de PTC pour repérer les problèmes tôt

Bonnes pratiques pour éviter que les traductions ne cassent votre interface utilisateur

Une interface utilisateur bien conçue s'adapte aux traductions courtes comme aux traductions longues. Il n'existe pas d'approche unique pour toutes les interfaces, mais ces bonnes pratiques vous aident à garder votre mise en page responsive et lisible dans différentes langues.

1. Simuler des traductions longues avant le déploiement

Avant d'ajouter de vraies traductions, il est important de vérifier comment votre interface utilisateur actuelle gère les textes plus longs. Une façon de tester cela est de générer des traductions artificiellement étendues. Au lieu de modifier manuellement chaque chaîne, vous pouvez utiliser un script pour augmenter la longueur du texte dans tout un fichier de ressources.

Par exemple, si vous développez un thème ou un plugin WordPress, vous pouvez utiliser notre outil de traduction factice :

Découvrez notre outil de traduction factice sur GitHub

Il prend un fichier .po existant, étend les chaînes traduites selon un facteur défini, et génère un nouveau fichier .po et .mo pour les tests. Par défaut, il augmente la longueur de 1,5x, mais vous pouvez le personnaliser pour répondre à vos besoins.

2. Vérifier manuellement l'interface graphique de votre logiciel pour détecter les sensibilités de mise en page

Après avoir généré de longues traductions factices, chargez-les dans votre logiciel et vérifiez comment votre interface utilisateur gère le texte étendu. Bien que les tests automatisés puissent détecter certains problèmes de longueur de traduction, ils ne révèlent pas toujours les problèmes d'utilisabilité.

Naviguez à travers différents écrans et recherchez ces ruptures courantes :

Texte coupé

Certains textes peuvent disparaître ou ne pas s'afficher complètement.

Éléments qui se chevauchent

Les boutons, les libellés ou les composants de l'interface utilisateur peuvent entrer en collision.

Mises en page mal alignées

Des traductions plus longues peuvent décaler les éléments.

Texte illisible

Certains composants de l'interface utilisateur peuvent rétrécir ou compresser le texte.

Espacement irrégulier

Les traductions courtes peuvent créer des espaces excessifs.

Pour de meilleurs résultats, redimensionnez les fenêtres (pour les applications de bureau), testez sur différentes tailles d'écran (pour le web/mobile) et prenez des captures d'écran des mises en page cassées. Cela vous aidera à identifier les zones qui pourraient nécessiter des ajustements de mise en page flexibles avant d'ajouter de vraies traductions.

3. Adapter la mise en page pour la rendre flexible

Si votre examen manuel révèle des problèmes de mise en page récurrents, ne corrigez pas les éléments un par un. Rendez plutôt votre interface utilisateur plus adaptable.

Plutôt que de forcer le texte à tenir dans des espaces fixes, concevez des mises en page qui s'étendent et se rétrécissent automatiquement en fonction du contenu.

Utiliser des éléments à mise à l'échelle automatique

Les boutons, les libellés et les champs de saisie doivent s'ajuster à la longueur du texte au lieu d'avoir des largeurs fixes.

Jetez un œil aux exemples ci-dessous. La première approche définit des dimensions fixes, empêchant le texte de s'étendre et rendant difficile l'alignement dynamique des icônes et du texte. La deuxième approche utilise des unités relatives et flexbox, permettant au bouton de s'agrandir dynamiquement tout en gardant le texte et les icônes correctement alignés.

Mise en page fixe (Problématique)

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

Mise en page flexible (Meilleure approche)

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 */
  …
}

Activer le retour à la ligne du texte

Des traductions plus longues peuvent ne pas tenir sur une seule ligne. Permettre au texte de revenir à la ligne empêche la troncature.

Un panneau de paramètres intitulé « Battery Percentage » (pourcentage de batterie) en anglais peut devenir « Prozentanzeige für Batterie » en allemand, ce qui ne tiendra pas sur une seule ligne.

Sans retour à la ligne (Problématique)

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

Avec retour à la ligne (Meilleure approche)

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

Éviter les conteneurs à largeur fixe

Au lieu de définir des dimensions rigides, permettez aux conteneurs de s'ajuster en fonction du contenu. Cela permet à des éléments comme les menus latéraux de fonctionner dans toutes les langues.

Largeur fixe (Problématique)

.sidebar {
  width: 250px;
}

Largeur flexible (Meilleure approche)

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

Utiliser un espacement relatif

Le padding et les margins fixes peuvent provoquer un mauvais alignement lorsque le texte s'étend. L'utilisation de pourcentages garantit que l'espacement reste proportionnel. Un formulaire de connexion avec les champs « Username » (nom d'utilisateur) et « Password » (mot de passe) peut sembler correct en anglais mais devenir déséquilibré en français (« Nom d’utilisateur »).

Espacement fixe (Problématique)

label {
  margin-right: 20px;
}

Espacement relatif (Meilleure approche)

label {
  margin-right: 5%;
}

4. Garder une courte liste d'éléments d'interface utilisateur nécessitant des ajustements manuels

Même avec des mises en page flexibles, certains éléments de l'interface utilisateur peuvent encore nécessiter une attention manuelle. Cela inclut :

Les menus de navigation
Les petits boutons, libellés ou infobulles
Les éléments à largeur fixe
Les concaténations de chaînes

Si certains composants se cassent systématiquement lorsqu'ils sont traduits, signalez-les pour garder une trace des éléments sensibles à la mise en page qui nécessitent une révision supplémentaire.

Vous pouvez ensuite utiliser PTC pour vérifier les problèmes de longueur de traduction avant le déploiement, en vous assurant que votre interface fonctionne correctement dans toutes les langues.

Comment PTC vous aide à repérer les problèmes de mise en page

Une fois que vous vous êtes inscrit pour un essai de 30 jours et que vous avez traduit votre premier projet, vous pouvez utiliser PTC pour détecter les problèmes de mise en page sans investir dans des processus de contrôle qualité manuel longs et coûteux.

Contrôler les limites de longueur de traduction

PTC applique automatiquement des limites de longueur pour chaque langue cible, maintenant les traductions dans l'espace autorisé par votre interface utilisateur. Par exemple :

Polonais → Limite de longueur par défaut : 120 %
Allemand → Limite de longueur par défaut : 130 %

Si une traduction dépasse cette limite, PTC la signale pour révision. Suivez l'invite, développez les options supplémentaires pour la chaîne signalée, et décidez comment procéder :

Autorisez une traduction plus longue si votre interface utilisateur dispose de suffisamment d'espace.

Ajuster la limite de longueur pour cette chaîne spécifique lui donne plus d'espace sans modifier les limites de vos autres chaînes.

Demandez à PTC de retraduire la chaîne pour la rendre plus courte.

PTC donne toujours la priorité à la meilleure traduction possible en premier lieu, de sorte qu'une retraduction plus courte peut être moins précise.

Avec cette approche, vous :

Vous concentrez uniquement sur les chaînes qui peuvent causer de réels problèmes d'interface utilisateur
Évitez d'appliquer des restrictions de longueur inutiles sur l'ensemble de votre projet
Prenez des décisions basées sur le comportement réel de l'interface utilisateur

Relecture de traduction en contexte avec l'AI Visual QA

Les limites de longueur sont utiles. Mais elles ne détectent pas tout.

Une traduction peut sembler correcte dans vos fichiers et causer tout de même des problèmes une fois dans votre produit. La formulation se lit différemment à côté d'autres éléments de l'interface utilisateur. Un format de date est incorrect pour la locale. Une chaîne n'a jamais été traduite et personne ne l'a remarqué.

Trouver ces problèmes implique d'ouvrir votre produit dans chaque langue cible et de le réviser écran par écran. Cela prend des heures, et vous avez besoin de personnes capables de lire réellement ces langues. Plus cela dure, plus des éléments passent inaperçus.

L'AI Visual QA gère cette révision pour vous. Soumettez des captures d'écran de votre interface utilisateur traduite et PTC examine chaque écran visuellement, de la même manière qu'un réviseur QA le ferait.

Ce que vous obtenez :

Chaque langue est révisée avant que les utilisateurs ne la voient
Les problèmes que PTC a trouvés dans ses propres traductions sont corrigés automatiquement
Pour les problèmes au niveau du code comme les chaînes en dur ou les clés de traduction manquantes, PTC fournit un prompt prêt à l'emploi pour que vous puissiez les corriger rapidement
Vous gagnez des heures sur chaque version

Pour commencer, accédez à l'onglet AI Visual QA dans votre tableau de bord PTC et soumettez des captures d'écran de votre interface utilisateur traduite pour révision. En quelques minutes, PTC découvre et corrige à la fois les problèmes de traduction et de mise en page dans chaque langue cible. Pour tout ce qui nécessite une modification du code, il fournit un prompt prêt à l'emploi que vous pouvez coller directement dans un assistant de codage IA.

AI Visual QA dans PTC

Gardez votre interface utilisateur prête pour n'importe quelle langue

Une interface utilisateur bien planifiée s'adapte à différentes langues sans se casser. Simuler des traductions longues, tester votre mise en page et rendre votre interface utilisateur flexible peut aider à prévenir les problèmes avant qu'ils ne surviennent.

PTC va plus loin en détectant les traductions qui dépassent les limites de longueur et en vous donnant des options sur la marche à suivre. Vous pouvez ajuster les contraintes de longueur, demander une retraduction, ou adapter votre interface utilisateur pour qu'elle corresponde à la traduction - le tout avant le déploiement.

Ne laissez pas les traductions longues casser votre interface

Commencez votre essai de PTC et traduisez jusqu'à 20 000 mots dans 2 langues. Assurez-vous que chaque traduction s'intègre dans votre logiciel.