Website-Sprachauswahl: Bewährte Designpraktiken

Ich weiß nicht, wie es Ihnen geht, aber eine klare, markengerechte Sprachauswahl hat etwas ungemein Befriedigendes.

Vielleicht entlarvt mich das als Lokalisierungs-Nerd. Aber hört mir zu.

Dieser winzige Knopf birgt so viel Kraft. Ein Klick genügt, und der Besucher wechselt von der mühsamen Betrachtung einer fremdsprachigen Seite zur Navigation in seiner eigenen Sprache, ohne Ihre Website jemals zu verlassen.

Ein Sprachselektor ist der Punkt, an dem Design und Funktion aufeinandertreffen. Wenn es gut gemacht ist, passt es zu Ihrer Marke, ist leicht zu finden und signalisiert Besuchern aus aller Welt, dass sie willkommen sind. Wenn es schlecht gemacht ist, ist es in einer Fußzeile versteckt, falsch beschriftet oder so umständlich gestaltet, dass die Besucher die Seite verlassen, bevor sie den übersetzten Inhalt überhaupt zu Gesicht bekommen.

Was unterscheidet die beiden also?

Die meisten Anleitungen halten sich an die Grundlagen: den Selektor leicht auffindbar machen, Namen in der jeweiligen Landessprache verwenden und auf Flaggen für Symbole verzichten. Wir werden auch diese Themen behandeln. Wir wollen aber auch die schwierigeren Fragen beantworten, wie zum Beispiel: Wie alphabetisiert man eine Dropdown-Liste, die Japanisch, Arabisch und Portugiesisch mischt? Und warum verknüpft die Hälfte des Internets Ihre Sprache mit Ihrem physischen Standort, wenn das doch so oft falsch ist?

In diesem Leitfaden erfahren Sie, welches UI-Muster zu Ihrer Website passt, welche Best Practices sich in der Praxis bewähren und wie Sie die beiden Herausforderungen meistern, die fast niemand richtig bewältigt: die Sortierreihenfolge und die Aufteilung nach Sprache, Land und Währung.

Legen wir los.

Was ein Sprachauswahlfeld steuert (und was nicht)

Ein Sprachauswahlmodul hat nur eine Aufgabe: die Seite in einer anderen Sprache anzuzeigen. Es werden weder Währung, Versandkosten noch der Standort des Besuchers festgelegt. Es handelt sich weder um ein Einstellungsmenü noch um eine Händlersuche, und trotz der häufigen Verwendung auf verschiedenen Webseiten ist es kein Ersatz für eine Länderauswahl.

Weniger ist hier mehr. Ein Sprachauswahlmechanismus, der zu viel versucht, scheitert oft genau an dem einen Zweck, für den er entwickelt wurde: Besuchern zu helfen, Ihre Website zu verstehen.

Eine Studie der Nielsen Norman Group zum Thema E-Commerce-Lokalisierung ergab, dass internationale Käufer erwarten, die Sprache der Website unabhängig davon ändern zu können, wohin sie liefern lassen oder in welcher Währung sie bezahlen. Das leuchtet ein, wenn man sich die realen Märkte ansieht. In Kanada bevorzugen manche Käufer Englisch, andere Französisch, aber alle erwarten, in kanadischen Dollar zu bezahlen. In Spanien zahlt jeder in Euro, aber manche Käufer stöbern lieber auf Katalanisch als auf Spanisch.

Letztendlich bedeutet eine Sprachauswahl, die unerwartet die Währung oder die Versandregeln ändert, dass eine Änderung vorgenommen wird, die niemand angefordert hat, und dass dies genau die internationalen Kunden verärgern kann, die man eigentlich gewinnen möchte.

Arten von Sprachselektoren

Die meisten Selektoren lassen sich in eines von vier Formaten einteilen. Anstatt zu fragen, welches hier das beste ist, ist die produktivere Frage, welches zu Ihrer Sprachanzahl passt und wie viel visuellen Platz Sie ihm einräumen können.

• Dropdown-Menüs skalieren am besten. Sie sind die sicherste Standardeinstellung, sobald man drei oder vier Sprachen beherrscht.
• Schaltflächenreihen wirken souveräner und direkter. Deshalb bevorzugen Websites mit einem kleinen, festen Sprachangebot diese Variante, wie beispielsweise eine zweisprachige Regierungswebsite oder ein SaaS-Produkt, das zwei Märkte bedient.
• Textlinks eignen sich gut für Fußzeilen, wo eine vollständige Komponente einfach zu wuchtig wirken würde.
• Modale Dialogfelder stellen die Sprachauswahl in den Vordergrund, was sie für einen einmaligen Vorschlag wie „Sie bevorzugen vielleicht Französisch?“ nützlich macht, aber sie verlieren schnell ihren Reiz, wenn sie bei jedem Seitenaufruf erscheinen.

