So gestaltest du Oberflächen für längere Übersetzungen

Längere Übersetzungen werden zum Layoutproblem, wenn eine Oberfläche voraussetzt, dass ihr ursprünglicher Wortlaut exakt gleich viel Platz belegt. Ein kurzer englischer Buttontext passt. Eine längere Übersetzung wird abgeschnitten. Ordentliche Tabs drängen sich zusammen oder eine Karte wächst, während ihre Aktion an der alten Position bleibt.

Du musst nicht auf sämtliche Übersetzungen warten, um diese Starrheit zu prüfen. Belaste einen Entwurf zunächst mit bewusst längeren Texten und wiederhole die Prüfung anschließend mit echten Übersetzungen. Der erste Schritt findet strukturelle Schwächen. Der zweite prüft die Oberfläche mit tatsächlicher Sprache und Bedeutung.

Warum ein einzelner Verlängerungsfaktor nicht genügt

Kein einzelner Prozentsatz macht eine Oberfläche für jede Sprache bereit. Kurze Beschriftungen, lange Sätze, zusammengesetzte Wörter und andere Schriftsysteme erzeugen unterschiedliche Belastungen. Auch die Zeichenzahl verrät nicht genau, wie viel gerenderter Raum nötig wird.

Die W3C-Erklärung zu Textgrößen bei Übersetzungen erläutert, warum kompakte Ausgangstexte deutlich länger werden können und weshalb Zeichenbreite, Wortstruktur und Zeilenhöhe zählen. Ihre Beispiele sind hilfreiche Warnungen, kein Rechner für deine konkrete Oberfläche. Prüfe die tatsächliche Kombination aus Inhalt und Schrift, bevor du eine Komponente als bereit betrachtest.

Stell dir ein fiktives Veranstaltungsdashboard mit einem Button „Details ansehen“ vor. Eine längere Beschriftung braucht vielleicht mehr Breite oder eine zweite Zeile. Gleichzeitig wächst der Veranstaltungstitel möglicherweise von zwei auf drei Zeilen. Das sind unterschiedliche Änderungen mit unterschiedlichen Folgen. Derselbe prozentuale Zusatzraum in jedem Element legt nicht fest, wie beide reagieren sollen.

Bestimme zuerst, was die Wörter vermitteln müssen. Unterscheidet eine Beschriftung zwischen Buchung ansehen und Buchung ändern, muss dieser Unterschied erhalten bleiben. Erklärt eine Warnung, dass eine Aktion unumkehrbar ist, darf ihre Bedeutung nicht zugunsten der ursprünglichen Kartenhöhe weggekürzt werden. Das Layout trägt die Botschaft.

Erstelle ein kleines Inventar anfälliger Komponenten

Beginne dort, wo Platz eng begrenzt ist. Navigation, Tabs, Buttons, Badges, Formularbeschriftungen, Tabellenüberschriften und kleine Karten sind meist aufschlussreicher als eine großzügige Fließtextspalte. Suche Beispiele mit Text neben Symbolen, Preisen, Status oder weiteren Aktionen.

Halte für jede Komponente vier Verhaltensweisen fest:

1. Umbruch: Darf die Beschriftung eine weitere Zeile nutzen?
2. Wachstum: Wird der Container entsprechend höher oder breiter?
3. Nachbarn: Bewegen sich Symbol und benachbarte Aktion sicher mit?
4. Grenzen: Wo ist bei begrenzter Zeilenzahl der vollständige Text lesbar?

Eine unbeantwortete Frage ist eine noch offene Gestaltungsentscheidung. Der kurze englische Text hat sie möglicherweise nur verdeckt.

Notiere anschließend die Folgen eines Fehlers. Ein höheres dekoratives Schlagwort ist etwas anderes als ein von einer Beschriftung verdeckter Zahlungsbetrag. Priorisiere Komponenten, die Entscheidungen, Voraussetzungen oder Aktionen tragen. So beginnt die Lokalisierungsprüfung nicht mit einer Stunde harmloser Detailpflege, während ein zentrales Bedienelement unlesbar bleibt.

Was Shopify schon vor den Übersetzungen lernte

In Shopifys Bericht über die Internationalisierung seines Produkts beschreibt das Team ein im englischen Entwurf leicht übersehenes Problem: Extrahierte Texte sahen genauso aus wie fest im Code eingetragene. Das Team führte eine Pseudoübersetzung ein, die erkennbare Zeichen ersetzte und Vokale verdoppelte. So wurde sichtbar, welche Texte durch das Übersetzungssystem liefen, und die Oberfläche ließ sich mit längeren Wörtern prüfen.

