Selektor języka witryny: najlepsze praktyki projektowania

Nie wiem jak Ty, ale dla mnie jest coś niezwykle satysfakcjonującego w przejrzystym i dopasowanym do marki selektorze języka.

Może to pokazuje, że jestem maniakiem lokalizacji. Ale wysłuchaj mnie.

Ten malutki przycisk ma tak wielką moc. Wystarczy jedno kliknięcie, aby użytkownik przeszedł od mrużenia oczu na stronę w obcym języku do przeglądania jej w swoim ojczystym języku, nie opuszczając przy tym Twojej witryny.

Selektor języka to miejsce, gdzie design spotyka się z funkcjonalnością. Jeśli jest dobrze zrobione, pasuje do Twojej marki, łatwo je znaleźć i pokazuje odwiedzającym z całego świata, że są mile widziani. Jeśli jest zrobione źle, jest ukryte w stopce, źle podpisane lub tak nieporęczne, że odwiedzający opuszczają stronę, zanim zobaczą przetłumaczoną treść.

Co zatem odróżnia te dwie rzeczy?

Większość przewodników ogranicza się do podstawowych zasad: ułatwia znalezienie selektora, używa nazw w języku ojczystym i unika flag zamiast symboli. Omówimy je również. Chcemy jednak również odpowiedzieć na trudniejsze pytania, np. jak ułożyć alfabetycznie listę rozwijaną, która zawiera mieszankę języków japońskiego, arabskiego i portugalskiego? I dlaczego połowa internetu wiąże twój język z twoją lokalizacją fizyczną, skoro często jest to błędna decyzja?

W tym przewodniku dowiesz się, jaki wzorzec interfejsu użytkownika jest odpowiedni dla Twojej witryny, jakie najlepsze praktyki sprawdzają się w praktyce oraz jak poradzić sobie z dwoma wyzwaniami, z którymi prawie nikt nie potrafi sobie poradzić: kolejnością sortowania oraz podziałem według języka, kraju i waluty.

Przejdźmy do konkretów.

Co kontroluje selektor języka (i czego nie)

Selektor języka ma jedno zadanie: wyświetlić stronę w innym języku. Nie określa waluty, kosztów wysyłki ani lokalizacji odwiedzającego. Nie jest to panel ustawień ani wyszukiwarka sklepów i mimo że strony często traktują go w ten sposób, nie zastępuje on selektora kraju.

Tutaj mniej znaczy więcej. Selektor języka, który próbuje zrobić zbyt wiele, często nie spełnia celu, dla którego został stworzony: nie pomaga odwiedzającym zrozumieć Twoją witrynę.

Badania Nielsen Norman Group dotyczące lokalizacji w handlu elektronicznym wykazały, że międzynarodowi klienci oczekują możliwości zmiany języka witryny niezależnie od miejsca wysyłki lub waluty, w której płacą. To ma sens, gdy spojrzymy na prawdziwe rynki. W Kanadzie niektórzy klienci wolą język angielski, inni francuski, ale wszyscy spodziewają się zapłacić w dolarach kanadyjskich. W Hiszpanii wszyscy płacą w euro, ale niektórzy klienci wolą robić zakupy w języku katalońskim niż hiszpańskim.

Sednem sprawy jest to, że selektor języka, który nieoczekiwanie zmienia walutę lub zasady wysyłki, wprowadza zmianę, o którą nikt nie prosił, i może zniechęcić właśnie tych międzynarodowych klientów, których próbujesz powitać.

Rodzaje selektorów językowych

Większość selektorów mieści się w jednym z czterech formatów. Zamiast zastanawiać się, który z nich jest najlepszy, bardziej produktywnym pytaniem jest, który z nich pasuje do liczby używanych przez Ciebie języków i ile przestrzeni wizualnej możesz mu przyznać.

• Najlepiej sprawdzają się listy rozwijane . Są najbezpieczniejszym wyborem, jeśli znasz już trzy lub cztery języki.
• Rzędy guzików wydają się pewniejsze i szybsze. Dlatego witryny z niewielkim, stałym zestawem języków, np. dwujęzyczne witryny rządowe lub produkty SaaS obsługujące dwa rynki, zwykle je preferują.
• Linki tekstowe dobrze sprawdzają się w stopkach, gdzie pełny komponent wyglądałby po prostu ciężko.
• W oknach modalnych wybór języka jest na pierwszym planie, co czyni je użytecznymi w przypadku jednorazowej sugestii: „Wygląda na to, że wolisz język francuski?”, ale szybko tracą swój urok, jeśli pojawiają się przy każdym ładowaniu strony.

