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.
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 mehrsprachigen Website ein Kinderspiel. Linguise integriert sich tief in das Thema 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, Linguiseaktualisiert 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 kontrahiert wird. Laut W3C hat das Wort “Ansicht” eine 300%ige Erweiterung von Englisch zu Italienisch!
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.
Textinhalte innerhalb von HTML-Elementen wie
,
und belassen. Verwenden Sie CSS für das Styling, um sicherzustellen, dass Designänderungen den Inhalt nicht beeinflussen. Speichern Sie Textstrings in separaten Sprachdateien wie JSON, XML oder PHP.
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
Das Bereitstellen von klaren und zugänglichen Sprachumschaltoptionen ist unerlässlich für eine mehrsprachige Website.Platzieren Sie den Umschalter in der oberen rechten Ecke für einen einfachen Zugriff und verwenden Sie kontrastierende Farben und eine klare Typografie, um ihn hervorzuheben. Fügen Sie für Klarheit den Sprachnamen in der Landesschrift hinzu (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 ein beliebtes russisches Idiom – Хоть кол на голове теши. Dieses Idiom bedeutet auf Russisch "Er ist eine sehr sture Person".
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.
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
Die meisten Sprachen werden von links nach rechts geschrieben. Einige jedoch, wie Arabisch, Hebräisch und Persisch, werden von rechts nach links geschrieben.
Hier ist ein Vergleich der englischen und arabischen Versionen der Instagram-Startseite. Wie Sie sehen, hat die arabische Version alles von rechts nach links gespiegelt, die Bilder, die Schaltflächen, den Text und sogar die Suchleiste.
Der Übersetzungsdienst von Linguise unterstützt von rechts nach links geschriebene Sprachen nativ und kann das Layout Ihrer mehrsprachigen Website anpassen, um sie unterzubringen.
Hier sind einige der verfügbaren Sprachen, die von rechts nach links geschrieben werden:
- Arabisch (ar)
- Hebräisch (he)
- Persisch (fa)
- Paschtu (ps)
- Urdu (ur)
Wenn Sie diese Sprachen einbeziehen möchten, verwenden Sie ein Website-Layout, das solche großen Änderungen aufnehmen kann.
SEO und Leistung
Wir empfehlen dringend, Ihre mehrsprachige Website für internationale Suchmaschinen zu optimieren, um ihre Wirkung zu maximieren.
Führen Sie Keyword-Recherche in jeder Zielsprache durch, verwenden Sie hreflang-Tags für Sprach- und Regional-Targeting und überwachen Sie die Leistung.
12. Optimieren Sie für lokale SEO
Beginnen Sie mit lokalisierter Keyword-Recherche für jede Sprache und Region. Verwenden Sie Tools wie Google Keyword Planner, SEMrush oder Ahrefs, um relevante Keywords zu finden, nach denen Ihre Zielgruppe sucht.
Berücksichtigen Sie regionale Dialekte und Variationen in der Terminologie. Zum Beispiel unterscheidet sich Spanisch in Mexiko vom Spanisch in Europa, daher sollten Sie Ihre Keywords entsprechend anpassen.
Erstellen Sie eindeutige Titel-Tags für jede Sprachversion Ihrer Seiten und integrieren Sie lokalisierte Keywords. Halten Sie diese kurz und relevant, idealerweise unter 60 Zeichen.
Zum Beispiel auf Deutsch: „Kaufe Bio-Kaffee Online | Beste Preise“ und auf Spanisch: „Compra Café Orgánico en Línea | Mejores Precios.“
Schreiben Sie überzeugende Meta-Beschreibungen für jede Sprachversion, einschließlich lokalisierter Schlüsselwörter und eines klaren Aufrufs zum Handeln, und halten Sie diese unter 160 Zeichen.
Zum Beispiel auf Deutsch: „Shoppen Sie unsere Auswahl an Bio-Kaffee, der von den besten Höfen stammt. Kostenloser Versand bei Bestellungen über 50 Euro!“ und auf Spanisch: „Compra nuestra selección de café orgánico, proveniente de las mejores fincas. ¡Envío gratis en pedidos superiores a $50!“
13. Verwenden Sie hreflang-Tags
Verwenden Sie hreflang-Attribute in Ihrem HTML, um Suchmaschinen über die Sprach- und regionale Ausrichtung Ihrer Seiten zu informieren. Dies hilft, Probleme mit doppeltem Inhalt zu vermeiden und stellt sicher, dass Benutzer zur richtigen Sprachversion geleitet werden.
14. Leistung Über Sprachen Hinweg Überwachen
Überwachen Sie die Leistung jeder Sprachversion mithilfe von Tools wie Google Analytics und Google Search Console. Analysieren Sie Traffic-Quellen, Benutzerverhalten und Keyword-Rankings, um Verbesserungsbereiche zu identifizieren.
Experimentieren Sie mit verschiedenen Keywords, Meta-Tags und Inhaltsstrategien, um herauszufinden, was bei Ihrer Zielgruppe in jeder Sprache am besten ankommt.
Wartung und Support
Es gibt auch Überlegungen anzustellen, wenn es um die Wartung und Unterstützung von Websites und Kunden geht.
15. Erstellen Sie Einen Wartungsplan
Ein umfassender Wartungsplan für Ihre mehrsprachige Website stellt sicher, dass alle Sprachversionen konsistent, genau und aktuell bleiben.
Ein gut strukturierter Plan hilft Ihnen, Inhalte effektiv zu verwalten, Benutzerfeedback zu berücksichtigen und sich an veränderte Marktbedingungen anzupassen.
Führen Sie Inhaltsaudits durch, um die Relevanz und Genauigkeit bestehender Inhalte in allen Sprachen zu bewerten. Überprüfen Sie auf veraltete Informationen, defekte Links und Inkonsistenzen zwischen den Sprachversionen.
Testen Sie regelmäßig den Sprachumschalter, die Navigation und andere interaktive Elemente, um sicherzustellen, dass sie korrekt funktionieren.
16. Bieten Sie Kundensupport in mehreren Sprachen an
Ein Kundensupport in mehreren Sprachen verbessert das Benutzererlebnis und schafft Vertrauen bei einem vielfältigen Publikum.
Stellen Sie Kundenservice-Mitarbeiter ein, die die Sprachen sprechen, die Sie unterstützen. Dies kann Vollzeitpersonal oder Teilzeitauftragnehmer umfassen.
Um zu verstehen, welche Sprachen priorisiert werden sollen, können Sie Ihren Website-Traffic und Ihre Kundendemografie analysieren oder Umfragen oder Feedback-Formulare durchführen. Verwenden Sie die Ergebnisse, um die Sprachpräferenzen Ihrer bestehenden Kunden zu verstehen.
17. Feedback-Mechanismus
Erstellen Sie einfache, benutzerfreundliche Feedbackformulare, die es den Nutzern ermöglichen, Probleme mit Übersetzungen oder Benutzerfreundlichkeit zu melden. Stellen Sie sicher, dass diese Formulare von jeder Seite aus zugänglich sind, idealerweise im Fußbereich oder über einen speziellen Supportbereich.
Stellen Sie sicher, dass Feedbackformulare in allen unterstützten Sprachen verfügbar sind, damit die Nutzer Feedback in ihrer bevorzugten Sprache geben können.
Fügen Sie strukturierte Fragen hinzu, die die Nutzer anleiten, spezifisches Feedback zu geben. Zum Beispiel:
- Bewerten Sie die Genauigkeit der Übersetzung (Skala von 1-5).
- Welche Probleme haben Sie bei der Übersetzung festgestellt?
- Wie einfach war es, die Website in Ihrer Sprache zu navigieren?
Für diejenigen, die kein Feedbackformular ausfüllen möchten, implementieren Sie schnelle Feedback-Schaltflächen (z.B. Daumen hoch/Daumen runter) auf übersetzten Inhalten. Dies ermöglicht es den Nutzern, leicht anzugeben, ob die Übersetzung hilfreich oder genau war.
18. Verwenden Sie eine Staging-Website für Updates
Testen Sie neue Inhalte und Updates in einer Staging-Umgebung, bevor Sie sie live schalten, um Störungen zu vermeiden. Sie können einen AI-Website-Builder wie ZipWP verwenden, um eine vollständige Website in Sekunden zu erstellen.
Die Website wird alle wesentlichen Seiten, relevanten Bilder, ansprechende Website-Texte und eingebettete CMS- und SEO-Funktionalitäten enthalten.
Bereit, ein globales Publikum zu erreichen?
Diese 18 UX-Tipps für mehrsprachige Websites helfen Kunden, Ihre Website besser zu navigieren und sich mit Inhalten in ihrer bevorzugten Sprache auseinanderzusetzen.
Gutes mehrsprachiges UX-Design kann die Benutzerbindung und das Konversionspotenzial erheblich steigern. Die Erstellung einer mehrsprachigen Website mit einer nahtlosen Erfahrung erfordert jedoch Zeit und Mühe.
Hier kann Linguise helfen!
Linguise integriert sich nativ in über 40 CMS, wie z.B. WordPress, Shopify, Webflow, Squarespace und andere. Es unterstützt über 80 Sprachen und 10.000+ Sprachpaare, um das beste mehrsprachige Website-Erlebnis zu bieten.
Alle Übersetzungen sind SEO-optimiert und erschwinglich und kosten 10% eines manuellen Übersetzungsdienstes.
Sind Sie bereit, mit Linguiseglobal zu gehen?