Pseudoübersetzung findet früh eine nützliche Fehlerklasse: Texte, die nie ins Übersetzungssystem gelangen, von kurzen Wörtern abhängige Bedienelemente und nicht mitwachsende Container. Sie sagt nicht, ob eine französische Anweisung natürlich klingt oder ein arabisches Layout die richtige Lesereihenfolge hat.

Beachte im Screenshot, was erkennbar bleibt. Eine prüfende Person versteht den Bildschirm trotz ungewöhnlicher Zeichen. Dadurch kann sie eine normale Aufgabe ausführen und unterwegs Fehler entdecken. Zufallszeichen in jedem Kasten würden zwar Druck erzeugen, aber auch die Beurteilung verhindern, ob Aktion und Erklärung zusammen noch Sinn ergeben.

Trenne mit Shopifys Ansatz vier Prüfungen:

• Abdeckung: Sichtbar markierte Pseudotexte decken nicht umgewandelte Zeichenfolgen auf.
• Kapazität: Längere Formulierungen prüfen, ob Bedienelemente und Container mitwachsen.
• Darstellung: Vorgesehenes Schriftsystem und Ersatzschrift zeigen fehlende Glyphen oder abgeschnittene Zeilenboxen.
• Sprache: Freigegebene Übersetzungen ermöglichen sprachkundigen Prüfenden die Beurteilung von Bedeutung und Ausdruck.

Ein praktischer Belastungssatz für eine Oberfläche

Nimm eine Seite mit Überschrift, Tabs, Status-Badge, zwei Aktionen und einem Fehler. Erhalte Werte und Ziele und ändere nur die untersuchten Texte.

Verknüpfe einen Fehler mit auslösendem Text und Zustand. „Die französische Nebenaktion verdeckt bei 390px nach der Validierung die Hauptaktion“ zeigt der Entwicklung einen Einstieg. „Französisch braucht mehr Platz“ unterscheidet nicht zwischen fester Buttonbreite, unflexibler Aktionszeile und falsch platzierter Fehlermeldung.

Prüfe nach der Reparatur auch den kurzen Text erneut. Ein vollbreiter Button löst vielleicht die längste Beschriftung, wirkt auf großem Bildschirm aber abgekoppelt. Eine große feste Kartenhöhe nimmt eine Übersetzung auf und erschwert das Überfliegen gewöhnlicher Einträge. Bevorzuge inhaltsabhängiges Wachstum und definiertes Stapeln. Feste Kapazität passt zu echten Beschränkungen, etwa einer eingebetteten Hostfläche.

Gib Übersetzenden vor der Sprachprüfung das Aktionsziel und den umgebenden Satz. „Open“ kann einen Status oder eine Aufforderung meinen. Ein breiterer Button behebt diese Mehrdeutigkeit nicht. Visuelle und sprachliche Prüfungen sollten einander informieren, ohne eine Seite Arbeit bestätigen zu lassen, die sie nicht beurteilen kann.

Halte den Belastungstest kontrolliert

Nutze einen längeren Veranstaltungstitel, einen längeren Ortsnamen und eine genauere Aktionsbeschriftung. Halte Datum und Teilnehmerzahlen im ersten Vergleich fest, damit Textlänge die untersuchte Variable bleibt. Funktioniert das Layout, ergänze lokalisierte Datumsformate in einem eigenen Durchgang.

Finde Layoutdruck mit verlängertem Englisch. Prüfe anschließend echte Übersetzungen auf Natürlichkeit, Bedeutung und schriftspezifische Darstellung.

Wähle für jede Komponente eine passende Reaktion

Derselbe längere Text sollte nicht überall dieselbe Reparatur auslösen. Ein Button darf wachsen, Navigation ihr Layout ändern, eine Karte eine weitere Zeile erhalten. Beginne mit der Beziehung, die bestehen bleiben muss.

Buttons: wachsen, umbrechen oder stapeln

Buttons brauchen eine Regel für längere Beschriftungen. Eine feste Breite kann für bewusst ausgerichtete Gruppen sinnvoll sein. Sie wird fragil, wenn sie wichtiger ist als der Text. Prüfe die Aktion im umgebenden Layout, bevor du über Wachsen, Umbruch oder Verschieben entscheidest.

Bei zwei Aktionen unter einem Formular kann Stapeln auf schmalem Bildschirm klarer sein als eine zusammengepresste Zeile. Erhalte dabei den Vorrang der Hauptaktion. Besucher sollten ihre Bedeutung nicht aus einer nicht mehr vorhandenen Desktopanordnung erschließen müssen.

