Selektor języka jest ważnym elementem, na który powinieneś zwrócić szczególną uwagę podczas tworzenia wielojęzycznej strony internetowej , ponieważ przełącznik języków to element, do którego użytkownicy często wracają, gdy chcą zmienić język.
Skuteczny przycisk przełączania języka może przynieść wiele korzyści dla strony internetowej, od zwiększenia optymalizacji sieciowej po wzrost sprzedaży.
W tym artykule omówimy najlepsze praktyki projektowania selektorów języka. Omówmy to szerzej w poniższym artykule.
Najważniejsze punkty: najlepsze praktyki projektowania selektora języka
Strategiczne rozmieszczenie maksymalizuje wykorzystanie
Umieszczenie w nagłówku/wersji desktopowej oraz w menu hamburgerowym/wersji mobilnej zapewnia dostępność bez zakłócania doświadczeń użytkownika ani szybkości ładowania strony.
Inteligentne automatyczne wykrywanie z możliwością ręcznego wyboru
Wykrywaj język przeglądarki, ale zawsze zapewniaj łatwe ręczne nadpisanie i zapamiętuj preferencje użytkownika za pomocą plików cookie.
SEO + dostępność to podstawa
Wdróż znaczniki hreflang, etykiety ARIA dla czytników ekranu, projekt przyjazny dla dotyku oraz mechanizm awaryjny bez JavaScriptu dla robotów indeksujących.
Czym jest selektor języka?
Selektor języka to element lub funkcja interfejsu użytkownika, która pozwala użytkownikom wybrać język, w którym chcą korzystać ze strony internetowej, aplikacji lub dowolnej platformy cyfrowej. Często można go spotkać na stronach internetowych, w aplikacjach oraz w innych interfejsach cyfrowych, aby dostosować je do użytkowników mówiących różnymi językami.
Selektor języka zazwyczaj wyświetla listę dostępnych języków, a użytkownik może wybrać z niej język według własnego uznania. Po dokonaniu wyboru zawartość interfejsu, w tym tekst, etykiety, a czasem także obrazy, będzie wyświetlana w wybranym języku. Jest to szczególnie ważne w przypadku stron internetowych i aplikacji obsługujących globalną publiczność lub zróżnicowaną grupę użytkowników.
Selektory języka przyczyniają się do lepszych wrażeń użytkownika, udostępniając treści cyfrowe szerszemu gronu odbiorców, niezależnie od poziomu znajomości języka. Stanowią kluczowy element działań na rzecz lokalizacji, umożliwiając deweloperom i projektantom dostosowanie produktów do różnych kontekstów językowych i kulturowych.
Dlaczego warto dostosować przełącznik języków?
Dostosowanie przełącznika języków na wielojęzycznej stronie internetowej ma kilka ważnych korzyści.
- Zgodność z marką i styl wizualny: Dzięki dostosowaniu przełącznika języków możesz zapewnić, że wygląd i styl używanego języka będą spójne z brandingiem i stylem wizualnym Twojej witryny. Możesz dostosować przyciski lub menu przełączania języków, aby pasowały do ogólnego projektu 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ęzyków. Na przykład możesz mieć ograniczoną wersję swojej witryny w kilku językach i chcesz wyświetlać tylko te języki w przełączniku języków. Dostosowując przełącznik języków, możesz wybrać, które języki są wyświetlane, co daje większą kontrolę nad dostępną treścią.
- Zoptymalizowane doświadczenie użytkownika: Dzięki dostosowaniu przełącznika języków możesz stworzyć zoptymalizowane doświadczenie użytkownika. Na przykład możesz dostosować układ lub pozycję przełącznika języków, aby ułatwić użytkownikom jego znalezienie. Możesz także dodać funkcje, takie jak powiadomienia lub instrukcje zmiany języka, które pomogą użytkownikom łatwo zrozumieć, jak korzystać z tej funkcji.
- Zaspokajanie różnych potrzeb użytkowników: Każdy użytkownik ma inne preferencje językowe. Dzięki dostosowaniu przełączania języka możesz zaspokoić potrzeby użytkowników o różnych preferencjach językowych. Mogą to być użytkownicy lokalni, międzynarodowi odwiedzający lub użytkownicy, którym wygodniej jest w innym języku.
- Zwiększenie konwersji sprzedaży: odpowiednie dostosowanie przełącznika języków może również przynieść korzyść w postaci zwiększenia konwersji sprzedaży. Skuteczny przełącznik języków zapewnia użytkownikom komfort podczas interakcji z Twoją witryną. Według danych CSA Research 72,4% konsumentów stwierdziło, że chętniej kupowałoby produkty, których informacje były dostępne w ich własnym języku. Nie jest więc niemożliwe, ż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 zastanowi się, jak wygląda jego selektor języka; każda strona będzie oczywiście miała inne preferencje. Dla tych z Was, którzy szukają typu selektora języka, który można wykorzystać, oto kilka z nich.
Przycisk języka
To jeden z najczęściej stosowanych typów przełącznika języków. Przycisk języka to zwykle ikona lub tekst wskazujący wyświetlany język, na przykład „EN” dla angielskiego lub flaga kraju oznaczająca konkretny język. Gdy użytkownicy klikną przycisk języka, zostaną przekierowani do wersji strony w odpowiednim języku.
W przypadku przycisków wyboru języka zaleca się wyświetlanie ograniczonej liczby języków, aby uniknąć zagraconego widoku. Zazwyczaj więcej niż 4–5 języków może tworzyć efekt wizualnego natłoku. Ważne jest, aby umieścić przycisk w widocznym miejscu, aby użytkownicy mogli go łatwo znaleźć. Te aspekty omówimy szerzej w kolejnej części tego artykułu.
Przyciski wyboru języka mogą być odpowiednie dla firm, które kierują swoją ofertę do konkretnych rynków lub obsługują międzynarodowe społeczności w określonych lokalizacjach. Przykład użycia przycisku wyboru języka na stronie internetowej WHO znajduje się poniżej.
Link tekstowy
Linki tekstowe to rodzaj przełącznika języków, który wykorzystuje tekst w formie nazwy języka jako link. Możesz na przykład wyświetlać linki tekstowe, takie jak „English”, „Français” lub „Español”, które przenoszą użytkowników do wersji strony w wybranym języku. Ten link tekstowy jest zwykle umieszczany na liście lub w menu rozwijanym, aby ułatwić użytkownikom wybór żądanego języka.
Jeden z typów selektora języka w formie linków jest stosowany 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 wybrany wcześniej język.
Menu wyboru
Menu wyboru to rodzaj przełącznika języków, który wykorzystuje menu rozwijane lub otwarte 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 krajów lub flagi jako wskaźniki języka, a także nazwy języków w tekście.
Menu wyboru znacznie różni się od przycisku języka – ten typ jest bardziej złożony niż zwykły przycisk. Jak w przykładzie poniżej, który pochodzi ze strony Porsche.
Zapewniają stronę z selektorem języka, na której użytkownicy mogą bezpośrednio wpisać swój język lub kraj docelowy.
Lista rozwijana vs. lista vs. wyskakujące okienko: co sprawdza się najlepiej?
Wybór odpowiedniego modelu interakcji dla selektora języka ma kluczowe znaczenie dla zapewnienia płynnego i intuicyjnego doświadczenia użytkownika. Każda metoda — czy to lista rozwijana, lista wbudowana, czy wyskakujące okienko — oferuje różne zalety w zależności od układu Twojej witryny, liczby obsługiwanych języków i zachowania użytkowników. Poniżej znajduje się porównanie trzech głównych modeli interakcji służących do wyboru języka, ze szczególnym uwzględnieniem UX, dostępności i kontekstu wdrożenia.
Typ | Mocne strony | Ograniczenia | Najlepsze zastosowanie |
Lista rozwijana | Kompaktowy, przejrzysty, skalowalny, z wieloma językami | Wymaga interakcji (kliknięcia/dotknięcia), może nie być oczywiste dla wszystkich użytkowników | Wielojęzyczne strony internetowe z ograniczoną przestrzenią |
Lista tekstów | Widoczny bez interakcji, szybszy dostęp do kluczowych języków | Może zaśmiecać interfejs użytkownika, nie skaluje się dla wielu języków | Strony z 2–4 głównymi opcjami językowymi |
Wyskakujące okienko | Może zawierać pole wyszukiwania, elastyczny projekt interfejsu | Może zakłócać przepływ użytkownika, wymaga wyraźnego przycisku zamykania i dostępności | Globalne witryny w ponad 10 językach |
Najlepsze praktyki i wskazówki dotyczące projektowania selektora języka
Projektowanie skutecznego selektora języka polega na zapewnieniu płynnego działania na wszystkich urządzeniach oraz dostępności dla użytkowników o różnym pochodzeniu. W obliczu coraz bardziej globalnej publiczności Twój przełącznik języka powinien być intuicyjny, dostępny i responsywny, aby użytkownicy mogli komfortowo korzystać z witryny w preferowanym języku.
Poniżej znajdują się najlepsze praktyki, które możesz zastosować, aby Twój selektor języka był czytelny, wygodny i dostępny dla wszystkich użytkowników.
Priorytet dla responsywnego designu
Większość użytkowników korzysta ze stron internetowych na urządzeniach mobilnych, dlatego Twój selektor języka powinien być responsywny i przyjazny dla urządzeń mobilnych. Upewnij się, że przycisk lub menu można łatwo dotknąć, nie zasłania ważnych treści i pozostaje widoczne na mniejszych ekranach.
Na przykład selektor języka na stronie internetowej wygląda tak.
Następnie, patrząc z perspektywy urządzenia mobilnego, selektor języka jest nadal łatwo dostępny i nie przesuwa się ani nie znika.
Używaj list rozwijanych lub rozwijanych menu, aby zachować porządek w układzie, i zadbaj o odpowiednie odstępy między elementami dotykowymi, aby zapewnić komfortową interakcję. Pomaga to użytkownikom łatwo wybrać preferowany język bez frustracji spowodowanej ciasnymi lub trudnymi do kliknięcia elementami.
Przemyślane umiejscowienie w interfejsie
Umieść selektor języka w dobrze widocznych, oczekiwanych miejscach, takich jak prawy górny róg nagłówka lub dolna stopka. Są to intuicyjne lokalizacje, w których użytkownicy zazwyczaj szukają opcji językowych.
Unikaj ukrywania selektora w niejednoznacznych ikonach lub menu drugorzędnych. Utrzymuj jego spójne umiejscowienie na wszystkich stronach, aby użytkownicy często przełączający języki mogli go łatwo znaleźć w dowolnym momencie.
Używaj atrybutów dostępności (ARIA)
Aby zapewnić dostępność selektora języka dla użytkowników z niepełnosprawnościami, użyj atrybutów ARIA (Accessible Rich Internet Applications), takich jak aria-label, aria-haspopup i aria-expanded. Pomagają one technologiom wspomagającym, takim jak czytniki ekranu, zrozumieć rolę i funkcję elementu.
Wdrożenie dostępności spełnia standardy WCAG i zapewnia, że Twoja witryna jest inkluzywna i użyteczna dla szerszego grona odbiorców. Projektowanie inkluzywne przynosi korzyści wszystkim, nie tylko użytkownikom o szczególnych potrzebach.
Używaj jasnych i rozpoznawalnych etykiet językowych
Wyświetlaj każdą opcję języka w jej ojczystym brzmieniu, na przykład „Español” zamiast „Spanish” lub „Deutsch” zamiast „German”. Dzięki temu użytkownicy mogą szybko rozpoznać swój preferowany język, nawet jeśli nie rozumieją języka aktualnej witryny.
Rodzime etykiety są bardziej inkluzywne i zmniejszają obciążenie poznawcze, zwłaszcza dla użytkowników międzynarodowych. Unikaj używania niejasnych skrótów lub kodów językowych, chyba że Twoja publiczność je zna.
Unikaj przeciążania zbyt dużą liczbą opcji
Wyświetlanie zbyt wielu opcji językowych jednocześnie może zaśmiecić interfejs i zdezorientować użytkowników. Pokaż najpierw tylko najbardziej istotne lub najczęściej używane języki, a pozostałe umieść w menu rozwijanym lub w sekcji „Więcej języków”.
Dzięki temu interfejs pozostaje przejrzysty, a jego obsługa staje się łatwiejsza, zwłaszcza na urządzeniach mobilnych. Skorzystaj z analityki ruchu w witrynie, aby zdecydować, które języki powinny mieć priorytet, a które powinny zostać ukryte.
Używaj odpowiednich ikon i wskazówek wizualnych (bez polegania na flagach)
Wskazówki wizualne, takie jak ikony globusa (🌐), strzałki w dół (▾) lub podświetlenie aktywnego stanu, pomagają użytkownikom zrozumieć, że element jest klikalny. Unikaj jednak używania flag narodowych do oznaczania języków, ponieważ jeden język może być używany w wielu krajach.
Flagi mogą również nieść ze sobą implikacje kulturowe lub polityczne. Jeśli używasz elementów wizualnych, połącz je z etykietami tekstowymi, aby zapewnić czytelność, i utrzymuj ikony spójne oraz neutralne kulturowo w całym projekcie.
Zachowaj spójność z projektem strony internetowej i brandingiem
Twój selektor języka powinien wizualnie pasować do ogólnego stylu Twojej witryny. Niezależnie od tego, czy używasz przycisków, linków tekstowych czy ikon, upewnij się, że typografia, kolory i stany po najechaniu kursorem są zgodne z Twoim brandingiem. Zwiększa to zaufanie i wzmacnia doświadczenie użytkownika.
Jeśli tworzysz niestandardowy selektor, przetestuj go w różnych przeglądarkach i na różnych urządzeniach, aby upewnić się, że działa zgodnie z zamierzeniem. Spójny design i niezawodne działanie przyczyniają się do płynnej, wielojęzycznej ścieżki użytkownika.
Konfigurowanie selektora języka za pomocą Linguise w 7 krokach
Na tym etapie znasz już najlepsze praktyki dotyczące selektorów języka. To tłumaczenie 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 działa w ten sposób. Linguise to usługa automatycznego tłumaczenia, która umożliwia użytkownikowi dostosowanie przełącznika języków. Niektóre z korzyści, jakie uzyskasz, korzystając z Linguise , obejmują:.
- Linguise można używać i integrować z ponad 40 systemami CMS (WordPress, Joomla, Drupal, itp.).
- Tłumaczenie na różne języki zostanie wykonane automatycznie w ciągu zaledwie kilku sekund po dodaniu języka do przełącznika języków na stronie internetowej.
- jest ponad 80 języków , które można dodać do selektora języków.
- Linguise automatycznie przygotuje unikalny adres URL zgodny 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 na stronie występują wersje językowe.
- Możesz skonfigurować przełącznik języka elastycznie zgodnie z potrzebami strony, począwszy od ikony i koloru, aż po nazwę języka.
- Możesz przeglądać statystyki odsłon stron odwiedzających według języka, dla każdego języka dodanego do selektora języka.
W tym samouczku użyjemy WordPress jako przykładu używanego systemu CMS.
Krok 1: Rejestracja bezpłatnego konta Linguise
Aby uzyskać dostęp do przełącznika języków w Linguise, pierwszym krokiem, który musisz wykonać, jest zarejestrowanie konta w Linguise. Linguise oferuje również bezpłatny okres próbny przez jeden miesiąc, który obejmuje różnorodne funkcje, z których możesz skorzystać.
Krok 2: Dodaj domenę do swojej wielojęzycznej witryny
Drugim krokiem jest dodanie domeny strony internetowej w Linguise , którą już posiadasz, do panelu Linguise . Jest kilka rzeczy, które musisz wypełnić, zaczynając od:
- Konto
- Adresy URL
- Platforma
- Język
- Język tłumaczenia
- Przetłumacz URL
Następnie musisz aktywować klucz API i ustawić adres URL języka. Aby uzyskać pełny przewodnik po dodawaniu domeny witryny, możesz przeczytać dokumentację, a konkretnie dla WordPress, możesz to zobaczyć, instalując Linguise automatyczne tłumaczenie na WordPress lub oglądając poniższy samouczek wideo.
Krok 3: Zainstaluj wtyczkę Linguise
Po pomyślnym dodaniu strony internetowej otwórz panel WordPress i zainstaluj wtyczkę Linguise , wykonując następujące kroki: Wtyczki > Dodaj nową > Linguise > Zainstaluj > Aktywuj.
Jeśli wtyczka jest już zainstalowana, przejdź do panelu Linguise i skopiuj klucz API.
Następnie otwórz wtyczkę Linguise i wklej kod API, który otrzymałeś z panelu Linguise , do poniższej kolumny.
Krok 4: Konfiguracja głównego wyświetlania
Aby skonfigurować przełącznik języka lub wyświetlić flagi językowe, kroki wykonuje się przez Linguise panel w Ustawienia > Menu wyświetlania flag językowych.
Podczas wstępnej konfiguracji dostosujemy główny widok, biorąc pod uwagę różne komponenty.
Jednym z początkowych zagadnień jest konfiguracja formatu wyświetlania listy języków, która oferuje trzy opcje do wyboru: obok siebie, lista rozwijana lub wyskakujące okienko. Po lewej stronie znajduje się podgląd każdego z formatów.
Pierwszy format, pokazany poniżej, to układ obok siebie.
Następny format przyjmuje styl listy rozwijanej, jak pokazano na poniższym obrazie.
Na koniec mamy format popup jako ostatnią opcję.
Następnie przechodzimy do kolejnego kroku, który polega na skonfigurowaniu pozycji przełącznika języków. Masz możliwość wyboru spośród różnych opcji pozycji, więc ważne jest, aby wybrać pozycję łatwo zauważalną dla odwiedzających.
Na koniec musisz zdecydować o preferowanej kombinacji wyświetlania opcji językowych. Możesz wybierać spośród takich opcji, jak flaga + nazwa języka, flaga + krótka nazwa lub po prostu sama flaga. Ta decyzja będzie zależeć od Twoich preferencji projektowych oraz preferencji Twojej grupy docelowej.
Krok 5: Ustaw wygląd flagi
Następnie, poniżej głównej sekcji wyświetlania, natrafisz na konfiguracje projektu przeznaczone specjalnie dla flagi. Obraz przedstawiony poniżej pokazuje niektóre z dostępnych opcji ustawień.
- Wyświetlanie nazwy języka: Masz możliwość wyświetlania nazwy języka na podstawie kraju lub samego języka. Na przykład możesz wybrać wyświetlanie „German” lub „Deutsch”.
- Typ flagi dla języka angielskiego: Ta opcja ma zastosowanie w przypadku języków, które mają wiele wariantów, takich jak „English USA” lub „English Britain”. Podobnych wyborów można dokonać dla języków takich jak hiszpański, tajwański, niemiecki i portugalski.
- Styl flagi: To ustawienie pozwala zdefiniować kształt ikony flagi — okrągły lub kwadratowy (prostokątny).
Krok 6: Ustaw kolor i rozmiar flagi
Gdy projekt flagi jest już gotowy, kolejnym krokiem jest dostosowanie kolorów, rozmiaru i różnych innych elementów. W poniższym interfejsie znajdziesz liczne ustawienia, które możesz dostosować, w tym:
- Zaokrąglenie obramowania flagi: Pozwala to na personalizację zaokrąglenia obramowania w pikselach podczas korzystania z prostokątnej flagi.
- Kolor nazwy języka: Możesz wybrać domyślny kolor tekstu dla nazwy języka.
- Kolor języka w oknie popup: To ustawienie określa kolor tytułu języka w obszarach okna popup lub listy rozwijanej.
- Rozmiar flagi: Masz możliwość zmodyfikowania rozmiaru flagi zgodnie z własnymi preferencjami.
- Kolor nazwy języka po najechaniu: To ustawienie kontroluje kolor tekstu po najechaniu myszą na nazwy języków.
- Kolor nazwy języka w oknie popup po najechaniu kursorem: Podobnie to ustawienie określa kolor tekstu po najechaniu kursorem na nazwę języka w oknie popup lub rozwijanym menu.
Krok 7: Ustaw cień flagi
W końcowej fazie masz możliwość dostosowania ustawień cienia dla flagi. Ustawienie początkowe pozwala określić cień dla każdej flagi wyświetlanej na Twojej stronie internetowej, natomiast kolejne ustawienie dotyczy efektu cienia podczas najechania kursorem na flagę języka.
Pamiętaj, aby kliknąć przycisk Zapisz , aby zachować ustawienia personalizacji wprowadzone dla przełącznika języków. Dzięki temu wybrane konfiguracje efektów cienia zostaną zastosowane i zapisane do przyszłego użytku.
Po przeprowadzeniu wszystkich konfiguracji, oto przykład wyświetlania selektora języka za pomocą wyskakującego okienka, umieszczonego w prawym górnym rogu i wykorzystującego inicjały. To tylko przykład, resztę możesz dostosować według własnych potrzeb i zgodnie z wymaganiami strony.
Poza WordPress CMS, możesz również korzystać z innych platform internetowych i postępować zgodnie ze szczegółowymi instrukcjami, takimi jak konfiguracja przełącznika dla OpenCart, przełącznik języka dla Drupal oraz konfiguracja przełącznika dla PrestaShop.
Zaprojektuj swój selektor języków, aby zapewnić płynne doświadczenie wielojęzyczne dzięki Linguise!
Tutaj zdobyłeś wiedzę na temat najlepszych praktyk projektowania selektorów języków i sposobu ich tworzenia za pomocą Linguise! Uwierz mi, stworzenie przełącznika języka może przynieść wiele korzyści i zapewnić optymalizację w oparciu o wyżej wymienione punkty.
Tworząc selektor języka, pamiętaj, aby kierować się wskazówkami i najlepszymi praktykami, które opisaliśmy powyżej – od używania ikon i wyboru odpowiednich języków po pozycjonowanie.
Teraz zarejestruj konto Linguise , dodaj swoją stronę internetową i dostosuj selektor języka, aby zapewnić lepsze doświadczenie użytkownika. Nie zapomnij wypróbować funkcji 1-miesięcznego bezpłatnego okresu próbnego, aby cieszyć się doskonałymi funkcjami Linguise!