Zurück zu den Grundlagen

With the different formats in mind, let’s look at the classic best practices and see which ones still hold up in 2026.

• Verwenden Sie die Namen in der jeweiligen Muttersprache . „Deutsch“ und „Español“ signalisieren dem Besucher sofort, dass seine Sprache auf der Liste steht. Die Bezeichnungen „Deutsch“ und „Spanisch“ veranlassen Nicht-Englischsprachige dazu, eine Liste zu durchsuchen, die in einer Sprache verfasst ist, die sie möglicherweise nicht gut lesen können.
• Überspringe die Flaggen . Sie repräsentieren Länder, nicht Sprachen, und die Zuordnung ist ständig fehlerhaft. Spanisch ist in etwa 20 Ländern Amtssprache, Englisch ist nicht auf eine einzige Flagge beschränkt, und allein die Schweiz hat vier Nationalsprachen unter einer Flagge. Ein universelles Sprachsymbol, ein Globus, eine Sprechblasen-Glyphe, ein einfaches „A/文“-Zeichen, das unabhängig vom Standort des Besuchers korrekt gelesen wird.
• Machen Sie es leicht auffindbar . Bei den meisten Websites bedeutet das die obere rechte Ecke der Kopfzeile. Websites mit hohem Inhaltsanteil oder redaktionelle Inhalte, bei denen der Platz im Header kostbar ist, können den Footer nutzen. Auf Mobilgeräten sollte die Sprachauswahl in dasselbe Menü wie die Navigation integriert werden, anstatt eine separate Interaktion nur für die Sprache zu erfinden.
• Sorgen Sie dafür, dass alle Besucher auf dem gleichen Stand sind. Wenn ein Nutzer auf einer Produktseite die Sprache wechselt, sollte er auf derselben Produktseite in der neuen Sprache landen und nicht zur Startseite zurückgeleitet werden. Besucher zurückzuschicken, ist ein schneller Weg, sie zu verlieren, insbesondere wenn sie kurz vor dem Kauf standen.
• Vorschläge machen, nicht erzwingen. Die automatische Weiterleitung von Besuchern basierend auf ihrer IP-Adresse oder ihren Browsereinstellungen, ohne Möglichkeit, dies zu überschreiben, ist eine der häufigsten Beschwerden über mehrsprachige Websites. VPNs, gemeinsam genutzte Computer und Reisende machen diese Annahme zunichte. Wenn Sie eine wahrscheinliche Präferenz erkennen, bieten Sie diese als Vorschlag an und geben Sie den Besuchern stets eine klare und dauerhafte Möglichkeit, wieder zurückzuwechseln.
• Vergiss ihre Entscheidung nicht. Sobald ein Besucher eine Sprache ausgewählt hat, sollte diese auf allen Seiten und bei wiederholten Besuchen beibehalten werden. Eine bewusst getroffene Auswahl sollte immer Vorrang vor dem haben, was Ihre Website anhand des Standorts oder Browsers des Nutzers ermittelt.

Über die Grundlagen hinaus: Sortierreihenfolge und die Aufteilung nach Sprache, Land und Währung.

Diese Grundlagen bilden ein solides Fundament. Doch sobald man mit dem Erstellen eines Selektors beginnt, tauchen zwei schwierigere Fragen auf, die in den meisten Best-Practice-Leitfäden außer Acht gelassen werden.

1. Wie sortiert man eine Liste, die Buchstaben des Alphabets vermischt?

Es gibt keine einheitliche alphabetische Reihenfolge für Deutsch, Japanisch und Arabisch, da diese Schriftsysteme kein gemeinsames Alphabet verwenden. Selbst bei Sprachen mit lateinischer Schrift kommt es bei einer einfachen Computersortierung zu Fehlern: Sie ordnet „Čeština“ hinter „Türkçe“ ein, weil sie das akzentuierte „Č“ als eigenständiges Zeichen und nicht als eine Art „C“ interpretiert.

Für die meisten Websites, also solche mit bis zu einigen Dutzend Sprachen, besteht die praktische Lösung darin:

1. Sprachen nach Schriftsystem gruppieren. Latein, Kyrillisch, Arabisch, CJK (Chinesisch, Japanisch, Koreanisch) und so weiter.
2. Ordnen Sie die Gruppen in einer von Ihnen gewählten festen Reihenfolge an. Eine gängige Vorgehensweise ist es, mit dem Skript zu beginnen, das die meisten Ihrer Zuhörer verwenden.
3. Sortieren Sie innerhalb jeder Gruppe nach den Regeln des jeweiligen Skripts. Für Latein bedeutet das, dass Čeština neben Dansk und Deutsch steht, nicht am Ende der Liste.

