UI-Lokalisierung: So verhindern Sie, dass lange Übersetzungen Ihr Software-Layout zerstören

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

Bei der Lokalisierung von Software ist die Länge von Übersetzungen nicht immer vorhersehbar. Einige Sprachen beanspruchen mehr Platz als andere, und diese Unterschiede können dazu führen, dass Elemente Ihrer Benutzeroberfläche (UI) kaputtgehen.

Nehmen 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 verdrängen.

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 auf englischen Text ausgelegt ist, können kürzere Übersetzungen zu viel Leerraum hinterlassen, wodurch Beschriftungen und Schaltflächen unzusammenhängend wirken.

Um Layout-Probleme vor dem Launch zu vermeiden, zeigt Ihnen dieser Leitfaden, wie Sie:

• Lange Übersetzungen simulieren
• Layouts an unterschiedliche Textlängen anpassen
• Die Längenprüfungswarnungen von PTC nutzen, um Probleme frühzeitig zu erkennen

Best Practices, um Layout-Fehler durch Übersetzungen zu vermeiden

Eine gut aufgebaute UI passt sich sowohl kurzen als auch langen Übersetzungen an. Es gibt keine Universallösung für jede Schnittstelle, aber diese Best Practices helfen dabei, Ihr Layout in verschiedenen Sprachen responsiv und lesbar zu halten.

1. Simulieren Sie lange Übersetzungen vor dem Deployment

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, besteht darin, künstlich verlängerte Übersetzungen zu generieren. 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 Dummy-Übersetzungstool verwenden:

Besuchen Sie unser Dummy-Übersetzungstool auf GitHub

Es nimmt eine vorhandene .po-Datei, verlängert die übersetzten Strings um einen festgelegten Faktor und generiert eine neue .po- und .mo-Datei für Tests. Standardmäßig wird die Länge um das 1,5-fache erhöht, aber Sie können dies nach Ihren Bedürfnissen anpassen.

2. Prüfen Sie die GUI Ihrer Software manuell auf Layout-Empfindlichkeiten

Nachdem Sie die Dummy-Übersetzungen generiert haben, laden Sie diese in Ihre Software und prüfen Sie, wie Ihre UI mit dem erweiterten Text umgeht. Während automatisierte Tests einige Probleme mit der Übersetzungslänge erkennen können, offenbaren sie nicht immer Usability-Probleme.

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

Abgeschnittener Text

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

Überlappende Elemente

Schaltflächen, Beschriftungen oder UI-Komponenten können kollidieren.

Fehlerhafte Ausrichtung

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

Unleserlicher Text

Einige UI-Komponenten könnten Text schrumpfen oder stauchen.

Ungleichmäßige Abstände

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

Für beste Ergebnisse sollten Sie Fenstergrößen ändern (bei Desktop-Anwendungen), auf verschiedenen Bildschirmgrößen testen (bei Web/Mobile) und Screenshots von fehlerhaften Layouts machen. Dies hilft Ihnen, Bereiche zu identifizieren, die flexible Layout-Anpassungen benötigen, bevor Sie echte Übersetzungen hinzufügen.

3. Passen Sie das Layout flexibel an

Wenn Ihre manuelle Überprüfung wiederkehrende Layout-Probleme aufzeigt, reparieren Sie Elemente nicht einzeln. Machen Sie stattdessen Ihre UI anpassungsfähiger.

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

Nutzen Sie automatisch skalierende Elemente

Schaltflächen, Beschriftungen und Eingabefelder sollten sich an die Textlänge anpassen, anstatt feste Breiten zu haben.

Schauen Sie sich die folgenden Beispiele an. Der erste Ansatz legt feste Dimensionen fest, was die Textausdehnung einschränkt und die dynamische Ausrichtung von Icons und Text erschwert. Der zweite Ansatz verwendet relative Einheiten und Flexbox, wodurch die Schaltfläche dynamisch wachsen kann, während Text und Icons korrekt ausgerichtet bleiben.

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

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

Zeilenumbruch aktivieren

Längere Übersetzungen passen möglicherweise nicht in eine einzige Zeile. Das Zulassen von Zeilenumbrüchen verhindert, dass Text abgeschnitten wird.

Ein Einstellungsmenü mit der Beschriftung „Battery Percentage“ im Englischen wird im Deutschen zu „Prozentanzeige für Batterie“, was nicht in eine Zeile passen wird.

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

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

Vermeiden Sie Container mit fester Breite

