UI-Lokalisierung: So verhindern Sie, dass lange Übersetzungen Ihre Software beschädigen

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

Bei der Lokalisierung von Software ist die Übersetzungslänge 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) beschädigt werden.

Nehmen Sie das folgende Beispiel. Die polnische Übersetzung von „Low battery“ ist 65 % breiter als die englische Version. Ohne genügend Platz kann die Übersetzung überlaufen, abgeschnitten werden oder andere Elemente verschieben.

EnglischLow battery122 px

PolnischNiski poziom baterii207 px

Betrachten Sie nun den umgekehrten Fall. Manche 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 leeren Raum hinterlassen, wodurch Beschriftungen und Schaltflächen unverbunden wirken.

Um Layout-Probleme vor dem Launch zu verhindern, 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

Best Practices, um zu verhindern, dass Übersetzungen Ihre UI beschädigen

Eine gut gebaute UI passt sich sowohl an kurze als auch an lange Übersetzungen an. Kein einzelner Ansatz funktioniert für jede Oberfläche, aber diese Best Practices helfen, Ihr Layout in verschiedenen Sprachen responsiv und lesbar zu halten.

1. Simulieren Sie lange Übersetzungen vor der Bereitstellung

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 erzeugen. Anstatt jeden String manuell zu ändern, können Sie ein Skript verwenden, um die Textlänge über eine gesamte Ressourcendatei hinweg zu erhöhen.

Wenn Sie beispielsweise ein WordPress-Theme oder -Plugin entwickeln, können Sie unser Dummy-Übersetzungstool verwenden:

Schauen Sie sich unser Dummy-Übersetzungstool auf GitHub an

Es nimmt eine vorhandene .po-Datei, erweitert die übersetzten Strings um einen festgelegten Faktor und erzeugt 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 Anforderungen anpassen.

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

Nachdem Sie lange Dummy-Übersetzungen erzeugt 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 Beschädigungen:

Abgeschnittener Text

Manche Texte können verschwinden oder werden nicht vollständig angezeigt.

Überlappende Elemente

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

Falsch ausgerichtete Layouts

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

Unlesbarer Text

Manche UI-Komponenten können Text verkleinern oder zusammendrücken.

Ungleichmäßige Abstände

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

Für beste Ergebnisse ändern Sie die Fenstergröße (bei Desktop-Anwendungen), testen Sie auf verschiedenen Bildschirmgrößen (für Web/Mobil) und erstellen Sie Screenshots beschädigter Layouts. Das hilft Ihnen, Bereiche zu lokalisieren, die vor dem Hinzufügen echter Übersetzungen flexible Layout-Anpassungen benötigen.

3. Passen Sie das Layout flexibel an

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

Anstatt Text zu zwingen, in feste Räume zu passen, bauen Sie Layouts, die sich je nach Inhalt automatisch ausdehnen und schrumpfen.

Verwenden Sie automatisch skalierende Elemente

Konzentrieren Sie sich nur auf Strings, die echte UI-Probleme verursachen können. 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 Abmessungen fest, beschränkt die Ausdehnung des Textes und erschwert es, Symbole und Text dynamisch auszurichten. Der zweite Ansatz verwendet relative Einheiten und flexbox, sodass die Schaltfläche dynamisch wachsen kann, während Text und Symbole 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 */
  …
}

Aktivieren Sie den Textumbruch

Längere Übersetzungen passen möglicherweise nicht in eine einzige Zeile. Wenn Sie den Textumbruch zulassen, verhindern Sie ein Abschneiden.

Ein Einstellungsbereich mit der Beschriftung „Battery Percentage“ auf Englisch kann auf Deutsch zu „Prozentanzeige für Batterie“ werden, was nicht in eine einzige Zeile passt.

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

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

Vermeiden Sie Container mit fester Breite

Anstatt starre Abmessungen festzulegen, lassen Sie Container sich je nach Inhalt anpassen. So können Elemente wie Seitenleistenmenüs sprachübergreifend funktionieren.

.sidebar {
  width: 250px;
}

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

Verwenden Sie relative Abstände

Feste Innen- und Außenabstände können zu Fehlausrichtungen führen, wenn sich Text ausdehnt. Die Verwendung von Prozentwerten stellt sicher, dass die Abstände proportional bleiben. Ein Anmeldeformular mit den Feldern „Username“ und „Password“ kann auf Englisch gut aussehen, aber auf Französisch („Nom d’utilisateur“) unausgewogen werden.

