Der Sprachwähler ist ein wichtiges Element, auf das Sie bei der Erstellung einer mehrsprachigen Website achten sollten, da der Sprachumschalter ist, was Benutzer häufig besuchen, wenn sie die Sprache wechseln möchten.
Eine effektive Sprachumschaltfläche kann mehrere Vorteile für eine Website bieten, von der Verbesserung der Web-Optimierung bis hin zu erhöhten Umsätzen.
In diesem Artikel werden wir bewährte Praktiken für die Gestaltung von Sprachwählern diskutieren. Lassen Sie uns dies weiter im folgenden Artikel besprechen.
Was ist ein Sprachwähler?
Ein Sprachwähler ist ein Element oder eine Funktion der Benutzeroberfläche, mit der Benutzer die Sprache auswählen können, mit der sie mit einer Website, Anwendung oder einer digitalen Plattform interagieren möchten. Es wird häufig auf Websites, Softwareanwendungen und anderen digitalen Schnittstellen gefunden, um Benutzern gerecht zu werden, die verschiedene Sprachen sprechen.
Der Sprachwähler zeigt normalerweise eine Liste der verfügbaren Sprachen an, und der Benutzer kann die Sprache seiner Wahl aus dieser Liste auswählen. Nach der Auswahl wird der Inhalt der Benutzeroberfläche, einschließlich Text, Beschriftungen und manchmal Bildern, in der ausgewählten Sprache angezeigt. Dies ist besonders wichtig für Websites und Apps, die ein globales Publikum oder eine vielfältige Benutzerbasis bedienen.
Sprachauswahlen tragen zu einem besseren Benutzererlebnis bei, indem sie digitale Inhalte für ein breiteres Publikum zugänglich machen, unabhängig von ihrem Sprachkenntnisstand. Sie sind eine Schlüsselkomponente der Lokalisierungsbemühungen und ermöglichen Entwicklern und Designern, ihre Produkte an verschiedene sprachliche und kulturelle Kontexte anzupassen.
Warum müssen Sie Ihren Sprachumschalter anpassen?
Die Anpassung des Sprachumschalters auf einer mehrsprachigen Website hat mehrere wichtige Vorteile.
- Markenausrichtung und visueller Stil: Durch die Anpassung des Sprachumschalters können Sie sicherstellen, dass das Erscheinungsbild und der Stil der verwendeten Sprache mit der Markenidentität und dem visuellen Stil Ihrer Website übereinstimmen. Sie können Sprachumschaltflächen oder -menüs anpassen, um sie in das Gesamtdesign Ihrer Website einzufügen und eine konsistente Benutzererfahrung zu schaffen.
- Größere Kontrolle über angezeigte Sprachen: Manchmal möchten Sie bestimmte Sprachen, die im Sprachumschalter angezeigt werden, einschränken. Zum Beispiel haben Sie möglicherweise eine eingeschränkte Version Ihrer Website in mehreren Sprachen und möchten nur diese Sprachen im Sprachumschalter anzeigen. Durch Anpassen des Sprachumschalters können Sie wählen, welche Sprachen angezeigt werden, und erhalten so mehr Kontrolle über die verfügbaren Inhalte.
- Optimierte Benutzererfahrung: Durch die Anpassung des Sprachumschalters können Sie eine optimierte Benutzererfahrung schaffen. Sie können beispielsweise das Layout oder die Position des Sprachumschalters anpassen, um es Benutzern leicht zu machen, ihn zu finden. Sie können auch Funktionen wie Benachrichtigungen oder Sprachumschaltanweisungen hinzufügen, die Benutzern helfen, die Funktion leicht zu verstehen.
- Unterschiedliche Benutzerbedürfnisse erfüllen: Jeder Benutzer hat unterschiedliche Sprachpräferenzen. Durch die Anpassung der Sprachumschaltung können Sie die Bedürfnisse von Benutzern aus verschiedenen Sprachhintergründen erfüllen. Dies könnte lokale Benutzer, internationale Besucher oder Benutzer umfassen, die sich in einer anderen Sprache wohler fühlen.
- Steigerung der Verkaufskonversion: Eine angemessene Anpassung des Sprachumschalters kann auch den Vorteil einer Steigerung der Verkaufskonversion bieten. Denn ein effektiver Sprachumschalter kann den Nutzern Komfort bei der Interaktion mit Ihrer Website bieten. Laut CSA Research Daten sagten 72,4% der Verbraucher, dass sie eher Produkte kaufen würden, die Informationen in ihrer eigenen Sprache enthielten. Es ist also unmöglich, dass Ihr Umsatzniveau nicht auch steigt.
Verschiedene Arten von Sprachwählern
Jeder Website-Besitzer wird sicherlich sorgfältig überlegen, wie ihr Sprachwähler aussieht, jede Website wird natürlich unterschiedliche Vorlieben haben. Für diejenigen unter Ihnen, die nach einer Art von Sprachwähler suchen, der verwendet werden kann, sind hier einige davon.
Sprachtaste
Dies ist eine der gängigen Arten von Sprachumschaltern. Die Sprachschaltfläche ist normalerweise ein Symbol oder Text, der die angezeigte Sprache anzeigt, zum Beispiel „DE“ für Deutsch oder eine Landesflagge, die eine bestimmte Sprache repräsentiert. Wenn Benutzer auf die Sprachschaltfläche klicken, werden sie zur Version der Website in der entsprechenden Sprache weitergeleitet.
Für Sprachschaltflächen wird empfohlen, eine begrenzte Anzahl von Sprachen anzuzeigen, um eine überfüllte Anzeige zu vermeiden. Im Allgemeinen kann die Anzeige von mehr als 4 bis 5 Sprachen einen hektischen visuellen Effekt erzeugen. Es ist wichtig, die Schaltfläche an einer sichtbaren Stelle zu positionieren, damit Benutzer sie leicht finden können. Wir werden auf diese Aspekte im nächsten Abschnitt dieses Artikels näher eingehen.
Sprachbuttons können für Unternehmen geeignet sein, die bestimmte Märkte ansprechen oder internationale Gemeinschaften an bestimmten Orten bedienen. Ein Beispiel für die Verwendung des Sprachbuttons auf der WHO-Website ist unten dargestellt.
Textlink
Textlinks sind eine Art Sprachumschalter, der Text in Form des Sprachnamens als Link verwendet. Zum Beispiel können Sie Textlinks wie „Deutsch“, „Français“ oder „Español“ anzeigen, die Benutzer zu einer Version der Website in der ausgewählten Sprache führen. Dieser Textlink wird normalerweise in einer Liste oder einem Dropdown-Menü platziert, um es Benutzern einfacher zu machen, die gewünschte Sprache auszuwählen.
Eine Art von Link-Sprachwähler wird von dem großen Unternehmen Facebook verwendet, zusätzlich zu den aufgeführten Sprachen können Sie auch auf das (+) Symbol klicken, um weitere Sprachen zu finden.
Danach wird die Seite sofort in die zuvor ausgewählte Sprache übersetzt.
Auswahlmenü
Ein Auswahlmenü ist eine Art Sprachumschalter, der ein Dropdown-Menü oder ein offenes Menü verwendet, um eine Sprache auszuwählen. Wenn Benutzer auf das Optionsmenü klicken, sehen sie eine Liste der verfügbaren Sprachen und können die gewünschte Sprache auswählen. Das Optionsmenü kann Ländericons oder Flaggen als Sprachindikatoren sowie Sprachbezeichnungen im Text enthalten.
Das Auswahlmenü unterscheidet sich deutlich von der Sprachschaltfläche, dieser Typ ist komplexer als nur eine Schaltfläche. Wie das folgende Beispiel von der Porsche-Website zeigt.
Sie bieten eine Sprachwähler-Website an, auf der Benutzer direkt ihre Sprache oder ihr Zielland eingeben können.
Dropdown vs. Liste vs. Pop-up: Was funktioniert am besten?
Die Wahl des richtigen Interaktionsmodells für Ihren Sprachwähler ist entscheidend für die Bereitstellung einer nahtlosen und intuitiven Benutzererfahrung. Jede Methode – egal ob Dropdown, Inline-Liste oder Popup – bietet unterschiedliche Vorteile, je nach Layout Ihrer Website, Anzahl der unterstützten Sprachen und Benutzerverhalten. Nachfolgend finden Sie einen Vergleich der drei wichtigsten Interaktionsmodelle für die Sprachauswahl, wobei der Schwerpunkt auf UX, Barrierefreiheit und Implementierungskontext liegt.
Typ | Stärken | Einschränkungen | Bester Anwendungsfall |
Dropdown-Menü | Kompakt, sauber, skalierbar, mit vielen Sprachen | Erfordert Interaktion (Klick/Tipp), möglicherweise nicht für alle Benutzer offensichtlich | Mehrsprachige Websites mit Platzbeschränkungen |
Textliste | Sichtbar ohne Interaktion, schneller Zugriff auf Schlüsselsprachen | Kann die Benutzeroberfläche überladen, nicht skalierbar für viele Sprachen | Seiten mit 2–4 primären Sprachoptionen |
Pop-up | Kann ein Suchfeld enthalten, flexibles UI-Design | Kann den Benutzerfluss stören, benötigt eine klare Schließen-Schaltfläche und Barrierefreiheit | Globale Websites mit 10+ Sprachen |
Bewährte Praktiken und Tipps für die Sprachwahl
Beim Entwerfen eines effektiven Sprachwählers geht es darum, eine nahtlose Erfahrung auf allen Geräten zu bieten und die Barrierefreiheit für Benutzer mit verschiedenen Hintergründen zu gewährleisten. Mit einem zunehmend globalen Publikum sollte Ihr Sprachumschalter intuitiv, zugänglich und reaktionsfähig sein, um sicherzustellen, dass Benutzer in ihrer bevorzugten Sprache komfortabel interagieren können.
Nachfolgend finden Sie Best Practices, die Sie anwenden können, um sicherzustellen, dass Ihr Sprachwähler für alle Benutzer klar, bequem und zugänglich ist.
Reaktionsfähiges Design priorisieren
Die meisten Benutzer greifen von mobilen Geräten aus auf Websites zu, daher sollte Ihr Sprachwähler responsiv und mobilfreundlich sein. Stellen Sie sicher, dass die Schaltfläche oder das Menü leicht zu tippen ist, wichtige Inhalte nicht verdeckt und auf kleineren Bildschirmen sichtbar bleibt.
Zum Beispiel sieht die Website mit dem Sprachwähler so aus.
Wenn man dann von der Mobilfunkseite aus schaut, kann auf den Sprachwähler immer noch leicht zugegriffen werden und er bewegt sich nicht oder verschwindet.
Verwenden Sie Dropdown-Menüs oder ausklappbare Menüs, um das Layout ordentlich zu halten, und stellen Sie sicher, dass Berührungspunkte genügend Abstand für eine komfortable Interaktion haben. Dies hilft Benutzern, ihre bevorzugte Sprache leicht auszuwählen, ohne dass sie durch beengte oder schwer zu klickende Elemente frustriert werden.
Gedankenvolle Platzierung in der Benutzeroberfläche
Platzieren Sie den Sprachwähler an gut sichtbaren, erwarteten Stellen wie der oberen rechten Ecke des Headers oder dem unteren Fußbereich. Dies sind intuitive Orte, an denen Benutzer normalerweise nach Sprachoptionen suchen.
Vermeiden Sie es, den Selektor in mehrdeutigen Symbolen oder sekundären Menüs zu verstecken. Halten Sie die Platzierung auf allen Seiten konsistent, damit Benutzer, die häufig die Sprache wechseln, ihn jederzeit leicht finden können.
Barrierefreiheitsattribute verwenden (ARIA)
Um sicherzustellen, dass Ihr Sprachwähler für Benutzer mit Behinderungen zugänglich ist, verwenden Sie ARIA-Attribute (Accessible Rich Internet Applications) wie aria-label, aria-haspopup und aria-expanded. Diese helfen unterstützenden Technologien wie Screenreadern, die Rolle und Funktionalität des Elements zu verstehen.
Die Implementierung von Barrierefreiheit entspricht den WCAG-Standards und stellt sicher, dass Ihre Website inklusiv und für ein breiteres Publikum nutzbar ist. Inklusives Design kommt allen zugute, nicht nur Nutzern mit bestimmten Bedürfnissen.
Verwenden Sie klare und erkennbare Sprachbezeichnungen
Jede Sprachoption sollte mit ihrer eigenen Bezeichnung angezeigt werden, zum Beispiel „Español“ anstelle von „Spanish“ oder „Deutsch“ anstelle von „German“. Dies ermöglicht es den Nutzern, ihre bevorzugte Sprache schnell zu erkennen, auch wenn sie die aktuelle Website-Sprache nicht verstehen.
Native Beschriftungen sind inklusiver und reduzieren die kognitive Belastung, insbesondere für internationale Benutzer. Vermeiden Sie die Verwendung von obskuren Abkürzungen oder Sprachcodes, es sei denn, Ihre Zielgruppe kennt sie.
Vermeiden Sie eine Überlastung mit zu vielen Optionen
Zu viele Sprachoptionen auf einmal können die Benutzeroberfläche überladen und die Nutzer verwirren. Zeigen Sie nur die relevantesten oder am häufigsten verwendeten Sprachen an erster Stelle an und platzieren Sie die übrigen in einem Dropdown-Menü oder unter einem Abschnitt „Weitere Sprachen“.
Dies hält die Benutzeroberfläche sauber und verbessert die Benutzerfreundlichkeit, insbesondere auf Mobilgeräten. Nutzen Sie Website-Traffic-Analysen, um zu entscheiden, welche Sprachen priorisiert oder ausgeblendet werden sollen.
Verwenden Sie geeignete Symbole und visuelle Hinweise (ohne auf Flaggen angewiesen zu sein)
Visuelle Hinweise wie Globus-Symbole (🌐), Abwärtspfeile (▾) oder Hervorhebungen des aktiven Zustands helfen den Benutzern zu verstehen, dass ein Element anklickbar ist. Vermeiden Sie jedoch die Verwendung nationaler Flaggen zur Darstellung von Sprachen, da eine Sprache in mehreren Ländern gesprochen werden kann.
Flaggen können auch kulturelle oder politische Implikationen haben. Wenn Sie Visuals verwenden, sollten Sie diese mit Textlabels koppeln, um Klarheit zu gewährleisten, und Icons konsistent und kulturell neutral in Ihrem Design halten.
Bleiben Sie konsequent mit dem Website-Design und der Markenidentität
Ihr Sprachwähler sollte visuell mit dem Gesamtstil Ihrer Website übereinstimmen. Stellen Sie sicher, dass die Typografie, Farben und Hover-Zustände unabhängig davon, ob Sie Schaltflächen, Textlinks oder Symbole verwenden, Ihrem Branding entsprechen. Dies verbessert das Vertrauen und stärkt die Benutzererfahrung.
Wenn Sie einen benutzerdefinierten Selektor erstellen, testen Sie ihn auf verschiedenen Browsern und Geräten, um sicherzustellen, dass er wie vorgesehen funktioniert. Konsistentes Design und zuverlässige Funktionalität tragen zu einer nahtlosen mehrsprachigen Benutzererfahrung bei.
Einen Sprachwähler mit Linguise in 7 Schritten einrichten
An diesem Punkt kennen Sie die Best Practices für Sprachselektoren. Diese Übersetzung kann durchgeführt werden, nachdem Sie den Website-Übersetzungsdienst verwendet haben. Allerdings bieten nicht alle Übersetzungsdienste Flexibilität bei den Sprachselektoreinstellungen.
Aber Sie brauchen sich keine Sorgen zu machen, denn Linguise ist nicht wie das. Linguise ist ein automatischer Übersetzungsdienst, der eine benutzerdefinierte Anpassung des Sprachumschalters bietet. Einige der Vorteile, die Sie bei der Nutzung von Linguise erhalten, sind.
- Linguise kann verwendet und in mehr als 40 CMS integriert werden (WordPress, Joomla, Drupal usw.).
- Die Übersetzung in verschiedene Sprachen erfolgt automatisch innerhalb von Sekunden, nachdem Sie die Sprache zum Sprachumschalter auf der Website hinzugefügt haben.
- Es gibt mehr als 80+ verfügbare Sprachen, die dem Sprachwähler hinzugefügt werden können.
- Linguise wird automatisch eine eindeutige URL gemäß der Zielsprache der Übersetzung vorbereiten. Zum Beispiel die URL linguise.com/de/ für eine Seite, die ins Deutsche übersetzt wird.
- Es wird automatisch eine kanonische URL erstellen, um doppelte Inhalte in Suchmaschinen zu vermeiden, wenn Sie Sprachvariationen auf einer Seite haben.
- Sie können den Sprachumschalter flexibel entsprechend den Anforderungen der Website einrichten, beginnend beim Symbol, der Farbe und dem Sprachnamen.
- Sie können die Seitenaufrufstatistiken der Besucher pro Sprache für jede Sprache anzeigen, die dem Sprachwähler hinzugefügt wurde.
In diesem Tutorial werden wir WordPress als Beispiel für das verwendete CMS verwenden.
Schritt 1: Registrieren Sie ein kostenloses Linguise -Konto
Um auf den Sprachumschalter auf Linguise zuzugreifen, müssen Sie als ersten Schritt ein Konto auf Linguise registrieren. Linguise bietet auch eine kostenlose Testversion für einen Monat an, die eine Vielzahl von Funktionen enthält, die Sie nutzen können.
Schritt 2: Domain zu Ihrer mehrsprachigen Website hinzufügen
Der zweite Schritt besteht darin, Linguise, die Sie bereits besitzen, zum Linguise
- Konto
- URLs
- Plattform
- Sprache
- Übersetzungssprache
- URL übersetzen
Danach müssen Sie den API-Schlüssel aktivieren und die Sprach-URL festlegen. Für eine vollständige Anleitung zum Hinzufügen einer Website-Domain können Sie die Dokumentation lesen, während Sie speziell für WordPress es unter installieren Linguise automatische Übersetzung auf WordPress oder das Video-Tutorial unten ansehen können.
Schritt 3: Installieren Sie das Plugin Linguise
Nachdem Sie erfolgreich eine Website hinzugefügt haben, öffnen Sie das WordPress-Dashboard und installieren Sie das Linguise-Plugin. Führen Sie dies durch Plugins > Neu hinzufügen > Linguise > Installieren > Aktivieren.
Wenn das Plugin bereits installiert ist, gehen Sie zum Linguise -Dashboard und kopieren Sie den API-Schlüssel.
Öffnen Sie dann das Linguise -Plugin und fügen Sie den API-Code, den Sie vom Linguise -Dashboard erhalten haben, in die folgende Spalte ein.
Schritt 4: Hauptanzeige einrichten
Um einen Sprachumschalter zu konfigurieren oder Sprachflaggen anzuzeigen, erfolgen die Schritte über das Linguise Dashboard im Einstellungen > Sprachflaggen-Anzeigemenü.
Während der ersten Einrichtung werden wir Anpassungen an der Hauptanzeige vornehmen und dabei die verschiedenen Komponenten berücksichtigen.
Eine erste Überlegung ist die Konfiguration des Anzeigeformats für die Sprachliste, das drei Optionen zur Auswahl bietet: nebeneinander, Dropdown oder Popup. Auf der linken Seite befindet sich eine Vorschau für jedes Format.
Das erste Format, wie unten gezeigt, ist ein Nebeneinander-Layout.
Das folgende Format verwendet einen Dropdown-Stil, wie im Bild unten dargestellt.
Zuletzt haben wir das Popup-Format als letzte Option.
Als nächstes gehen wir zum nächsten Schritt über, bei dem die Position des Sprachumschalters konfiguriert wird. Sie haben die Flexibilität, aus verschiedenen Positionsoptionen zu wählen, daher ist es wichtig, eine Position auszuwählen, die für Besucher leicht erkennbar ist.
Schließlich müssen Sie sich für eine Kombinationseinstellung entscheiden, um die Sprachoptionen anzuzeigen. Sie können zwischen Optionen wie Flagge + Sprachnamen, Flagge + Kurzname oder einfach nur die Anzeige der Flagge wählen. Diese Entscheidung hängt von Ihren spezifischen Designvorlieben und den Vorlieben Ihrer Zielgruppe ab.
Schritt 5: Flaggen-Design festlegen
Danach stoßen Sie unterhalb des Hauptanzeigebereichs auf Designkonfigurationen speziell für die Flagge. Das unten bereitgestellte Bild zeigt einige der verfügbaren Einstellungsoptionen.
- Anzeige des Sprachnamens: Sie haben die Möglichkeit, den Sprachnamen entweder auf Grundlage des Landes oder der Sprache selbst anzuzeigen. Zum Beispiel können Sie wählen, ob Sie „Deutsch“ oder „Deutsch.“ anzeigen möchten.
- Englische Flaggentype: Diese Option ist anwendbar, wenn es um Sprachen geht, die mehrere Variationen haben, wie z.B. "Englisch USA" oder "Englisch Großbritannien". Ähnliche Auswahlmöglichkeiten können für Sprachen wie Spanisch, Taiwanesisch, Deutsch und Portugiesisch getroffen werden.
- Flaggenstil: Mit dieser Einstellung können Sie die Form des Flaggenicons definieren, egal ob rund oder quadratisch (rechteckig).
Schritt 6: Legen Sie die Farbe und Größe der Flagge fest
Sobald das Flaggen-Design eingerichtet ist, besteht der nächste Schritt darin, Farben, Größe und verschiedene andere Elemente anzupassen. In der folgenden Schnittstelle finden Sie zahlreiche anpassbare Einstellungen, einschließlich:
- Flag border-radius: This allows you to personalize the border radius in pixels when using a rectangular flag.
- Sprachnamenfarbe: Sie können die Standardtextfarbe für den Sprachnamen auswählen.
- Popup-Sprachfarbe: Diese Einstellung bestimmt die Farbe des Sprachentitels in den Popup- oder Dropdown-Bereichen.
- Flagge Größe: Sie haben die Möglichkeit, die Größe der Flagge entsprechend Ihren Vorlieben anzupassen.
- Farbton beim Überfahren mit der Maus: Diese Einstellung steuert die Textfarbe, wenn die Maus über die Sprachnamen bewegt wird.
- Popup-Sprache-Hover-Farbe: Ebenso bestimmt diese Einstellung die Textfarbe, wenn Sie mit der Maus über den Sprachentitel im Popup oder Dropdown-Menü fahren.
Schritt 7: Flagge box-shadow einstellen
In der letzten Phase haben Sie die Möglichkeit, die Schattierungseinstellungen für die Flagge anzupassen. Die erste Einstellung ermöglicht es Ihnen, einen Schatten für jede auf Ihrer Website angezeigte Flagge festzulegen, während die nachfolgende Einstellung sich auf den Schattierungseffekt beim Überfahren der Sprachflagge bezieht.
Denken Sie daran, auf die Speichern-Schaltfläche zu klicken, um die Anpassungseinstellungen für den Sprachumschalter beizubehalten. Dadurch wird sichergestellt, dass Ihre ausgewählten Konfigurationen für die Schattierungseffekte implementiert und für die zukünftige Verwendung gespeichert werden.
Nachdem alle Konfigurationen durchgeführt wurden, sehen Sie hier ein Beispiel für die Anzeige des Sprachselektors in einem Popup, das in der oberen rechten Ecke positioniert ist und Initialen verwendet. Dies ist nur ein Beispiel, Sie können den Rest nach Ihren Wünschen und entsprechend den Anforderungen der Website anpassen.
Außerhalb von WordPress CMS können Sie auch andere Website-Plattformen verwenden und der detaillierten Anleitung folgen, wie z.B. Switcher für OpenCart, Sprachumschalter für Drupal und Einstellungsschalter für PrestaShop.
Entwerfen Sie Ihren Sprachwähler für ein nahtloses mehrsprachiges Erlebnis mit Linguise!
Hier haben Sie Einblicke in bewährte Praktiken für die Gestaltung von Sprachauswahlen gewonnen und erfahren, wie Sie dies mit Linguisetun können! Glauben Sie mir, ein Sprachumschalter kann viele Vorteile bieten und eine Optimierung auf der Grundlage der oben genannten Punkte gewährleisten.
Stellen Sie beim Erstellen eines Sprachselektors sicher, dass Sie den oben erläuterten Tipps und Best Practices folgen, angefangen bei der Verwendung von Symbolen und der Auswahl relevanter Sprachen bis hin zur Positionierung.
Jetzt registrieren Sie ein Linguise-Konto, fügen Sie Ihre Website hinzu und optimieren Sie den Sprachwähler, um eine bessere Benutzererfahrung zu bieten. Vergessen Sie nicht, die 1-Monats-Testversion zu nutzen, um die überlegenen Funktionen von Linguise zu genießen!