Anstatt starre Dimensionen festzulegen, erlauben Sie Containern, sich basierend auf dem Inhalt anzupassen. Dies ermöglicht es Elementen wie Sidebar-Menüs, in allen Sprachen zu funktionieren.

.sidebar {
  width: 250px;
}

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

Nutzen Sie relative Abstände

Feste Paddings und Margins können zu Fehlausrichtungen führen, wenn sich Text ausdehnt. Die Verwendung von Prozentangaben stellt sicher, dass die Abstände proportional bleiben. Ein Login-Formular mit den Feldern „Username“ und „Password“ mag im Englischen gut aussehen, wird aber im Französischen („Nom d’utilisateur“) unausgewogen.

label {
  margin-right: 20px;
}

label {
  margin-right: 5%;
}

4. Führen Sie eine Liste von UI-Elementen, die manuelle Anpassungen benötigen

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

• Navigationsmenüs
• Kleine Schaltflächen, Beschriftungen oder Tooltips
• Elemente mit fester Breite
• String-Verkettungen

Wenn bestimmte Komponenten bei der Übersetzung regelmäßig kaputtgehen, markieren Sie diese, um layout-empfindliche Elemente im Blick zu behalten, die eine zusätzliche Überprüfung erfordern.

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

Wie PTC Ihnen hilft, Layout-Probleme zu erkennen

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

Limits für die Übersetzungslänge steuern

PTC wendet automatisch Längenbeschränkungen für jede Zielsprache an, um Übersetzungen innerhalb des Platzes zu halten, den Ihre UI zulässt. Zum Beispiel:

• Polnisch → Standard-Längenlimit: 120 %
• Deutsch → Standard-Längenlimit: 130 %

Wenn eine Übersetzung dieses Limit überschreitet, markiert PTC sie zur Überprüfung. Folgen Sie dem Hinweis, öffnen Sie die zusätzlichen Optionen für den markierten String und entscheiden Sie, wie Sie fortfahren möchten:

Mit diesem Ansatz:

• Konzentrieren Sie sich nur auf Strings, die echte UI-Probleme verursachen könnten
• Vermeiden Sie unnötige Längenbeschränkungen für Ihr gesamtes Projekt
• Treffen Sie Entscheidungen basierend auf dem tatsächlichen UI-Verhalten

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

Längenlimits helfen. Aber sie finden nicht alles.

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

Um diese Probleme zu finden, müssen Sie Ihr Produkt in jeder Zielsprache öffnen und Bildschirm für Bildschirm prüfen. Das dauert Stunden, und Sie benötigen Personen, die diese Sprachen tatsächlich lesen können. Je länger dieser Prozess dauert, desto mehr Dinge werden übersehen.

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

Was Sie erhalten:

• Jede Sprache wird überprüft, bevor Benutzer sie sehen
• Fehler, die PTC in seinen eigenen Übersetzungen gefunden hat, werden automatisch behoben
• Bei Problemen auf Code-Ebene, wie hartkodierten Strings oder fehlenden Übersetzungsschlüsseln, liefert PTC einen fertigen Prompt, damit Sie diese schnell beheben können
• Sie gewinnen bei jedem Release Stunden an Zeit zurück

Um zu starten, gehen Sie zum Tab AI Visual QA in Ihrem PTC-Dashboard und reichen Sie Screenshots Ihrer übersetzten UI zur Prüfung ein. Innerhalb weniger Minuten entdeckt und behebt PTC sowohl Übersetzungs- als auch Layout-Fehler in jeder Zielsprache. Für alles, was eine Code-Änderung erfordert, erhalten Sie einen fertigen Prompt, den Sie direkt in einen KI-Coding-Assistenten kopieren können.

Halten Sie Ihre UI bereit für jede Sprache

Eine gut geplante UI passt sich verschiedenen Sprachen an, ohne kaputtzugehen. Das Simulieren langer Übersetzungen, das Testen Ihres Layouts und eine flexible Gestaltung Ihrer UI helfen dabei, Probleme zu vermeiden, bevor sie entstehen.

PTC geht noch einen Schritt weiter, indem es Übersetzungen erkennt, die Längenlimits ü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 Ihr Interface sprengen

Starten Sie Ihre kostenlose Testphase von PTC und übersetzen Sie bis zu 20.000 Wörter in 2 Sprachen. Stellen Sie sicher, dass jede Übersetzung perfekt in Ihre Software passt.