Wybór języka strony internetowej: 15 przykładów i najlepszych praktyk

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)

Selektor języka na stronie internetowej to element, który pozwala odwiedzającym przełączyć się na przetłumaczoną wersję strony, na której się znajdują. Jeśli masz już wielojęzyczną stronę i chcesz jedynie dodać selektor języka, być może dysponujesz makietą projektu przygotowaną przez grafika, na podstawie której programista może zrealizować to zadanie. Oto kilka wskazówek, które pomogą Ci poprawić ogólny komfort użytkowania:

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!

Przykład: nasz przełącznik języka wyświetla opcje takie jak „Français”, „Deutsch”, „Español”, „Italiano”, „日本語” (dla języka japońskiego) oraz „Nederlands”. Dzięki temu native speakerzy mogą z łatwością znaleźć preferowaną wersję językową 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

Narzędzie do wyboru języka może automatycznie wykrywać język odwiedzającego, choć zazwyczaj skuteczniejsze jest poproszenie go o dokonanie wyboru. Jednym ze sposobów podejścia do kwestii wyboru języka na stronie internetowej jest automatyczne przekierowywanie użytkowników w zależności od ich lokalizacji (na podstawie adresu 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

Użytkownicy zmieniają język za pomocą jednego z czterech elementów: menu rozwijanego, przycisku, linku tekstowego lub okna modalnego. Istnieje wiele różnych sposobów zaprojektowania selektora języka na stronie internetowej. Wiele osób decyduje się na proste przyciski, podczas gdy inni wolą nadać mu nieco więcej charakteru, dodając do niego elementy swojej marki (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).

• WeglotModel tłumaczenia oparty na sztucznej inteligencji, wykorzystujący technologie OpenAI i Gemini, tłumaczy całą treść Twojej strony internetowej i na bieżąco uczy się stylu komunikacji Twojej marki.

• 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 serwis Weglot generuje unikalne adresy URL. Na przykład www.weglot.com to nasza strona w języku angielskim, natomiast www.weglot.com/fr to nasza strona w języku francuskim.

• 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 możesz je dopracowywać w dowolnym momencie. Możesz również przeglądać tłumaczenia na żywo na swojej stronie za pomocą funkcji podglądu tłumaczeń ( visual editor), co pozwala na wprowadzanie zmian, aby przetłumaczone treści idealnie pasowały 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 ten może się nieco różnić w zależności od używanego systemu CMS, ale poniżej zamieszczamy dwa samouczki wideo, które pomogą Ci zorientować się w temacie. Wolisz czytać? W naszym przewodniku dotyczącym dodawania przełącznika języków w WordPressie oraz w przewodniku dotyczącym przełącznika języków w Shopify opisano te same kroki:

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. Skorzystaj z oprogramowania do tłumaczenia stron internetowych. Każde porządne oprogramowanie do tłumaczenia stron internetowych oferuje funkcję dostosowywania selektora języka. Powyżej omówiliśmy, jak dostosować selektor podczas korzystania z narzędzia tłumaczeniowego Weglot, w tym jak dodać flagi, wyświetlać pełną nazwę języka oraz wybrać miejsce na stronie, w którym selektor ma się znajdować.

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ń.