Przełącznik języków na stronie internetowej: Wskazówki, sprawdzone praktyki i przykłady

Jeśli masz stronę wielojęzyczną, będziesz chcieć mieć na niej przełącznik języków (czasem nazywany po prostu selektorem języka). Dzięki temu Twoi odwiedzający zobaczą, jakie wersje językowe oferujesz, i będą mogli wybrać swój ulubiony język.

Przełącznik języków wygląda tak, jak na tym zrzucie ekranu:

Ale sposób jego wyświetlania może się różnić, na przykład pod względem jego umiejscowienia (nagłówek, stopka itp.) oraz tego, czy są tam ikony z flagami krajów.

Dobra wiadomość jest taka, że dodanie przełącznika języków wcale nie musi być trudne. Omówimy, co jest potrzebne do zaprojektowania i stworzenia własnego narzędzia do przełączania języków od podstaw.

Poza tym, jest łatwiejsze rozwiązanie: oprogramowanie do tłumaczenia lub wtyczki, które mają wbudowany (i konfigurowalny) przełącznik języków (bardzo przydatne też do lokalizacji strony).

W tym poście przyjrzymy się różnym rodzajom przełączników języka, podpowiemy, jak sprawić, by Twój przełącznik był dobrze widoczny i działał bez zarzutu, a także pokażemy prosty sposób na dodanie i zaprojektowanie go na Twojej wielojęzycznej stronie.

Szukasz rozwiązania od razu? Wypróbuj 14-dniowy bezpłatny okres próbny Weglot i uruchom przełącznik języków na swojej stronie w kilka minut!

Dodawanie przełącznika języków na Twojej stronie (Wskazówki i najlepsze praktyki)

Jeśli masz już wielojęzyczną stronę i potrzebujesz tylko dodać przełącznik języków, możesz mieć gotowy projekt od designera, który Twój deweloper może stworzyć. Oto kilka wskazówek, które pomogą Ci poprawić ogólne doświadczenie użytkownika:

Spraw, żeby łatwo było go znaleźć

Kiedy ktoś, kto nie mówi po angielsku, wejdzie na Twoją angielską stronę, prawdopodobnie spojrzy na główne elementy nawigacji (nagłówek, stopka), żeby sprawdzić, czy strona jest dostępna w jego języku.

Ale jeśli nie zobaczą opcji językowych, założą, że Twoja strona jest tylko po angielsku i od razu ją opuszczą. To szkodzi Twojemu biznesowi.

Dlatego dobrą praktyką jest wiedzieć, gdzie Twoi odwiedzający będą szukać przełącznika języków i tam go umieścić – czy to na górze, obok menu nawigacyjnego, na dole strony, w pasku bocznym, czy jako wyskakujące okienko.

Zastanów się, ile wersji językowych planujesz oferować

Na przykład, możesz nie chcieć używać rozwijanego menu, jeśli zamierzasz przetłumaczyć swoją stronę tylko na jeden dodatkowy język.

Jednakże, jeśli planujesz przetłumaczyć ją na trzy, cztery, a nawet więcej różnych języków, wtedy rozwijane menu będzie wyglądać schludniej i będzie bardziej użyteczne.

Stawiaj funkcjonalność ponad wygląd

Tak, chcesz, żeby Twój przełącznik języków pasował do wyglądu Twojej strony. Ale nie zapominaj, że celem tego projektu jest funkcjonalność.

Nie chcesz mylić odwiedzających – chcesz, żeby było bardzo jasne, że Twoja strona jest dostępna w innych językach. Chcesz też, żeby zmiana języka była jak najłatwiejsza.

Ponownie, projektowanie i tworzenie własnego przycisku językowego ma sens, jeśli masz wielojęzyczną stronę i nie planujesz używać oprogramowania do zarządzania tłumaczeniami.

Ale jeśli używasz oprogramowania do tłumaczenia, to nie jest to konieczne. Dzieje się tak, ponieważ większość oprogramowania do tłumaczenia stron internetowych pozwoli Ci dodać przełącznik języków. (Zalecamy używanie oprogramowania do tłumaczenia, aby przetłumaczyć swoją stronę i utrzymywać tłumaczenia na bieżąco.)

Chcesz mieć stylowy przełącznik języka, taki jak w Inbenta? Wypróbuj Weglot za darmo na swojej stronie i odkryj możliwości projektowania własnego przełącznika języka.

Wymień języki w ich ojczystej formie

Nie zdając sobie z tego sprawy, mogłeś nieświadomie wymienić języki na swojej stronie w swoim ojczystym języku. Jeśli Twoja strona jest po angielsku, oznacza to, że w przełączniku języków napisałeś "German", "Chinese", "Spanish" i tak dalej.