Das Ergebnis sieht etwa so aus: Čeština, Deutsch, English, Español, Français, Português → Русский, Українська → العربية → 中文, 日本語, 한국어 .

Wenn Ihre Liste Hunderte von Sprachen umfasst, ist das manuelle Sortieren nicht mehr praktikabel, und Sie benötigen stattdessen sprachabhängige Sortierwerkzeuge für jede Skriptgruppe.

2. Sollen Sprache, Land und Währung eine oder drei Auswahlmöglichkeiten sein?

Erinnert ihr euch noch an die kanadischen und spanischen Käufer von vorhin? Hier wird diese Idee praktisch.

Viele große E-Commerce-Websites kombinieren Sprache, Land und Währung zu einer einzigen „Markt“-Auswahl. Für einen Einzelhändler liegt der Grund darin, dass Versandbestimmungen, Steuern und Zahlungsmethoden je nach Land unterschiedlich sind, daher vereinfacht eine kombinierte Auswahl den Bezahlvorgang. Das ist ein vernünftiger Kompromiss.

Das ist der falsche Kompromiss für Produkte, bei denen die drei nicht zusammenpassen müssen, wie z. B. SaaS-Tools, Medienseiten oder digitale Produkte, die von Expats, Remote-Mitarbeitern oder Personen genutzt werden, deren bevorzugte Sprache nicht mit der Sprache ihres Rechnungslandes übereinstimmt. Ein deutschsprachiger Mensch, der in Brasilien lebt, wünscht sich deutsche Texte und Preise in brasilianischen Real, nicht eine erzwungene Kombination aus beidem.

Als Faustregel gilt:

• Die Sprache verändert den Text auf der Seite.
• Währungsschwankungen beeinflussen die Art und Weise, wie Preise angezeigt werden.
• Land oder Region geht über sprachliche Unterschiede hinaus und kann verschiedene Grade der Lokalisierung bieten.

Verwenden Sie für Ihr Produkt drei separate Steuerelemente, es sei denn, eine Verknüpfung ist für die Funktion Ihres Produkts nicht erforderlich.

Erkennung, Weiterleitungen und Hinzufügen von Sprachen später

Die Erkennung dient zur Anregung, nicht zur Entscheidung.

Denken Sie daran: „Empfehlen statt erzwingen“ So macht man es richtig.

Das beste Signal für einen Erstbesuch ist die Sprache des Browsers oder Geräts des Besuchers (gesendet im Accept-Language-Header oder ausgelesen mit navigator.language in JavaScript). Im Gegensatz zur IP-basierten Standortbestimmung spiegelt sie die vom Nutzer tatsächlich eingestellte Sprache wider.

Das macht es zu einem viel besseren Hinweis, aber es sollte trotzdem nur ein Hinweis bleiben und keine Entscheidung sein, die Sie für sie treffen. Auf diese Weise ändert sich nichts, bis der Besucher zustimmt; er tätigt also den Anruf, anstatt automatisch weitergeleitet zu werden.

Entwickeln Sie es für die Sprachen, die Sie später hinzufügen werden.

Viele Websites behalten nicht die anfängliche Anzahl an Sprachen bei. Was sollten Sie also tun, wenn die ursprüngliche Liste in Ihrem aktuellen Sprachauswahlsystem nicht mehr ausreicht?

Die Antwort ist einfach: Generieren Sie die Sprachliste des Selektors automatisch aus den Sprachen, die Sie bereits veröffentlicht haben, und generieren Sie Ihre hreflang-Tags auf die gleiche Weise, anstatt sie manuell zu pflegen. Bablic macht das beispielsweise automatisch. Falls Ihnen hreflang und x-default neu sind, erklärt Ihnen unsere Aufschlüsselung von hreflang x-default die Funktionsweise.

Erstellen eines eigenen Selektors

Wie Sie einen Selektor erstellen, hängt davon ab, wie Ihre mehrsprachige Website eingerichtet ist.

Wenn jede Sprache ihre eigene URL hat (Unterverzeichnisse wie /es/ , Subdomains wie es.example.com oder einen URL-Parameter), ist der einfachste Selektor eine Liste von Links, die jeweils auf dieselbe Seite in einer anderen Sprache verweisen:

html

<nav aria-label="Sprache">

<a href="/en/pricing/" hreflang="en" lang="en">Englisch</a>

<a href="/es/pricing/" hreflang="es" lang="es" aria-current="page">Español</a>

<a href="/ja/pricing/" hreflang="ja" lang="ja">Neue Version</a>

</nav>