Powrót do podstaw

Mając na uwadze różne formaty, przyjrzyjmy się klasycznym najlepszym praktykom i sprawdźmy, które z nich nadal sprawdzają się w 2026.

• Użyj nazw w języku ojczystym . Słowa „Deutsch” i „Español” od razu informują użytkownika, że jego język znajduje się na liście. „Niemiecki” i „hiszpański” sprawiają, że osoba nieznająca języka angielskiego musi przejrzeć listę napisaną w języku, którego może nie rozumieć zbyt dobrze.
• Pomiń flagi . Reprezentują one kraje, nie języki, a mapowanie ciągle ulega uszkodzeniu. Język hiszpański jest językiem urzędowym w około 20 krajach, język angielski nie jest własnością żadnej z nich, a w samej Szwajcarii pod jedną flagą znajdują się cztery języki narodowe. Ikona uniwersalnego języka, kula ziemska, dymek dialogowy, prosty znak „A/文” – wszystko to odczytujemy poprawnie, niezależnie od tego, gdzie znajduje się odwiedzający.
• Ułatw znalezienie . W przypadku większości witryn oznacza to prawy górny róg nagłówka. W przypadku witryn z dużą ilością treści lub witryn redakcyjnych, gdzie miejsce na nagłówek jest cenne, można używać stopki. W przypadku urządzeń mobilnych umieść je w tym samym menu, co nawigację, zamiast tworzyć oddzielną interakcję przeznaczoną wyłącznie dla języka.
• Zadbaj o to, aby odwiedzający byli na bieżąco. Gdy ktoś zmieni język na stronie produktu, powinien zostać przekierowany na tę samą stronę produktu, ale w nowym języku, a nie na stronę główną. Zmuszanie odwiedzających do powrotu to szybki sposób na ich utratę, zwłaszcza jeśli byli bliscy dokonania zakupu.
• Sugeruj, nie zmuszaj. Automatyczne przekierowywanie odwiedzających na podstawie ich adresu IP lub ustawień przeglądarki, bez możliwości obejścia tych ustawień, to jedna z najczęstszych skarg dotyczących witryn wielojęzycznych. VPN-y, współdzielone komputery i podróżni — wszyscy popełniają ten błąd. Jeśli wykryjesz prawdopodobne preferencje, zaproponuj je jako sugestię i zawsze jasno i wyraźnie określ, jak wrócić do poprzedniej opcji.
• Zapamiętaj ich wybór. Gdy użytkownik wybierze już język, stosuj go na każdej stronie i podczas kolejnych wizyt. Wybór, którego ktoś świadomie dokonał, powinien zawsze mieć wyższą pozycję niż wybór dokonany przez witrynę na podstawie jego lokalizacji lub przeglądarki.

Poza podstawami: kolejność sortowania i podział według języka, kraju i waluty

Te podstawy stanowią solidny fundament. Jednak gdy już zaczniesz tworzyć selektor, pojawiają się dwa trudniejsze pytania, o których większość poradników dotyczących najlepszych praktyk zapomina.

1. Jak posortować listę zawierającą różne alfabety?

Nie ma jednolitej kolejności alfabetycznej obejmującej języki Deutsch, 日本語 i العربية, ponieważ te systemy pisma nie mają wspólnego alfabetu. Nawet w językach z alfabetem łacińskim zwykłe sortowanie komputerowe kończy się błędem: „Čeština” jest dodawana po „Türkçe”, ponieważ akcentowane „Č” jest czytane jako osobny znak, a nie jako rodzaj „C”.

W przypadku większości witryn, czyli witryn obejmujących nawet kilkadziesiąt języków, praktycznym rozwiązaniem jest:

1. Grupuj języki według pisma. Łaciński, cyrylica, arabski, CJK (chiński, japoński, koreański) i tak dalej.
2. Uporządkuj grupy w ustalonej kolejności. Powszechną metodą jest rozpoczęcie od scenariusza, z którego korzysta większość odbiorców.
3. Posortuj w obrębie każdej grupy, korzystając z reguł danego skryptu. W przypadku języka łacińskiego oznacza to, że Čeština znajduje się obok języka duńskiego i niemieckiego, a nie na końcu listy.

