UI-Lokalisierung: Wie Sie verhindern, dass lange Übersetzungen das Layout Ihrer Software sprengen

Lange Übersetzungen können das Layout Ihrer Software sprengen. Erfahren Sie, wie Sie Ihre Benutzeroberfläche in jeder Sprache übersichtlich und funktional halten.

Bei der Lokalisierung von Software ist die Länge der Übersetzung nicht immer vorhersehbar. Manche Sprachen benötigen mehr Platz als andere, und diese Unterschiede können dazu führen, dass Elemente Ihrer Benutzeroberfläche (UI) Layoutfehler aufweisen.

Betrachten Sie das folgende Beispiel. Die polnische Übersetzung von „Low battery“ ist 65 % breiter als die englische Version. Ohne ausreichend Platz könnte die Übersetzung überlaufen, abgeschnitten werden oder andere Elemente verschieben.

EnglischLow battery122 px

PolnischNiski poziom baterii207 px

Betrachten Sie nun den umgekehrten Fall. Einige Sprachen, wie Chinesisch, verwenden weniger Zeichen, um dieselbe Bedeutung auszudrücken.

EnglischNew message120 px

Chinesisch新消息63 px

Wenn Ihre Benutzeroberfläche nur englischen Text berücksichtigt, können kürzere Übersetzungen zu viel Leerraum hinterlassen, wodurch Labels und Buttons isoliert wirken.

Um Layoutfehler vor dem Launch zu vermeiden, zeigt Ihnen dieser Leitfaden, wie Sie:

lange Übersetzungen simulieren
Layouts an verschiedene Textlängen anpassen
die Warnungen zur Übersetzungslänge der PTC nutzen, um Fehler frühzeitig zu erkennen

Best Practices, um zu verhindern, dass Übersetzungen das Layout Ihrer UI sprengen

Eine gut durchdachte UI passt sich sowohl an kurze als auch an lange Übersetzungen an. Es gibt keinen einheitlichen Ansatz für jede Benutzeroberfläche, aber diese Best Practices helfen dabei, Ihr Layout in verschiedenen Sprachen responsiv und lesbar zu halten.

1. Lange Übersetzungen vor dem Deployment simulieren

Bevor Sie echte Übersetzungen hinzufügen, ist es wichtig zu prüfen, wie Ihre aktuelle UI mit längerem Text umgeht. Eine Möglichkeit, dies zu testen, ist die Generierung künstlich verlängerter Übersetzungen. Anstatt jeden String manuell zu ändern, können Sie ein Skript verwenden, um die Textlänge in einer gesamten Ressourcendatei zu erhöhen.

Wenn Sie beispielsweise ein WordPress-Theme oder -Plugin entwickeln, können Sie unser Tool für Dummy-Übersetzungen verwenden:

Sehen Sie sich unser Tool für Dummy-Übersetzungen auf GitHub an

Es nimmt eine vorhandene .po-Datei, erweitert die übersetzten Strings um einen festgelegten Faktor und generiert eine neue .po- und .mo-Datei zu Testzwecken. Standardmäßig wird die Länge um das 1,5-Fache erhöht, aber Sie können dies an Ihre Bedürfnisse anpassen.

2. Die GUI Ihrer Software manuell auf Layout-Empfindlichkeiten prüfen

Nachdem Sie lange Dummy-Übersetzungen generiert haben, laden Sie diese in Ihre Software und prüfen Sie, wie Ihre UI mit dem erweiterten Text umgeht. Automatisierte Tests können zwar einige Probleme mit der Übersetzungslänge erkennen, decken aber nicht immer Usability-Probleme auf.

Navigieren Sie durch verschiedene Bildschirme und achten Sie auf diese häufigen Layoutfehler:

Abgeschnittener Text

Einige Texte könnten verschwinden oder nicht vollständig angezeigt werden.

Überlappende Elemente

Buttons, Labels oder UI-Komponenten könnten kollidieren.

Verschobene Layouts

Längere Übersetzungen können Elemente aus ihrer Position schieben.

Unleserlicher Text

Einige UI-Komponenten könnten den Text verkleinern oder stauchen.

Ungleichmäßige Abstände

Kurze Übersetzungen können übermäßige Lücken erzeugen.