Jedes Detail erfüllt eine wichtige Funktion:

• lang teilt Bildschirmleseprogrammen die korrekte Aussprache der einzelnen Sprachnamen mit.
• aria-current="page" teilt der Hilfstechnologie mit, welche Sprache aktuell aktiv ist.
• Jeder Link verweist auf dieselbe Seite in einer anderen Sprache (hier auf die Preisseite), nicht auf die Startseite, damit die Besucher nicht die Orientierung verlieren.

Ihre hreflang-Tags im <head> -Bereich der Seite (oder in Ihrer Sitemap) müssen exakt dieser URL-Struktur entsprechen, denn Suchmaschinen verwenden diese, um dem jeweiligen Suchenden die richtige Version anzuzeigen. Google empfiehlt für Sprachversionen Unterverzeichnisse oder Subdomains anstelle von URL-Parametern.

Wenn die Sprache in einem Cookie oder im Browser anstatt in der URL gespeichert ist , gibt es keine Sprach-URLs, auf die verlinkt werden kann, daher funktionieren einfache Links nicht. Ihr Selektor muss die gespeicherte Sprache aktualisieren und die Seite neu laden.

Ob Sie diese als Dropdown-Menü, Schaltflächenleiste oder einfache Links darstellen, ist eine Designentscheidung. Entscheidender ist die zugrundeliegende URL-Struktur. Die meisten Websites verwenden Unterverzeichnisse (/es/) oder Subdomains (es.example.com). Abfrageparameter (?lang=es) funktionieren, Google rät jedoch von deren Verwendung für Sprachversionen ab. Egal für welche Variante Sie sich entscheiden, Ihre hreflang-Tags im <head>-Bereich der Seite (oder in Ihrer Sitemap) müssen exakt dieser Struktur entsprechen. Genau das nutzen Suchmaschinen, um dem jeweiligen Suchenden die richtige Version anzuzeigen.

Wenn Ihre Website mit Bablic übersetzt wird , können Sie den für Ihr Team passenden Weg wählen:

• Nutzen Sie den integrierten Selektor. Wählen Sie im Bablic Dashboard unter Projekt → Auswahl einen vorgefertigten Stil aus und passen Sie ihn an Ihre Marke an. Kein Code erforderlich.
• Gestalte es mit benutzerdefiniertem CSS. Behalten Sie den Selektor von Bablic bei, aber passen Sie Farben, Schriftarten, Abstände und Symbole so an, dass er exakt zu Ihrem Designsystem passt.
• Erstellen Sie Ihre eigenen Selektoren mit der Bablic -Selektorbibliothek: Das Paket @ bablic -io/selector bietet Ihnen zwei Funktionen: getLanguages() gibt die veröffentlichten Sprachen Ihres Projekts zurück und markiert die aktuelle Sprache, und setLanguage() wechselt die Sprache mit der Methode, die Ihr Projekt verwendet (Ordner, Subdomain, URL-Parameter, Cookie oder Browserspeicher). Sie gestalten die Benutzeroberfläche, Bablic übernimmt das Umschalten.

Teams, die schnell starten möchten, können bei den Standardeinstellungen bleiben, und Teams, die Wert auf ein markenkonformes Erscheinungsbild legen, haben die Möglichkeit zur individuellen Anpassung.

Welchen Weg Sie auch einschlagen, nur Ihre eigenen Daten können Ihnen sagen, welches Muster für Ihre Zielgruppe am besten funktioniert. Wenn Sie sich zwischen zwei Entwürfen nicht entscheiden können, können Sie einen einfachen Test durchführen. Erfassen Sie, wie häufig Besucher die Sprache wechseln und ob sie nach einem Sprachwechsel weiterhin dort übernachten.

Auswählen, was sich hinter Ihrem Wahlschalter befindet

Ein hervorragender Selektor ist nur dann von Nutzen, wenn auch die dazugehörige Übersetzung stimmt. Bablic kombiniert maschinelle Übersetzung mit einem kontextbezogenen Editor, sodass ein Teammitglied, das die Sprache spricht, bestimmte Zeilen direkt auf der Seite überprüfen und korrigieren kann, anstatt von Grund auf neu übersetzen zu müssen. Wenn Sie sich fragen, ob maschinelle Übersetzungen gut genug sind, um sie eigenständig zu veröffentlichen, ist unser Blick auf die Zuverlässigkeit von Google Translate ein guter Ausgangspunkt.

Werkzeuge vergleichen? Besuchen Sie unseren Bablic -Vergleichsraum oder lesen Sie, wie Bablic funktioniert , um mehr über die Einrichtung zu erfahren. Sie können es auch 30 Tage lang kostenlos testen, keine Kreditkarte erforderlich.

FAQ