Selektor języka jest ważnym elementem, na który należy zwrócić szczególną uwagę podczas tworzenia witryny wielojęzycznej, ponieważ przełącznik języka jest tym, co użytkownicy często odwiedzają, gdy chcą zmienić język.
Efektywny przycisk przełączania języka może zapewnić wiele korzyści dla witryny, od zwiększenia optymalizacji sieciowej po zwiększenie sprzedaży.
W tym artykule omówimy najlepsze praktyki dotyczące projektowania selektorów języka. Omówmy to dalej w poniższym artykule.
Kluczowe punkty: Najlepsze praktyki projektowania selektora języka
Strategiczne rozmieszczenie maksymalizuje wykorzystanie
Umiejscowienie menu nagłówkowego/pulpitowego i hamburgerowego/mobilnego zapewnia dostępność bez zakłócania wrażeń użytkownika i spowalniania ładowania strony.
Inteligentne automatyczne wykrywanie z możliwością nadpisywania
Wykryj język przeglądarki, ale zawsze zapewnij łatwą ręczną zmianę ustawień i zapamiętuj preferencje użytkownika za pomocą plików cookie.
SEO + dostępność niezbędne
Wdrożenie tagów hreflang, etykiet ARIA dla czytników ekranu, przyjaznego dla dotyku projektu i rozwiązania zapasowego wolnego od JavaScript dla robotów indeksujących.
Co to jest selektor języka?
Selektor języka to element interfejsu użytkownika lub funkcja, która pozwala użytkownikom wybrać język, w którym chcą korzystać z witryny, aplikacji lub dowolnej platformy cyfrowej. Jest powszechnie stosowany na stronach internetowych, aplikacjach i innych interfejsach cyfrowych, aby dostosować się do użytkowników mówiących różnymi językami.
Selektor języka zwykle wyświetla listę dostępnych języków, a użytkownik może wybrać język swojego wyboru z tej listy. Po wybraniu, zawartość interfejsu, w tym tekst, etykiety, a czasem obrazy, będą wyświetlane w wybranym języku. Jest to szczególnie ważne dla stron internetowych i aplikacji, które obsługują globalną publiczność lub różnorodną bazę użytkowników.
Selektory języka przyczyniają się do lepszego doświadczenia użytkownika, udostępniając treści cyfrowe szerszemu gronu odbiorców, niezależnie od poziomu znajomości języka. Są kluczowym elementem wysiłków lokalizacyjnych, umożliwiając deweloperom i projektantom dostosowanie swoich produktów do różnych kontekstów językowych i kulturowych.
Dlaczego trzeba dostosować przełącznik języka?
Dostosowanie przełącznika języka na stronie wielojęzycznej ma wiele istotnych korzyści.
- Wyrównanie marki i styl wizualny: Dostosowując przełącznik języka, możesz zapewnić, że wygląd i styl używanego języka są spójne z brandingiem i stylem wizualnym Twojej witryny. Możesz dostosować przyciski lub menu przełączania języka, aby pasowały do ogólnego designu Twojej witryny, tworząc spójność w doświadczeniu użytkownika.
- Wiêksza kontrola nad wyświetlanymi językami: Czasami możesz chcieć ograniczyć niektóre języki wyświetlane w przełączniku języka. Na przykład możesz mieć ograniczoną wersję swojej strony internetowej w kilku językach i chcesz wyświetlać tylko te języki w przełączniku języka. Dostosowując przełącznik języka, możesz wybrać, które języki są wyświetlane, dając Ci większą kontrolę nad dostępną treścią.
- Zoptymalizowane doświadczenie użytkownika: Dostosowując przełącznik języka, możesz stworzyć zoptymalizowane doświadczenie użytkownika. Na przykład możesz dostosować układ lub pozycję przełącznika języka, aby ułatwić użytkownikom jego znalezienie. Możesz również dodać funkcje, takie jak powiadomienia lub instrukcje przełączania języka, które pomagają użytkownikom zrozumieć, jak korzystać z tej funkcji w łatwy sposób.
- Zaspokajaj różne potrzeby użytkowników: Każdy użytkownik ma inne preferencje językowe. Dostosowując przełączanie języka, możesz zaspokoić potrzeby użytkowników z różnych środowisk językowych. Mogą to być lokalni użytkownicy, międzynarodowi goście lub użytkownicy, którzy czują się bardziej komfortowo w innym języku.
- Zwiększ konwersję sprzedaży: odpowiednie dostosowanie przełącznika języka może również przyczynić się do zwiększenia konwersji sprzedaży. Ponieważ skuteczny przełącznik języka może zapewnić użytkownikowi komfort podczas interakcji z Twoją witryną. Według danych CSA Research, 72,4% konsumentów stwierdziło, że częściej kupują produkty, które zawierają informacje w ich własnym języku. Nie ma więc wątpliwości, że Twój poziom sprzedaży również wzrośnie.
Różne typy selektora języka
Każdy właściciel strony internetowej z pewnością dokładnie rozważy, jak wygląda selektor języka, każda strona internetowa będzie oczywiście miała różne preferencje. Dla tych z Was, którzy szukają typu selektora języka, który można wykorzystać, oto kilka z nich.
Przycisk języka
Jest to jeden z powszechnie używanych rodzajów przełącznika języka. Przycisk języka jest zwykle ikoną lub tekstem wskazującym język wyświetlany, na przykład „PL” dla polskiego lub flagą kraju reprezentującą określony język. Gdy użytkownicy klikną przycisk języka, zostaną przekierowani do wersji strony internetowej w odpowiednim języku.
W przypadku przycisków językowych zaleca się wyświetlanie ograniczonej liczby języków, aby uniknąć zagraconego wyświetlania. Ogólnie rzecz biorąc, posiadanie więcej niż 4 do 5 języków może stworzyć zajęty efekt wizualny. Ważne jest, aby umieścić przycisk w widocznym miejscu, aby użytkownicy mogli go łatwo znaleźć. O tych aspektach będziemy mówić dalej w następnej sekcji tego artykułu.
Przyciski językowe mogą być odpowiednie dla firm, które są skierowane na określone rynki lub obsługują społeczności międzynarodowe w określonych lokalizacjach. Przykładem użycia przycisku językowego na stronie WHO jest poniższy przykład.
Link tekstowy
Linki tekstowe to rodzaj przełącznika języka, który wykorzystuje tekst w formie nazwy języka jako łącze. Na przykład możesz wyświetlać linki tekstowe takie jak „Polski”, „English”, lub „Français”, które przenoszą użytkowników do wersji strony internetowej w wybranym języku. Ten link tekstowy jest zwykle umieszczony na liście lub w menu rozwijanym, aby ułatwić użytkownikom wybór żądanego języka.
Jeden z typów selektora języka łącza jest używany przez dużą firmę Facebook, oprócz wymienionych języków, można również nacisnąć ikonę (+) aby znaleźć więcej języków.
Następnie strona zostanie natychmiast przetłumaczona na wcześniej wybrany język.
Menu wyboru
Menu wyboru to rodzaj przełącznika języka, który używa menu rozwijanego lub otwartego menu do wyboru języka. Gdy użytkownicy klikną menu opcji, zobaczą listę dostępnych języków i będą mogli wybrać żądany język. Menu opcji może zawierać ikony kraju lub flagi jako wskaźniki języka, a także nazwy języków w tekście.
Menu wyboru jest zupełnie inne niż przycisk językowy, ten typ jest bardziej złożony niż tylko przycisk. Jak w poniższym przykładzie, który pochodzi ze strony internetowej Porsche.
Zapewniają one selektor języka na stronie, na której użytkownicy mogą bezpośrednio wpisać swój język lub kraj docelowy.
Rozwijane vs. Lista vs. Okno podręczne: Które działa najlepiej?
Wybór odpowiedniego modelu interakcji dla selektora języka jest kluczowy dla zapewnienia bezproblemowego i intuicyjnego doświadczenia użytkownika. Każda metoda — czy to lista rozwijana, lista wbudowana, czy wyskakujące okno — oferuje różne zalety w zależności od układu witryny, liczby obsługiwanych języków i zachowania użytkownika. Poniżej przedstawiono porównanie trzech głównych modeli interakcji dla wyboru języka, ze szczególnym uwzględnieniem UX, dostępności i kontekstu wdrożenia.
Typ | Zalety | Ograniczenia | Najlepszy przypadek użycia |
Lista rozwijana | Kompaktowy, czysty, skalowalny, z wieloma językami | Wymaga interakcji (kliknięcie/dotknięcie), może nie być oczywiste dla wszystkich użytkowników | Witryny wielojęzyczne z ograniczeniami miejsca |
Lista tekstowa | Widoczna bez interakcji, szybszy dostęp do kluczowych języków | Może zaśmiecać interfejs użytkownika, nie jest skalowalna dla wielu języków | Witryny z 2–4 podstawowymi opcjami językowymi |
Wyskakujące okno | Może zawierać pole wyszukiwania, elastyczny projekt interfejsu użytkownika | Może zakłócać przepływ pracy użytkownika, wymaga wyraźnego przycisku zamknięcia i dostępności | Globalne witryny z 10+ językami |
Najlepsze praktyki i wskazówki dotyczące selektora języka
Projektowanie skutecznego selektora języka obejmuje dostarczanie bezproblemowych doświadczeń na wszystkich urządzeniach oraz zapewnienie dostępności dla użytkowników o różnych profilach. Wraz ze stale rosnącą globalną publicznością, przełącznik języka powinien być intuicyjny, dostępny i responsywny, aby użytkownicy mogli wygodnie korzystać z preferowanego języka.
Poniżej znajdują się najlepsze praktyki, które możesz zastosować, aby upewnić się, że selektor języka jest jasny, wygodny i dostępny dla wszystkich użytkowników.
Nadać priorytet responsywnemu designowi
Większość użytkowników uzyskuje dostęp do stron internetowych z urządzeń mobilnych, dlatego selektor języka powinien być responsywny i przyjazny dla urządzeń mobilnych. Upewnij się, że przycisk lub menu jest łatwy do stuknięcia, nie zasłania ważnej zawartości i pozostaje widoczny na mniejszych ekranach.
Na przykład, selektor języka na stronie internetowej wygląda tak.
Następnie, przy przeglądaniu z poziomu mobilnego, selektor języka nadal może być łatwo dostępny i nie przesuwa się ani nie znika.
Użyj list rozwijanych lub menu rozszerzalnych, aby utrzymać porządek w układzie i zapewnić, że cele dotykowe mają wystarczającą ilość miejsca dla wygodnej interakcji. To pomaga użytkownikom łatwo wybrać preferowany język bez frustracji spowodowanej zatłoczeniem lub trudnymi do kliknięcia elementami.
Rozważne umieszczenie w interfejsie
Umieść selektor języka w wysoce widocznych, oczekiwanych obszarach, takich jak prawy górny róg nagłówka lub dolne stopki. Są to intuicyjne lokalizacje, w których użytkownicy zazwyczaj szukają opcji językowych.
Unikaj ukrywania selektora wewnątrz niejednoznacznych ikon lub menu dodatkowych. Utrzymuj jego położenie spójne na wszystkich stronach, aby użytkownicy, którzy często zmieniają język, mogli go łatwo znaleźć o dowolnej porze.
Użyj atrybutów dostępności (ARIA)
Aby zapewnić, że selektor języka jest dostępny dla użytkowników z niepełnosprawnościami, użyj atrybutów ARIA (Dostępne Bogate Aplikacje Internetowe) takich jak aria-label, aria-haspopup i aria-expanded. Pomagają one technologiom asystującym, takim jak czytniki ekranu, zrozumieć rolę i funkcjonalność elementu.
Wdrożenie dostępności spełnia standardy WCAG i zapewnia, że Twoja strona jest inkluzywna i użyteczna dla szerszego grona odbiorców. Inkluzywny design przynosi korzyści wszystkim, nie tylko użytkownikom z konkretnymi potrzebami.
Użyj jasnych i rozpoznawalnych etykiet językowych
Wyświetlaj każdą opcję językową używając jej natywnej etykiety, na przykład „Español” zamiast „Spanish” lub „Deutsch” zamiast „German”. To pozwala użytkownikom szybko rozpoznać swój preferowany język, nawet jeśli nie rozumieją bieżącego języka strony.
Etykiety rodzime są bardziej inkluzywne i zmniejszają obciążenie poznawcze, szczególnie dla użytkowników międzynarodowych. Unikaj używania niejasnych skrótów lub kodów językowych, chyba że Twoi odbiorcy je znają.
Unikaj przeciążenia zbyt wieloma opcjami
Pokazywanie zbyt wielu opcji językowych naraz może zaśmiecać interfejs i mylić użytkowników. Wyświetlaj tylko najbardziej istotne lub najczęściej używane języki jako pierwsze, a pozostałe umieść w menu rozwijanym lub w sekcji „Więcej języków”.
To utrzymuje interfejs w czystości i poprawia użyteczność, szczególnie na urządzeniach mobilnych. Użyj analityki ruchu na stronie, aby zdecydować, które języki powinny być traktowane priorytetowo lub ukryte.
Użyj odpowiednich ikon i wskazówek wizualnych (bez polegania na flagach)
Wizualne wskazówki, takie jak ikony globu (🌐), strzałki w dół (▾) lub podświetlenia aktywnego stanu, pomagają użytkownikom zrozumieć, że element jest klikalny. Należy jednak unikać używania flag narodowych do reprezentowania języków, ponieważ jeden język może być używany w wielu krajach.
Flagi mogą również mieć kulturowe lub polityczne konotacje. Jeśli używasz elementów wizualnych, łącz je z etykietami tekstowymi, aby zapewnić klarowność i zachować ikony spójne i neutralne kulturowo w całym projekcie.
Zachowaj spójność z projektem i brandingiem strony internetowej
Twój selektor języka powinien wizualnie odpowiadać ogólnemu stylowi Twojej witryny. Niezależnie od tego, czy używasz przycisków, linków tekstowych czy ikon, upewnij się, że typografia, kolory i stany najechania kursorem są zgodne z Twoim brandingiem. To poprawia zaufanie i umacnia doświadczenie użytkownika.
Jeśli tworzysz niestandardowy selektor, przetestuj go na różnych przeglądarkach i urządzeniach, aby upewnić się, że działa zgodnie z przeznaczeniem. Spójny projekt i niezawodna funkcjonalność przyczyniają się do płynnej wielojęzycznej podróży użytkownika.
Ustawianie selektora języka z Linguise w 7 krokach
W tym momencie znasz najlepsze praktyki dotyczące selektorów języka. Tłumaczenie to można wykonać po skorzystaniu z usługi tłumaczenia strony internetowej. Jednak nie wszystkie usługi tłumaczeniowe zapewniają elastyczność w ustawieniach selektora języka.
Ale nie martw się, ponieważ Linguise nie jest taki. Linguise to automatyczna usługa tłumaczeniowa, która zapewnia użytkownikowi personalizację przełącznika języka. Niektóre korzyści, które uzyskasz podczas korzystania z Linguise , obejmują.
- Linguise może być używany i zintegrowany z ponad 40 systemami CMS (WordPress, Joomla, Drupal, itp.).
- Tłumaczenie na różne języki zostanie wykonane automatycznie w ciągu kilku sekund po dodaniu języka do przełącznika języka na stronie internetowej.
- Dostępnych jest ponad 80+ języków, które można dodać do selektora języka.
- Linguise automatycznie przygotuje unikalny adres URL zgodnie z językiem docelowym tłumaczenia. Na przykład adres URL linguise.com/de/ dla strony tłumaczonej na język niemiecki.
- Automatycznie utworzy kanoniczny adres URL, aby pomóc uniknąć duplikowania treści w wyszukiwarkach, gdy masz warianty językowe na stronie.
- Możesz skonfigurować przełącznik języka elastycznie zgodnie z potrzebami witryny, zaczynając od ikony, koloru, aż po nazwę języka.
- Możesz wyświetlać statystyki odsłon strony odwiedzających dla każdego języka dodanego do selektora języka.
W tym samouczku użyjemy WordPress jako przykładu używanego CMS.
Krok 1: Rejestracja darmowego konta Linguise
Aby uzyskać dostęp do przełącznika języka na Linguise, pierwszym krokiem, który musisz wykonać, jest rejestracja konta na Linguise. Linguise oferuje również darmowy miesiąc próbny, który obejmuje różnorodne funkcje, z których możesz skorzystać.
Krok 2: Dodaj domenę do swojej wielojęzycznej strony internetowej
Drugim krokiem jest dodawanie domeny witryny w Linguise, którą już posiadasz, do kokpitu Linguise. Są pewne rzeczy, które musisz wypełnić, zaczynając od.
- Konto
- Adresy URL
- Platforma
- Język
- Język tłumaczenia
- Tłumacz URL
Następnie musisz aktywować klucz API i ustawić adres URL języka. Aby uzyskać kompletny przewodnik po dodawaniu domeny witryny, możesz przeczytać dokumentację, a konkretnie dla WordPress możesz zobaczyć to przez zainstaluj Linguise automatyczne tłumaczenie na WordPress lub obejrzyj poniższy samouczek wideo.
Krok 3: Zainstaluj wtyczkę Linguise
Po pomyślnym dodaniu strony internetowej otwórz WordPress panel i zainstaluj Linguise wtyczkę, wykonując Wtyczki > Dodaj nową > Linguise > Zainstaluj > Aktywuj.
Jeśli wtyczka jest już zainstalowana, przejdź do pulpitu Linguise i skopiuj klucz API.
Następnie otwórz wtyczkę Linguise i wklej kod API, który otrzymałeś z pulpitu Linguise , do poniższej kolumny.
Krok 4: Ustawienia głównego wyświetlacza
Aby skonfigurować przełącznik języka lub wyświetlić flagi językowe, kroki należy wykonać za pośrednictwem Linguise w menu Ustawienia > Wyświetlanie flag językowych.
Podczas wstępnej konfiguracji będziemy wprowadzać zmiany w głównym wyświetlaczu, biorąc pod uwagę różne komponenty.
Jedną z wstępnych kwestii do rozważenia jest konfiguracja formatu wyświetlania listy języków, który oferuje trzy opcje do wyboru: obok siebie, lista rozwijana lub wyskakujące okno. Po lewej stronie znajduje się podgląd dla każdego formatu.
Pierwszy format, jak pokazano poniżej, to układ obok siebie.
Następujący format przyjmuje styl listy rozwijanej, jak pokazano na poniższym obrazku.
Na koniec mamy format pop-up jako ostateczną opcję.
Następnie przechodzimy do następnego kroku, który obejmuje konfigurację położenia przełącznika języka. Masz elastyczność wyboru różnych opcji położenia, dlatego ważne jest, aby wybrać położenie łatwo zauważalne dla odwiedzających.
Ostatecznie musisz zdecydować o preferencji połączenia do wyświetlania opcji językowych. Możesz wybierać między opcjami takimi jak flaga + nazwa języka, flaga + krótka nazwa lub po prostu wyświetlanie samej flagi. Ta decyzja będzie zależała od twoich konkretnych preferencji projektowych oraz preferencji twojej docelowej grupy odbiorców.
Krok 5: Ustaw projekt flagi
Następnie, poniżej głównej sekcji wyświetlania, natkniesz się na konfiguracje projektu specjalnie dla flagi. Obrazek przedstawiony poniżej demonstruje niektóre dostępne opcje ustawień.
- Wyświetlanie nazwy języka: Masz opcję wyświetlenia nazwy języka na podstawie kraju lub samego języka. Na przykład możesz wybrać wyświetlenie „Niemiecki” lub „Deutsch.”
- Typ flagi angielskiej: Ta opcja ma zastosowanie przy obsłudze języków, które mają wiele wariantów, takich jak „Angielski USA” lub „Angielski Brytania”. Podobne wybory można dokonać dla języków takich jak hiszpański, tajwański, niemiecki i portugalski.
- Styl flagi: To ustawienie umożliwia określenie kształtu ikony flagi, czy powinna być okrągła czy kwadratowa (prostokątna).
Krok 6: Ustaw kolor i rozmiar flagi
Po ustawieniu projektu flagi, następnym krokiem jest dostosowanie kolorów, rozmiaru i różnych innych elementów. W poniższym interfejsie znajdziesz liczne konfigurowalne ustawienia, w tym:
- Promień obramowania flagi: Umożliwia to personalizację promienia obramowania w pikselach podczas używania prostokątnej flagi.
- Kolor nazwy języka: Możesz wybrać domyślny kolor tekstu dla nazwy języka.
- Kolor języka wyskakującego: To ustawienie określa kolor tytułu języka w obszarach wyskakujących lub rozwijanych.
- Rozmiar flagi: Masz opcję modyfikowania rozmiaru flagi zgodnie z Twoimi preferencjami.
- Kolor najechania nazwą języka: To ustawienie kontroluje kolor tekstu podczas najechania myszką na nazwy języków.
- Kolor języka wyskakującego przy najechaniu myszką: Podobnie, to ustawienie określa kolor tekstu podczas najechania myszką na tytuł języka w wyskakującym oknie lub rozwijanym menu.
Krok 7: Ustaw cień pola flagi
W końcowej fazie masz okazję dostosować ustawienia cienia dla flagi. Początkowe ustawienie pozwala określić cień dla każdej flagi wyświetlanej na Twojej stronie internetowej, podczas gdy kolejne ustawienie dotyczy efektu cienia podczas najechania myszką na flagę języka.
Pamiętaj, aby kliknąć przycisk Zapisz, aby zachować ustawienia personalizacji, które wprowadziłeś dla przełącznika języka. Zapewnia to, że wybrane konfiguracje efektów cienia są wdrożone i zapisane do przyszłego użytku.
Po przeprowadzeniu wszystkich konfiguracji, oto przykład wyświetlania selektora języka przy użyciu wyskakującego okienka, umieszczonego w prawym górnym rogu i używającego inicjałów. To tylko przykład, możesz dostosować resztę według własnych potrzeb i wymagań witryny.
Poza WordPress CMS, możesz również używać innych platform witryn i postępować zgodnie z szczegółowym przewodnikiem, takim jak konfiguracja przełącznika dla OpenCart, przełącznik języka dla Drupal i ustawienia przełącznika dla PrestaShop.
Zaprojektuj swój selektor języka dla bezproblemowego doświadczenia wielojęzycznego z Linguise!
Tutaj zdobyłeś wiedzę na temat najlepszych praktyk projektowania selektorów języka i jak to zrobić za pomocą Linguise! Uwierz mi, tworzenie przełącznika języka może zapewnić wiele korzyści i zapewnić optymalizację na podstawie punktów wymienionych powyżej.
Podczas tworzenia selektora języka upewnij się, że postępujesz zgodnie z wskazówkami i najlepszymi praktykami, które wyjaśniliśmy powyżej, zaczynając od używania ikon, wybierania odpowiednich języków, aż do pozycjonowania.
Teraz, zarejestruj konto Linguise, dodaj swoją witrynę i dostrój selektor języka, aby zapewnić lepsze doświadczenie użytkownika. Nie zapomnij wypróbować 1-miesięcznej funkcji darmowego okresu próbnego, aby cieszyć się lepszymi funkcjami Linguise.
