Wussten Sie, dass 3 von 4 Online-Käufern Produkte mit Informationen in ihrer Muttersprache kaufen möchten? (Quelle). Eine mehrsprachige Website hat ihre eigenen Vorteile, wie zum Beispiel:
- Bieten Sie ein personalisiertes Benutzererlebnis.
- Steigern Sie den Umsatz durch lokalisierte Informationen.
- Erreichen Sie ein größeres Publikum ohne geografische Einschränkungen.
- Verbessern Sie Ihr Markenimage, indem Sie sich als globales Unternehmen präsentieren.
- Verzeichnen Sie eine Steigerung der Konversionen und eine Verringerung der Absprungraten.
Aber viele Unternehmen wissen nicht, wie man mehrsprachige Websites auf die richtige Weise erstellt!
Deshalb finden Sie hier 18 praktische UX-Tipps, die wir empfehlen, wenn Sie Ihre mehrsprachige Website entwerfen.
18 UX-Tipps für eine mehrsprachige Website
Beim Entwerfen einer mehrsprachigen Website ist es wichtig, verschiedene Faktoren zu berücksichtigen, um eine nahtlose Benutzererfahrung über verschiedene Sprachen und Kulturen hinweg zu gewährleisten. Hier sind die 18 besten UX-Tipps für mehrsprachige Websites.
Planung und Struktur
Bevor Sie mit dem Entwerfen Ihrer mehrsprachigen Website beginnen, müssen Sie einige Dinge planen und festlegen.
1. Zielsprachen identifizieren
Um die besten Sprachen für Ihre mehrsprachige Website auszuwählen, analysieren Sie zunächst den Standort und die Demografie Ihrer Zielgruppe. Betrachten Sie Ihren aktuellen Website-Traffic und Ihre Kundendaten, um zu sehen, welche Sprachen und Standorte am häufigsten sind.
Ermitteln Sie die in Ihren Zielmärkten gesprochenen Sprachen anhand von Volkszählungsdaten, Marktberichten und Wettbewerbsanalysen.
Zum Beispiel ist laut dem United States Census Bureau Spanisch die zweitmeist gesprochene Sprache in den Vereinigten Staaten. Wenn US-Kunden Ihre Zielgruppe sind, ist es also sehr sinnvoll, eine spanische Version Ihrer Website neben einer englischen Version zu haben.
Beginnen Sie mit den am weitesten verbreiteten Sprachen und erweitern Sie Ihre Website, wenn sie wächst. Durch die Analyse Ihrer Zielgruppen-Daten und die Ausrichtung der Sprachwahl an Ihren Geschäftszielen können Sie die relevantesten Sprachen für Ihre mehrsprachige Website auswählen.
Sprachbarrieren überwinden
Verabschieden Sie sich von Sprachbarrieren und begrüßen Sie grenzenloses Wachstum! Testen Sie noch heute unseren automatischen Übersetzungsdienst.
2. Verwenden Sie eine klare URL-Struktur
Eine klare URL-Struktur ist für eine mehrsprachige Website von entscheidender Bedeutung. Sie verbessert die SEO, da Suchmaschinen verschiedene Sprachversionen Ihrer Site leicht indizieren und bewerten können, wodurch die Sichtbarkeit bei lokalen Suchanfragen steigt.
Die Unterverzeichnis-Struktur ist die gängigste und empfohlene Methode. Jede Sprache erhält ihr eigenes Unterverzeichnis unter der Hauptdomain, wie www.example.com/de/ für Deutsch, www.example.com/es/ für Spanisch und www.example.com/fr/ für Französisch.
Wählen Sie eine Struktur, die Sie auf Ihrer gesamten Website konsistent beibehalten können. Vermeiden Sie das Mischen verschiedener Strukturen. Verwenden Sie ISO 639-1-Sprachcodes (wie „en“ für Englisch und „es“ für Spanisch), um Klarheit und Standardisierung zu gewährleisten.
Verwenden Sie kanonische Tags, um die bevorzugte Version einer Seite für Suchmaschinen anzugeben, insbesondere wenn Sie ähnliche Inhalte in verschiedenen Sprachen haben. Implementieren Sie hreflang-Tags in Ihrem HTML, um Suchmaschinen dabei zu helfen, die Sprache und regionale Ausrichtung Ihrer Seiten zu verstehen.
3. Verwenden Sie globale Vorlagen
Wenn ein Website-Besucher eine andere Sprache wählt, sollte er nicht auf einer völlig anderen Website landen. Verwenden Sie dieselbe Website-Vorlage für alle Ihre übersetzten Webseiten.
Hier ist ein Beispiel für Canva. Wenn die Website von Englisch ins Spanische übersetzt wird, bleiben der Abstand zwischen den Überschriften und Absätzen, die Platzierung der Schaltflächen, das Menü und die Symbole, das Format des Preisplans und alles andere gleich.
Eine globale Vorlage hilft bei konsistenter Markenführung und bietet eine nahtlose Benutzererfahrung, unabhängig davon, in welche Sprache sie wechseln. Stellen Sie sicher, dass Ihre Benutzer das gleiche Layout, Designelemente, Branding und Farben sehen, wenn sie von der Standardsprache wechseln.
Wenn Sie ein Content-Management-System (CMS) wie WordPress mit Linguise verwenden, ist die Erstellung einer gebrandeten mehrsprachigen Website ein Kinderspiel. Linguise integriert sich tief in das Theme Ihrer Website und übersetzt Ihre Inhalte automatisch, ohne zusätzliche Datenbankanfragen oder übermäßige Serverlast. Auf diese Weise wird die Leistung Ihrer Website nicht beeinträchtigt.
Wenn Sie ein E-Commerce-Plugin wie WooCommerce verwenden, Linguise aktualisiert die Hauptseite und die übersetzten Seiten bei jeder Produktaktualisierung automatisch.
4. Berücksichtigen Sie die Textausdehnung beim Design
Ein wichtiger UX-Tipp beim Design einer mehrsprachigen Website ist die Berücksichtigung der Textausdehnung. Jede Sprache hat unterschiedliche Schreibstile und Wortlängen, die berücksichtigt werden müssen.
Betrachten Sie dieses Beispiel von Etsy. Links sehen Sie den Website-Inhalt auf Japanisch und rechts den gleichen Inhalt auf Deutsch.
Einige Sprachen benötigen mehr Platz, während andere weniger Platz benötigen. Ihr Website-Layout muss in der Lage sein, den Abstand anzupassen, um sicherzustellen, dass der übersetzte Inhalt lesbar bleibt.
Hier ist eine Demonstration, wie ein Text in verschiedenen Sprachen expandiert oder schrumpft. Laut W3C hat das Wort „view“ eine 300%ige Expansion vom Englischen ins Italienische!
Berücksichtigen Sie auch die Zeilenhöhe und den Zeichenstil. Einige Sprachen haben höhere Zeichen als andere, während einige Schriften mehr Abstand benötigen als andere.
Zum Beispiel benötigt die arabische Schrift mehr vertikalen Raum zwischen den Zeilen als Lateinisch.
5. Inhalte von Design trennen
Halten Sie Text von Multimedia-Elementen getrennt für einfachere Aktualisierungen und Übersetzungen.
Halten Sie Textinhalte innerhalb von HTML-Elementen wie
Dies ermöglicht einfache Aktualisierungen und Übersetzungen, ohne den Hauptcode zu berühren. Verwenden Sie Lokalisierungsbibliotheken wie i18next für JavaScript, um Übersetzungen dynamisch zu verwalten.
Halten Sie Design und Inhalt getrennt, und das Layout wird nach der Übersetzung weniger wahrscheinlich durcheinandergeraten.
6. Sprachumschaltoptionen bereitstellen
Klare und zugängliche Optionen zum Sprachwechsel sind für eine mehrsprachige Website unerlässlich. Platzieren Sie den Umschalter für einen einfachen Zugriff in der oberen rechten Ecke und verwenden Sie kontrastreiche Farben und eine klare Typografie, damit er auffällt. Zur besseren Verständlichkeit geben Sie den Sprachnamen in der jeweiligen Schrift an (z. B. “Español” für Spanisch).
Ein Dropdown-Menü kann mehrere Sprachoptionen effizient anzeigen, ohne viel Platz zu beanspruchen. Die Verwendung von Flaggen kann einen visuellen Hinweis geben, aber seien Sie vorsichtig, da Flaggen manchmal irreführend sein können.
Zum Beispiel kann eine Flagge eine Sprache darstellen, die in mehreren Ländern gesprochen wird. Es ist oft am besten, Flaggen mit Sprachbezeichnungen für eine bessere Verständlichkeit zu kombinieren.
Zeigen Sie die ausgewählte Sprache deutlich mit einer anderen Farbe oder einem fetten Schriftschnitt an. Verwenden Sie Techniken wie AJAX, um sicherzustellen, dass die Auswahl einer Sprache den Inhalt sofort ändert, ohne die Seite neu zu laden. Machen Sie den Sprachumschalter responsiv für mobile Geräte und testen Sie seine Benutzerfreundlichkeit mit Muttersprachlern.
Inhalt und Übersetzung
Hier sind einige Tipps zu Inhalt und Übersetzung für eine bessere Benutzererfahrung.
7. Vermeiden Sie Idiome und Slang
Nicht alle Slang-Ausdrücke sind universell akzeptabel. Tatsächlich wird einiger Slang in einigen Ländern als akzeptabel angesehen, während er in anderen als äußerst anstößig gilt. Sie sollten immer klare und einfache Sprache verwenden, die sich gut über verschiedene Kulturen hinweg übersetzen lässt.
Zum Beispiel gibt es hier ein beliebtes russisches Idiom – Хоть кол на голове теши. Dieses Idiom bedeutet auf Russisch „Er ist ein sehr sturer Mensch.“
Die wörtliche Übersetzung des Idioms lautet jedoch "Man kann mit einer Axt auf diesem Kopf schleifen". 😂
Hier ist ein weiteres Beispiel dafür, wie ein häufig verwendetes englisches Wort bei automatischer Übersetzung mit Mäßigung katastrophal sein kann. Das englische Wort Salsa klingt im Koreanischen wie 설사 (seolsa), was "Durchfall" bedeutet.
Deshalb empfehlen wir, Slang oder Idiome zu vermeiden, die nur für eine bestimmte Kultur oder Demografie relevant sind. Verwenden Sie stattdessen eine einfache Sprache, die leicht in andere Sprachen übersetzt werden kann.
8. Verwenden Sie kulturell angemessene Bilder und Icons
Passen Sie Inhalte, Bilder, Icons und andere Multimedia an, um lokale Bräuche und kulturelle Bezüge widerzuspiegeln.
Zum Beispiel zeigt Clarins, eine Hautpflegemarke, die ein globales Publikum anspricht, auf ihren europäischen Website-Versionen kaukasische Frauen.
Auf der japanischen Version ihrer Website zeigen sie jedoch japanische Frauen, um besser mit lokalen Kunden in Kontakt zu treten.
Verwenden Sie für Icons, insbesondere für das Sprachumschalter-Icon, ein Globus-Icon, das universell aussieht. Zum Beispiel könnte das erste Icon im Bild unten für süd- und nordamerikanische Zielgruppen ansprechend sein, aber nicht für afrikanische und asiatische Zielgruppen.
Das zweite Symbol könnte das afrikanische Publikum ansprechen, aber nicht andere.
Um diese Verwirrung zu vermeiden, wählen Sie das universelle Globus-Symbol, das jeden anspricht – das dritte. Es hebt keine bestimmte Region oder kein bestimmtes Land hervor und ist für eine mehrsprachige Website besser geeignet.
9. Bieten Sie Untertitel für Multimedia an
Verwenden Sie für Multimedia-Untertiteldateien für Videoübersetzungen, ohne das Video zu ändern. Stellen Sie sicher, dass Bilder und Multimedia-Elemente beschreibenden Alternativtext haben, der separat vom visuellen Inhalt übersetzt werden kann.
Hier ist ein weiteres Beispiel dafür, wie Übersetzung Ihnen helfen kann, ein breiteres Publikum zu erreichen. Wir sind begeisterte Zuschauer von Project Happiness, einem YouTube-Kanal, der von einem italienischen Reisenden namens Giuseppe betrieben wird.
Der Schöpfer ist Italiener. Er nimmt auf Italienisch auf und synchronisiert seine Videos auf Englisch, aber sein Kanal wird aufgrund der großen Vielfalt an Untertiteln, die er zur Verfügung stellt, auf der ganzen Welt angesehen.
Bereit, neue Märkte zu erkunden? Probieren Sie unseren automatischen Übersetzungsdienst kostenlos mit unserer 1-Monats-Risikofreien-Testversion aus. Keine Kreditkarte erforderlich!
10. Übersetzungen regelmäßig aktualisieren
Linguise ermöglicht es Ihnen, Ihre übersetzten Seiten auf dem Frontend mit einer benutzerfreundlichen Oberfläche zu bearbeiten. Sie können die Übersetzungen selbst bewerten und Änderungen vornehmen, wenn Sie dies für notwendig halten.
E-Commerce-Websites haben viele häufige Änderungen – Produkte sind ausverkauft, zeitlich begrenzte Angebote, Änderungen an Produktinformationen und mehr.
Aber die Verwendung von Linguise erleichtert die Aktualisierung übersetzter Inhalte. Der dedizierte Übersetzungsserver und das Cache-System beschleunigen den Übersetzungsprozess und zeigen die übersetzte Seite Ihrem Publikum an.
11. Sprachen von rechts nach links berücksichtigen