Wynik wygląda mniej więcej tak: Čeština, Deutsch, English, Español, Français, Português → Русский, Українська → العربية → 中文, 日本語, 한국어 .

Jeśli lista zawiera setki języków, sortowanie ręczne przestaje być praktyczne. Zamiast tego będziesz potrzebować narzędzi sortujących uwzględniających ustawienia regionalne dla każdej grupy skryptów.

2. Czy język, kraj i waluta powinny być jedną opcją czy trzema?

Pamiętasz wcześniejszych klientów z Kanady i Hiszpanii? W tym miejscu pomysł ten nabiera praktycznego wymiaru.

Wiele dużych witryn e-commerce łączy język, kraj i walutę w jednym „selektorze rynku”. Dla sprzedawcy detalicznego powodem jest to, że zasady wysyłki, podatki i metody płatności różnią się w zależności od kraju, dlatego wybór jednej, połączonej opcji ułatwia realizację transakcji. To rozsądny kompromis.

To nieodpowiedni kompromis w przypadku produktów, w których te trzy elementy nie muszą iść w parze, np. narzędzi SaaS, witryn multimedialnych lub jakichkolwiek produktów cyfrowych używanych przez ekspatów, pracowników zdalnych lub osoby, których preferowany język nie jest zgodny z krajem rozliczenia. Osoba mówiąca po niemiecku i mieszkająca w Brazylii chce otrzymywać niemieckie teksty i ceny w realach brazylijskich, a nie żądać od nich pakietu obu tych języków.

Zasada praktyczna:

• Język zmienia tekst na stronie.
• Waluta zmienia sposób wyświetlania cen.
• Kraj lub region wykracza poza różnice językowe i może zapewniać różny stopień lokalizacji

Zachowaj je jako trzy oddzielne elementy sterujące, chyba że Twój produkt nie może działać bez ich połączenia.

Wykrywanie, przekierowania i późniejsze dodawanie języków

Używaj wykrywania do sugerowania, a nie decydowania

Pamiętasz powiedzenie „sugeruj, nie zmuszaj”? Oto jak zrobić to dobrze.

Najlepszym sygnałem pierwszej wizyty jest język przeglądarki lub urządzenia odwiedzającego (przesyłany w nagłówku Accept-Language lub odczytywany za pomocą navigator.language w JavaScript). W przeciwieństwie do lokalizacji bazującej na adresie IP, odzwierciedla ona język, który dana osoba faktycznie ustawiła.

To sprawia, że jest to o wiele lepsza wskazówka, ale nadal powinna pozostać wskazówką, a nie decyzją, którą podejmujesz za nich. W ten sposób nic się nie zmienia, dopóki użytkownik nie powie „tak” i nie zostanie automatycznie przekierowany na stronę, tylko wykona połączenie.

Twórz dla języków, które dodasz później

Wiele witryn nie ogranicza się do podanej na początku liczby języków, co więc należy zrobić, gdy pierwotna lista w bieżącym selektorze okaże się niewystarczająca?

Odpowiedź jest prosta: wygeneruj automatycznie listę języków selektora na podstawie języków, które już opublikowałeś, i wygeneruj tagi hreflang w ten sam sposób, zamiast tworzyć je ręcznie. Na przykład Bablic robi to automatycznie. Jeśli hreflang i x-default są dla Ciebie nowością, nasz opis hreflang x-default obejmuje ich mechanikę.

Tworzenie własnego selektora

Sposób utworzenia selektora zależy od konfiguracji Twojej witryny wielojęzycznej.

Jeśli każdy język ma własny adres URL (podkatalogi takie jak /es/ , subdomeny takie jak es.example.com lub parametr adresu URL), najprostszym selektorem jest lista linków, z których każdy wskazuje na tę samą stronę w innym języku:

html

<nav aria-label="Język">

hreflang angielski</a>

hreflang Español</a>

hreflang日本語</a>

</nav>

Każdy szczegół spełnia coś ważnego:

• lang informuje czytniki ekranu, jak poprawnie wymawiać nazwy poszczególnych języków.
• aria-current="page" informuje technologię wspomagającą, który język jest aktualnie aktywny.
• Każdy link kieruje do tej samej strony w innym języku (w tym przypadku do strony z cennikiem), a nie do strony głównej, dzięki czemu odwiedzający nie tracą orientacji.

Tagi hreflang w sekcji <head> strony (lub mapie witryny) muszą dokładnie odpowiadać tej strukturze adresu URL, ponieważ to właśnie jej używają wyszukiwarki, aby wyświetlić odpowiednią wersję strony odpowiedniemu użytkownikowi. W przypadku wersji językowych Google zaleca stosowanie podkatalogów lub subdomen zamiast parametrów adresu URL.

Jeśli język jest zapisany w pliku cookie lub przeglądarce, a nie w adresie URL, nie ma adresów URL dla poszczególnych języków, do których można by prowadzić linki, więc zwykłe linki nie będą działać. Selektor musi zaktualizować zapisany język i ponownie załadować stronę.

To, czy pokażesz je w formie listy rozwijanej, rzędu przycisków czy zwykłych linków, zależy od decyzji projektanta. Ważniejsza jest struktura adresów URL. Większość witryn korzysta z podkatalogów (/es/) lub subdomen (es.example.com). Parametry zapytania (?lang=es) działają, ale Google odradza ich stosowanie w wersjach językowych. Bez względu na to, którą opcję wybierzesz, znaczniki hreflang w sekcji <head> strony (lub mapie witryny) muszą dokładnie odpowiadać tej strukturze. Właśnie tego używają wyszukiwarki, aby dostarczyć właściwą wersję treści właściwemu użytkownikowi.

Jeśli Twoja witryna została przetłumaczona przy użyciu narzędzia Bablic , możesz wybrać rozwiązanie, które najbardziej odpowiada Twojemu zespołowi:

• Użyj wbudowanego selektora. Wybierz gotowy styl z zakładki Projekt → Selektor w panelu Bablic i dostosuj go do swojej marki. Kod nie jest wymagany.
• Nadaj mu styl za pomocą niestandardowego CSS. Zachowaj selektor Bablic, ale dostosuj jego kolory, czcionki, odstępy i ikony tak, aby dokładnie pasował do Twojego systemu projektowania.
• Zbuduj swój własny selektor za pomocą biblioteki selektorów Bablic: Pakiet @bablic-io/selector udostępnia dwie funkcje: getLanguages() zwraca opublikowane języki projektu i zaznacza bieżący, a setLanguage() przełącza języki za pomocą metody używanej przez projekt (folder, subdomena, parametr adresu URL, plik cookie lub pamięć przeglądarki). Ty projektujesz interfejs, a Bablic zajmuje się przełączaniem.

Zespoły, które chcą szybko wprowadzić zmiany, mogą pozostać przy ustawieniach domyślnych, a zespoły, którym zależy na zgodności każdego piksela z marką, mają możliwość dostosowywania.

Niezależnie od tego, którą ścieżkę wybierzesz, tylko Twoje własne dane mogą wskazać, jaki schemat najlepiej sprawdzi się w przypadku Twojej grupy docelowej. Jeśli nie możesz się zdecydować pomiędzy dwoma projektami, możesz przeprowadzić prosty test. Śledź, jak często użytkownicy zmieniają języki i czy pozostają na stronie, jeśli to zrobią.

Wybór tego, co znajduje się za selektorem

Dobry selektor ma znaczenie tylko wtedy, gdy tłumaczenie, na którym się opiera, jest wiarygodne. Bablic łączy tłumaczenie maszynowe z edytorem kontekstowym, dzięki czemu ktoś z Twojego zespołu, kto mówi w danym języku, może przejrzeć i poprawić konkretne linijki bezpośrednio na stronie, zamiast tłumaczyć je od podstaw. Jeśli zastanawiasz się, czy tłumaczenie maszynowe jest wystarczająco dobre, aby publikować je samodzielnie, dobrym punktem wyjścia będzie nasza analiza niezawodności Tłumacza Google .

Porównujesz narzędzia? Sprawdź naszą platformę porównawczą Bablic lub przeczytaj, jak działa Bablic, aby dowiedzieć się więcej o konfiguracji. Możesz również wypróbować usługę bezpłatnie przez 30 dni, bez podawania numeru karty kredytowej.

Często zadawane pytania