Jednakże, jest to sprzeczne z intuicją Twoich odbiorców. Ojczysta nazwa języka może być zupełnie inna niż angielska!

Na przykład nasz przełącznik języka wyświetla opcje jako Français, Deutsch, Español, Italiano, 日本語 (dla japońskiego) i Nederlands. Dzięki temu użytkownicy łatwo znajdą swój preferowany język strony.

Używanie ikon flag może nie być najlepszym wyborem

Często myśli się, że flaga to ładna wizualna reprezentacja języka, ale to nie cała prawda.

Co przez to rozumiemy: w Stanach Zjednoczonych angielski jest kojarzony z flagą amerykańską, a nie z Union Jackiem.

Brazylijczycy kojarzą portugalski z flagą brazylijską, a nie portugalską. Tak samo Hiszpanie w Hiszpanii – swój język skojarzą z flagą hiszpańską, a nie meksykańską.

Oczywiście, możesz używać flag. Wyglądają ładnie pod względem designu UX, ponieważ są bardziej wyraziste, przez co łatwiejsze do znalezienia, i mogą sprawdzić się w Twoim przypadku. To po prostu zależy od tego, kim są Twoi odbiorcy, ponieważ możesz ryzykować zrażenie do siebie ich części.

Ostrożnie z przekierowaniami

Jednym ze sposobów podejścia do wyboru języka na stronie jest automatyczne przekierowywanie użytkowników w zależności od ich lokalizacji (na podstawie IP) lub języka przeglądarki.

To działa tak, że strona wykrywa język przeglądarki Twojego użytkownika i od razu przekierowuje go do tej wersji językowej.

Chociaż to wygodne, nie zawsze warto polegać na automatycznym przekierowaniu. Dzieje się tak, bo lokalizacja użytkownika nie zawsze idzie w parze z jego językiem.

Wyobraź sobie chińskiego turystę na miesięcznych wakacjach w Hiszpanii. Z pewnością poczułby się zdezorientowany, gdyby od razu trafił na hiszpańską wersję strony, którą przegląda!

I nawet jeśli język jego przeglądarki jest ustawiony na przykład na duński, to niekoniecznie oznacza, że chce wysyłać fizyczne zamówienia na adres w Danii.

Krótko mówiąc, zazwyczaj najlepiej jest zapytać o preferencje użytkownika, zamiast zakładać jego intencje. Użytkownik powinien mieć możliwość wyboru swojej lokalizacji, domyślnego języka i waluty. Airbnb to świetny przykład; oni nie zakładają, że mówisz językami kraju, w którym się znajdujesz. Klikając na ikonę globusa, możesz wybrać swój język, lokalizację, a w następnej zakładce – walutę:

‍

Nie oznacza to, że przekierowania nigdy nie są dobrym pomysłem; ma to sens, gdy na przykład francuski użytkownik we Francji przypadkowo trafi na amerykańską wersję strony.

Są jednak strony, które dobrze sobie poradziły z automatycznym wyborem języka. Na przykład Zara oferuje opcję pozostania na stronie brytyjskiej lub przejścia do francuskiej:

To przydaje się w przypadku różnych intencji wyszukiwania, na przykład gdy sprawdzasz dostępność lub szczegóły produktu na stronie e-commerce w miejscu, do którego podróżujesz.

Jeśli to możliwe, użyj autouzupełniania

Zawsze dobrze jest mieć autouzupełnianie w menu rozwijanym, gdzie strona sugeruje język, którego szukasz, gdy wpiszesz kilka pierwszych liter.

Autouzupełnianie jest szczególnie pomocne, jeśli oferujesz tyle języków, że użytkownik musiałby przewijać listę, żeby znaleźć swój. W ten sposób zajmie mu tylko kilka sekund, aby przełączyć wybrany język.

Projektowanie selektorów języka na Twojej stronie

Istnieje wiele różnych sposobów na zaprojektowanie selektora języka na Twojej stronie. Wielu ludzi wybiera proste przyciski, podczas gdy inni wolą dodać trochę więcej stylu, umieszczając na nim swoje logo (tak jak my!).

Menu rozwijane lub wyboru

To jeden z najczęstszych sposobów wyświetlania dostępnych wersji językowych Twojej strony.

Menu rozwijane, czyli menu wyboru, charakteryzują się tym, że lista opcji rozkłada się, pokazując Ci wszystkie dostępne ustawienia języka do wyboru.

Są też wyraźnie oznaczone, czy to ikoną globusa, nazwą języka, flagą, czy skrótem języka.