Für optimale Ergebnisse passen Sie die Fenstergröße an (bei Desktop-Anwendungen), testen Sie auf verschiedenen Bildschirmgrößen (für Web/Mobile) und machen Sie Screenshots von fehlerhaften Layouts. Dies hilft Ihnen, Bereiche zu identifizieren, die vor dem Hinzufügen echter Übersetzungen möglicherweise flexible Layout-Anpassungen erfordern.

3. Das Layout flexibel gestalten

Wenn Ihre manuelle Prüfung wiederkehrende Layoutfehler aufdeckt, beheben Sie die Elemente nicht einzeln. Machen Sie stattdessen Ihre UI anpassungsfähiger.

Anstatt Text in feste Bereiche zu zwingen, sollten Sie Layouts erstellen, die sich basierend auf dem Inhalt automatisch vergrößern und verkleinern.

Automatisch skalierende Elemente verwenden

Buttons, Labels und Eingabefelder sollten sich an die Textlänge anpassen, anstatt feste Breiten zu haben.

Sehen Sie sich die folgenden Beispiele an. Der erste Ansatz legt feste Abmessungen fest, wodurch der Text nicht erweitert werden kann und es schwierig wird, Icons und Text dynamisch auszurichten. Der zweite Ansatz verwendet relative Einheiten und Flexbox, wodurch der Button dynamisch wachsen kann, während Text und Icons korrekt ausgerichtet bleiben.

Festes Layout (Problematisch)

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

Flexibles Layout (Besserer Ansatz)

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

Textumbrüche zulassen

Längere Übersetzungen passen möglicherweise nicht in eine einzige Zeile. Wenn Sie Textumbrüche zulassen, wird abgeschnittener Text vermieden.

Ein Einstellungsbereich mit der englischen Bezeichnung „Battery Percentage“ könnte im Deutschen zu „Prozentanzeige für Batterie“ werden, was nicht in eine einzige Zeile passt.

Ohne Umbruch (Problematisch)

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

Mit Umbruch (Besserer Ansatz)

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

Container mit fester Breite vermeiden

Anstatt starre Abmessungen festzulegen, sollten Sie zulassen, dass sich Container basierend auf dem Inhalt anpassen. Dadurch funktionieren Elemente wie Seitenleisten-Menüs sprachübergreifend.

Feste Breite (Problematisch)

.sidebar {
  width: 250px;
}

Flexible Breite (Besserer Ansatz)

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

Relative Abstände verwenden

Feste Innen- und Außenabstände (Padding und Margins) können bei Texterweiterungen zu Verschiebungen führen. Die Verwendung von Prozentwerten stellt sicher, dass die Abstände proportional bleiben. Ein Anmeldeformular mit den Feldern „Username“ und „Password“ sieht auf Englisch vielleicht gut aus, wirkt auf Französisch („Nom d’utilisateur“) aber unausgewogen.

Feste Abstände (Problematisch)

label {
  margin-right: 20px;
}

Relative Abstände (Besserer Ansatz)

label {
  margin-right: 5%;
}

4. Eine kurze Liste von UI-Elementen führen, die manuelle Anpassungen erfordern

Selbst bei flexiblen Layouts erfordern einige UI-Elemente möglicherweise weiterhin manuelle Aufmerksamkeit. Dazu gehören:

Navigationsmenüs
Kleine Buttons, Labels oder Tooltips
Elemente mit fester Breite
String-Verkettungen

Wenn bestimmte Komponenten bei der Übersetzung regelmäßig das Layout sprengen, kennzeichnen Sie diese, um layoutempfindliche Elemente, die eine zusätzliche Prüfung erfordern, im Auge zu behalten.

Sie können dann die PTC verwenden, um vor dem Deployment auf Probleme mit der Übersetzungslänge zu prüfen und sicherzustellen, dass Ihre Benutzeroberfläche in allen Sprachen korrekt funktioniert.

Wie die PTC Ihnen hilft, Layoutfehler zu erkennen

Sobald Sie sich für eine 30-Tage-Testphase angemeldet und Ihr erstes Projekt übersetzt haben, können Sie die PTC verwenden, um Layoutfehler zu erkennen, ohne in langwierige und teure manuelle QA-Prozesse investieren zu müssen.

Längenbegrenzungen für Übersetzungen kontrollieren

Die PTC wendet automatisch Längenbegrenzungen für jede Zielsprache an, sodass die Übersetzungen in dem von Ihrer UI vorgegebenen Rahmen bleiben. Zum Beispiel:

Polnisch → Standardmäßige Längenbegrenzung: 120 %
Deutsch → Standardmäßige Längenbegrenzung: 130 %

Wenn eine Übersetzung dieses Limit überschreitet, kennzeichnet die PTC sie zur Überprüfung. Folgen Sie der Aufforderung, erweitern Sie die zusätzlichen Optionen für den gekennzeichneten String und entscheiden Sie, wie Sie fortfahren möchten:

Lassen Sie eine längere Übersetzung zu, wenn Ihre UI genügend Platz bietet.

Durch die Anpassung der Längenbegrenzung für diesen spezifischen String erhält er mehr Platz, ohne die Limits für Ihre anderen Strings zu ändern.

Bitten Sie die PTC um eine Neuübersetzung des Strings, um ihn kürzer zu machen.

Die PTC priorisiert immer zuerst die bestmögliche Übersetzung, daher ist eine kürzere Neuübersetzung möglicherweise nicht ganz so präzise.

Mit diesem Ansatz können Sie:

sich nur auf Strings konzentrieren, die echte UI-Probleme verursachen könnten
vermeiden, unnötige Längenbeschränkungen für Ihr gesamtes Projekt anzuwenden
Entscheidungen basierend auf dem tatsächlichen UI-Verhalten treffen

In-Kontext-Übersetzungsprüfung mit der AI Visual QA

Längenbegrenzungen helfen. Aber sie erfassen nicht alles.

Eine Übersetzung kann in Ihren Dateien gut aussehen und dennoch Probleme verursachen, sobald sie in Ihrem Produkt ist. Die Formulierung liest sich neben anderen UI-Elementen anders. Ein Datumsformat ist für das Locale falsch. Ein String wurde nie übersetzt und niemand hat es bemerkt.

Um diese Fehler zu finden, müssen Sie Ihr Produkt in jeder Zielsprache öffnen und es Bildschirm für Bildschirm überprüfen. Das dauert Stunden, und Sie brauchen Leute, die diese Sprachen tatsächlich lesen können. Je länger es dauert, desto mehr Dinge werden übersehen.

Die AI Visual QA übernimmt diese Prüfung für Sie. Übermitteln Sie Screenshots Ihrer übersetzten UI und die PTC untersucht jeden Bildschirm visuell, genau wie ein QA-Prüfer es tun würde.

Was Sie erhalten:

Jede Sprache wird geprüft, bevor die Nutzer sie sehen
Fehler, die die PTC in ihren eigenen Übersetzungen findet, werden automatisch behoben
Für Fehler auf Codeebene, wie hardcodierte Strings oder fehlende Übersetzungsschlüssel, stellt die PTC einen einsatzbereiten Prompt bereit, damit Sie diese schnell beheben können
Sie gewinnen bei jedem Release Stunden an Zeit zurück

Um loszulegen, gehen Sie zum Tab AI Visual QA in Ihrem PTC-Dashboard und übermitteln Sie Screenshots Ihrer übersetzten UI zur Prüfung. Innerhalb von Minuten entdeckt und behebt die PTC sowohl Übersetzungs- als auch Layoutfehler in jeder Zielsprache. Für alles, was eine Codeänderung erfordert, stellt sie einen einsatzbereiten Prompt zur Verfügung, den Sie direkt in einen KI-Programmierassistenten einfügen können.

AI Visual QA in der PTC

Halten Sie Ihre UI bereit für jede Sprache

Eine gut geplante UI passt sich an verschiedene Sprachen an, ohne das Layout zu sprengen. Das Simulieren langer Übersetzungen, das Testen Ihres Layouts und die flexible Gestaltung Ihrer UI können helfen, Fehler zu vermeiden, bevor sie auftreten.

Die PTC geht noch einen Schritt weiter, indem sie Übersetzungen erkennt, die die Längenbegrenzungen überschreiten, und Ihnen Optionen für das weitere Vorgehen bietet. Sie können Längenbeschränkungen anpassen, eine Neuübersetzung anfordern oder Ihre UI an die Übersetzung anpassen – alles vor dem Deployment.

Lassen Sie nicht zu, dass lange Übersetzungen Ihre Benutzeroberfläche sprengen

Starten Sie Ihre 30-Tage-Testphase der PTC und übersetzen Sie bis zu 20.000 Wörter in 2 Sprachen. Stellen Sie sicher, dass jede Übersetzung in Ihre Software passt.