Die zwei grössten Usability-Fehler einer mehrsprachigen Webseite

Stellen Sie sich vor, Sie sind in Japan und haben sich in Ihr Outlook-Konto eingeloggt. Sie sehen jetzt das Bild oben.

Wo ändern Sie jetzt die Sprache auf Deutsch? Ich verrate es Ihnen, es ist der Link ganz unten rechts (日本語). Wenn wir Kristy nicht bei uns hätten, hätte ich das nie gefunden.

Und damit wären wir auch schon beim ersten grossen Fehler einer mehrsprachigen Webseite.

 

1. Die Spracheinstellung ist nicht auffindbar

Damit Ihr User die Spracheinstellung gut findet, gibt es drei Sachen, die Sie beachten müssen:

Die Position

language_selection_position

Eigentlich gibt es nur zwei gute Positionen für die Sprachauswahl. Rechts oben und rechts unten. Platzieren Sie die Sprachauswahl oben rechts, wenn Sie eine Webseite mit vielen internationalen Usern haben, bei der die Sprache oft angepasst werden muss.

Bei Supertext haben wir 90 % deutschsprachige Kunden, daher haben wir uns für unten rechts entschieden. Beides sind gebräuchliche Positionen, aber wenn das Feature nur selten gebraucht wird, würde ich es nicht in den Header tun.

Der Text

Sprachauswahl-als-text

Falls Sie nur wenige Sprachen zur Auswahl haben, schreiben Sie am besten alle Möglichkeiten als Text. Wichtig: Schreiben Sie die Sprache in der jeweiligen Sprache, das heisst, schreiben Sie «Deutsch» und nicht «German». Sonst sieht Ihre Seite für fremdsprachige User möglicherweise so aus:

ドイツ語、英語、日本語

Der Text oben steht für «Deutsch, Englisch, Japanisch» – praktisch für Japaner, unpraktisch für alle anderen. Gehen Sie immer davon aus, dass Ihr User Ihre Sprache oder Schrift überhaupt nicht versteht. Am einfachsten geht das, wenn Sie sich Ihre Webseite in Japanisch oder Chinesisch vorstellen. Falls Sie jetzt immer noch die Sprache wechseln können, ist die Seite perfekt.

Das Symbol

world-symbol

Haben Sie viele Sprachen, die nicht mehr in eine kleine Liste passen, empfehle ich ein Dropdown oder ein Link auf eine eigene Seite. Damit der User dieses Dropdown oder den Link auffindet, markieren Sie ihn mit einem «Welt-Symbol», wie z. B. auf der Webseite der Emirates.

 

2. Spracheinstellung mit einer Flagge

en-de_flag

Super Lösung für das Sprachproblem, oder? Die Amerikanische Flagge für Englisch und die deutsche für Deutsch. Versteht jeder. Damit hätten wir das Problem vom ersten Abschnitt auch gleich gelöst. Leider bringt dieser Ansatz auch ein paar Probleme mit sich.

Raten Sie mal, welche Flagge unten für Spanisch und welche für Portugiesisch steht?
(Die Antwort finden Sie am Ende des Posts)

1) equatorial_guinea_flag  2) guinea-bissau_flag 3) bolivia_flag 4) brazil_flag 5) guatemala_flag

Sehen Sie das Problem? Die Amerikanische Flagge kennt wohl jedes Kind. Bei der deutschen bin ich mir schon nicht mehr so sicher. Und welche Flagge benützen wir für Spanisch? Jetzt wird es schon schwieriger.

Oder stellen Sie sich vor, Sie sind aus England. Dann sind Sie mit der amerikanischen Flagge für die englische Sprache sicher nicht ganz glücklich (Fragen Sie mal Grant oder Andrew). Oder Sie sind aus Österreich und müssen auf die deutsche Flagge klicken. Uncool

Kein Usability-Problem, aber trotzdem wichtig:

 

Fettnäpfchen

country-region

Sobald Sie sich in internationales Gewässer wagen, lauern überall kleine Fettnäpfchen. Das wissen alle, die schon mal aus dem Becken, das fürs Händewaschen ist, getrunken haben.

China anerkennt zum Beispiel Taiwan nicht als unabhängiges Land. Das umschiffen Sie einfach, indem Sie die Liste nicht «Country» taufen, sondern «Country/Region».

 

Entwickeln Sie bald eine mehrsprachige oder gar internationale Website? Dann empfehle ich Ihnen: The Art of the Global Gateway

 

Und falls Sie trotzdem je Zweifel haben, wie Sie ein Feature einer mehrsprachigen Webseite implementieren sollen, schauen Sie einfach auf der Emirates Webseite nach. Emirates ist ein super Beispiel.

 

Auflösung des Flaggen-Rätsel

1) Equatorial Guinea (Portugiesisch)

2) Guinea-Bissau (Portugiesisch)

3) Bolivien (Spanisch)

4) Brasilien  (Portugiesisch)

5) Guatemala (Spanisch)

Titelbild: Screenshot via live.com


Ähnliche Beiträge


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.