Jeśli szukasz szybkiego i łatwego selektora języka, ten sprawdzi się najlepiej, ponieważ istnieje wiele różnych sposobów jego zaprojektowania. Jest zaprojektowany tak, aby był dobrze widoczny, więc zazwyczaj znajduje się na górze strony, tak jak możesz zobaczyć tutaj:

Niektóre strony decydują się na mniej typową metodę, z czymś w rodzaju menu rozwijanego w górę, jak ten selektor języka na stronie Green Gifts:

Strona MINI pokazuje selektor języka, który wyświetla inne języki po lewej stronie bieżącego języka, gdy najedziesz na niego myszką. Podobnie jak Green Gifts, używa kodów krajów do oznaczenia każdego języka:

I użyto specjalnego kodu, aby osiągnąć ten efekt:

Przyciski

Przyciski wyboru języka to wyróżniający się i szybki sposób, aby pokazać, że celujesz w konkretne rynki. Sprawdzają się najlepiej, gdy oferujesz tylko kilka języków na swojej stronie, ponieważ zajmują znacznie więcej miejsca.

Gardette Industries oferuje swoją stronę tylko po francusku i angielsku, więc przycisk wyboru języka ma tu sens:

Biorąc pod uwagę kontrast między przyciskiem wyboru języka a tłem strony, przycisk jest jeszcze bardziej widoczny, naturalnie przyciągając wzrok użytkownika.

Musisz jednak dokładnie przemyśleć, gdzie umieścić te przyciski. Nie powinny blokować ważnych treści, ani nie powinny być głównym punktem zainteresowania na Twojej stronie. Celem jest, aby użytkownik dostał to, czego chce (przetłumaczoną stronę w preferowanym języku) w jak najmniejszej liczbie kliknięć.

Linki tekstowe

Jeśli wolisz dyskretny selektor języka, możesz rozważyć linki tekstowe. Zazwyczaj znajdziesz je na dole strony. Co więcej, to złoty środek, jeśli masz za mało języków na pełne rozwijane menu lub menu wyboru, ale za dużo, żeby zasługiwały na własne przyciski.

Oto dobry przykład: na stronie W3C bezpośrednio wymienili japoński i chiński uproszczony jako linki tekstowe.

Facebook używa hybrydowego połączenia linków tekstowych i menu wyboru. Dostępne języki umieścili na samym dole strony – musisz przewinąć w dół, gdy wylądujesz na stronie logowania:

Jeśli klikniesz przycisk +, trafisz na ogromne menu wyboru z mnóstwem języków.

Okna modalne

Okna modalne to mniejsze okienka, które pojawiają się, gdy coś klikniesz. Zasłaniają główną stronę, wyłączając jej funkcje, ale pozostawiając ją widoczną w tle. To oznacza, że wrócisz do głównego okna, gdy zakończysz interakcję z oknem modalnym.

Jeśli chodzi o projektowanie selektora języka na Twojej stronie, okna modalne mogą być dobrym rozwiązaniem, ponieważ zazwyczaj są efektowne i stylowe. W zależności od tego, jak je skonfigurujesz, użytkownik łatwiej wybierze preferowany region i język.

Spójrzmy na stronę Calvina Kleina jako przykład:

Selektor języka strony uruchamia się po kliknięciu ikony globusa w prawym górnym rogu, obok „Zaloguj się/Zarejestruj”. Gdy na nią klikniesz, pojawi się okno modalne do wyboru preferowanego kraju i języka.

Innym przykładem jest Nestlé. W prawym górnym rogu strony informuje Cię, na której wersji strony się znajdujesz.

Gdy na nią klikniesz, wyświetli się okno modalne, które zajmuje całą stronę (ale z którego łatwo wyjść, dzięki dość dużemu przyciskowi X).

Chociaż okna modalne są z pewnością widoczne, ważne jest, aby pamiętać, że mogą rozpraszać użytkownika, tak jak wyskakujące okienka. Przerywają jego przeglądanie i wymagają natychmiastowej uwagi użytkownika.

Mogą być przydatne, gdy musisz zwrócić uwagę użytkownika na coś ważnego, takiego jak preferencje prywatności, wykorzystanie danych czy ostrzeżenia.

Korzystanie z oprogramowania do tłumaczenia stron internetowych do dostosowania selektora języka na Twojej stronie

Niezależnie od tego, czy jesteś w trakcie tworzenia wielojęzycznej strony, czy już masz taką działającą, możesz użyć Weglot, aby poprawić sposób tłumaczenia treści i zarządzać całym procesem tłumaczenia — z dodatkową korzyścią, jaką jest łatwy do dostosowania przełącznik języków.

Najpierw kilka podstaw dotyczących Weglot:

• Możesz łatwo dodać Weglot do dowolnego CMS-a (WordPress, Squarespace, Wix, Shopify i każdej platformy stworzonej na zamówienie).

• Weglot korzysta z wiodących dostawców tłumaczeń — od Google Translate po DeepL — aby szybko i sprawnie przetłumaczyć całą zawartość Twojej strony internetowej.

• Możesz przetłumaczyć swoje treści na ponad 110 różnych języków. Obejmuje to języki pisane od prawej do lewej, takie jak arabski i hebrajski.

• Dla każdego tłumaczenia Weglot tworzy unikalne adresy URL. Na przykład, weglot.com to nasza angielska strona, a weglot.com/fr to nasza francuska strona.

• Wszystkie przetłumaczone wersje Twojej strony są zawsze aktualizowane wraz ze zmianami treści. Weglot używa automatycznego wykrywania treści, aby zauważyć wszelkie zmiany w treści na Twojej oryginalnej stronie i odpowiednio zaktualizować wszystkie przetłumaczone wersje Twojej strony.

• Masz pełną kontrolę nad swoimi tłumaczeniami, więc w razie potrzeby możesz je edytować. Możesz też podglądać tłumaczenia na żywo na swojej stronie dzięki Visual Editorowi, co pozwoli Ci dopasować przetłumaczone treści do wyglądu i układu Twojej witryny.

Jesteś wzrokowcem? Oto krótki film, który wyjaśnia, jak działa Weglot i jak może ułatwić Ci życie podczas zarządzania wielojęzycznymi stronami:

Co najważniejsze, z Weglot możesz dostosować sposób wyboru języka na swojej stronie. Każda strona przetłumaczona przez Weglot ma przełącznik języka, więc Twoi odwiedzający od razu zobaczą, że oferujesz treści w różnych językach.

To prowadzi nas z powrotem tutaj:

Ale z Weglot nie musisz trzymać się jednego projektu. Z poziomu swojego panelu możesz dostosować to, jak wygląda Twój przełącznik języka.

Możesz wybrać, czy będziesz:

• Wyświetlać nazwę języka, czy tylko skrót/kod języka (takie jak EN dla angielskiego, ES dla hiszpańskiego, FR dla francuskiego i tak dalej).

• Wyświetlać ikonę flagi.

• Wyświetlać selektor języka jako rozwijane menu.

Możesz też wybrać, jakiego rodzaju flagi krajów chcesz używać (np. błyszczące czy matowe). Jest też miejsce, gdzie możesz dodać dodatkowy CSS (jeśli chcesz wprowadzić dalsze zmiany, żeby przełącznik języków jeszcze lepiej pasował do Twojej marki).

W Weglot przełącznik języka domyślnie pojawia się w prawym dolnym rogu Twojej strony, ale możesz go przenieść w inne miejsce, jeśli wolisz (np. w prawy górny róg, lewy dolny róg itd.).

Proces będzie wyglądał trochę inaczej w zależności od Twojego CMS-a, ale oto dwa samouczki wideo, które pomogą Ci zrozumieć, o co chodzi:

Zmiana pozycji przełącznika języków, gdy używasz WordPressa:

Zmiana pozycji przełącznika języków, gdy używasz Shopify:

Jeśli dodałeś Weglot do swojej strony za pomocą kodu, nadal możesz zmienić pozycję przełącznika języka, postępując zgodnie z tymi instrukcjami.

Szybkie podsumowanie: Jak dostosować przełącznik języków na swojej stronie

Są dwa główne sposoby, żeby umieścić przełącznik języków na swojej stronie:

1. Zaprojektuj i stwórz własny. To nie jest ogromny projekt, ale jest potrzebny tylko wtedy, gdy nie używasz obecnie oprogramowania do tłumaczenia, aby zarządzać swoją wielojęzyczną stroną. Projektując przełącznik języków, pamiętaj, że powinien być: (1) łatwy do znalezienia, (2) jasno informować o dostępnych językach i (3) pasować tematycznie do Twojego projektu.

2. Korzystaj z oprogramowania do tłumaczenia stron. Każde porządne oprogramowanie do tłumaczenia stron internetowych da Ci możliwość dostosowania przełącznika języka. Wyżej pokazaliśmy, jak możesz spersonalizować swój przełącznik, używając oprogramowania Weglot – możesz dodać flagi, wyświetlać pełne nazwy języków i wybrać, gdzie na stronie ma się pojawić.

Jeśli chcesz, żeby Weglot uprościł Twój projekt tłumaczeniowy i pomógł Ci szybciej dotrzeć do globalnej publiczności, rozpocznij swoją 14-dniową bezpłatną wersję próbną już dziś, bez żadnych zobowiązań.