label {
  margin-right: 20px;
}

label {
  margin-right: 5%;
}

4. Führen Sie eine kurze Liste der UI-Elemente, die manuelle Anpassungen benötigen

Selbst mit flexiblen Layouts können einige UI-Elemente weiterhin manuelle Aufmerksamkeit erfordern. Dazu gehören:

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

Wenn bestimmte Komponenten bei der Übersetzung wiederholt beschädigt werden, kennzeichnen Sie diese, um layout-empfindliche Elemente im Blick zu behalten, die zusätzliche Überprüfung erfordern.

Anschließend können Sie PTC verwenden, um vor der Bereitstellung auf Probleme mit der Übersetzungslänge zu prüfen und sicherzustellen, dass Ihre Oberfläche sprachübergreifend korrekt funktioniert.

Wie PTC Ihnen hilft, Layout-Probleme zu erkennen

Sobald Sie sich für eine kostenlose 30-tägige Testphase registriert und Ihr erstes Projekt übersetzt haben, können Sie PTC verwenden, um Layout-Probleme zu erkennen, ohne in langwierige und teure manuelle QA-Prozesse zu investieren.

Steuern Sie die Längenbegrenzungen für Übersetzungen

PTC wendet Längenbegrenzungen automatisch für jede Zielsprache an und hält Übersetzungen innerhalb des Platzes, den Ihre UI zulässt. Zum Beispiel:

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

Wenn eine Übersetzung dieses Limit überschreitet, kennzeichnet 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 vorgehen:

Mit diesem Ansatz:

• konzentrieren Sie sich nur auf Strings, die echte UI-Probleme verursachen können
• vermeiden Sie, unnötige Längenbeschränkungen über Ihr gesamtes Projekt hinweg anzuwenden
• treffen Sie Entscheidungen auf Basis des tatsächlichen UI-Verhaltens

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

Längenbegrenzungen helfen. Aber sie erfassen nicht alles.

Eine Übersetzung kann in Ihren Dateien einwandfrei 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 die Locale falsch. Ein String wurde nie übersetzt und niemand hat es bemerkt.

Diese Probleme zu finden bedeutet, Ihr Produkt in jeder Zielsprache zu öffnen und es Bildschirm für Bildschirm zu überprüfen. Das dauert Stunden, und Sie benötigen Personen, die diese Sprachen tatsächlich lesen können. Je länger es dauert, desto mehr wird übersehen.

PTC Visual QA übernimmt diese Überprüfung für Sie. Reichen Sie Screenshots Ihrer übersetzten UI ein, und PTC untersucht jeden Bildschirm visuell, so wie es ein QA-Prüfer tun würde.

Das erhalten Sie:

• Jede Sprache wird überprüft, bevor Nutzer sie sehen
• Probleme, die PTC in seinen eigenen Übersetzungen gefunden hat, werden automatisch behoben
• Für Probleme auf Code-Ebene wie hartcodierte Strings oder fehlende Übersetzungsschlüssel liefert PTC einen einsatzbereiten Prompt, damit Sie sie schnell beheben können
• Sie gewinnen bei jeder Veröffentlichung Stunden zurück

Um zu beginnen, gehen Sie zum Tab AI Visual QA in Ihrem PTC-Dashboard und reichen Sie Screenshots Ihrer übersetzten UI zur Überprüfung ein. Innerhalb von Minuten entdeckt und behebt PTC sowohl Übersetzungs- als auch Layout-Probleme in jeder Zielsprache. Für alles, was eine Code-Änderung erfordert, liefert es einen einsatzbereiten Prompt, den Sie direkt in einen KI-Coding-Assistenten einfügen können.

Halten Sie Ihre UI für jede Sprache bereit

Eine gut geplante UI passt sich an verschiedene Sprachen an, ohne zu zerbrechen. Das Simulieren langer Übersetzungen, das Testen Ihres Layouts und das flexible Gestalten Ihrer UI können helfen, Probleme zu verhindern, bevor sie auftreten.

PTC geht noch weiter, indem es Übersetzungen erkennt, die Längenbegrenzungen überschreiten, und Ihnen Optionen gibt, wie Sie vorgehen. 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 Oberfläche beschädigen

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 in Ihre Software passt.