UI-Lokalisierung: Wie Sie verhindern können, dass lange Übersetzungen Ihre Software beschädigen

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

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

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

Englisch

122 px

Polnisch

207 px

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

Englisch

150 px

Chinesisch

63 px

Wenn Ihre Benutzeroberfläche nur englischen Text berücksichtigt, können kürzere Übersetzungen zu viel Leerraum hinterlassen, wodurch Beschriftungen und Schaltflächen unzusammenhängend wirken können.

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

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

Bewährte Verfahren, um zu verhindern, dass Übersetzungen Ihre UI beschädigen

Eine gut aufgebaute UI passt sich sowohl kurzen als auch langen Übersetzungen an. Kein einzelner Ansatz funktioniert für jede Benutzeroberfläche, aber diese bewährten Verfahren helfen, Ihr Layout in verschiedenen Sprachen reaktionsschnell und lesbar zu halten.

1. Lange Übersetzungen vor der Bereitstellung simulieren

Bevor Sie echte Übersetzungen hinzufügen, ist es wichtig zu prüfen, wie Ihre aktuelle UI längere Texte verarbeitet. Eine Möglichkeit, dies zu testen, ist die Generierung künstlich erweiterter Übersetzungen. Anstatt jede Zeichenkette manuell zu ändern, können Sie ein Skript verwenden, um die Textlänge in einer gesamten Ressourcendatei zu erhöhen.

Zum Beispiel, wenn Sie ein WordPress-Theme oder -Plugin entwickeln, können Sie unser Dummy-Übersetzungstool verwenden:

Unser Dummy-Übersetzungstool auf GitHub ansehen

Es nimmt eine bestehende .po-Datei, erweitert die übersetzten Zeichenketten um einen festgelegten Faktor und generiert eine neue .po– und .mo-Datei zum Testen. Standardmäßig erhöht es die Länge um das 1,5-fache, aber Sie können dies an Ihre Bedürfnisse anpassen.

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

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

Navigieren Sie durch verschiedene Bildschirme und suchen Sie nach:

Abgeschnittener Text

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

Überlappende Elemente

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

Fehlausgerichtete Layouts

Längere Übersetzungen können Elemente verschieben

Unleserlicher Text

Einige UI-Komponenten könnten Text verkleinern oder komprimieren

Ungleichmäßiger Abstand

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

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

3. Das Layout flexibel anpassen

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

Anstatt Text in feste Bereiche zu zwingen, erstellen Sie Layouts, die sich automatisch basierend auf dem Inhalt erweitern und verkleinern.

Auto-Skalierungselemente verwenden

Konzentrieren Sie sich nur auf Zeichenketten, die echte UI-Probleme verursachen könnten. Schaltflächen, Beschriftungen und Eingabefelder sollten sich an die Textlänge anpassen, anstatt feste Breiten zu haben.

Sehen Sie sich die folgenden Beispiele an. Der erste Ansatz verwendet feste Dimensionen, die die Texterweiterung einschränken und es schwierig machen, Symbole und Text dynamisch auszurichten. Der zweite Ansatz verwendet relative Einheiten und Flexbox, wodurch die Schaltfläche dynamisch wachsen kann, während Text und Symbole 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 */
  …
}

Textumbruch aktivieren

Längere Übersetzungen passen möglicherweise nicht in eine einzige Zeile. Das Zulassen von Textumbruch verhindert das Abschneiden.

Ein Einstellungsfeld, das auf Englisch „Battery Percentage“ heißt, kann auf Deutsch 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;
}

Feste Breiten für Container vermeiden

Anstatt starre Dimensionen festzulegen, lassen Sie Container sich an den Inhalt anpassen. Dies ermöglicht es Elementen wie Seitenleistenmenüs, in verschiedenen Sprachen zu funktionieren.

Feste Breite (Problematisch)

.sidebar {
  width: 250px;
}

Flexible Breite (besserer Ansatz)

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

Relative Abstände verwenden

Feste Polsterung und Ränder können bei Texterweiterung zu Fehlausrichtungen führen. Die Verwendung von Prozentangaben stellt sicher, dass der Abstand proportional bleibt. Ein Anmeldeformular mit den Feldern „Benutzername“ und „Passwort“ mag auf Englisch gut aussehen, kann aber auf Französisch („Nom d’utilisateur“) unausgewogen wirken.

Fester Abstand (Problematisch)

label {
  margin-right: 20px;
}

Relativer Abstand (besserer Ansatz)

label {
  margin-right: 5%;
}

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

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

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

Wenn bestimmte Komponenten bei der Übersetzung immer wieder fehlerhaft sind, markieren Sie diese, um den Überblick über layout-empfindliche Elemente zu behalten, die einer zusätzlichen Überprüfung bedürfen.

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

Wie Sie PTC verwenden, um sicherzustellen, dass Übersetzungen zu Ihrem Layout passen

Wenn Sie bereit sind, können Sie sich für eine kostenlose 30-Tage-Testversion anmelden und PTC zur Übersetzung Ihres Projekts nutzen.

PTC verwendet KI, um bessere als menschliche Übersetzungen zu generieren. Standardmäßig wendet es projektweite Längenbegrenzungen basierend auf jeder Zielsprache an. Zum Beispiel:

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

Wenn eine Übersetzung diese Begrenzung überschreitet, markiert PTC sie zur Überprüfung. Wenn dies geschieht, können Sie:

Folgen Sie der Aufforderung und erweitern Sie zusätzliche Optionen für die markierte(n) Zeichenkette(n).

Entscheiden Sie dann, wie Sie vorgehen möchten.

Erlauben Sie eine längere Übersetzung, wenn Ihre UI ausreichend Platz bietet.

Sie können die Längenbegrenzung für diese spezifische Zeichenkette anpassen, um eine längere Übersetzung zu ermöglichen.

oder

Bitten Sie PTC, die Zeichenkette neu zu übersetzen, um sie zu kürzen.

Beachten Sie, dass PTC immer die bestmögliche Übersetzung priorisiert, sodass eine kürzere Neuübersetzung möglicherweise nicht so genau ist.

Mit diesem Ansatz können Sie:

Sich nur auf Zeichenketten konzentrieren, die echte UI-Probleme verursachen könnten

Vermeiden Sie unnötige Längenbeschränkungen für Ihr gesamtes Projekt

Entscheidungen basierend auf dem tatsächlichen UI-Verhalten treffen

Halten Sie Ihre UI für Jede Sprache bereit

Eine gut geplante UI passt sich verschiedenen Sprachen an, ohne zu brechen. Das Simulieren langer Übersetzungen, das Testen Ihres Layouts und die Flexibilisierung Ihrer UI können helfen, Probleme zu vermeiden, bevor sie auftreten.

PTC geht noch einen Schritt weiter, indem es Übersetzungen erkennt, 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 der Bereitstellung.

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

Starten Sie Ihre kostenlose 30-Tage-Testversion von PTC und stellen Sie sicher, dass jede Übersetzung in Ihre Software passt.

Testen Sie PTC kostenlos

Geben Sie Ihren Suchbegriff ein und drücken Sie die Eingabetaste

Nach oben scrollen