Eine umgebrochene Beschriftung ist nicht automatisch falsch. Sie kann mit ausreichender Höhe, ausgewogenem Innenabstand und klarem Inhaltsbezug funktionieren. Viele winzige zweizeilige Buttons können dagegen schwer überfliegbar sein. Brauchen mehrere Aktionen lange Erklärungen, prüfe, ob sie alle in dieselbe kompakte Gruppe gehören.

Ersetze aussagekräftige Beschriftungen nicht nur aus Platzgründen durch unerklärte Symbole. Ein Symbol kann bei vertrauter Aktion im passenden Kontext angemessen sein. Die geänderte Darstellung führt aber ein neues Erkennungsproblem ein. Beurteile diesen Tausch bewusst, statt ihn als neutrale Methode zum Verschwindenlassen der Übersetzung zu behandeln.

Für eine konkrete Größenprüfung habe ich drei englische Beschriftungen in Albert Sans bei 32px mit jeweils 20px horizontalem Innenabstand links und rechts gemessen. „View details“ braucht insgesamt 212px, „Review booking details“ 368px und „Review your booking details“ 440px. Ein fester 220px-Button lässt nur 180px für den Text. Die erste Beschriftung passt, die anderen verlangen eine Layoutreaktion. Diese englischen Belastungstexte isolieren den Breitendruck; sie sind keine Übersetzungen. Der dunklere Balkenteil ist die gemessene Schrift, der hellere der Innenabstand. Vergleiche auf einer schmalen Seite die Gesamtbreite mit dem verfügbaren Raum der Aktionsgruppe, bevor du Wachstum, Umbruch oder Stapeln wählst.

Navigation: Wechsel vor der Kollision

Navigation zeigt längere Texte oft früh, weil viele Beschriftungen um dieselbe horizontale Zeile konkurrieren. Ein Header, der gerade für die Ausgangssprache reicht, hat wenig Kapazität für längeren Wortlaut. In einer anderen Sprache muss er vielleicht früher die Darstellung wechseln oder sich flexibler nach dem verfügbaren Raum richten.

Prüfe den vollständigen Header mit Marke, Sprachwechsel, Kontoaktion und Werbelinks. Nur Navigationsbeschriftungen zu betrachten kann die eigentliche Kollision übersehen. Vielleicht schiebt eine etwas längere Kontobeschriftung alles andere in die Enge.

Kürze Beschriftungen nicht unabhängig, nur um gleiche Breiten zu erhalten. Eine Übersetzerin wählt womöglich andere Wörter, um Bedeutung zu bewahren. Das Ergebnis muss nicht visuell symmetrisch sein. Ein Navigationseintrag darf mehr Platz brauchen, wenn die Gruppe verständlich und bedienbar bleibt.

Prüfe bei Tabs, ob Umbruch Mehrdeutigkeit erzeugt. Zwei Tabreihen können den Bezug zwischen ausgewähltem Eintrag und Inhalt unklar machen. Je nach Aufgabe passen ein anderes Bedienelement oder bewusstes Scrollen besser. Betrachte ausgewählten Zustand und Zielinhalt zusammen, statt nur alle Wörter sichtbar zu machen.

Karten: Identität und Aktion erhalten

Wiederholte Karten erzeugen den Druck, alle Einträge gleich hoch zu halten. Das kann beim Überfliegen helfen, doch die Methode zählt. Bedeutung abzuschneiden, um das Raster zu erhalten, macht Karten vielleicht leichter ausrichtbar und schwerer unterscheidbar.

Angenommen, ein Veranstaltungstitel braucht drei Zeilen, ein anderer nur eine. Bei durchdachter Raumnutzung kann die Aktion trotzdem vorhersehbar sitzen. Der Titelbereich muss wachsen dürfen, die Beziehung zwischen Titel, Datum und Aktion klar bleiben.

Lege fest, welcher Text gekürzt werden darf und wie die vollständige Fassung erreichbar ist. Eine Vorschau auf eine lange Beschreibung ist etwas anderes als der identifizierende Titel. Werden zwei Veranstaltungen durch Kürzung ununterscheidbar, verliert die Komponente auswahlrelevante Informationen. Auslassungspunkte erklären den fehlenden Unterschied nicht.

Prüfe Badges und Status separat. Ein längerer Status darf weder den Veranstaltungsnamen bedecken noch das Datum aus der Karte schieben. Eine eigene Badgezeile kann besser sein als kleinere Schrift. Prüfe nach der Änderung auch kurze Beschriftungen, damit nicht überall übermäßig viel Leerraum entsteht.

