Gestaltung des Sprachwählers.
Der Sprachwähler ist die Oberflächenkomponente, mit der der Nutzer sieht, in welcher Sprachversion der Website er sich befindet, und in eine andere Version wechselt.
Eine kleine Komponente, aber auf einer mehrsprachigen Website eine der meistgenutzten, und falsch gestaltet kostet sie den Nutzer direkt. Ein Nutzer, der die gesuchte Sprache nicht findet, verlässt die Website — einen anderen Weg probiert er nicht.
Ein guter Sprachwähler hat drei Aufgaben: zeigen, in welcher Sprache man ist; zeigen, welche Sprachen vorhanden sind; und bei einer Wahl zur Entsprechung DERSELBEN SEITE in dieser Sprache führen.
Die dritte Aufgabe wird am häufigsten übersprungen
Auf den meisten Websites wirft der Sprachwechsel den Nutzer auf die Startseite. Der Nutzer liest eine Leistungsseite, wechselt die Sprache und findet sich auf der Startseite wieder — er muss die gesuchte Seite neu finden.
Das richtige Verhalten ist, zur Entsprechung der aktuellen Seite in der Zielsprache zu gehen. Gibt es keine Entsprechung — existiert die Seite in dieser Sprache noch nicht —, muss das dem Nutzer gesagt und eine Alternative angeboten werden; nicht das stille Abwerfen auf die Startseite.
Auf dieser Website zeigen die Sprachverknüpfungen auf jeder Seite auf die Entsprechungen dieser Seite, und die Verknüpfungen werden aus derselben Quelle erzeugt wie der hreflang-Satz. Die Verknüpfung in der Oberfläche und die Angabe in der Maschinenschicht können also nicht auseinanderlaufen.
Verwenden Sie keine Flaggen
Ein verbreitetes und schädliches Muster: Sprachen mit Flaggen zu zeigen. Eine Flagge repräsentiert ein Land, keine Sprache — und die zwei decken sich fast nie.
Welche Flagge ist Deutsch? Deutschland, Österreich und die Schweiz sprechen alle drei Deutsch. Welche Flagge ist Englisch? Dutzende Länder. Und umgekehrt: Ein Land kann mehrere Amtssprachen haben.
Die richtige Darstellung ist der eigene Name der Sprache, in ihrer eigenen Sprache geschrieben. Ein deutscher Nutzer kann das Wort „Almanca“ nicht lesen, erkennt aber das Wort „Deutsch“. Auf dieser Website sind die drei Sprachen unter ihren eigenen Namen gelistet.
Eine Flagge repräsentiert ein Land, keine Sprache — und die zwei decken sich fast nie.
Barrierefreiheit
Der Sprachwähler trägt einige Anforderungen an die Barrierefreiheit, und alle sind billig.
- Jede Verknüpfung sollte das Etikett der Zielsprache tragen — der Screenreader muss sagen können, wohin sie führt.
- Der Verknüpfungstext sollte in der Zielsprache stehen und diese Sprache angegeben sein — sonst spricht der Reader ihn falsch aus.
- Die aktuelle Sprache sollte markiert sein — in welcher man ist, muss programmatisch so klar sein wie visuell.
- Das Berührungsziel sollte ausreichen — zweibuchstabige Kürzel erzeugen naturgemäß kleine Ziele.
- Er sollte per Tastatur erreichbar sein — ein aufklappender Wähler muss der Tastenkonvention folgen.
Der vierte Punkt wurde auf dieser Website messend behandelt: Die zweibuchstabigen Sprachetiketten wurden mit Polsterung zu 44-Pixel-Zielen, und die Prüfsuite misst das am mobilen Umbruch eigens.
Platzierung und Sichtbarkeit
Wo der Sprachwähler steht, ist ebenfalls eine Entscheidung, und es gibt zwei verbreitete Platzierungen. Im Kopfband zu stehen ist am verbreitetsten: Der Nutzer sieht ihn beim Betreten der Seite sofort und kann eine falsche Sprache umgehend korrigieren.
Im Fußbereich zu stehen ist weniger aufdringlich, aber schlechter auffindbar. Ein Nutzer, der auf einer Seite in der falschen Sprache landet, verlässt die Website meist, statt bis zum Fußbereich zu scrollen.
Die praktische Balance: im Kopfband, aber maßvoll. Es muss keine große Komponente sein — auf einer dreisprachigen Website genügen drei kurze Etiketten. Auf großen vielsprachigen Websites wird ein aufklappender Wähler unvermeidlich, und dann muss er der Tastaturkonvention folgen.
- Im Kopfband, auf jeder Seite sichtbar — die sicherste Platzierung.
- Die aktuelle Sprache markiert — visuell wie programmatisch.
- Sprachnamen in ihrer eigenen Sprache — „Deutsch“, „Türkçe“, „English“.
- Keine Flaggen — die Flagge repräsentiert das Land, nicht die Sprache.
- Er führt zur selben Seite — das Abwerfen auf die Startseite ist der häufigste Fehler.
- Berührungsziel ≥44px — zweibuchstabige Etiketten sind naturgemäß klein.
Der fünfte Punkt ist für das Nutzererlebnis der entscheidendste und technisch der arbeitsintensivste: Die Entsprechung jeder Seite in jeder Sprache muss bekannt sein. Dieses Wissen existiert bereits im hreflang-Satz — die Oberflächenverknüpfungen aus derselben Quelle zu erzeugen verhindert zugleich das Auseinanderlaufen der beiden.
Auf dieser Website ist es genau so: Die Sprachverknüpfungen und die hreflang-Angaben kommen aus derselben Routenkarte. Existiert eine Seite in einer Sprache nicht, erscheint diese Sprache weder in der Verknüpfung noch im Satz.
Die Seite ohne Entsprechung
Das schwerste Szenario: Die Seite, auf der der Nutzer steht, hat in der Zielsprache keine Entsprechung. Was soll der Sprachwähler dann tun? Es gibt drei Verhalten, und zwei sind schlecht.
Das erste schlechte: die Verknüpfung trotzdem zeigen und den Nutzer zu einem 404 führen. Das zweite schlechte: still auf die Startseite werfen — der Nutzer versteht nicht, was geschah, und verliert seinen Ort.
Das richtige Verhalten ist, diese Sprache gar nicht unter den Optionen zu zeigen oder sie zu zeigen und zu sagen, was geschehen wird. Auf dieser Website wird der erste Weg angewandt: Existiert eine Seite in einer Sprache nicht, erscheint diese Sprache im Wähler dieser Seite nicht — und im hreflang-Satz auch nicht. Beide Verhalten kommen aus derselben Quelle.
Die Entscheidung liefert ein schlichtes Ergebnis: Jede im Wähler sichtbare Verknüpfung funktioniert. Der Nutzer klickt nie auf eine tote Sprachverknüpfung und landet nie auf einer unerwarteten Seite.
Die Alternative — die Verknüpfung zeigen und sagen „diese Seite existiert in dieser Sprache nicht, möchten Sie zur Startseite gehen“ — ist informativer, verlangt aber eine Oberflächenschicht. Auf kleinen Websites genügt der erste Weg und ist schlichter.
Eine letzte Messnotiz: Ob der Sprachwähler wirklich genutzt wird, lässt sich messen. Wird er nie geklickt, sucht entweder niemand eine andere Sprache, oder der Wähler ist nicht auffindbar — und beides verlangt sehr verschiedene Konsequenzen. Ohne Messung ist nicht zu wissen, welches von beiden gilt.
Eine letzte Musterwarnung: Den Sprachwähler in einem Aufklappmenü zu verstecken fügt auf einer dreisprachigen Website einen unnötigen Klick hinzu. Drei kurze Etiketten können nebeneinander stehen und den Wechsel mit einem Klick leisten.
Ein Aufklappmenü wird erst nötig, wenn die Sprachzahl fünf übersteigt — und dann muss es der Tastaturkonvention folgen, den Fokus richtig verwalten und sich mit Escape schließen.