Formulare: Beschriftungen, Hinweise und Fehler gemeinsam prüfen

Formularlayouts reagieren besonders empfindlich auf Textlänge, weil verschiedene Inhalte dasselbe Feld umgeben. Die Beschriftung identifiziert es, ein Hinweis erklärt die Eingabe und die Fehlermeldung eine Korrektur. In einer anderen Sprache können alle länger werden.

Prüfe jeden Zustand mit den übrigen Elementen zusammen. Ein Feld mit alleiniger Beschriftung kann gut aussehen und mit übersetztem Hinweis plus Fehler verwirrend werden. Es muss klar bleiben, welche Information zu welchem Feld gehört und wo es nach der Korrektur weitergeht.

Nebeneinander angeordnete Beschriftungen und Felder müssen bei langen Texten vielleicht untereinander rücken. Das ist eine Strukturentscheidung, kein Zeichen schlechter Übersetzung. Bleibt die horizontale Anordnung, brauchen beide genug Raum. Eine großzügige Beschriftung neben einem unbrauchbar schmalen Eingabefeld ist keine Verbesserung.

Erhalte Unterschiede zwischen Fehlermeldungen. „Erforderlich“, „Zu lang“ und „Speichern fehlgeschlagen“ beschreiben verschiedene Probleme. Die Lokalisierungsprüfung sollte sie nicht zu einer kurzen allgemeinen Formel verdichten, nur weil der Fehlerbereich eine feste Höhe hat. Lass ihn das konkrete Problem vermitteln und mit der Meldung wachsen.

Halte Zahlen, Einheiten und Namen im Kontext

Textwachstum betrifft nicht nur Sätze. Daten, Währungen, Namen und Einheiten können Platzbedarf und Reihenfolge einer Komponente verändern. Prüfe sie als Inhaltsbeispiele mit der passenden Locale, statt Werte aus dem Gedächtnis zu improvisieren.

Eine Preiszeile kann Währungsbetrag, Abrechnungszeitraum und Einschränkung verbinden. Bricht die Einschränkung um, muss sie weiterhin eindeutig zum Preis gehören. Im Veranstaltungsbeispiel braucht ein Datumsbereich womöglich mehr Raum als ein einzelnes Datum. Beschriftung und Wert zusammenzuhalten kann wichtiger sein als eine um eine Zeile kürzere Karte.

Nutze repräsentative von Nutzern eingegebene Namen, statt eine feste Zahl kurzer Wörter anzunehmen. Ein nur für „Alex Lee“ funktionierendes Layout belegt keine Lesbarkeit längerer Namen. Prüfe, wo der vollständige Name sichtbar bleiben muss und wo eine kompakte Form zur Aufgabe passt.

Verkette in der Gestaltungsspezifikation keine Textfragmente, als wäre ihre Ausgangsreihenfolge universell. Ein aus Zahl, Substantiv und kurzem Zusatz gebauter Satz kann in der Übersetzung eine andere Konstruktion brauchen. Gib Bedeutung und Kontext weiter, damit ein schlüssiger Text entstehen kann, statt unverbundene Fragmente ohne Anleitung umzustellen.

Die W3C-Kurztipps zur Internationalisierung behandeln verwandte Grundlagen: Sprachangaben, Trennung von Inhalt und Darstellung sowie Sorgfalt bei zusammengesetzten Zeichenfolgen.

Schaffe vertikal ebenso Platz wie horizontal

Eine häufige Reparatur verbreitert alles und lässt alle Höhen fest. Das hilft einer Beschriftung, kann aber eine andere beim Zeilenzuwachs weiterhin abschneiden. Prüfe den vertikalen Ablauf des gesamten Bereichs: Ein längerer Titel verschiebt möglicherweise Untertitel, Aktionsgruppe und Folgeabschnitt nach unten.

Lass die Seite dieses Wachstum aufnehmen, soweit die Aufgabe es zulässt. Eine höhere Karte schadet oft weniger als ein verschwundener entscheidender Ausdruck. Muss die Höhe begrenzt bleiben, definiere die Alternative ausdrücklich, etwa ergänzende Details in einer eigenen Ansicht bei erhaltener sichtbarer Identität.

Prüfe Ober- und Unterkanten tatsächlich gerenderter Zeichen. Ein Kasten kann groß genug wirken und trotzdem einen Akzent oder Glyphenteil abschneiden. Eine andere Schrift, ein anderes Schriftsystem oder Gewicht kann das zeigen. Ein Screenshot mit Ausgangsschrift belegt kein anderes Schriftsystem.

Zwinge nicht jede Sprache zur exakten Zeilenzahl der Ausgangsseite. Die Gestaltung soll Hierarchie, Beziehungen und Bedienbarkeit erhalten. Unterschiedliche Bereichshöhen und Umbrüche sind eine vernünftige Folge davon, dieselbe Bedeutung mit unterschiedlichen Texten auszudrücken.

Verbinde Lokalisierungsprüfung mit Breitenprüfung

Eine Übersetzung, die auf dem Desktop funktioniert, kann auf dem Smartphone scheitern. Prüfe anfällige Komponenten schmal, mittel und breit und untersuche anschließend die Übergangsbreiten. Behalte dieselbe Sprache während einer vollständigen Aufgabe bei. So fallen Beziehungen auf, die einzelne Screenshots verbergen.

Trenne sprachliche von Layoutproblemen. Unnatürlicher Wortlaut braucht Sprachprüfung. Eine korrekte Beschriftung, die mit einem Nachbarbedienelement kollidiert, braucht Layoutarbeit. Manchmal trifft beides zu. Die Einordnung verhindert, dass Gestaltung und Übersetzung das Problem immer wieder hin- und herschieben.

Lass Wortlaut und Bedeutung abschließend von jemandem prüfen, der die Sprache versteht. Ohne Sprachkenntnisse lassen sich Abschneiden, Überlagerungen und fehlende Zeichen erkennen, aber nicht zuverlässig bestätigen, ob eine gekürzte Beschriftung noch die richtige Aktion vermittelt. Halte diese Grenze im Prüfprotokoll fest, statt sichtbares Passen als Sprachfreigabe zu behandeln.

Rechts-nach-links-Layouts brauchen zusätzlich eine eigene Richtungsprüfung. Ein Test mit nur verlängertem links-nach-rechts laufendem Text belegt weder korrekte Reihenfolge noch gemischte Schreibrichtungen oder richtungsbezogene Bedienelemente. Halte diese Arbeit sichtbar, statt sie in eine pauschale Freigabe aller Sprachen einzuschließen.

Prüfe und überarbeite das Layout in OpenDesign

OpenDesign unterstützt die Arbeit mit HTML-Vorschau, Desktop-, Tablet- und Mobilansichten sowie gezielten Gestaltungsänderungen. Du kannst freigegebenen Text als Kontext geben, das Ergebnis prüfen und Kollisionen über Kommentare oder Chat beschreiben. Unterstützte manuelle Text- und Stiländerungen helfen beim Ausprobieren lokaler Anpassungen.

Lege zum Beispiel fest, dass der Veranstaltungstitel zusätzliche Zeilen nutzen darf, das Datum vollständig sichtbar bleibt und die Hauptaktion ihrer Karte zugeordnet bleibt. Halte den Text beim Prüfen der Layoutreparatur unverändert. Das Ergebnis ist so leichter beurteilbar als eine allgemeine Neugestaltung bei jedem langen Text.

Verwende bei der abschließenden Layoutprüfung freigegebene Übersetzungen, damit Wortlautänderungen keine weiterhin reparaturbedürftige Kollision verdecken.

Vergleiche nach einer lokalen Korrektur ursprüngliche und verlängerte Inhalte erneut. Eine Regel für das längste Beispiel kann kurze Beschriftungen unnötig unbeholfen machen. Gute Flexibilität unterstützt eine Spanne: Gewöhnlicher Text bleibt ausgewogen, längerer bleibt benutzbar und besondere Behandlungen haben einen klaren Grund.

Definiere, was „bereit für die Übersetzung“ bedeutet

Eine nützliche Übergabe hält das Verhalten anfälliger Komponenten, getestete Belastungsfälle und tatsächlich geprüfte Sprachen fest. Nenne offene Einschränkungen, etwa ein externes Widget mit fester Beschriftungsbreite oder ein noch nicht lokalisiertes Bild mit Text.

Gib Übersetzenden Kontext für mehrdeutige Zeichenfolgen. Ziel eines Buttons, umgebende Erklärung und Unterschiede zwischen ähnlichen Aktionen können entscheidend sein. Ist eine Zeichengrenze wirklich unvermeidbar, nenne sie mit ihrem Grund und der Person, die über Änderungen entscheiden kann. Mache nicht stillschweigend jede bestehende Containerbreite zur Sprachvorgabe.